[wpt] enhanceents to check-layout-th.js

There are 3 enhancements that I've found useful. 1. Warn if there are any unexpected data-* attributes A common error is to have a typo in data-* attribute name. When this happens, test will pass, because attribute is never read. This enhancement prints a warning if unexpected attribute is found. Running this over the entire test suite, I've found several errors: css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html css/css-grid/grid-items/grid-items-relative-offsets-001.html css/css-grid/grid-items/grid-items-relative-offsets-002.html have data-expected-x, data-expected-y Tried replacing some of these with data-offset-x, and tests fail. css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002 has data-offset-top 2. highlight error on failure flag. Defaults to false. If set, this flag will draw an outline around failed Element. Useful when debugging pages with many elements. 3. toggle printing dom on error. Sometimes, it is useful not to print dom on error for clarity. Change-Id: I8424aa2dc002f63fde18d0fc54bdfe77666ce951 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2161379 Reviewed-by: Philip Jägenstedt <[email protected]> Reviewed-by: Manuel Rego <[email protected]> Commit-Queue: Aleks Totic <[email protected]> Cr-Commit-Position: refs/heads/master@{#763069}
web-platform-tests · Apr 27, 2020 · 88ef30d · 88ef30d
1 parent f657d26
commit 88ef30d
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 102 deletions.
diff --git a/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html b/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html
@@ -41,69 +41,69 @@
 <body onload="checkLayout('.grid')">
 
 <div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
 </div>
 
 <div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
 </div>
 
 <div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div>
 </div>
 
 <div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
 </div>
 
 <!-- auto-fill -->
 
 <div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
 </div>
 
 <div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
 </div>
 
 <div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div>
 </div>
 
 <div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
-    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-expected-x="0" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-expected-x="20" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-expected-x="40" data-expected-y="0"></div>
-    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-expected-x="60" data-expected-y="0"></div>
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
 </div>
 
 </body>
diff --git a/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html b/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
@@ -27,15 +27,15 @@
 <div id="log"></div>
 
 <div class="grid" style="grid-template-rows: auto 60% auto;" data-expected-height="35">
-  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-top="0"></div>
-  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-top="0">X</div>
-  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-top="20"></div>
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-y="0"></div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-y="0">X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-y="20"></div>
 </div>
 
 <div class="grid" style="grid-template-rows: auto 20% auto;" data-expected-height="60">
-  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-top="0">X</div>
-  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-top="0">X</div>
-  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-top="35">X</div>
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-y="0">X</div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-y="0">X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-y="35">X</div>
 </div>
 
 <div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">

diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
@@ -74,27 +74,27 @@ <h3>Direction RTL</h3>
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
 
 <pre>Item margin-right: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
 
 <pre>Item margin-top: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
 
 <pre>Item margin-bottom: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
@@ -74,27 +74,27 @@ <h3>Direction RTL</h3>
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginLeft50Percent" data-expected-margin-left="50" data-expected-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
 
 <pre>Item margin-right: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginRight50Percent" data-expected-margin-right="50" data-expected-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
 
 <pre>Item margin-top: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginTop50Percent" data-expected-margin-top="50" data-expected-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>
 
 <pre>Item margin-bottom: 50%;</pre>
 
 <div class="grid directionRTL">
-  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-expected-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
   <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
 </div>