mozilla-central: changeset 422203:b246a87add182779a8d2611020b2cb6b33e1a79d

--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -250766,21 +250766,16 @@
      {}
     ]
    ],
    "css/css-logical/cascading-001-ref.html": [
     [
      {}
     ]
    ],
-   "css/css-logical/resources/style-check.js": [
-    [
-     {}
-    ]
-   ],
    "css/css-masking/OWNERS": [
     [
      {}
     ]
    ],
    "css/css-masking/clip-path-svg-content/reference/clip-path-circle-001-ref.svg": [
     [
      {}
@@ -511139,39 +511134,35 @@
    "b95cd62ce3592f653aaa54de0dbc27e16618064b",
    "support"
   ],
   "css/css-logical/cascading-001.html": [
    "a94344f196774b463dff39c022a48a0cc5585c88",
    "reftest"
   ],
   "css/css-logical/logicalprops-block-size-vlr.html": [
-   "68a86c5b34cf3769e4cda12ef4d23ecdb523734f",
+   "b77a4607318ab1c8a1cf292a83618720210cf3cf",
    "testharness"
   ],
   "css/css-logical/logicalprops-block-size.html": [
-   "e9597ce04c2b8be8128f9b411e7990bc85d3842a",
+   "988a75943bfc7bdd61eef33a8527e9476fe0fab9",
    "testharness"
   ],
   "css/css-logical/logicalprops-inline-size-vlr.html": [
-   "a0438d0713820ac5ab82f0165af7711f71d91ae6",
+   "9bd26d717f34f9ebf1f09cbb2eb7c2242df6b3c8",
    "testharness"
   ],
   "css/css-logical/logicalprops-inline-size.html": [
-   "fea8f8205053e933de3dc4490c918c3db69a4a05",
+   "4f3bdbc5d9e38770050d963c32942a63272f0e67",
    "testharness"
   ],
   "css/css-logical/logicalprops-quirklength.html": [
    "3024bbd54e4cbe1ee55e59684188587e2a56fda6",
    "testharness"
   ],
-  "css/css-logical/resources/style-check.js": [
-   "f6260209571bdd53be52c698f072c121e3702dd1",
-   "support"
-  ],
   "css/css-masking/OWNERS": [
    "388433ab37e52bf8982700fad3ffd34b8ecae122",
    "support"
   ],
   "css/css-masking/clip-path-svg-content/clip-path-clip-nested-twice.svg": [
    "a7452833b72b304a2e34b4b77bcd805baea3cc6f",
    "reftest"
   ],

--- a/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html
@@ -1,81 +1,59 @@
 <!doctype html>
 <meta charset="utf-8">
 <title>CSS Logical Properties: {max-,min-}block-size vertical-lr</title>
 <link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
 <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="resources/style-check.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style>
-div {
+.block {
   border: 1px solid #000;
   writing-mode: vertical-lr;
 }
-#div1 {
+#block1 {
   block-size: 40px;
   min-block-size: 50px;
   max-block-size: 100px;
 }
-#div2 {
+#block2 {
   block-size: 100px;
   min-block-size: 50px;
   max-block-size: 100px;
 }
-#div3 {
+#block3 {
   block-size: 120px;
   min-block-size: 50px;
   max-block-size: 100px;
 }
-#ref_div1 {
-  width: 40px;
-  min-width: 50px;
-  max-width: 100px;
-}
-#ref_div2 {
-  width: 100px;
-  min-width: 50px;
-  max-width: 100px;
-}
-#ref_div3 {
-  width: 120px;
-  min-width: 50px;
-  max-width: 100px;
-}
 
-p {
+.override {
   border: 1px solid #000;
   writing-mode: vertical-lr;
 }
-#p1 {
+#override1 {
   block-size: 100px;
   width: 50px;
 }
-#p2 {
+#override2 {
   width: 50px;
   block-size: 100px;
 }
-#ref_p1 {
-  width: 50px;
-}
-#ref_p2 {
-  width: 100px;
-}
 
 .table {
   border: 1px solid #000;
   display: table;
   writing-mode: vertical-lr;
 }
 .tablecell {
   display: table-cell;
-  writing-mode: vertical-lr;
 }
 #table1_cell {
   block-size: 40px;
   min-block-size: 50px;
   max-block-size: 100px;
   inline-size: 100px;
   background-color: red;
 }
