[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

resources/check-layout-th.js

@@ -25,8 +25,40 @@ function assert_tolerance(actual, expected, message)
     }
 }
 
+function checkDataKeys(node) {
+    var validData = {
+        "data-expected-width": true,
+        "data-expected-height": true,
+        "data-offset-x": true,
+        "data-offset-y": true,
+        "data-expected-client-width": true,
+        "data-expected-client-height": true,
+         "data-expected-scroll-width": true,
+        "data-expected-scroll-height": true,
+        "data-expected-bounding-client-rect-width": true,
+        "data-total-x": true,
+        "data-total-y": true,
+        "data-expected-display": true,
+        "data-expected-padding-top": true,
+        "data-expected-padding-bottom": true,
+        "data-expected-padding-left": true,
+        "data-expected-padding-right": true,
+        "data-expected-margin-top": true,
+        "data-expected-margin-bottom": true,
+        "data-expected-margin-left": true,
+        "data-expected-margin-right": true
+    };
+    if (!node || !node.getAttributeNames)
+        return;
+    for (let name of node.getAttributeNames()) {
+        if (name.startsWith("data-") && !validData[name])
+            console.warn(`checkLayout unexpected data attribute "${name}`);
+    }
+}
+
 function checkExpectedValues(t, node, prefix)
 {
+    checkDataKeys(node);
     var output = { checked: false };
 
     var expectedWidth = checkAttribute(output, node, "data-expected-width");
@@ -162,6 +194,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 +209,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.querySelector('#testharness_error_css')) {
+                  var style = document.createElement('style');
+                  style.setAttribute('id', '#testharness_error_css');
+                  style.appendChild(document.createTextNode(
+                      '.testharness_error { outline: red dotted 2px !important; }'));
+                }
+                if (node && node.classList)
+                  node.classList.add('testharness_error');
+              }
                 checkedLayout |= !passed;
             }
         }, selectorList + ' ' + String(++testNumber));