[resources] Wait for document.fonts.ready in checkLayout() tests

Implements most of web-platform-tests/rfcs#213
and fixes up tests that use `checkLayout()` with extra `test()`s or
other synchronous code, which now have to live in `promise_setup()` or
`promise_test()`s to be part of the promise test queue.

A follow-up PR will clean up obsolete `document.fonts.ready.then(() =>
checkLayout(...)`.

css/css-flexbox/abspos/position-absolute-002.html

@@ -151,7 +151,7 @@
 
 // Positioned element should not change position when the height of it's parent flexbox is changed.
 for (key in beforePosition) {
-    test(function() {
+    promise_test(async function() {
         assert_equals(beforePosition[key], afterPosition[key]);
     }, 'position of ' + key);
 }

css/css-flexbox/relayout-input.html

@@ -7,7 +7,7 @@
   <input id="target" style="position: relative; height: 20px; flex: 1; width: 0px;" data-expected-width="100" />
 </div>
 <script>
-test(function() {
+promise_test(async function() {
   document.body.offsetTop;
   document.getElementById('target').value = 'text';
   checkLayout('#target');

css/css-grid/alignment/grid-align-baseline-vertical.html

@@ -114,12 +114,24 @@
 
     checkLayout('.grid', false);
 
-    test(() => {assert_equals(baseline1.offsetLeft, baseline2.offsetLeft, "baseline1 and baseline2 should have the same baseline;")}, "Additional Check 1");
-    test(() => {assert_greater_than(baseline3.offsetLeft + baseline3.offsetWidth, 75, "baseline3 should be above the center align-itemsed item;")}, "Additional Check 2");
-    test(() => {assert_equals(baseline4.offsetLeft + baseline4.offsetWidth, baseline5.offsetLeft + baseline5.offsetWidth, "baseline4 and baseline5 should be right aligned with each other;")}, "Additional Check 3");
-    test(() => {assert_less_than(baseline4.offsetLeft + baseline4.offsetWidth, 100, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
-    test(() => {assert_equals(baseline6.offsetLeft, baseline7.offsetLeft, "baseline6 and baseline7 should have the same baseline;")}, "Additional Check 5");
-    test(() => {assert_equals(baseline8.offsetLeft, baseline9.offsetLeft, "baseline8 and baseline9 should be left aligned with each other;")}, "Additional Check 6");
+    promise_test(async () => {
+      assert_equals(baseline1.offsetLeft, baseline2.offsetLeft, "baseline1 and baseline2 should have the same baseline");
+    }, "Additional Check 1");
+    promise_test(async () => {
+      assert_greater_than(baseline3.offsetLeft + baseline3.offsetWidth, 75, "baseline3 should be above the center align-itemsed item");
+    }, "Additional Check 2");
+    promise_test(async () => {
+      assert_equals(baseline4.offsetLeft + baseline4.offsetWidth, baseline5.offsetLeft + baseline5.offsetWidth, "baseline4 and baseline5 should be right aligned with each other");
+    }, "Additional Check 3");
+    promise_test(async () => {
+      assert_less_than(baseline4.offsetLeft + baseline4.offsetWidth, 100, "baseline4 and baseline5 should be below the dominant baseline");
+    }, "Additional Check 4");
+    promise_test(async () => {
+      assert_equals(baseline6.offsetLeft, baseline7.offsetLeft, "baseline6 and baseline7 should have the same baseline");
+    }, "Additional Check 5");
+    promise_test(async () => {
+      assert_equals(baseline8.offsetLeft, baseline9.offsetLeft, "baseline8 and baseline9 should be left aligned with each other");
+    }, "Additional Check 6");
 
     done();
   };

css/css-grid/alignment/grid-align-baseline.html

@@ -104,11 +104,18 @@
 
       checkLayout('.grid', false);
 
-      test(() => {assert_equals(baseline1.offsetTop + baseline1.offsetHeight, baseline2.offsetTop + baseline2.offsetHeight, "baseline1 and baseline2 should have the same baseline;")},
-                  "Additional Check 1");
-      test(() => {assert_less_than(baseline3.offsetTop, 25, "baseline3 should be above the center align-selfed item;")}, "Additional Check 2");
-      test(() => {assert_equals(baseline4.offsetTop, baseline5.offsetTop, "baseline4 and baseline5 should be top aligned with each other;")}, "Additional Check 3");
-      test(() => {assert_greater_than(baseline4.offsetTop, 0, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
+      promise_test(async () => {
+        assert_equals(baseline1.offsetTop + baseline1.offsetHeight, baseline2.offsetTop + baseline2.offsetHeight, "baseline1 and baseline2 should have the same baseline");
+      }, "Additional Check 1");
+      promise_test(async () => {
+        assert_less_than(baseline3.offsetTop, 25, "baseline3 should be above the center align-selfed item");
+      }, "Additional Check 2");
+      promise_test(async () => {
+        assert_equals(baseline4.offsetTop, baseline5.offsetTop, "baseline4 and baseline5 should be top aligned with each other");
+      }, "Additional Check 3");
+      promise_test(async () => {
+        assert_greater_than(baseline4.offsetTop, 0, "baseline4 and baseline5 should be below the dominant baseline");
+      }, "Additional Check 4");
 
       done();
     };

css/css-sizing/aspect-ratio-affects-container-width-when-height-changes.html

@@ -14,9 +14,10 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <script>
-  test(()=> {
+  promise_test(async () => {
       document.body.offsetTop;
       document.getElementById("container").style.height = "100px";
-      checkLayout("#container");
   }, "Changing height should affect the descendant widths, due to aspect ratio");
+
+  checkLayout("#container");
 </script>

css/css-sizing/stretch/stretch-alias-max-block-size-001.tentative.html

@@ -65,12 +65,15 @@
 
     // Add box-sizing:border-box (which shouldn't impact the actual resolved
     // box sizes that 'stretch' produces, aside from one subtest that we skip
-    // for this pass), and retest:
-    for (let elem of document.querySelectorAll(".test")) {
-      if (!elem.hasAttribute("skip-second-pass")) {
-        elem.style.boxSizing = "border-box";
+    // for this pass), and retest. The `promise_setup()` is needed to guarantee
+    // `border-box` before retesting.
+    promise_setup(async () => {
+      for (let elem of document.querySelectorAll(".test")) {
+        if (!elem.hasAttribute("skip-second-pass")) {
+          elem.style.boxSizing = "border-box";
+        }
       }
-    }
+    });
     checkLayout('[data-expected-height]:not([skip-second-pass])');
   }
 </script>

css/css-sizing/stretch/stretch-alias-min-block-size-001.tentative.html

@@ -61,10 +61,13 @@
     checkLayout('[data-expected-height]');
 
     // Add box-sizing:border-box (which shouldn't impact the actual resolved
-    // box sizes that 'stretch' produces), and retest:
-    for (let elem of document.querySelectorAll(".test")) {
-      elem.style.boxSizing = "border-box";
-    }
+    // box sizes that 'stretch' produces), and retest. The `promise_setup()` is
+    // needed to guarantee `border-box` before retesting.
+    promise_setup(async () => {
+      for (let elem of document.querySelectorAll(".test")) {
+        elem.style.boxSizing = "border-box";
+      }
+    });
     checkLayout('[data-expected-height]');
   }
 </script>

css/css-sizing/stretch/stretch-max-block-size-001.html

@@ -59,12 +59,15 @@
 
     // Add box-sizing:border-box (which shouldn't impact the actual resolved
     // box sizes that 'stretch' produces, aside from one subtest that we skip
-    // for this pass), and retest:
-    for (let elem of document.querySelectorAll(".test")) {
-      if (!elem.hasAttribute("skip-second-pass")) {
-        elem.style.boxSizing = "border-box";
+    // for this pass), and retest. The `promise_setup()` is needed to guarantee
+    // `border-box` before retesting.
+    promise_setup(async () => {
+      for (let elem of document.querySelectorAll(".test")) {
+        if (!elem.hasAttribute("skip-second-pass")) {
+          elem.style.boxSizing = "border-box";
+        }
       }
-    }
+    });
     checkLayout('[data-expected-height]:not([skip-second-pass])');
   }
 </script>

css/css-sizing/stretch/stretch-min-block-size-001.html

@@ -55,10 +55,13 @@
     checkLayout('[data-expected-height]');
 
     // Add box-sizing:border-box (which shouldn't impact the actual resolved
-    // box sizes that 'stretch' produces), and retest:
-    for (let elem of document.querySelectorAll(".test")) {
-      elem.style.boxSizing = "border-box";
-    }
+    // box sizes that 'stretch' produces), and retest. The `promise_setup()` is
+    // needed to guarantee `border-box` before retesting.
+    promise_setup(async () => {
+      for (let elem of document.querySelectorAll(".test")) {
+        elem.style.boxSizing = "border-box";
+      }
+    });
     checkLayout('[data-expected-height]');
   }
 </script>

css/css-tables/tentative/table-quirks.html

@@ -69,8 +69,9 @@ <h1>Tables in quirks mode proposals</h1>
   for (let img of Array.from(document.querySelectorAll("img"))) {
     img.src = pngSrc;
   }
-  test(_ => {
+  checkLayout("table", false);
+  promise_test(async () => {
     assert_equals(window.getComputedStyle(document.querySelector("#notitalic")).fontStyle, "normal");
   }, "decoration does not propagate into table");
-  checkLayout("table");
+  done();
 </script>

resources/check-layout-th.js

@@ -1,6 +1,6 @@
 (function() {
 // Test is initiated from body.onload, so explicit done() call is required.
-setup({ explicit_done: true });
+promise_setup(() => document.fonts.ready, { explicit_done: true });
 
 function checkSubtreeExpectedValues(t, parent, prefix)
 {
@@ -219,7 +219,7 @@ window.checkLayout = function(selectorList, callDone = true)
     var checkedLayout = false;
     Array.prototype.forEach.call(nodes, function(node) {
         const title = node.title == '' ? '' : `: ${node.title}`;
-        test(function(t) {
+        promise_test(async function(t) {
             var container = node.parentNode.className == 'container' ? node.parentNode : node;
             var prefix =
                 printDomOnError ? '\n' + container.outerHTML + '\n' : '';
@@ -239,13 +239,15 @@ window.checkLayout = function(selectorList, callDone = true)
                 if (node)
                   node.classList.add('testharness_error');
               }
-                checkedLayout |= !passed;
+              checkedLayout |= !passed;
             }
         }, `${selectorList} ${++testNumber}${title}`);
     });
-    if (!checkedLayout) {
-        console.error("No valid data-* attributes found in selector list : " + selectorList);
-    }
+    add_completion_callback(() => {
+        if (!checkedLayout) {
+            console.error("No valid data-* attributes found in selector list: " + selectorList);
+        }
+    });
     if (callDone)
         done();
 };