Skip to content
Permalink
Browse files
Always use percentages for computed values of font-stretch, never key… 
…words

https://bugs.webkit.org/show_bug.cgi?id=247008
rdar://problem/101546363

Reviewed by Tim Nguyen.

https://drafts.csswg.org/css-fonts/#propdef-font-stretch

Current CSS Fonts Module Level 4 says computed values are always serialized as a percentage.
This is a change since CSS Fonts Module Level 3 which said they should be computed "as specified".
Web Platform Tests currently has a mix; this updates tests to consistently expect the new form.

* LayoutTests/fast/css/getComputedStyle/computed-style-font-family-expected.txt:
Updated to expect "100%" instead of "normal".

* LayoutTests/fast/text/font-stretch-parse-expected.txt: Updated.
* LayoutTests/fast/text/font-stretch-parse.html: Updated to expect percentages.

* LayoutTests/fast/text/variations/out-of-bounds-selection-properties-expected.txt:
* LayoutTests/fast/text/variations/out-of-bounds-selection-properties.html:
Updated to expect "100%" instead of "normal".

* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/animations/font-stretch-interpolation-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/animations/font-stretch-interpolation.html:
Updated to expect percentages instead of keywords.

* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/animations/system-fonts-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/inheritance-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/parsing/font-stretch-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/font-stretch-expected.txt:
Updated for more PASS.

* LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html:
Updated to expect percentages instead of keywords.

* LayoutTests/platform/gtk/imported/w3c/web-platform-tests/css/css-fonts/animations/system-fonts-expected.txt:
* LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-fonts/animations/system-fonts-expected.txt:
* LayoutTests/platform/wpe/imported/w3c/web-platform-tests/css/css-fonts/animations/system-fonts-expected.txt:
Updated for more PASS.

* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::fontStretch): Removed code path that checks for and uses keywords.

Canonical link: https://commits.webkit.org/256094@main
  • Loading branch information
@darinadler
darinadler committed Oct 28, 2022
1 parent 7bceda6 commit b724d37d49cae06de4633efc4b468500f40f0ce3
Show file tree
Hide file tree
Showing 16 changed files with 572 additions and 574 deletions.
2 LayoutTests/fast/css/getComputedStyle/computed-style-font-family-expected.txt
View file
@@ -7,7 +7,7 @@ font-optical-sizing: auto;
font-palette: normal;
font-size: 16px;
font-size-adjust: none;
font-stretch: normal;
font-stretch: 100%;
font-style: normal;
font-synthesis-small-caps: auto;
font-synthesis-style: auto;
84 LayoutTests/fast/text/font-stretch-parse-expected.txt
View file
@@ -1,45 +1,45 @@
PASS window.getComputedStyle(document.getElementById('test1')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test2')).fontStretch is "1%"
PASS window.getComputedStyle(document.getElementById('test3')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test4')).fontStretch is "ultra-condensed"
PASS window.getComputedStyle(document.getElementById('test5')).fontStretch is "extra-condensed"
PASS window.getComputedStyle(document.getElementById('test6')).fontStretch is "condensed"
PASS window.getComputedStyle(document.getElementById('test7')).fontStretch is "semi-condensed"
PASS window.getComputedStyle(document.getElementById('test8')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test9')).fontStretch is "semi-expanded"
PASS window.getComputedStyle(document.getElementById('test10')).fontStretch is "expanded"
PASS window.getComputedStyle(document.getElementById('test11')).fontStretch is "extra-expanded"
PASS window.getComputedStyle(document.getElementById('test12')).fontStretch is "ultra-expanded"
PASS window.getComputedStyle(document.getElementById('test13')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test14')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test15')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test16')).fontStretch is "extra-condensed"
PASS window.getComputedStyle(document.getElementById('test17')).fontStretch is "extra-condensed"
PASS window.getComputedStyle(document.getElementById('test18')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test19')).fontStretch is "normal"
PASS window.getComputedStyle(document.getElementById('test20')).fontStretch is "extra-expanded"
PASS window.getComputedStyle(document.getElementById('test21')).fontStretch is "7%"
PASS window.getComputedStyle(document.getElementById('test1')).font is "16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test2')).font is "16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test3')).font is "16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test4')).font is "ultra-condensed 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test5')).font is "extra-condensed 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test6')).font is "condensed 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test7')).font is "semi-condensed 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test8')).font is "16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test9')).font is "semi-expanded 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test10')).font is "expanded 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test11')).font is "extra-expanded 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test12')).font is "ultra-expanded 16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test13')).font is "16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test14')).font is "16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test15')).font is "16px / 18px Times"
PASS window.getComputedStyle(document.getElementById('test16')).font is "100 extra-condensed 48px / 49px \"Helvetica Neue\""
PASS window.getComputedStyle(document.getElementById('test17')).font is "100 extra-condensed 48px / 49px \"Helvetica Neue\""
PASS window.getComputedStyle(document.getElementById('test18')).font is "100 48px / 49px \"Helvetica Neue\""
PASS window.getComputedStyle(document.getElementById('test19')).font is "100 48px / 49px \"Helvetica Neue\""
PASS window.getComputedStyle(document.getElementById('test20')).font is "italic small-caps 100 extra-expanded 48px / 49px \"Helvetica Neue\""
PASS window.getComputedStyle(document.getElementById('test21')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test1')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test2')).fontStretch is "1%"
PASS getComputedStyle(document.getElementById('test3')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test4')).fontStretch is "50%"
PASS getComputedStyle(document.getElementById('test5')).fontStretch is "62.5%"
PASS getComputedStyle(document.getElementById('test6')).fontStretch is "75%"
PASS getComputedStyle(document.getElementById('test7')).fontStretch is "87.5%"
PASS getComputedStyle(document.getElementById('test8')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test9')).fontStretch is "112.5%"
PASS getComputedStyle(document.getElementById('test10')).fontStretch is "125%"
PASS getComputedStyle(document.getElementById('test11')).fontStretch is "150%"
PASS getComputedStyle(document.getElementById('test12')).fontStretch is "200%"
PASS getComputedStyle(document.getElementById('test13')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test14')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test15')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test16')).fontStretch is "62.5%"
PASS getComputedStyle(document.getElementById('test17')).fontStretch is "62.5%"
PASS getComputedStyle(document.getElementById('test18')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test19')).fontStretch is "100%"
PASS getComputedStyle(document.getElementById('test20')).fontStretch is "150%"
PASS getComputedStyle(document.getElementById('test21')).fontStretch is "7%"
PASS getComputedStyle(document.getElementById('test1')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test2')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test3')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test4')).font is "ultra-condensed 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test5')).font is "extra-condensed 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test6')).font is "condensed 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test7')).font is "semi-condensed 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test8')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test9')).font is "semi-expanded 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test10')).font is "expanded 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test11')).font is "extra-expanded 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test12')).font is "ultra-expanded 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test13')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test14')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test15')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test16')).font is "100 extra-condensed 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test17')).font is "100 extra-condensed 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test18')).font is "100 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test19')).font is "100 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test20')).font is "italic small-caps 100 extra-expanded 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test21')).font is "16px / 18px Times"
PASS document.getElementById('test1').style.font is ""
PASS document.getElementById('test16').style.font is "100 extra-condensed 48px / 49px \"Helvetica Neue\""
PASS document.getElementById('test17').style.font is "100 extra-condensed 48px / 49px \"Helvetica Neue\""
84 LayoutTests/fast/text/font-stretch-parse.html
View file
@@ -28,49 +28,49 @@
<div id="test21" style="font-stretch: calc(3% + 4%);"></div>
</div>
<script>
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).fontStretch", "1%");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test3')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).fontStretch", "ultra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).fontStretch", "extra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test6')).fontStretch", "condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test7')).fontStretch", "semi-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test8')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test9')).fontStretch", "semi-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test10')).fontStretch", "expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test11')).fontStretch", "extra-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test12')).fontStretch", "ultra-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test13')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test14')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test15')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test16')).fontStretch", "extra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test17')).fontStretch", "extra-condensed");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test18')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test19')).fontStretch", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test20')).fontStretch", "extra-expanded");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test21')).fontStretch", "7%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test1')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test2')).fontStretch", "1%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test3')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test4')).fontStretch", "50%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test5')).fontStretch", "62.5%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test6')).fontStretch", "75%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test7')).fontStretch", "87.5%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test8')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test9')).fontStretch", "112.5%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test10')).fontStretch", "125%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test11')).fontStretch", "150%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test12')).fontStretch", "200%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test13')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test14')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test15')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test16')).fontStretch", "62.5%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test17')).fontStretch", "62.5%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test18')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test19')).fontStretch", "100%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test20')).fontStretch", "150%");
shouldBeEqualToString("getComputedStyle(document.getElementById('test21')).fontStretch", "7%");

shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).font", "16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).font", "16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test3')).font", "16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).font", "ultra-condensed 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test5')).font", "extra-condensed 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test6')).font", "condensed 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test7')).font", "semi-condensed 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test8')).font", "16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test9')).font", "semi-expanded 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test10')).font", "expanded 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test11')).font", "extra-expanded 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test12')).font", "ultra-expanded 16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test13')).font", "16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test14')).font", "16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test15')).font", "16px / 18px Times");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test16')).font", `100 extra-condensed 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test17')).font", `100 extra-condensed 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test18')).font", `100 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test19')).font", `100 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test20')).font", `italic small-caps 100 extra-expanded 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test21')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test1')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test2')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test3')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test4')).font", "ultra-condensed 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test5')).font", "extra-condensed 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test6')).font", "condensed 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test7')).font", "semi-condensed 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test8')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test9')).font", "semi-expanded 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test10')).font", "expanded 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test11')).font", "extra-expanded 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test12')).font", "ultra-expanded 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test13')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test14')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test15')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test16')).font", `100 extra-condensed 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test17')).font", `100 extra-condensed 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test18')).font", `100 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test19')).font", `100 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test20')).font", `italic small-caps 100 extra-expanded 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test21')).font", "16px / 18px Times");

shouldBeEqualToString("document.getElementById('test1').style.font", "");
shouldBeEqualToString("document.getElementById('test16').style.font", `100 extra-condensed 48px / 49px "Helvetica Neue"`);
2 LayoutTests/fast/text/variations/out-of-bounds-selection-properties-expected.txt
View file
@@ -1,7 +1,7 @@
PASS window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-weight') is "400"
PASS window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-style') is "normal"
PASS window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-weight') is "400"
PASS window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-stretch') is "normal"
PASS window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-stretch') is "100%"
PASS window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-style') is "normal"
PASS window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-weight') is "400"
PASS window.getComputedStyle(document.getElementById('test4')).getPropertyValue('font-weight') is "400"
4 LayoutTests/fast/text/variations/out-of-bounds-selection-properties.html
View file
@@ -14,7 +14,7 @@
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-weight')", "400");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test1')).getPropertyValue('font-style')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-weight')", "400");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-stretch')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-stretch')", "100%");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test2')).getPropertyValue('font-style')", "normal");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test3')).getPropertyValue('font-weight')", "400");
shouldBeEqualToString("window.getComputedStyle(document.getElementById('test4')).getPropertyValue('font-weight')", "400");
@@ -23,4 +23,4 @@
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>
</html>

0 comments on commit b724d37

Please sign in to comment.