Load Ahem as a web font in css-shapes tests. (#19577)

This makes font setup/restoration explicit rather than per-subtest. This allows us to setup Ahem usage, then wait for fonts to load, and then run all computed tests as a discrete block. The previous method (which dynamically inserted Ahem prior to a subtest and removed it immediately after) didn't allow us to wait for the web fonts to be loaded because the test page would have no Ahem usage present at the time we waited for the fonts.ready event.
web-platform-tests · Oct 9, 2019 · 4c1bbd4 · 4c1bbd4
1 parent f60b9f7
commit 4c1bbd4
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 41 deletions.
diff --git a/css/css-shapes/shape-outside/values/shape-margin-001.html b/css/css-shapes/shape-outside/values/shape-margin-001.html
@@ -10,10 +10,12 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
         <script type="text/javascript">
+        setup({explicit_done: true});
         var shape_margin_valid_unit_tests = [];
         ParsingUtils.validUnits.forEach(function(unit) {
             test = "10"+unit;
@@ -25,10 +27,16 @@
             testCase["expected_computed"] = test;
             shape_margin_valid_unit_tests.push(testCase);
         });
+
         generate_tests( ParsingUtils.testShapeMarginInlineStyle,
                         ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "inline"), true);
-        generate_tests( ParsingUtils.testShapeMarginComputedStyle,
-                        ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "computed"), true);
+        ParsingUtils.setupFonts();
+        document.fonts.ready.then(()=> {
+            generate_tests( ParsingUtils.testShapeMarginComputedStyle,
+                            ParsingUtils.buildTestCases(shape_margin_valid_unit_tests, "computed"), true);
+            ParsingUtils.restoreFonts();
+            done();
+        });
         </script>
     </body>
 </html>
diff --git a/css/css-shapes/shape-outside/values/shape-outside-circle-004.html b/css/css-shapes/shape-outside/values/shape-outside-circle-004.html
@@ -13,14 +13,21 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
         <script type="text/javascript">
