layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements.html
author Xidorn Quan <me@upsuper.org>
Tue, 22 May 2018 11:43:30 +1000
changeset 419235 e86e1123dd47e8b3563aa09d5740d54333df8203
parent 419227 d6f131d9d8a00d576330ae7fee1ab662d6359574
permissions -rw-r--r--
Bug 1458159 - Use rounding instead of ceiling on max{Ascent,Descent} for DWriteFont. r=jfkthame 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

<!DOCTYPE HTML>
<title>Tests 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 }

canvas {
  background: blue
}

</style>

<table><tr>
  <td><img></td>
  <td>img, unstyled</td>
</tr></table>

<table><tr>
  <td><img style="width: 50%"></td>
  <td>img, width: 50%</td>
</tr></table>

<table><tr>
  <td><img style="max-width: 50%"></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: 50%" height="10" width="10"></canvas></td>
  <td>canvas, width: 50%</td>
</tr></table>

<table><tr>
  <td><canvas style="max-width: 50%" 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><iframe style="width: 50%" height="10" width="10"></iframe></td>
  <td>iframe, width: 50%</td>
</tr></table>

<table><tr>
  <td><iframe style="max-width: 50%" height="10" width="10"></iframe></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><input type="text" style="width: 50%"></td>
  <td>input type="text", width: 50%</td>
</tr></table>

<table><tr>
  <td><input type="text" style="max-width: 50%; visibility: hidden"></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>
  <td><input type="button" style="width: 50%"></td>
  <td>empty input type="button", width: 50%</td>
</tr></table>

<table><tr>
  <td><input type="button" style="max-width: 50%"></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><input type="button" value="Button" style="width: 50%; visibility: hidden"></td>
  <td>nonempty input type="button", width: 50%</td>
</tr></table>

<table><tr>
  <td><input type="button" value="Button" style="max-width: 50%; visibility: hidden"></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>