Skip to content

Commit

Permalink
Change the default oblique angle from 20deg to 14deg
Browse files Browse the repository at this point in the history
Change the default oblique angle from 20deg to 14deg
https://bugs.webkit.org/show_bug.cgi?id=248258

Reviewed by Myles C. Maxfield.

This patch is to align Webkit with Blink / Chromium, Gecko / Firefox and Web-Specification. This is also part of Interop 2023 proposal [1].

[1] web-platform-tests/interop#64

Merge - https://chromium.googlesource.com/chromium/src/+/8bfd7d5770ec70f47e84b5cf33961b437a87c5a7

Web-Specification - http://w3c.github.io/csswg-drafts/css-fonts-4/#valdef-font-style-oblique-angle-90deg-90deg

The specs refer to have default angle as 14deg - "The lack of an <angle> represents 14deg.".

The imported test cases are leveraging font from Stephen Nixon using the Open Font License [2].

[2] https://github.com/arrowtype/vf-slnt-test/blob/main/fonts/license-recursive-OFL.txt#L3

* Source/WebCore/platform/graphics/FontSelectionAlgorithm.h: Update "italicThreshold" and "normalItalicValue" from 20deg to 14deg
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-variable.html: Added Test Case
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-variable-ref.html: Added Test Case Reference
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-variable-expected.html: Added Test Case Expectations
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-backslant-variable.html: Added Test Case
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-backslant-variable-ref.html: Added Test Case Reference
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-backslant-variable-expected.html: Added Test Case Expectations
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/at-font-face-matching-expected.txt: Updated Test Expectations
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/resources/FontStyleTest-slnt_backslant-VF.woff2 Added Test Font
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/variations/resources/FontStyleTest-slnt-VF.woff2: Added Test Font
* LayoutTests/fast/text/font-style-parse.html: Rebaselined
* LayoutTests/fast/text/font-style-parse-expected.txt: Rebaselined
* LayoutTests/platform/glib/TestExpectations: Add "Failure" Expectation with reference bug
* LayoutTests/platform/ios/TestExpectations: Add "Failure" Expectation with reference bug
* LayoutTests/platform/mac/TestExpectations: Add "Failure" Expectation with reference bug

Canonical link: https://commits.webkit.org/258722@main
  • Loading branch information
Ahmad-S792 authored and nt1m committed Jan 10, 2023
1 parent 20b003d commit 28de25b
Show file tree
Hide file tree
Showing 16 changed files with 183 additions and 14 deletions.
8 changes: 4 additions & 4 deletions LayoutTests/fast/text/font-style-parse-expected.txt
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ PASS getComputedStyle(document.getElementById('test17')).fontStyle is "normal"
PASS getComputedStyle(document.getElementById('test18')).fontStyle is "italic"
PASS getComputedStyle(document.getElementById('test19')).fontStyle is "italic"
PASS getComputedStyle(document.getElementById('test20')).fontStyle is "normal"
PASS getComputedStyle(document.getElementById('test21')).fontStyle is "oblique 14deg"
PASS getComputedStyle(document.getElementById('test22')).fontStyle is "oblique"
PASS getComputedStyle(document.getElementById('test21')).fontStyle is "oblique"
PASS getComputedStyle(document.getElementById('test22')).fontStyle is "oblique 20deg"
PASS getComputedStyle(document.getElementById('test1')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test2')).font is ""
PASS getComputedStyle(document.getElementById('test3')).font is ""
Expand All @@ -40,8 +40,8 @@ PASS getComputedStyle(document.getElementById('test17')).font is "100 48px / 49p
PASS getComputedStyle(document.getElementById('test18')).font is "italic 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test19')).font is "italic small-caps 100 extra-expanded 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test20')).font is "16px / 18px Times"
PASS getComputedStyle(document.getElementById('test21')).font is ""
PASS getComputedStyle(document.getElementById('test22')).font is "oblique 16px / 18px Times"
PASS getComputedStyle(document.getElementById('test21')).font is "oblique small-caps 123 extra-expanded 48px / 49px \"Helvetica Neue\""
PASS getComputedStyle(document.getElementById('test22')).font is ""
PASS document.getElementById('test1').style.font is ""
PASS document.getElementById('test15').style.font is "italic 100 48px / 49px \"Helvetica Neue\""
PASS document.getElementById('test16').style.font is "italic 100 48px / 49px \"Helvetica Neue\""
Expand Down
8 changes: 4 additions & 4 deletions LayoutTests/fast/text/font-style-parse.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@
shouldBeEqualToString("getComputedStyle(document.getElementById('test18')).fontStyle", "italic");
shouldBeEqualToString("getComputedStyle(document.getElementById('test19')).fontStyle", "italic");
shouldBeEqualToString("getComputedStyle(document.getElementById('test20')).fontStyle", "normal");
shouldBeEqualToString("getComputedStyle(document.getElementById('test21')).fontStyle", "oblique 14deg");
shouldBeEqualToString("getComputedStyle(document.getElementById('test22')).fontStyle", "oblique");
shouldBeEqualToString("getComputedStyle(document.getElementById('test21')).fontStyle", "oblique");
shouldBeEqualToString("getComputedStyle(document.getElementById('test22')).fontStyle", "oblique 20deg");

shouldBeEqualToString("getComputedStyle(document.getElementById('test1')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test2')).font", "");
Expand All @@ -72,8 +72,8 @@
shouldBeEqualToString("getComputedStyle(document.getElementById('test18')).font", `italic 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test19')).font", `italic small-caps 100 extra-expanded 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test20')).font", "16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test21')).font", "");
shouldBeEqualToString("getComputedStyle(document.getElementById('test22')).font", "oblique 16px / 18px Times");
shouldBeEqualToString("getComputedStyle(document.getElementById('test21')).font", `oblique small-caps 123 extra-expanded 48px / 49px "Helvetica Neue"`);
shouldBeEqualToString("getComputedStyle(document.getElementById('test22')).font", "");

