Bug 823483 patch 6 - Tests r=dholbert
authorL. David Baron <dbaron@dbaron.org>
Thu, 04 Feb 2016 09:43:03 +1100
changeset 319297 623934e9db8ab60eb605fba84e03e882651e8f02
parent 319296 4e6a5f77ef94e26e74a19268b0c8b69bb39d3b55
child 319298 3bcdd0107ef0602fc4f8d69103d21e1b3a814618
push id5913
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 16:57:49 +0000
treeherdermozilla-beta@dcaf0a6fa115 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs823483
milestone47.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 823483 patch 6 - Tests r=dholbert Our behavior on these tests is reasonably close to matching Chromium thanks to the combination of patches 1, 3, and 4, and 5.
layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements.html
layout/reftests/css-sizing/min-intrinsic-with-percents-across-img-cases-ref.html
layout/reftests/css-sizing/min-intrinsic-with-percents-across-img-cases.html
layout/reftests/css-sizing/reftest.list
layout/reftests/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements-ref.html
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML>
+<title>References for bug 823483</title>
+<style>
+
+body, input { font-size: 10px }
+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: 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, 4px ::-moz-focus-inner padding, 2px ::-moz-focus-inner border -->
+  <td><div style="width: 10px"><input type="button" style="width: 5px"></div></td>
+  <td>empty input type="button", width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <!-- 2px border, 2px padding, 4px ::-moz-focus-inner padding, 2px ::-moz-focus-inner border -->
+  <td><div style="width: 10px"><input type="button" style="width: 5px"></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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-elements.html
@@ -0,0 +1,124 @@
+<!DOCTYPE HTML>
+<title>Tests for bug 823483</title>
+<style>
+
+body, input { font-size: 10px }
+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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-img-cases-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<title>References for bug 823483</title>
+<style>
+
+td:first-child {
+   background: aqua;
+   border: thin solid;
+   padding: 2px 0;
+}
+
+td:nth-child(2) {
+  width: 100%;
+}
+
+img { vertical-align: bottom }
+
+</style>
+
+
+<table><tr>
+  <td><img style="width: 32px; height: 32px"></td>
+  <td>unstyled</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 10px; height: 10px"></td>
+  <td>width: 10px</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 0; height: 0"></td>
+  <td>width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 32px; height: 32px"></td>
+  <td>min-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 0; height: 0"></td>
+  <td>max-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 0; height: 0"></td>
+  <td>width: 10px; max-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 10px; height: 10px"></td>
+  <td>width: 10px; min-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 0; height: 0"></td>
+  <td>width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><div style="width: 32px"><img style="width: 48px; height: 48px"></div></td>
+  <td>min-width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 0; height: 0"></td>
+  <td>max-width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 0; height: 0"></td>
+  <td>width: 10px; max-width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><div style="width: 10px"><img style="width: 15px; height: 15px"></div></td>
+  <td>width: 10px; min-width: 150%</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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-sizing/min-intrinsic-with-percents-across-img-cases.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<title>Tests for bug 823483</title>
+<style>
+
+td:first-child {
+   background: aqua;
+   border: thin solid;
+   padding: 2px 0;
+}
+
+td:nth-child(2) {
+  width: 100%;
+}
+
+img { vertical-align: bottom }
+
+</style>
+
+
+<table><tr>
+  <td><img></td>
+  <td>unstyled</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 10px"></td>
+  <td>width: 10px</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 50%"></td>
+  <td>width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="min-width: 50%"></td>
+  <td>min-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="max-width: 50%"></td>
+  <td>max-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 10px; max-width: 50%"></td>
+  <td>width: 10px; max-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 10px; min-width: 50%"></td>
+  <td>width: 10px; min-width: 50%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 150%"></td>
+  <td>width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="min-width: 150%"></td>
+  <td>min-width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="max-width: 150%"></td>
+  <td>max-width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 10px; max-width: 150%"></td>
+  <td>width: 10px; max-width: 150%</td>
+</tr></table>
+
+<table><tr>
+  <td><img style="width: 10px; min-width: 150%"></td>
+  <td>width: 10px; min-width: 150%</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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-sizing/reftest.list
@@ -0,0 +1,2 @@
+== min-intrinsic-with-percents-across-img-cases.html min-intrinsic-with-percents-across-img-cases-ref.html
+== min-intrinsic-with-percents-across-elements.html min-intrinsic-with-percents-across-elements-ref.html
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -113,16 +113,19 @@ include css-invalid/reftest.list
 include css-submit-invalid/reftest.list
 
 # css text-overflow
 include text-overflow/reftest.list
 
 # css selectors
 include css-selectors/reftest.list
 
+# css sizing
+include css-sizing/reftest.list
+
 # css transitions
 include css-transitions/reftest.list
 
 # css :-moz-ui-invalid
 include css-ui-invalid/reftest.list
 
 # css :-moz-ui-valid
 include css-ui-valid/reftest.list