@@ -88,80 +66,57 @@ p {
 }
 #table3_cell {
   block-size: 120px;
   min-block-size: 50px;
   max-block-size: 100px;
   inline-size: 100px;
   background-color: green;
 }
-#ref_table1_cell {
-  width: 40px;
-  min-width: 50px;
-  max-width: 100px;
-  height: 100px;
-  background-color: red;
-}
-#ref_table2_cell {
-  width: 100px;
-  min-width: 50px;
-  max-width: 100px;
-  height: 100px;
-  background-color: blue;
-}
-#ref_table3_cell {
-  width: 120px;
-  min-width: 50px;
-  max-width: 100px;
-  height: 100px;
-  background-color: green;
-}
 </style>
 
-<div id="div1"></div>
-<div id="div2"></div>
-<div id="div3"></div>
-<div id="ref_div1"></div>
-<div id="ref_div2"></div>
-<div id="ref_div3"></div>
+<div id="log"></div>
 
-<p id="p1"></div>
-<p id="p2"></div>
-<p id="ref_p1"></div>
-<p id="ref_p2"></div>
+<h3>Maximum and minimim block sizes in blocks with vertical-lr</h3>
+<div>
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
 
-<div class="table">
-  <div class="tablecell" id="table1_cell"></div>
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></div>
+
+<h3>Overridance of <code>width</code> and <code>block-size</code> in vertical-lr</h3>
+<div>
+  <p>Check that <code>width</code> overrides <code>block-size</code></p>
+  <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
+
+  <p>Check that <code>block-size</code> overrides <code>width</code></p>
+  <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="ref_table1_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="ref_table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="ref_table3_cell"></div>
+
+<h3>Maximum and minimim block sizes in table cells with vertical-lr</h3>
+<div>
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="40" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="120" data-expected-client-height="100"></div>
+  </div>
 </div>
 
 <script>
-test(function () {
-  assert_true(compareWidthHeight("div1", "ref_div1"));
-  assert_true(compareWidthHeight("div2", "ref_div2"));
-  assert_true(compareWidthHeight("div3", "ref_div3"));
-}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in vertical-lr");
-
-test(function () {
-  assert_true(compareWidthHeight("p1", "ref_p1"));
-  assert_true(compareWidthHeight("p2", "ref_p2"));
-}, "Check that width override block-size and vice versa in vertical-lr");
-
-test(function () {
-  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
-  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
-  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
-}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table vertical-lr");
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>

--- a/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html
@@ -1,70 +1,53 @@
 <!doctype html>
 <meta charset="utf-8">
 <title>CSS Logical Properties: {max-,min-}block-size</title>
 <link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
 <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="resources/style-check.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style>
-div {
+.tests {
+  width: 600px;
+}
+
+.block {
   border: 1px solid #000;
 }
-#div1 {
+#block1 {
   block-size: 40px;
   min-block-size: 50px;
   max-block-size: 100px;
 }
-#div2 {
+#block2 {
   block-size: 100px;
   min-block-size: 50px;
   max-block-size: 100px;
 }
-#div3 {
+#block3 {
   block-size: 120px;
   min-block-size: 50px;
   max-block-size: 100px;
 }
-#ref_div1 {
-  height: 40px;
-  min-height: 50px;
-  max-height: 100px;
-}
-#ref_div2 {
-  height: 100px;
-  min-height: 50px;
-  max-height: 100px;
-}
-#ref_div3 {
-  height: 120px;
-  min-height: 50px;
-  max-height: 100px;
-}
 
-p {
+.override {
   border: 1px solid #000;
 }
-#p1 {
+#override1 {
   block-size: 100px;
   height: 50px;
 }
-#p2 {
+#override2 {
   height: 50px;
   block-size: 100px;
 }
-#ref_p1 {
-  height: 50px;
-}
-#ref_p2 {
-  height: 100px;
-}
 
 .table {
   border: 1px solid #000;
   display: table;
 }
 .tablecell {
   display: table-cell;
 }
@@ -84,80 +67,57 @@ p {
 }
 #table3_cell {
   block-size: 120px;
   min-block-size: 50px;
   max-block-size: 100px;
   inline-size: 100px;
   background-color: green;
 }
-#ref_table1_cell {
-  height: 40px;
-  min-height: 50px;
-  max-height: 100px;
-  width: 100px;
-  background-color: red;
-}
-#ref_table2_cell {
-  height: 100px;
-  min-height: 50px;
-  max-height: 100px;
-  width: 100px;
-  background-color: blue;
-}
-#ref_table3_cell {
-  height: 120px;
-  min-height: 50px;
-  max-height: 100px;
-  width: 100px;
-  background-color: green;
-}
 </style>
 