shouldBeEqualToString("document.getElementById('test1').style.font", "");
shouldBeEqualToString("document.getElementById('test15').style.font", `italic 100 48px / 49px "Helvetica Neue"`);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ FAIL Matching font-style: 'normal' should prefer 'oblique 0deg' over 'oblique 10
PASS Matching font-style: 'normal' should prefer 'oblique 10deg 40deg' over 'oblique 20deg 30deg'
FAIL Matching font-style: 'normal' should prefer 'oblique 20deg 30deg' over 'oblique -50deg -20deg' assert_equals: Unexpected font on test element expected 488 but got 533
PASS Matching font-style: 'normal' should prefer 'oblique -50deg -20deg' over 'oblique -40deg -30deg'
FAIL Matching font-style: 'italic' should prefer 'italic' over 'oblique 20deg' assert_equals: Unexpected font on test element expected 488 but got 533
PASS Matching font-style: 'italic' should prefer 'italic' over 'oblique 20deg'
PASS Matching font-style: 'italic' should prefer 'oblique 20deg' over 'oblique 30deg 60deg'
FAIL Matching font-style: 'italic' should prefer 'oblique 30deg 60deg' over 'oblique 40deg 50deg' assert_equals: Unexpected font on test element expected 488 but got 533
PASS Matching font-style: 'italic' should prefer 'oblique 40deg 50deg' over 'oblique 5deg 10deg'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ PASS Font-style (supports): 'oblique' followed by calc is valid even if it mixes
PASS Font-style (computed): 'italic' is valid
PASS Font-style (computed): 'oblique' is valid
FAIL Font-style (computed): 'oblique' followed by zero degrees is valid assert_equals: Font-style computed style: 'oblique' followed by zero degrees is valid expected "oblique 0deg" but got "normal"
FAIL Font-style (computed): 'oblique' followed by positive angle in degrees is valid assert_equals: Font-style computed style: 'oblique' followed by positive angle in degrees is valid expected "oblique 20deg" but got "oblique"
PASS Font-style (computed): 'oblique' followed by positive angle in degrees is valid
FAIL Font-style (computed): 'oblique' followed by positive angle in radians is valid assert_equals: Font-style computed style: 'oblique' followed by positive angle in radians is valid expected "oblique 28.6479deg" but got "oblique 28.5deg"
PASS Font-style (computed): 'oblique' followed by positive angle in gradians is valid
PASS Font-style (computed): 'oblique' followed by positive angle in turns is valid
Expand All @@ -41,5 +41,5 @@ PASS Font-style (computed): 'oblique' followed by positive angle is valid
PASS Font-style (computed): 'oblique' followed by calc is valid
PASS Font-style (computed): 'oblique' followed by calc is valid even if it must be clamped (no computation)
PASS Font-style (computed): 'oblique' followed by calc is valid even if it must be clamped (with computation)
PASS Font-style (computed): 'oblique' followed by calc is valid even if it mixes units (with computation)
FAIL Font-style (computed): 'oblique' followed by calc is valid even if it mixes units (with computation) assert_equals: Font-style computed style: 'oblique' followed by calc is valid even if it mixes units (with computation) expected "oblique 14deg" but got "oblique"