+            setup({explicit_done: true});
             generate_tests( ParsingUtils.testInlineStyle,
                             ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + inline', ParsingUtils.validUnits) );
-            generate_tests( ParsingUtils.testComputedStyle,
-                            ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + computed', ParsingUtils.validUnits) );
+            ParsingUtils.setupFonts();
+            document.fonts.ready.then(()=> {
+                generate_tests( ParsingUtils.testComputedStyle,
+                                ParsingUtils.buildPositionTests("circle", true, 'lengthUnit + computed', ParsingUtils.validUnits) );
+                ParsingUtils.restoreFonts();
+                done();
+            });
         </script>
     </body>
 </html>
diff --git a/css/css-shapes/shape-outside/values/shape-outside-circle-005.html b/css/css-shapes/shape-outside/values/shape-outside-circle-005.html
@@ -12,12 +12,19 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
         <script type="text/javascript">
+            setup({explicit_done: true});
             generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + inline', ParsingUtils.validUnits));
-            generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + computed', ParsingUtils.validUnits));
+            ParsingUtils.setupFonts();
+            document.fonts.ready.then(()=> {
+                generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('circle', 'lengthUnit + computed', ParsingUtils.validUnits));
+                ParsingUtils.restoreFonts();
+                done();
+            });
         </script>
     </body>
 </html>
diff --git a/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html b/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html
@@ -13,14 +13,21 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
         <script type="text/javascript">
+            setup({explicit_done: true});
             generate_tests( ParsingUtils.testInlineStyle,
                             ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + inline', ParsingUtils.validUnits) );
-            generate_tests( ParsingUtils.testComputedStyle,
-                            ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + computed', ParsingUtils.validUnits) );
+            ParsingUtils.setupFonts();
+            document.fonts.ready.then(()=> {
+                generate_tests( ParsingUtils.testComputedStyle,
+                                ParsingUtils.buildPositionTests("ellipse", true, 'lengthUnit + computed', ParsingUtils.validUnits) );
+                ParsingUtils.restoreFonts();
+                done();
+            });
         </script>
     </body>
 </html>
diff --git a/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html b/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html
@@ -12,12 +12,20 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
         <script type="text/javascript">
+            setup({explicit_done: true});
             generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + inline', ParsingUtils.validUnits));
-            generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + computed', ParsingUtils.validUnits));
+            ParsingUtils.setupFonts();
+            document.fonts.ready.then(()=> {
+                generate_tests(ParsingUtils.testComputedStyle,
+                                ParsingUtils.buildRadiiTests('ellipse', 'lengthUnit + computed', ParsingUtils.validUnits));
+                ParsingUtils.restoreFonts();
+                done();
+            });
         </script>
     </body>
 </html>
diff --git a/css/css-shapes/shape-outside/values/shape-outside-inset-003.html b/css/css-shapes/shape-outside/values/shape-outside-inset-003.html
@@ -13,15 +13,22 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
         <script type="text/javascript">
+           setup({explicit_done: true});
            ParsingUtils.validUnits.forEach(function(unit) {
                 generate_tests(ParsingUtils.testInlineStyle, ParsingUtils.generateInsetRoundCases(unit, 'inline'));
            });
-           ParsingUtils.validUnits.forEach(function(unit) {
-                generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.generateInsetRoundCases(unit, 'computed'));
+           ParsingUtils.setupFonts();
+           document.fonts.ready.then(()=> {
+                ParsingUtils.validUnits.forEach(function(unit) {
+                    generate_tests(ParsingUtils.testComputedStyle, ParsingUtils.generateInsetRoundCases(unit, 'computed'));
+                });
+                ParsingUtils.restoreFonts();
+                done();
            });
         </script>
     </body>

diff --git a/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html b/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html
@@ -13,10 +13,12 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
         <script type="text/javascript">
+            setup({explicit_done: true});
             var arg_length_units_tests = [
                ['%', 'px', 'px'],
                ['px', '%', 'px'],
@@ -31,8 +33,13 @@
             ];
             generate_tests( ParsingUtils.testInlineStyle,
                             ParsingUtils.buildPolygonTests(arg_length_units_tests, 'inline') );
-            generate_tests( ParsingUtils.testComputedStyle,
-                            ParsingUtils.buildPolygonTests(arg_length_units_tests, 'computed') );
+            ParsingUtils.setupFonts();
+            document.fonts.ready.then(()=> {
+                generate_tests( ParsingUtils.testComputedStyle,
+                                ParsingUtils.buildPolygonTests(arg_length_units_tests, 'computed') );
+                ParsingUtils.restoreFonts();
+                done();
+            });
         </script>
     </body>
 </html>
diff --git a/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html b/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html
@@ -13,6 +13,7 @@
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="support/parsing-utils.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     </head>
     <body>
         <div id="log"></div>
@@ -21,6 +22,7 @@
             // fixed units: cm, mm, in, px, pt, pc
             // percentage unit: %
             // zero length: 0
+            setup({explicit_done: true});
             var basic_shape_args_tests = [
                 {
                   "name": "0-valued",
@@ -53,10 +55,17 @@
                   "expected_computed": "polygon(1% 2%)"
                 }
             ];
+
             generate_tests( ParsingUtils.testInlineStyle,
                             ParsingUtils.buildTestCases(basic_shape_args_tests, "inline") );
-            generate_tests( ParsingUtils.testComputedStyle,
-                            ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") );
+            ParsingUtils.setupFonts();
+            document.fonts.ready.then(()=> {
+                generate_tests( ParsingUtils.testComputedStyle,
+                                ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") );
+                ParsingUtils.restoreFonts();
+                done();
+            });
+
         </script>
     </body>
 </html>
diff --git a/css/css-shapes/shape-outside/values/support/parsing-utils.js b/css/css-shapes/shape-outside/values/support/parsing-utils.js
@@ -446,31 +446,32 @@ function each(object, func) {
     }
 }
 
-function setupFonts(func) {
-    return function () {
-        var fontProperties = {
-            'font-family': 'Ahem',
-            'font-size': '16px',
-            'line-height': '1'
-        };
-        var savedValues = { };
-        each(fontProperties, function (key, value) {
-            savedValues[key] = document.body.style.getPropertyValue(key);
+/// For saving and restoring font properties
+var savedFontValues = { };
+
+function setupFonts() {
+    var fontProperties = {
+        'font-family': 'Ahem',
+        'font-size': '16px',
+        'line-height': '1'
+    };
+    savedFontValues = { };
+    each(fontProperties, function (key, value) {
+        savedFontValues[key] = document.body.style.getPropertyValue(key);
+        document.body.style.setProperty(key, value);
+    });
+}
+
+function restoreFonts() {
+    each(savedFontValues, function (key, value) {
+        if (value) {
             document.body.style.setProperty(key, value);
-        });
-        try {
-            func.apply(this, arguments);
-        } finally {
-            each(savedValues, function (key, value) {
-                if (value) {
-                    document.body.style.setProperty(key, value);
-                }
-                else {
-                    document.body.style.removeProperty(key);
-                }
-            });
         }
-    };
+        else {
+            document.body.style.removeProperty(key);
+        }
+    });
+    savedFontValues = { };
 }
 
 var validUnits = [
@@ -819,11 +820,11 @@ var calcTestValues = [
 
 return {
     testInlineStyle: testInlineStyle,
-    testComputedStyle: setupFonts(testComputedStyle),
+    testComputedStyle: testComputedStyle,
     testShapeMarginInlineStyle: testShapeMarginInlineStyle,
-    testShapeMarginComputedStyle: setupFonts(testShapeMarginComputedStyle),
+    testShapeMarginComputedStyle: testShapeMarginComputedStyle,
     testShapeThresholdInlineStyle: testShapeThresholdInlineStyle,
-    testShapeThresholdComputedStyle: setupFonts(testShapeThresholdComputedStyle),
+    testShapeThresholdComputedStyle: testShapeThresholdComputedStyle,
     buildTestCases: buildTestCases,
     buildRadiiTests: buildRadiiTests,
     buildPositionTests: buildPositionTests,
@@ -834,6 +835,7 @@ return {
     validUnits: validUnits,
     calcTestValues: calcTestValues,
     roundResultStr: roundResultStr,
-    setupFonts: setupFonts
+    setupFonts: setupFonts,
+    restoreFonts: restoreFonts,
 }
 })();