-<div id="div1"></div>
-<div id="div2"></div>
-<div id="div3"></div>
-<div id="ref_div1"></div>
-<div id="ref_div2"></div>
-<div id="ref_div3"></div>
+<div id="log"></div>
 
-<p id="p1"></div>
-<p id="p2"></div>
-<p id="ref_p1"></div>
-<p id="ref_p2"></div>
+<h3>Maximum and minimim block sizes in blocks</h3>
+<div class="tests">
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="block" id="block1" data-expected-width="600" data-expected-client-height="50"></div>
 
-<div class="table">
-  <div class="tablecell" id="table1_cell"></div>
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="block" id="block2" data-expected-width="600" data-expected-client-height="100"></div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="block" id="block3" data-expected-width="600" data-expected-client-height="100"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></div>
+
+<h3>Overridance of <code>height</code> and <code>block-size</code></h3>
+<div class="tests">
+  <p>Check that <code>height</code> overrides <code>block-size</code></p>
+  <div class="override" id="override1" data-expected-width="600" data-expected-client-height="50"></div>
+
+  <p>Check that <code>block-size</code> overrides <code>height</code></p>
+  <div class="override" id="override2" data-expected-width="600" data-expected-client-height="100"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="ref_table1_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="ref_table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="ref_table3_cell"></div>
+
+<h3>Maximum and minimim block sizes in table cells</h3>
+<div class="tests">
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="40"></div>
+  </div>
+
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="120"></div>
+  </div>
 </div>
 
 <script>
-test(function () {
-  assert_true(compareWidthHeight("div1", "ref_div1"));
-  assert_true(compareWidthHeight("div2", "ref_div2"));
-  assert_true(compareWidthHeight("div3", "ref_div3"));
-}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size");
-
-test(function () {
-  assert_true(compareWidthHeight("p1", "ref_p1"));
-  assert_true(compareWidthHeight("p2", "ref_p2"));
-}, "Check that height override block-size and vice versa");
-
-test(function () {
-  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
-  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
-  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
-}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table");
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>

--- a/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html
@@ -1,81 +1,59 @@
 <!doctype html>
 <meta charset="utf-8">
 <title>CSS Logical Properties: {max-,min-}inline-size vertical-lr</title>
 <link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
 <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="resources/style-check.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style>
-div {
+.block {
   border: 1px solid #000;
   writing-mode: vertical-lr;
 }
-#div1 {
+#block1 {
   inline-size: 40px;
   min-inline-size: 50px;
   max-inline-size: 100px;
 }
-#div2 {
+#block2 {
   inline-size: 100px;
   min-inline-size: 50px;
   max-inline-size: 100px;
 }
-#div3 {
+#block3 {
   inline-size: 120px;
   min-inline-size: 50px;
   max-inline-size: 100px;
 }
-#ref_div1 {
-  height: 40px;
-  min-height: 50px;
-  max-height: 100px;
-}
-#ref_div2 {
-  height: 100px;
-  min-height: 50px;
-  max-height: 100px;
-}
-#ref_div3 {
-  height: 120px;
-  min-height: 50px;
-  max-height: 100px;
-}
 
-p {
+.override {
   border: 1px solid #000;
   writing-mode: vertical-lr;
 }
-#p1 {
+#override1 {
   inline-size: 100px;
   height: 50px;
 }
-#p2 {
+#override2 {
   height: 50px;
   inline-size: 100px;
 }
-#ref_p1 {
-  height: 50px;
-}
-#ref_p2 {
-  height: 100px;
-}
 
 .table {
   border: 1px solid #000;
   display: table;
   writing-mode: vertical-lr;
 }
 .tablecell {
   display: table-cell;
-  writing-mode: vertical-lr;
 }
 #table1_cell {
   inline-size: 40px;
   min-inline-size: 50px;
   max-inline-size: 100px;
   block-size: 100px;
   background-color: red;
 }
@@ -88,80 +66,57 @@ p {
 }
 #table3_cell {
   inline-size: 120px;
   min-inline-size: 50px;
   max-inline-size: 100px;
   block-size: 100px;
   background-color: green;
 }
