From 7080d036b900b7a9d63f5bda7e88691fbc7c5846 Mon Sep 17 00:00:00 2001 From: Blink WPT Bot Date: Tue, 28 Apr 2020 11:47:43 +0000 Subject: [PATCH] Bug 1632282 [wpt PR 23184] - [wpt] enhanceents to check-layout-th.js, a=testonly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Automatic update from web-platform-tests [wpt] enhanceents to check-layout-th.js (#23184) 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} Co-authored-by: Aleks Totic -- wpt-commits: a5a3b7353c884ebcca0230818632a42ad2fbd9b2 wpt-pr: 23184 --- .../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 ++--- .../tests/resources/check-layout-th.js | 48 ++++++++++- 8 files changed, 148 insertions(+), 102 deletions(-) diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html index a5f6f16407a6..ba65e9a7e996 100644 --- a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html @@ -41,69 +41,69 @@
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+
+
+
+
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html index ae65f2207ef4..4b14f9c6eec0 100644 --- a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html +++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html index 78ce9f762512..a1f380d05111 100644 --- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html @@ -74,27 +74,27 @@ 
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/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html index 83b5dc7e11b1..7309daa2369e 100644 --- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html @@ -74,27 +74,27 @@ 
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/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html index 1c5c94cbc982..8d2b7e08a96a 100644 --- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html @@ -27,22 +27,22 @@
+ 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 @@
+ 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 @@
+ 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/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html index 86a8f1af761e..fb0cfd754907 100644 --- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html +++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html @@ -27,22 +27,22 @@
+ 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 @@
+ 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 @@
+ 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/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html index 8173361bbc88..bad3f89b53ec 100644 --- a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html +++ b/testing/web-platform/tests/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/testing/web-platform/tests/resources/check-layout-th.js b/testing/web-platform/tests/resources/check-layout-th.js index 928b0cf2a104..5d4236d1cedb 100644 --- a/testing/web-platform/tests/resources/check-layout-th.js +++ b/testing/web-platform/tests/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));