Binary file not shown.
Binary file not shown.
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Test: Variable fonts with slant axis</title>
<style>
@font-face {
font-family: "slnt test font";
src: url('resources/FontStyleTest-slnt_backslant-VF.woff2');
font-style: oblique -15deg 15deg;
}
.test {
font-family: "slnt test font";
font-size: 3em;
}
.slnt14 {
font-variation-settings: 'slnt' -14;
}
.backslant14 {
font-variation-settings: 'slnt' 14;
}
</style>
<p class="test backslant14">varfont</p>
<p class="test slnt14">varfont</p>
<p class="test slnt14">varfont</p>
<p class="test">varfont</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Test: Variable fonts with slant axis</title>
<style>
@font-face {
font-family: "slnt test font";
src: url('resources/FontStyleTest-slnt_backslant-VF.woff2');
font-style: oblique -15deg 15deg;
}
.test {
font-family: "slnt test font";
font-size: 3em;
}
.slnt14 {
font-variation-settings: 'slnt' -14;
}
.backslant14 {
font-variation-settings: 'slnt' 14;
}
</style>
<p class="test backslant14">varfont</p>
<p class="test slnt14">varfont</p>
<p class="test slnt14">varfont</p>
<p class="test">varfont</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Test: Variable fonts with slant axis</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#descdef-font-face-font-variation-settings" />
<link rel="help" href="http://w3c.github.io/csswg-drafts/css-fonts-4/#valdef-font-style-oblique-angle-90deg-90deg" />
<link rel="match" href="slnt-backslant-variable-ref.html">
<meta name="assert"
content="For variable fonts, setting font-style to oblique or italic should apply forward and backward slant to variable axis.">
<!-- Fonts used in this test are authored by Stephen Nixon, more information in the link:
https://arrowtype.github.io/vf-slnt-test/index.html -->
<style>
@font-face {
font-family: "slnt test font";
src: url('resources/FontStyleTest-slnt_backslant-VF.woff2');
font-style: oblique -15deg 15deg;
}
.test {
font-family: "slnt test font";
font-size: 3em;
}
.backslant {
font-style: oblique -14deg;
}
.oblique {
font-style: oblique;
}
.italic {
font-style: italic;
}
</style>
<p class="test backslant">varfont</p>
<p class="test oblique">varfont</p>
<p class="test italic">varfont</p>
<p class="test">varfont</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Test: Variable fonts with slant axis</title>
<style>
@font-face {
font-family: "slnt test font";
src: url('resources/FontStyleTest-slnt-VF.woff2');
font-style: oblique 0deg 15deg;
}
.test {
font-family: "slnt test font";
font-size: 3em;
}
.slnt14 {
font-variation-settings: 'slnt' -14;
}
</style>
<p class="test slnt14">varfont</p>
<p class="test slnt14">varfont</p>
<p class="test">varfont</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Test: Variable fonts with slant axis</title>
<style>
@font-face {
font-family: "slnt test font";
src: url('resources/FontStyleTest-slnt-VF.woff2');
font-style: oblique 0deg 15deg;
}
.test {
font-family: "slnt test font";
font-size: 3em;
}
.slnt14 {
font-variation-settings: 'slnt' -14;
}
</style>
<p class="test slnt14">varfont</p>
<p class="test slnt14">varfont</p>
<p class="test">varfont</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Test: Variable fonts with slant axis</title>
<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#descdef-font-face-font-variation-settings" />
<link rel="help" href="http://w3c.github.io/csswg-drafts/css-fonts-4/#valdef-font-style-oblique-angle-90deg-90deg" />
<link rel="match" href="slnt-variable-ref.html">
<meta name="assert"
content="For variable fonts, 'oblique' and 'italic' keywords should work equivalent to 14 degrees of slant">
<!-- Fonts used in this test are authored by Stephen Nixon, more information in the link:
https://arrowtype.github.io/vf-slnt-test/index.html -->
<style>
@font-face {
font-family: "slnt test font";
src: url('resources/FontStyleTest-slnt-VF.woff2');
font-style: oblique 0deg 15deg;
}
.test {
font-family: "slnt test font";
font-size: 3em;
}
.oblique {
font-style: oblique;
}
.italic {
font-style: italic;
}
</style>
<p class="test oblique">varfont</p>
<p class="test italic">varfont</p>
<p class="test">varfont</p>
3 changes: 3 additions & 0 deletions LayoutTests/platform/glib/TestExpectations
Original file line number Diff line number Diff line change
Expand Up @@ -579,6 +579,9 @@ webkit.org/b/212300 fast/text/font-collection-2.html [ ImageOnlyFailure ]

