Bug 1587188 [wpt PR 19577] - Load Ahem as a web font in css-shapes tests., a=testonly

Automatic update from web-platform-tests 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. -- wpt-commits: 4c1bbd4b27cfa527485d4f56609895c9df55212b wpt-pr: 19577
2019-10-22 09:26:41 +00:00 · 2019-10-22 09:26:41 +00:00 · eef4a421ce
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-margin-001.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-004.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-circle-005.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-004.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-ellipse-005.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-inset-003.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-polygon-004.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/shape-outside-shape-arguments-000.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/values/support/parsing-utils.js
+++ b/testing/web-platform/tests/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);
-            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);
-                }
-            });
-        }
+/// 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);
+        }
+        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,
 }
 })();