-#ref_table1_cell {
-  height: 40px;
-  min-height: 50px;
-  max-height: 100px;
-  width: 100px;
-  background-color: red;
-}
-#ref_table2_cell {
-  height: 100px;
-  min-height: 50px;
-  max-height: 100px;
-  width: 100px;
-  background-color: blue;
-}
-#ref_table3_cell {
-  height: 120px;
-  min-height: 50px;
-  max-height: 100px;
-  width: 100px;
-  background-color: green;
-}
 </style>
 
-<div id="div1"></div>
-<div id="div2"></div>
-<div id="div3"></div>
-<div id="ref_div1"></div>
-<div id="ref_div2"></div>
-<div id="ref_div3"></div>
+<div id="log"></div>
 
-<p id="p1"></div>
-<p id="p2"></div>
-<p id="ref_p1"></div>
-<p id="ref_p2"></div>
+<h3>Maximum and minimim inline sizes in blocks with vertical-lr</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="block" id="block1" data-expected-client-width="0" data-expected-client-height="50"></div>
 
-<div class="table">
-  <div class="tablecell" id="table1_cell"></div>
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="block" id="block2" data-expected-client-width="0" data-expected-client-height="100"></div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="block" id="block3" data-expected-client-width="0" data-expected-client-height="100"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></div>
+
+<h3>Overridance of <code>height</code> and <code>inline-size</code> in vertical-lr</h3>
+<div>
+  <p>Check that <code>height</code> overrides <code>inline-size</code></p>
+  <div class="override" id="override1" data-expected-client-width="0" data-expected-client-height="50"></div>
+
+  <p>Check that <code>inline-size</code> overrides <code>height</code></p>
+  <div class="override" id="override2" data-expected-client-width="0" data-expected-client-height="100"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="ref_table1_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="ref_table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="ref_table3_cell"></div>
+
+<h3>Maximum and minimim inline sizes in table cells with vertical-lr</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="50"></div>
+  </div>
+
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
 </div>
 
 <script>
-test(function () {
-  assert_true(compareWidthHeight("div1", "ref_div1"));
-  assert_true(compareWidthHeight("div2", "ref_div2"));
-  assert_true(compareWidthHeight("div3", "ref_div3"));
-}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in vertical-lr");
-
-test(function () {
-  assert_true(compareWidthHeight("p1", "ref_p1"));
-  assert_true(compareWidthHeight("p2", "ref_p2"));
-}, "Check that height override inline-size and vice versa in vertical-lr");
-
-test(function () {
-  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
-  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
-  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
-}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table vertical-lr");
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>

--- a/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html
@@ -1,70 +1,49 @@
 <!doctype html>
 <meta charset="utf-8">
 <title>CSS Logical Properties: {max-,min-}inline-size</title>
 <link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
 <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<script src="resources/style-check.js"></script>
+<script src="/resources/check-layout-th.js"></script>
 
 <style>
-div {
+.block {
   border: 1px solid #000;
 }
-#div1 {
+#block1 {
   inline-size: 40px;
   min-inline-size: 50px;
   max-inline-size: 100px;
 }
-#div2 {
+#block2 {
   inline-size: 100px;
   min-inline-size: 50px;
   max-inline-size: 100px;
 }
-#div3 {
+#block3 {
   inline-size: 120px;
   min-inline-size: 50px;
   max-inline-size: 100px;
 }
-#ref_div1 {
-  width: 40px;
-  min-width: 50px;
-  max-width: 100px;
-}
-#ref_div2 {
-  width: 100px;
-  min-width: 50px;
-  max-width: 100px;
-}
-#ref_div3 {
-  width: 120px;
-  min-width: 50px;
-  max-width: 100px;
-}
 
-p {
+.override {
   border: 1px solid #000;
 }
-#p1 {
+#override1 {
   inline-size: 100px;
   width: 50px;
 }
-#p2 {
+#override2 {
   width: 50px;
   inline-size: 100px;
 }
-#ref_p1 {
-  width: 50px;
-}
-#ref_p2 {
-  width: 100px;
-}
 
 .table {
   border: 1px solid #000;
   display: table;
 }
 .tablecell {
   display: table-cell;
 }
@@ -84,80 +63,57 @@ p {
 }
 #table3_cell {
   inline-size: 120px;
   min-inline-size: 50px;
   max-inline-size: 100px;
   block-size: 100px;
   background-color: green;
 }
