Bug 1740584 - Wait for font loading in WPT rcap, rch, rex, ric, rlh invalidation tests. r=emilio

Modeled after changes in https://bugzilla.mozilla.org/show_bug.cgi?id=1966668 for proper testing of the Ahem font. I validated using `./mach wpt-serve` and Chromium that they still pass.

Differential Revision: https://phabricator.services.mozilla.com/D274526

Author: kbhomes

testing/web-platform/tests/css/css-values/rcap-invalidation.html

@@ -29,9 +29,11 @@
 
 <script>
   setup({ single_test: true });
-  let old_width = div.getBoundingClientRect().width;
-  document.documentElement.style.fontFamily = "sans-serif";
-  let new_width = div.getBoundingClientRect().width;
-  assert_not_equals(old_width, new_width, "expect the capital height of Ahem and sans-serif to be different");
-  done();
+  document.fonts.ready.then(() => {
+    let old_width = div.getBoundingClientRect().width;
+    document.documentElement.style.fontFamily = "sans-serif";
+    let new_width = div.getBoundingClientRect().width;
+    assert_not_equals(old_width, new_width, "expect the capital height of Ahem and sans-serif to be different");
+    done();
+  });
 </script>

testing/web-platform/tests/css/css-values/rch-invalidation.html

@@ -28,9 +28,11 @@
 
 <script>
   setup({ single_test: true });
-  let old_width = div.getBoundingClientRect().width;
-  document.documentElement.style.fontFamily = "sans-serif";
-  let new_width = div.getBoundingClientRect().width;
-  assert_not_equals(old_width, new_width, "expect the width of zero of Ahem and sans-serif to be different");
-  done();
+  document.fonts.ready.then(() => {
+    let old_width = div.getBoundingClientRect().width;
+    document.documentElement.style.fontFamily = "sans-serif";
+    let new_width = div.getBoundingClientRect().width;
+    assert_not_equals(old_width, new_width, "expect the width of zero of Ahem and sans-serif to be different");
+    done();
+  });
 </script>

testing/web-platform/tests/css/css-values/rex-invalidation.html

@@ -29,9 +29,11 @@
 
 <script>
   setup({ single_test: true });
-  let old_width = div.getBoundingClientRect().width;
-  document.documentElement.style.fontFamily = "sans-serif";
-  let new_width = div.getBoundingClientRect().width;
-  assert_not_equals(old_width, new_width, "expect the x-height of Ahem and sans-serif to be different");
-  done();
+  document.fonts.ready.then(() => {
+    let old_width = div.getBoundingClientRect().width;
+    document.documentElement.style.fontFamily = "sans-serif";
+    let new_width = div.getBoundingClientRect().width;
+    assert_not_equals(old_width, new_width, "expect the x-height of Ahem and sans-serif to be different");
+    done();
+  });
 </script>

testing/web-platform/tests/css/css-values/ric-invalidation.html

@@ -28,9 +28,11 @@
 
 <script>
   setup({ single_test: true });
-  let old_width = div.getBoundingClientRect().width;
-  document.documentElement.style.fontSize = "41px";
-  let new_width = div.getBoundingClientRect().width;
-  assert_not_equals(old_width, new_width, "expect update of ric units with font size change");
-  done();
+  document.fonts.ready.then(() => {
+    let old_width = div.getBoundingClientRect().width;
+    document.documentElement.style.fontSize = "41px";
+    let new_width = div.getBoundingClientRect().width;
+    assert_not_equals(old_width, new_width, "expect update of ric units with font size change");
+    done();
+  });
 </script>

testing/web-platform/tests/css/css-values/rlh-invalidation.html

@@ -30,13 +30,15 @@
 
 <script>
   setup({ single_test: true });
-  let old_width = div.getBoundingClientRect().width;
-  document.documentElement.style.lineHeight = "4";
-  let new_width = div.getBoundingClientRect().width;
-  assert_not_equals(old_width, new_width, "expect rlh units to update on line-height update");
-  old_width = new_width;
-  document.documentElement.style.fontSize = "41px";
-  new_width = div.getBoundingClientRect().width;
-  assert_not_equals(old_width, new_width, "expect rlh units to update on font-size update");
-  done();
+  document.fonts.ready.then(() => {
+    let old_width = div.getBoundingClientRect().width;
+    document.documentElement.style.lineHeight = "4";
+    let new_width = div.getBoundingClientRect().width;
+    assert_not_equals(old_width, new_width, "expect rlh units to update on line-height update");
+    old_width = new_width;
+    document.documentElement.style.fontSize = "41px";
+    new_width = div.getBoundingClientRect().width;
+    assert_not_equals(old_width, new_width, "expect rlh units to update on font-size update");
+    done();
+  });
 </script>