Skip to content

Commit c58b326

Browse files
rcaliman-applercaliman-apple
committed
Web Inspector: Fonts Panel: ITAL variation axis slider has value of NaN
https://bugs.webkit.org/show_bug.cgi?id=250906 Reviewed by Patrick Angle. The value of the `font-style` CSS property maps to either `ITAL` or `SLNT` font variation axes when available. `font-style: normal` should equate to `ITAL: 0`. This case wasn't handled for the `ITAL` axis. * LayoutTests/inspector/model/font-styles-conversion-expected.txt: Added. * LayoutTests/inspector/model/font-styles-conversion.html: Added. * Source/WebInspectorUI/UserInterface/Models/FontStyles.js: (WI.FontStyles.axisValueToFontPropertyValue): (WI.FontStyles.fontPropertyValueToAxisValue): * Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.js: (WI.FontVariationDetailsSectionRow): (WI.FontVariationDetailsSectionRow.prototype._getAxisResolution): Canonical link: https://commits.webkit.org/259351@main
1 parent 40faff6 commit c58b326

File tree

4 files changed

+208
-6
lines changed

4 files changed

+208
-6
lines changed

‎LayoutTests/inspector/model/font-styles-conversion-expected.txt‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
Tests for WI.FontStyles.Conversion
2+
3+
4+
== Running test suite: WI.FontStyles.Conversion
5+
-- Running test case: WI.FontStyles.Conversion.axisValueToFontPropertyValue
6+
PASS: Mapping "wdth" 100 to font-stretch: 100%
7+
PASS: Mapping "slnt" 0 to font-style: oblique 0deg
8+
PASS: Mapping "slnt" 14 to font-style: oblique 14deg
9+
PASS: Mapping "ital" 0 to font-style: normal
10+
PASS: Mapping "ital" 1 to font-style: italic
11+
PASS: Mapping "ital" 99 to font-style: italic
12+
PASS: Mapping "xxxx" 99 to xxxx: 99
13+
14+
-- Running test case: WI.FontStyles.Conversion.fontPropertyValueToAxisValue
15+
PASS: Mapping font-stretch: 100% to "wdth" 100
16+
PASS: Mapping font-stretch: 99.9% to "wdth" 99.9
17+
PASS: Mapping font-style: normal to "slnt" 0
18+
PASS: Mapping font-style: italic to "slnt" 14
19+
PASS: Mapping font-style: oblique to "slnt" 14
20+
PASS: Mapping font-style: oblique -99.9deg to "slnt" -99.9
21+
PASS: Mapping font-style: oblique to "ital" 1
22+
PASS: Mapping font-style: italic to "ital" 1
23+
PASS: Mapping font-style: oblique 0deg to "ital" 0
24+
PASS: Mapping font-style: oblique 14deg to "ital" 1
25+
PASS: Mapping font-style: oblique 99.9deg to "ital" 1
26+
PASS: Mapping xxxx: 99.9 to "xxxx" 99.9
27+

‎LayoutTests/inspector/model/font-styles-conversion.html‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
5+
<script>
6+
7+
function test()
8+
{
9+
let suite = InspectorTest.createSyncSuite("WI.FontStyles.Conversion");
10+
11+
suite.addTestCase({
12+
name: "WI.FontStyles.Conversion.axisValueToFontPropertyValue",
13+
description: "Check that font variation axis values map to appropriate font CSS properties values.",
14+
test() {
15+
const tests = [
16+
{
17+
"tag": "wdth",
18+
"property": "font-stretch",
19+
"value": 100,
20+
"expected": "100%",
21+
},
22+
{
23+
"tag": "slnt",
24+
"property": "font-style",
25+
"value": 0,
26+
"expected": "oblique 0deg",
27+
},
28+
{
29+
"tag": "slnt",
30+
"property": "font-style",
31+
"value": 14,
32+
"expected": "oblique 14deg",
33+
},
34+
{
35+
"tag": "ital",
36+
"property": "font-style",
37+
"value": 0,
38+
"expected": "normal",
39+
},
40+
{
41+
"tag": "ital",
42+
"property": "font-style",
43+
"value": 1,
44+
"expected": "italic",
45+
},
46+
{
47+
"tag": "ital",
48+
"property": "font-style",
49+
"value": 99,
50+
"expected": "italic",
51+
},
52+
{
53+
"tag": "xxxx",
54+
"property": "xxxx",
55+
"value": 99,
56+
"expected": 99,
57+
},
58+
];
59+
60+
for (let {tag, property, value, expected} of tests) {
61+
InspectorTest.expectEqual(WI.FontStyles.axisValueToFontPropertyValue(tag, value), expected, `Mapping "${tag}" ${value} to ${property}: ${expected}`);
62+
}
63+
},
64+
});
65+
66+
suite.addTestCase({
67+
name: "WI.FontStyles.Conversion.fontPropertyValueToAxisValue",
68+
description: "Check that font CSS property values map to appropriate font variation axis values.",
69+
test() {
70+
const tests = [
71+
{
72+
"tag": "wdth",
73+
"property": "font-stretch",
74+
"value": "100%",
75+
"expected": 100,
76+
},
77+
{
78+
"tag": "wdth",
79+
"property": "font-stretch",
80+
"value": "99.9%",
81+
"expected": 99.9,
82+
},
83+
{
84+
"tag": "slnt",
85+
"property": "font-style",
86+
"value": "normal",
87+
"expected": 0,
88+
},
89+
{
90+
"tag": "slnt",
91+
"property": "font-style",
92+
"value": "italic",
93+
"expected": 14,
94+
},
95+
{
96+
"tag": "slnt",
97+
"property": "font-style",
98+
"value": "oblique",
99+
"expected": 14,
100+
},
101+
{
102+
"tag": "slnt",
103+
"property": "font-style",
104+
"value": "oblique -99.9deg",
105+
"expected": -99.9,
106+
},
107+
{
108+
"tag": "ital",
109+
"property": "font-style",
110+
"value": "oblique",
111+
"expected": 1,
112+
},
113+
{
114+
"tag": "ital",
115+
"property": "font-style",
116+
"value": "italic",
117+
"expected": 1,
118+
},
119+
{
120+
"tag": "ital",
121+
"property": "font-style",
122+
"value": "oblique 0deg",
123+
"expected": 0,
124+
},
125+
{
126+
"tag": "ital",
127+
"property": "font-style",
128+
"value": "oblique 14deg",
129+
"expected": 1,
130+
},
131+
{
132+
"tag": "ital",
133+
"property": "font-style",
134+
"value": "oblique 99.9deg",
135+
"expected": 1,
136+
},
137+
{
138+
"tag": "xxxx",
139+
"property": "xxxx",
140+
"value": 99.9,
141+
"expected": 99.9,
142+
},
143+
];
144+
145+
for (let {tag, property, value, expected} of tests) {
146+
InspectorTest.expectEqual(WI.FontStyles.fontPropertyValueToAxisValue(tag, value), expected, `Mapping ${property}: ${value} to "${tag}" ${expected}`);
147+
}
148+
},
149+
});
150+
151+
suite.runTestCasesAndFinish();
152+
}
153+
</script>
154+
155+
</head>
156+
<body onload="runTest();">
157+
<p>Tests for WI.FontStyles.Conversion</p>
158+
</body>
159+
</html>

