85f62aca27
The ceiling was introduced in bug 549190 for improve the consistency of
underline positioning. However, removing ceiling now doesn't seem to
regress the testcases in that bug, probably thanks to improvement in
other part.
The ceiling here causes us to have different font metrics than other
browsers on Windows, and can lead to webcompat issue. We also don't do
this for other backends. So it's probably better removing it in favor
of rounding.
There are several test changes:
* min-intrinsic-with-percents-across-elements.html changes result due to
height of wrapping div in reference page depends on line height, so a
fixed line height is set to work around the issue.
* 368020-1.html changes result because a slightly different line-height
triggers bug 1462514. It is changed to use fixed line-height to work
around the issue.
* 456147.xul is disabled because it compares XUL against HTML page, but
XUL has different approach to position text in its elements than HTML.
Specifically, XUL elements don't seem to respect line height while
HTML elements do. The original line height in the file was probably
chosen to make the HTML match XUL, so it seems to be non-trivial to
fix it in a platform-independent way.
* sizing-orthog-{vlr,vrl}-in-htb-{008,020}.xht fails due to text in <p>
after the testing block shifts 1px up for unknown reason.
MozReview-Commit-ID: 2WJG1AigWl1
129 lines
3.2 KiB
HTML
129 lines
3.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<title>References for bug 823483</title>
|
|
<style>
|
|
|
|
body, input { font-size: 10px }
|
|
body { line-height: 1.5 }
|
|
input { padding: 0 1px; border: 1px solid maroon; font-family: monospace }
|
|
|
|
td:first-child {
|
|
background: aqua;
|
|
border: thin solid;
|
|
padding: 1px 0;
|
|
}
|
|
|
|
td:nth-child(2) {
|
|
width: 100%;
|
|
}
|
|
|
|
td:nth-child(1) > * { vertical-align: bottom }
|
|
td:nth-child(1) > div > * { vertical-align: bottom }
|
|
|
|
canvas {
|
|
background: blue
|
|
}
|
|
|
|
</style>
|
|
|
|
<table><tr>
|
|
<td><img></td>
|
|
<td>img, unstyled</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><img style="width: 0; height: 0"></td>
|
|
<td>img, width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><img style="width: 0; height: 0;"></td>
|
|
<td>img, max-width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><canvas height="10" width="10"></canvas></td>
|
|
<td>canvas, unstyled</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><canvas style="width: 0; height: 0" height="10" width="10"></canvas></td>
|
|
<td>canvas, width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><canvas style="width: 0; height: 0" height="10" width="10"></canvas></td>
|
|
<td>canvas, max-width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><iframe height="10" width="10"></iframe></td>
|
|
<td>iframe, almost unstyled</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><div style="width: 4px"><iframe style="vertical-align: bottom" height="10" width="2"></iframe></div></td>
|
|
<td>iframe, width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><div style="width: 4px"><iframe style="vertical-align: bottom" height="10" width="2"></iframe></div></td>
|
|
<td>iframe, max-width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><input type="text"></td>
|
|
<td>input type="text", unstyled</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><div style="width:4px"><input type="text" style="width: 2px"></div></td>
|
|
<td>input type="text", width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><div><input type="text" style="visibility: hidden"></div></td>
|
|
<td>input type="text", max-width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><input type="button"></td>
|
|
<td>empty input type="button", unstyled</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<!-- 2px border, 2px padding -->
|
|
<td><div style="width: 4px"><input type="button" style="width: 2px"></div></td>
|
|
<td>empty input type="button", width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<!-- 2px border, 2px padding -->
|
|
<td><div style="width: 4px"><input type="button" style="width: 2px"></div></td>
|
|
<td>empty input type="button", max-width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><input type="button" value="Button"></td>
|
|
<td>nonempty input type="button", unstyled</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><div><input type="button" value="Button" style="visibility: hidden"></div></td>
|
|
<td>nonempty input type="button", width: 50%</td>
|
|
</tr></table>
|
|
|
|
<table><tr>
|
|
<td><div><input type="button" value="Button" style="visibility: hidden"></div></td>
|
|
<td>nonempty input type="button", max-width: 50%</td>
|
|
</tr></table>
|
|
|
|
<script>
|
|
|
|
var images = document.getElementsByTagName("img");
|
|
for (var i = 0; i < images.length; ++i) {
|
|
var image = images[i];
|
|
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAChJREFUSMftzUEBAAAEBLCjf2dK8NsKrJLJp84zgUAgEAgEAoFAcGUBocYBP+pqhN4AAAAASUVORK5CYII=";
|
|
}
|
|
|
|
</script>
|