Bug 1464875 [wpt PR 11196] - Simplify the CSS Logical tests and prevent the result log from being rotated, a=testonly
authorManuel Rego Casasnovas <rego@igalia.com>
Wed, 06 Jun 2018 16:30:33 +0000
changeset 422203 b246a87add182779a8d2611020b2cb6b33e1a79d
parent 422202 bb6143626fa6668573e70eef9f8fe984bdf8600b
child 422204 1c6fa562b318e46957b439dae6442b01de5d0145
push id34122
push userebalazs@mozilla.com
push dateMon, 11 Jun 2018 09:37:00 +0000
treeherdermozilla-central@9941eb8c3b29 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1464875, 11196
milestone62.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 1464875 [wpt PR 11196] - Simplify the CSS Logical tests and prevent the result log from being rotated, a=testonly Automatic update from web-platform-testsMerge pull request #11196 from Loirooriol/css-logical Simplify the CSS Logical tests and prevent the result log from being rotated -- wpt-commits: 206f32ac6b61f478c217e52b3dac9328a6884c89 wpt-pr: 11196
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html
testing/web-platform/tests/css/css-logical/logicalprops-block-size.html
testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html
testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html
testing/web-platform/tests/css/css-logical/resources/style-check.js
--- 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)
-}