From dcb41255611eaa36a4f4864b7f3e07b98feddac4 Mon Sep 17 00:00:00 2001 From: Luke Zielinski Date: Tue, 8 Oct 2019 15:48:02 -0400 Subject: [PATCH 1/4] Inline two tests that used generate_tests previously. Also make 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. --- .../values/shape-margin-001.html | 104 +++++++++++++++--- .../shape-outside-shape-arguments-000.html | 93 ++++++++++------ .../values/support/parsing-utils.js | 57 +++++----- 3 files changed, 177 insertions(+), 77 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 index 39dea7efe81eee..595499e9643911 100644 --- a/css/css-shapes/shape-outside/values/shape-margin-001.html +++ b/css/css-shapes/shape-outside/values/shape-margin-001.html @@ -10,25 +10,101 @@ + -->
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 index 02d5bc78d9a509..9876f64fbd0d11 100644 --- 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 @@ +
@@ -21,42 +22,62 @@ // fixed units: cm, mm, in, px, pt, pc // percentage unit: % // zero length: 0 - var basic_shape_args_tests = [ - { - "name": "0-valued", - "actual": "polygon(nonzero, 0 0)", - "expected_inline": "polygon(0px 0px)", - "expected_computed": "polygon(0px 0px)" - }, - { - "name": "Font relative units", - "actual": "polygon(nonzero, 1em 1ex, 1ch 1rem)", - "expected_inline": "polygon(1em 1ex, 1ch 1rem)", - "expected_computed": "polygon(1em 1ex, 1ch 1rem)" // converted to px by the framework - }, - { - "name": "View relative units", - "actual": "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", - "expected_inline": "polygon(1vw 1vh, 1vmin 1vmax)", - "expected_computed": "polygon(1vw 1vh, 1vmin 1vmax)" // converted to px by the framework - }, - { - "name": "Fixed units", - "actual": "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", - "expected_inline": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)", - "expected_computed": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)" // converted to px by the framework - }, - { - "name": "Percentage units", - "actual": "polygon(nonzero, 1% 2%)", - "expected_inline": "polygon(1% 2%)", - "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") ); + + setup({explicit_done: true}); + + test(function() { + ParsingUtils.testInlineStyle( + "polygon(nonzero, 0 0)", "polygon(0px 0px)"); + }, '0-valued - inline'); + test(function() { + ParsingUtils.testInlineStyle( + "polygon(nonzero, 1em 1ex, 1ch 1rem)", "polygon(1em 1ex, 1ch 1rem)"); + }, 'Font relative units - inline'); + test(function() { + ParsingUtils.testInlineStyle( + "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", "polygon(1vw 1vh, 1vmin 1vmax)"); + }, 'View relative units - inline'); + test(function() { + ParsingUtils.testInlineStyle( + "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", + "polygon(1cm 1mm, 1in 1px, 1pt 1pc)"); + }, 'Fixed units - inline'); + test(function() { + ParsingUtils.testInlineStyle( + "polygon(nonzero, 1% 2%)", "polygon(1% 2%)"); + }, 'Percentage units - inline'); + + ParsingUtils.setupFonts(); + document.fonts.ready.then(()=> { + test(function() { + ParsingUtils.testComputedStyle( + "polygon(nonzero, 0 0)", ParsingUtils.convertToPx("polygon(0px 0px)")); + }, '0-valued - computed'); + test(function() { + ParsingUtils.testComputedStyle( + "polygon(nonzero, 1em 1ex, 1ch 1rem)", + ParsingUtils.convertToPx("polygon(1em 1ex, 1ch 1rem)")); + }, 'Font relative units - computed'); + test(function() { + ParsingUtils.testComputedStyle( + "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", + ParsingUtils.convertToPx("polygon(1vw 1vh, 1vmin 1vmax)")); + }, 'View relative units - computed'); + test(function() { + ParsingUtils.testComputedStyle( + "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", + ParsingUtils.convertToPx("polygon(1cm 1mm, 1in 1px, 1pt 1pc)")); + }, 'Fixed units - computed'); + test(function() { + ParsingUtils.testComputedStyle( + "polygon(nonzero, 1% 2%)", + ParsingUtils.convertToPx("polygon(1% 2%)")); + }, 'Percentage units - computed'); + + ParsingUtils.restoreFonts(); + done(); + }); + diff --git a/css/css-shapes/shape-outside/values/support/parsing-utils.js b/css/css-shapes/shape-outside/values/support/parsing-utils.js index 118a1145333773..0535c99495181f 100644 --- 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,8 @@ return { validUnits: validUnits, calcTestValues: calcTestValues, roundResultStr: roundResultStr, - setupFonts: setupFonts + setupFonts: setupFonts, + restoreFonts: restoreFonts, + convertToPx: convertToPx } })(); From 88600f8b21d3bbc8fa83448fc461c9570fa52192 Mon Sep 17 00:00:00 2001 From: Luke Zielinski Date: Wed, 9 Oct 2019 09:51:40 -0400 Subject: [PATCH 2/4] Go back to using generate_tests rather than inlining, but keep the changes to font setup --- .../values/shape-margin-001.html | 98 +++---------------- .../shape-outside-shape-arguments-000.html | 84 +++++++--------- 2 files changed, 51 insertions(+), 131 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 index 595499e9643911..1011ae68e4b093 100644 --- a/css/css-shapes/shape-outside/values/shape-margin-001.html +++ b/css/css-shapes/shape-outside/values/shape-margin-001.html @@ -15,96 +15,28 @@
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 index 9876f64fbd0d11..08d5d471de6b93 100644 --- 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 @@ -22,58 +22,46 @@ // 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", + "actual": "polygon(nonzero, 0 0)", + "expected_inline": "polygon(0px 0px)", + "expected_computed": "polygon(0px 0px)" + }, + { + "name": "Font relative units", + "actual": "polygon(nonzero, 1em 1ex, 1ch 1rem)", + "expected_inline": "polygon(1em 1ex, 1ch 1rem)", + "expected_computed": "polygon(1em 1ex, 1ch 1rem)" // converted to px by the framework + }, + { + "name": "View relative units", + "actual": "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", + "expected_inline": "polygon(1vw 1vh, 1vmin 1vmax)", + "expected_computed": "polygon(1vw 1vh, 1vmin 1vmax)" // converted to px by the framework + }, + { + "name": "Fixed units", + "actual": "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", + "expected_inline": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)", + "expected_computed": "polygon(1cm 1mm, 1in 1px, 1pt 1pc)" // converted to px by the framework + }, + { + "name": "Percentage units", + "actual": "polygon(nonzero, 1% 2%)", + "expected_inline": "polygon(1% 2%)", + "expected_computed": "polygon(1% 2%)" + } + ]; - test(function() { - ParsingUtils.testInlineStyle( - "polygon(nonzero, 0 0)", "polygon(0px 0px)"); - }, '0-valued - inline'); - test(function() { - ParsingUtils.testInlineStyle( - "polygon(nonzero, 1em 1ex, 1ch 1rem)", "polygon(1em 1ex, 1ch 1rem)"); - }, 'Font relative units - inline'); - test(function() { - ParsingUtils.testInlineStyle( - "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", "polygon(1vw 1vh, 1vmin 1vmax)"); - }, 'View relative units - inline'); - test(function() { - ParsingUtils.testInlineStyle( - "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", - "polygon(1cm 1mm, 1in 1px, 1pt 1pc)"); - }, 'Fixed units - inline'); - test(function() { - ParsingUtils.testInlineStyle( - "polygon(nonzero, 1% 2%)", "polygon(1% 2%)"); - }, 'Percentage units - inline'); - + generate_tests( ParsingUtils.testInlineStyle, + ParsingUtils.buildTestCases(basic_shape_args_tests, "inline") ); ParsingUtils.setupFonts(); document.fonts.ready.then(()=> { - test(function() { - ParsingUtils.testComputedStyle( - "polygon(nonzero, 0 0)", ParsingUtils.convertToPx("polygon(0px 0px)")); - }, '0-valued - computed'); - test(function() { - ParsingUtils.testComputedStyle( - "polygon(nonzero, 1em 1ex, 1ch 1rem)", - ParsingUtils.convertToPx("polygon(1em 1ex, 1ch 1rem)")); - }, 'Font relative units - computed'); - test(function() { - ParsingUtils.testComputedStyle( - "polygon(nonzero, 1vw 1vh, 1vmin 1vmax)", - ParsingUtils.convertToPx("polygon(1vw 1vh, 1vmin 1vmax)")); - }, 'View relative units - computed'); - test(function() { - ParsingUtils.testComputedStyle( - "polygon(nonzero, 1cm 1mm, 1in 1px, 1pt 1pc)", - ParsingUtils.convertToPx("polygon(1cm 1mm, 1in 1px, 1pt 1pc)")); - }, 'Fixed units - computed'); - test(function() { - ParsingUtils.testComputedStyle( - "polygon(nonzero, 1% 2%)", - ParsingUtils.convertToPx("polygon(1% 2%)")); - }, 'Percentage units - computed'); - + generate_tests( ParsingUtils.testComputedStyle, + ParsingUtils.buildTestCases(basic_shape_args_tests, "computed") ); ParsingUtils.restoreFonts(); done(); }); From 5182b7db2ae93e0f7e331e53a5ea432fc7e99862 Mon Sep 17 00:00:00 2001 From: Luke Zielinski Date: Wed, 9 Oct 2019 10:40:28 -0400 Subject: [PATCH 3/4] Update more css-shapes tests to handle font loading correctly. --- .../shape-outside/values/shape-margin-001.html | 2 +- .../values/shape-outside-circle-004.html | 11 +++++++++-- .../values/shape-outside-circle-005.html | 9 ++++++++- .../values/shape-outside-ellipse-004.html | 11 +++++++++-- .../values/shape-outside-ellipse-005.html | 10 +++++++++- .../shape-outside/values/shape-outside-inset-003.html | 11 +++++++++-- .../values/shape-outside-polygon-004.html | 11 +++++++++-- 7 files changed, 54 insertions(+), 11 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 index 1011ae68e4b093..28eca1a6bafc39 100644 --- a/css/css-shapes/shape-outside/values/shape-margin-001.html +++ b/css/css-shapes/shape-outside/values/shape-margin-001.html @@ -10,7 +10,7 @@ - --> +
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 index 01f3fc1bffe243..289861ee1502f0 100644 --- 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 @@ +
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 index 7d90318ec7365a..46cae045c5d0c8 100644 --- 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 @@ +
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 index 7617a34bce0c7f..1d4aa85a07c304 100644 --- 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 @@ +
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 index fe5af3b682c8cd..5acb994191258c 100644 --- 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 @@ +
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 index 9b420707fe2e29..3ffc2af981672a 100644 --- 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 @@ +
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 index c9623a2e5bd4f2..e9ecf2df599b02 100644 --- 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 @@ +
From 6030e14cb9989ede6d6d5fc0157bc748959c8404 Mon Sep 17 00:00:00 2001 From: Luke Zielinski Date: Wed, 9 Oct 2019 10:47:42 -0400 Subject: [PATCH 4/4] Hide ParsingUtils.convertToPx, it's not used by tests anymore. --- css/css-shapes/shape-outside/values/support/parsing-utils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/css/css-shapes/shape-outside/values/support/parsing-utils.js b/css/css-shapes/shape-outside/values/support/parsing-utils.js index 0535c99495181f..abadbf7066695a 100644 --- a/css/css-shapes/shape-outside/values/support/parsing-utils.js +++ b/css/css-shapes/shape-outside/values/support/parsing-utils.js @@ -837,6 +837,5 @@ return { roundResultStr: roundResultStr, setupFonts: setupFonts, restoreFonts: restoreFonts, - convertToPx: convertToPx } })();