‎Source/WebInspectorUI/UserInterface/Models/FontStyles.js‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ WI.FontStyles = class FontStyles
7777
return `${value}%`;
7878
case "slnt":
7979
return `oblique ${value}deg`;
80+
case "ital":
81+
return value >= 1 ? "italic" : "normal";
8082
default:
8183
return value;
8284
}
@@ -87,15 +89,25 @@ WI.FontStyles = class FontStyles
8789
switch (tag) {
8890
case "wdth":
8991
return parseFloat(value);
92+
case "ital":
9093
case "slnt":
94+
// See: https://w3c.github.io/csswg-drafts/css-fonts/#valdef-font-style-oblique-angle--90deg-90deg
95+
const obliqueAngleDefaultValue = 14;
96+
9197
if (value === "normal")
9298
return 0;
9399

94-
if (value === "oblique")
95-
return 14;
100+
if (tag === "ital" && (value === "oblique" || value === "italic"))
101+
return 1;
102+
103+
if (tag === "slnt" && (value === "oblique" || value === "italic"))
104+
return obliqueAngleDefaultValue;
96105

97106
let degrees = value.match(/oblique (?<degrees>-?\d+(\.\d+)?)deg/)?.groups?.degrees;
98-
if (degrees)
107+
if (degrees && tag === "ital")
108+
return parseFloat(degrees) >= obliqueAngleDefaultValue ? 1 : 0; // The `ital` variation axis acts as an on/off toggle (0 = off, 1 = on).
109+
110+
if (degrees && tag === "slnt")
99111
return parseFloat(degrees);
100112

101113
console.assert(false, `Unexpected font property value associated with variation axis ${tag}`, value);

‎Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ WI.FontVariationDetailsSectionRow = class FontVariationDetailsSectionRow extends
4848
this._inputRangeElement.min = minimumValue;
4949
this._inputRangeElement.max = maximumValue;
5050
this._inputRangeElement.value = value ?? defaultValue;
51-
this._inputRangeElement.step = this._getAxisResolution(minimumValue, maximumValue);
51+
this._inputRangeElement.step = this._getAxisResolution(minimumValue, maximumValue, tag);
5252

5353
this._variationMinValueElement = this._variationRangeElement.appendChild(document.createElement("div"));
5454
this._variationMinValueElement.className = "variation-minvalue";
@@ -126,12 +126,16 @@ WI.FontVariationDetailsSectionRow = class FontVariationDetailsSectionRow extends
126126
return value.toLocaleString(undefined, options);
127127
}
128128

129-
_getAxisResolution(min, max)
129+
_getAxisResolution(min, max, tag)
130130
{
131+
// The `ital` variation axis acts as an on/off toggle (0 = off, 1 = on).
132+
if (tag === "ital" && min === 0 && max === 1)
133+
return 1;
134+
131135
let delta = max - min;
132136
if (delta <= 1)
133137
return 0.01;
134-
138+
135139
if (delta <= 10)
136140
return 0.1;
137141

0 commit comments

Comments
 (0)