Update web-platform-tests to revision cf261625e2d230ab219eec966f4abe26e3401b64

5 files changed, 192 insertions, 375 deletions

diff --git a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html
index 4c8c13e9987..da02e759d8e 100644
--- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html
+++ b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html
@@ -6,62 +6,41 @@
 <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;
@@ -70,7 +49,6 @@ p {
 }
 .tablecell {
   display: table-cell;
-  writing-mode: vertical-lr;
 }
 #table1_cell {
   block-size: 40px;
@@ -93,75 +71,52 @@ p {
   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>
-</div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></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>
+  <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="ref_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>
 
-<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");
+<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>
 
-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");
+  <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>
 
-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");
+  <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>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>
diff --git a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size.html
index 66cb318e93d..8d90c07a983 100644
--- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size.html
+++ b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size.html
@@ -6,60 +6,43 @@
 <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;
@@ -89,75 +72,52 @@ p {
   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>
-</div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></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>
+  <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="ref_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>
 
-<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");
+<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>
 
-test(function () {
-  assert_true(compareWidthHeight("p1", "ref_p1"));
-  assert_true(compareWidthHeight("p2", "ref_p2"));
-}, "Check that height override block-size and vice versa");
+  <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>
 
-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");
+  <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>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>
diff --git a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html
index 09e17009c97..0a53dbbc5cf 100644
--- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html
+++ b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html
@@ -6,62 +6,41 @@
 <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;
@@ -70,7 +49,6 @@ p {
 }
 .tablecell {
   display: table-cell;
-  writing-mode: vertical-lr;
 }
 #table1_cell {
   inline-size: 40px;
@@ -93,75 +71,52 @@ p {
   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>
-</div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></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>
+  <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="ref_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>
 
-<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");
+<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>
 
-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");
+  <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>
 
-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");
+  <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>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>
diff --git a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size.html
index 32ede09cd6d..3ec169924af 100644
--- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size.html
+++ b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size.html
@@ -6,60 +6,39 @@
 <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;
@@ -89,75 +68,52 @@ p {
   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>
-</div>
-<div class="table">
-  <div class="tablecell" id="table2_cell"></div>
-</div>
-<div class="table">
-  <div class="tablecell" id="table3_cell"></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>
+  <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="ref_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>
 
-<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");
+<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>
 
-test(function () {
-  assert_true(compareWidthHeight("p1", "ref_p1"));
-  assert_true(compareWidthHeight("p2", "ref_p2"));
-}, "Check that width override inline-size and vice versa");
+  <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>
 
-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");
+  <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>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
 </script>
diff --git a/tests/wpt/web-platform-tests/css/css-logical/resources/style-check.js b/tests/wpt/web-platform-tests/css/css-logical/resources/style-check.js
deleted file mode 100644
index cd129fd51b8..00000000000
--- a/tests/wpt/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)
-}