-#ref_table1_cell {
-  width: 40px;
-  min-width: 50px;
-  max-width: 100px;
-  height: 100px;
-  background-color: red;
-}
-#ref_table2_cell {
-  width: 100px;
-  min-width: 50px;
-  max-width: 100px;
-  height: 100px;
-  background-color: blue;
-}
-#ref_table3_cell {
-  width: 120px;
-  min-width: 50px;
-  max-width: 100px;
-  height: 100px;
-  background-color: green;
-}
 </style>
 
-<div id="div1"></div>
-<div id="div2"></div>
-<div id="div3"></div>
-<div id="ref_div1"></div>
-<div id="ref_div2"></div>
-<div id="ref_div3"></div>
+<div id="log"></div>
 
-<p id="p1"></div>
-<p id="p2"></div>
-<p id="ref_p1"></div>
-<p id="ref_p2"></div>
+<h3>Maximum and minimim inline sizes in blocks</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
 
-<div class="table">
-  <div class="tablecell" id="table1_cell"></div>
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></div>
+
+<h3>Overridance of <code>width</code> and <code>inline-size</code></h3>
+<div>
+  <p>Check that <code>width</code> overrides <code>inline-size</code></p>
+  <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
+
+  <p>Check that <code>inline-size</code> overrides <code>width</code></p>
+  <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div>
 </div>
-<div class="table">
-  <div class="tablecell" id="ref_table1_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="ref_table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell"  id="ref_table3_cell"></div>
+
+<h3>Maximum and minimim inline sizes in table cells</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="50" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
 </div>
 
 <script>
-test(function () {
-  assert_true(compareWidthHeight("div1", "ref_div1"));
-  assert_true(compareWidthHeight("div2", "ref_div2"));
-  assert_true(compareWidthHeight("div3", "ref_div3"));
-}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size");
-
-test(function () {
-  assert_true(compareWidthHeight("p1", "ref_p1"));
-  assert_true(compareWidthHeight("p2", "ref_p2"));
-}, "Check that width override inline-size and vice versa");
-
-test(function () {
-  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
-  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
-  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
-}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table");
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>

deleted file mode 100644
--- a/testing/web-platform/tests/css/css-logical/resources/style-check.js
+++ /dev/null
@@ -1,9 +0,0 @@
-"use strict";
-function compareWidthHeight(id1, id2) {
-  var element1 = document.getElementById(id1);
-  var style1 = getComputedStyle(element1);
-  var element2 = document.getElementById(id2);
-  var style2 = getComputedStyle(element2);
-  return (style1.width == style2.width) &&
-      (style1.height == style2.height)
-}

author	Manuel Rego Casasnovas <rego@igalia.com>
	Wed, 06 Jun 2018 16:30:33 +0000
changeset 422203	b246a87add182779a8d2611020b2cb6b33e1a79d
parent 422202	bb6143626fa6668573e70eef9f8fe984bdf8600b
child 422204	1c6fa562b318e46957b439dae6442b01de5d0145
push id	34122
push user	ebalazs@mozilla.com
push date	Mon, 11 Jun 2018 09:37:00 +0000
treeherder	mozilla-central@9941eb8c3b29 [default view] [failures only]
perfherder	[talos] [build metrics] [platform microbench] (compared to previous push)
reviewers	testonly
bugs	1464875, 11196
milestone	62.0a1
first release with	nightly linux32 9941eb8c3b29 / 62.0a1 / 20180611100116 / files nightly linux64 9941eb8c3b29 / 62.0a1 / 20180611100116 / files nightly mac 9941eb8c3b29 / 62.0a1 / 20180611100116 / files nightly win32 9941eb8c3b29 / 62.0a1 / 20180611100116 / files nightly win64 9941eb8c3b29 / 62.0a1 / 20180611100116 / files
last release without	nightly linux32 59ffa5c68e55 / 62.0a1 / 20180609220554 / files nightly linux64 59ffa5c68e55 / 62.0a1 / 20180609220554 / files nightly mac 59ffa5c68e55 / 62.0a1 / 20180609220554 / files nightly win32 59ffa5c68e55 / 62.0a1 / 20180609220554 / files nightly win64 59ffa5c68e55 / 62.0a1 / 20180609220554 / files

testing/web-platform/meta/MANIFEST.json		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-logical/logicalprops-block-size.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html		file \| annotate \| diff \| comparison \| revisions
testing/web-platform/tests/css/css-logical/resources/style-check.js		file \| annotate \| diff \| comparison \| revisions