From 88ef30d2c6c82bf65696f15bd633cae8994ae455 Mon Sep 17 00:00:00 2001 From: Aleks Totic Date: Mon, 27 Apr 2020 16:35:19 -0700 Subject: [PATCH] [wpt] enhanceents to check-layout-th.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Reviewed-by: Manuel Rego Commit-Queue: Aleks Totic Cr-Commit-Position: refs/heads/master@{#763069} --- .../grid-auto-repeat-intrinsic-001.html | 80 +++++++++---------- ...percentage-rows-indefinite-height-002.html | 12 +-- ...ms-percentage-margins-vertical-rl-001.html | 8 +- ...ms-percentage-margins-vertical-rl-002.html | 8 +- .../grid-items-relative-offsets-001.html | 36 ++++----- .../grid-items-relative-offsets-002.html | 36 ++++----- ...r-margin-border-padding-scrollbar-001.html | 22 ++--- resources/check-layout-th.js | 48 ++++++++++- 8 files changed, 148 insertions(+), 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 index a5f6f16407a67b..ba65e9a7e99648 100644 --- 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 @@
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
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 index ae65f2207ef4f8..4b14f9c6eec052 100644 --- 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 @@
-
-
X
-
+
+
X
+
-
X
-
X
-
X
+
X
+
X
+
X
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 index 78ce9f762512f6..a1f380d051116a 100644 --- 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 @@

Direction RTL

Item margin-left: 50%;
-
X
+
X
Item margin-right: 50%;
-
X
+
X
Item margin-top: 50%;
-
X
+
X
Item margin-bottom: 50%;
-
X
+
X
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 index 83b5dc7e11b160..7309daa2369e9b 100644 --- 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 @@

Direction RTL

Item margin-left: 50%;
-
X
+
X
Item margin-right: 50%;
-
X
+
X
Item margin-top: 50%;
-
X
+
X
Item margin-bottom: 50%;
-
X
+
X
diff --git a/css/css-grid/grid-items/grid-items-relative-offsets-001.html b/css/css-grid/grid-items/grid-items-relative-offsets-001.html index 1c5c94cbc9820f..8d2b7e08a96a42 100644 --- a/css/css-grid/grid-items/grid-items-relative-offsets-001.html +++ b/css/css-grid/grid-items/grid-items-relative-offsets-001.html @@ -27,22 +27,22 @@

Direction LTR

+ data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90">
+ data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60">
+ data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30">

Direction RTL

+ data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90">
+ data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60">
+ data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30">

Writing Mode vertical-lr

@@ -51,22 +51,22 @@

Direction LTR

+ data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200">
+ data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150">
+ data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100">

Direction RTL

+ data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200">
+ data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150">
+ data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100">

Writing Mode vertical-rl

@@ -75,20 +75,20 @@

Direction LTR

+ data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200">
+ data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150">
+ data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100">

Direction RTL

+ data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200">
+ data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150">
+ data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"> diff --git a/css/css-grid/grid-items/grid-items-relative-offsets-002.html b/css/css-grid/grid-items/grid-items-relative-offsets-002.html index 86a8f1af761e4c..fb0cfd754907be 100644 --- a/css/css-grid/grid-items/grid-items-relative-offsets-002.html +++ b/css/css-grid/grid-items/grid-items-relative-offsets-002.html @@ -27,22 +27,22 @@

Direction LTR

+ data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90">
+ data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60">
+ data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30">

Direction RTL

+ data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90">
+ data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60">
+ data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30">

Writing Mode vertical-lr

@@ -51,22 +51,22 @@

Direction LTR

+ data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200">
+ data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150">
+ data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100">

Direction RTL

+ data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200">
+ data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150">
+ data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100">

Writing Mode vertical-rl

@@ -75,20 +75,20 @@

Direction LTR

+ data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200">
+ data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150">
+ data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100">

Direction RTL

+ data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200">
+ data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150">
+ data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"> diff --git a/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html b/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html index 8173361bbc88dd..bad3f89b53ec72 100644 --- a/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html +++ b/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html @@ -54,7 +54,7 @@
-
+
@@ -66,7 +66,7 @@
-
+
@@ -74,11 +74,11 @@
-
+
-
+
@@ -86,19 +86,19 @@
-
+
-
+
-
+
-
+
@@ -112,7 +112,7 @@ var scrollbarWidth = measure.offsetWidth - measure.clientWidth; var scrollbarHeight = measure.offsetHeight - measure.clientHeight; - // Here are the data-width-without-scrollbar (and height) attributes of all + // Here are the data-test-width-without-scrollbar (and height) attributes of all // elements that have the "scroll" class. Things that contribute to the expected // sizes are: // @@ -126,8 +126,8 @@ // so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way. var elements = document.getElementsByClassName("scroll"); for (var i = 0; i < elements.length; i++) { - const expectedWidth = parseInt(elements[i].getAttribute("data-width-without-scrollbar")); - const expectedHeight = parseInt(elements[i].getAttribute("data-height-without-scrollbar")); + const expectedWidth = parseInt(elements[i].getAttribute("data-test-width-without-scrollbar")); + const expectedHeight = parseInt(elements[i].getAttribute("data-test-height-without-scrollbar")); elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth); elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight); } diff --git a/resources/check-layout-th.js b/resources/check-layout-th.js index 928b0cf2a1041e..5d4236d1cedb0e 100644 --- a/resources/check-layout-th.js +++ b/resources/check-layout-th.js @@ -25,8 +25,41 @@ function assert_tolerance(actual, expected, message) } } +function checkDataKeys(node) { + var validData = new Set([ + "data-expected-width", + "data-expected-height", + "data-offset-x", + "data-offset-y", + "data-expected-client-width", + "data-expected-client-height", + "data-expected-scroll-width", + "data-expected-scroll-height", + "data-expected-bounding-client-rect-width", + "data-total-x", + "data-total-y", + "data-expected-display", + "data-expected-padding-top", + "data-expected-padding-bottom", + "data-expected-padding-left", + "data-expected-padding-right", + "data-expected-margin-top", + "data-expected-margin-bottom", + "data-expected-margin-left", + "data-expected-margin-right" + ]); + if (!node || !node.getAttributeNames) + return; + // Use "data-test" prefix if you need custom-named data elements. + for (let name of node.getAttributeNames()) { + if (name.startsWith("data-") && !name.startsWith("data-test")) + assert_true(validData.has(name), name + " is a valid data attribute"); + } +} + function checkExpectedValues(t, node, prefix) { + checkDataKeys(node); var output = { checked: false }; var expectedWidth = checkAttribute(output, node, "data-expected-width"); @@ -162,6 +195,8 @@ function checkExpectedValues(t, node, prefix) } var testNumber = 0; +var highlightError = false; // displays outline around failed test element. +var printDomOnError = true; // prints dom when test fails. window.checkLayout = function(selectorList, callDone = true) { @@ -175,13 +210,24 @@ window.checkLayout = function(selectorList, callDone = true) Array.prototype.forEach.call(nodes, function(node) { test(function(t) { var container = node.parentNode.className == 'container' ? node.parentNode : node; - var prefix = "\n" + container.outerHTML + "\n"; + var prefix = + printDomOnError ? '\n' + container.outerHTML + '\n' : ''; var passed = false; try { checkedLayout |= checkExpectedValues(t, node.parentNode, prefix); checkedLayout |= checkSubtreeExpectedValues(t, node, prefix); passed = true; } finally { + if (!passed && highlightError) { + if (!document.getElementById('testharness_error_css')) { + var style = document.createElement('style'); + style.id = 'testharness_error_css'; + style.textContent = '.testharness_error { outline: red dotted 2px !important; }'; + document.body.appendChild(style); + } + if (node) + node.classList.add('testharness_error'); + } checkedLayout |= !passed; } }, selectorList + ' ' + String(++testNumber));