webkit.org/b/213114 fast/flexbox/line-clamp-with-anchor-content-only.html [ ImageOnlyFailure ]

webkit.org/b/189483 imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-variable.html [ Failure ]
webkit.org/b/189483 imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-backslant-variable.html [ Failure ]

# fast/gradients are Skip in the top level Expectation. When fixing, change this to
# Pass instead of removing this line.
webkit.org/b/234606 fast/gradients/conic-gradient-alpha-unpremultiplied.html [ ImageOnlyFailure ]
Expand Down
4 changes: 4 additions & 0 deletions LayoutTests/platform/ios/TestExpectations
Original file line number Diff line number Diff line change
Expand Up @@ -2496,6 +2496,10 @@ animations/font-variations [ Pass Failure ImageOnlyFailure Timeout ]

webkit.org/b/158836 imported/w3c/web-platform-tests/encrypted-media [ Skip ]

# These tests fail which are related to browser support of slnt and ital axes in variable fonts and failing due to underlying bug
webkit.org/b/189483 imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-variable.html [ Failure ]
webkit.org/b/189483 imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-backslant-variable.html [ Failure ]

# Only Mac has implemented DictionaryLookup
fast/layers/prevent-hit-test-during-layout.html [ Skip ]

Expand Down
4 changes: 4 additions & 0 deletions LayoutTests/platform/mac/TestExpectations
Original file line number Diff line number Diff line change
Expand Up @@ -1337,6 +1337,10 @@ fast/text/system-font-japanese-synthetic-italic.html [ Pass ImageOnlyFailure ]
# we should delete the test.
fast/text/font-variations-feature-detection.html [ ImageOnlyFailure ]

# These tests fail which are related to browser support of slnt and ital axes in variable fonts and failing due to underlying bug
webkit.org/b/189483 imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-variable.html [ Failure ]
webkit.org/b/189483 imported/w3c/web-platform-tests/css/css-fonts/variations/slnt-backslant-variable.html [ Failure ]

# <rdar://problem/33731086>
media/modern-media-controls/time-labels-support/elapsed-time.html [ Skip ]

Expand Down
6 changes: 3 additions & 3 deletions Source/WebCore/platform/graphics/FontSelectionAlgorithm.h
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright (C) 2017 Apple Inc. All rights reserved.
* Copyright (C) 2017-2023 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
Expand Down Expand Up @@ -192,7 +192,7 @@ constexpr bool operator>=(FontSelectionValue a, FontSelectionValue b)

constexpr FontSelectionValue italicThreshold()
{
return FontSelectionValue { 20 };
return FontSelectionValue { 14 };
}

constexpr bool isItalic(std::optional<FontSelectionValue> fontWeight)
Expand All @@ -207,7 +207,7 @@ constexpr FontSelectionValue normalItalicValue()

constexpr FontSelectionValue italicValue()
{
return FontSelectionValue { 20 };
return FontSelectionValue { 14 };
}

constexpr FontSelectionValue boldThreshold()
Expand Down

0 comments on commit 28de25b

Please sign in to comment.