Skip to content
Permalink
Browse files
Unprefix font-size: -webkit-xxx-large
https://bugs.webkit.org/show_bug.cgi?id=246574
rdar://101207950

Reviewed by Myles C. Maxfield.

xxx-large is now part of the spec and matches what we've implemented: https://drafts.csswg.org/css-fonts-4/#valdef-font-size-absolute-size

Make -webkit-xxx-large an alias of xxx-large at parse-time, so it's easy to remove later on.

* LayoutTests/editing/style/push-down-font-styles-mac-expected.txt:
* LayoutTests/editing/style/push-down-font-styles-mac.html:
* LayoutTests/editing/style/push-down-font-styles-win-expected.txt:
* LayoutTests/editing/style/push-down-font-styles-win.html:
* LayoutTests/fast/css/font-size-webkit-xxx-large-expected.html: Added.
* LayoutTests/fast/css/font-size-webkit-xxx-large.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/font-size-xxx-large.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/parsing/font-size-computed-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-fonts/parsing/font-size-valid-expected.txt:
* Source/WebCore/css/CSSValueKeywords.in:
* Source/WebCore/css/parser/CSSPropertyParser.cpp:
(WebCore::consumeFontSize):
* Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::CSSPropertyParserHelpers::consumeFontSizeRaw):
* Source/WebCore/editing/EditingStyle.cpp:
(WebCore::legacyFontSizeFromCSSValue):
* Source/WebCore/html/HTMLFontElement.cpp:
(WebCore::HTMLFontElement::cssValueFromFontSizeNumber):
* Source/WebCore/platform/graphics/FontCascadeDescription.h:
(WebCore::FontCascadeDescription::keywordSizeAsIdentifier const):
(WebCore::FontCascadeDescription::setKeywordSizeFromIdentifier):
* Source/WebCore/style/StyleBuilderCustom.h:
(WebCore::Style::BuilderCustom::applyValueFontSize):
* Source/WebCore/style/StyleFontSizeFunctions.h:
* Source/WebCore/style/StyleResolveForFontRaw.cpp:
(WebCore::Style::resolveForFontRaw):
* Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js:

Canonical link: https://commits.webkit.org/255602@main
  • Loading branch information
nt1m committed Oct 16, 2022
1 parent 5d192fe commit 07860fac0bbf23c58f3e2519f46cc8de480452c8
Show file tree
Hide file tree
Showing 19 changed files with 61 additions and 30 deletions.
@@ -7,9 +7,9 @@ Font size
PASS fontsize 2 on all of "hello world" yields "<font size="2">hello world</font>"
PASS fontsize 4 on all of "hello world" yields "<font size="4">hello world</font>"
PASS fontsize 5 on first word of "hello world" yields "<font size="5">hello</font> world"
PASS fontsize 3 on first word of "<font size="7">hello <div>world</div></font>" yields "hello <div style="font-size: -webkit-xxx-large;">world</div>"
PASS fontsize 3 on first word of "<font size="7"><div>hello</div><div>world</div></font>" yields "<div>hello</div><div style="font-size: -webkit-xxx-large;">world</div>"
PASS fontsize 3 on second word of "<font size="7"><div>hello</div>world</font>" yields "<div style="font-size: -webkit-xxx-large;">hello</div>world"
PASS fontsize 3 on first word of "<font size="7">hello <div>world</div></font>" yields "hello <div style="font-size: xxx-large;">world</div>"
PASS fontsize 3 on first word of "<font size="7"><div>hello</div><div>world</div></font>" yields "<div>hello</div><div style="font-size: xxx-large;">world</div>"
PASS fontsize 3 on second word of "<font size="7"><div>hello</div>world</font>" yields "<div style="font-size: xxx-large;">hello</div>world"
PASS fontsize 7 on all of "<font size="7"><div>hello</div>world</font>" yields "<font size="7"><div>hello</div>world</font>"
PASS fontsize 7 on all of "<font size="3"><div>hello</div>world</font>" yields "<div><font size="7">hello</font></div><font size="7">world</font>"
PASS fontsize 6 on all of "<font size="7"><div>hello</div>world</font>" yields "<div><font size="6">hello</font></div><font size="6">world</font>"
@@ -20,7 +20,7 @@ PASS fontsize 1 on all of "<font size="3"><div>hello</div>world</font>" yields "

Font size (with CSS)
PASS fontsize 7 on all of "<font size="7"><div>hello</div>world</font>" yields "<font size="7"><div>hello</div>world</font>"
PASS fontsize 7 on all of "<font size="3"><div>hello</div>world</font>" yields "<div><span style="font-size: -webkit-xxx-large;">hello</span></div><span style="font-size: -webkit-xxx-large;">world</span>"
PASS fontsize 7 on all of "<font size="3"><div>hello</div>world</font>" yields "<div><span style="font-size: xxx-large;">hello</span></div><span style="font-size: xxx-large;">world</span>"
PASS fontsize 6 on all of "<font size="7"><div>hello</div>world</font>" yields "<div><span style="font-size: xx-large;">hello</span></div><span style="font-size: xx-large;">world</span>"
PASS fontsize 5 on all of "<font size="7"><div>hello</div>world</font>" yields "<div><span style="font-size: x-large;">hello</span></div><span style="font-size: x-large;">world</span>"
PASS fontsize 3 on all of "<font size="7"><div>hello</div>world</font>" yields "<div>hello</div>world"
@@ -66,9 +66,9 @@
testSingleToggle("fontsize", 2, selectAll, 'hello world', '<font size="2">hello world</font>');
testSingleToggle("fontsize", 4, selectAll, 'hello world', '<font size="4">hello world</font>');
testSingleToggle("fontsize", 5, selectFirstWord, 'hello world', '<font size="5">hello</font> world');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7">hello <div>world</div></font>', 'hello <div style="font-size: -webkit-xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7"><div>hello</div><div>world</div></font>', '<div>hello</div><div style="font-size: -webkit-xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectSecondWord, '<font size="7"><div>hello</div>world</font>', '<div style="font-size: -webkit-xxx-large;">hello</div>world');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7">hello <div>world</div></font>', 'hello <div style="font-size: xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7"><div>hello</div><div>world</div></font>', '<div>hello</div><div style="font-size: xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectSecondWord, '<font size="7"><div>hello</div>world</font>', '<div style="font-size: xxx-large;">hello</div>world');

testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="7">hello</font></div><font size="7">world</font>');
@@ -82,7 +82,7 @@
debug("Font size (with CSS)");
styleWithCSS = true;
testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: -webkit-xxx-large;">hello</span></div><span style="font-size: -webkit-xxx-large;">world</span>');
testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: xxx-large;">hello</span></div><span style="font-size: xxx-large;">world</span>');
testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: xx-large;">hello</span></div><span style="font-size: xx-large;">world</span>');
testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: x-large;">hello</span></div><span style="font-size: x-large;">world</span>');
testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
@@ -7,9 +7,9 @@ Font size
PASS fontsize 2 on all of "hello world" yields "<font size="2">hello world</font>"
PASS fontsize 4 on all of "hello world" yields "<font size="4">hello world</font>"
PASS fontsize 5 on first word of "hello world" yields "<font size="5">hello </font>world"
PASS fontsize 3 on first word of "<font size="7">hello <div>world</div></font>" yields "hello <div style="font-size: -webkit-xxx-large;">world</div>"
PASS fontsize 3 on first word of "<font size="7"><div>hello</div><div>world</div></font>" yields "<div>hello</div><div style="font-size: -webkit-xxx-large;">world</div>"
PASS fontsize 3 on second word of "<font size="7"><div>hello</div>world</font>" yields "<div style="font-size: -webkit-xxx-large;">hello</div>world"
PASS fontsize 3 on first word of "<font size="7">hello <div>world</div></font>" yields "hello <div style="font-size: xxx-large;">world</div>"
PASS fontsize 3 on first word of "<font size="7"><div>hello</div><div>world</div></font>" yields "<div>hello</div><div style="font-size: xxx-large;">world</div>"
PASS fontsize 3 on second word of "<font size="7"><div>hello</div>world</font>" yields "<div style="font-size: xxx-large;">hello</div>world"
PASS fontsize 7 on all of "<font size="7"><div>hello</div>world</font>" yields "<font size="7"><div>hello</div>world</font>"
PASS fontsize 7 on all of "<font size="3"><div>hello</div>world</font>" yields "<div><font size="7">hello</font></div><font size="7">world</font>"
PASS fontsize 6 on all of "<font size="7"><div>hello</div>world</font>" yields "<div><font size="6">hello</font></div><font size="6">world</font>"
@@ -20,7 +20,7 @@ PASS fontsize 1 on all of "<font size="3"><div>hello</div>world</font>" yields "

Font size (with CSS)
PASS fontsize 7 on all of "<font size="7"><div>hello</div>world</font>" yields "<font size="7"><div>hello</div>world</font>"
PASS fontsize 7 on all of "<font size="3"><div>hello</div>world</font>" yields "<div><span style="font-size: -webkit-xxx-large;">hello</span></div><span style="font-size: -webkit-xxx-large;">world</span>"
PASS fontsize 7 on all of "<font size="3"><div>hello</div>world</font>" yields "<div><span style="font-size: xxx-large;">hello</span></div><span style="font-size: xxx-large;">world</span>"
PASS fontsize 6 on all of "<font size="7"><div>hello</div>world</font>" yields "<div><span style="font-size: xx-large;">hello</span></div><span style="font-size: xx-large;">world</span>"
PASS fontsize 5 on all of "<font size="7"><div>hello</div>world</font>" yields "<div><span style="font-size: x-large;">hello</span></div><span style="font-size: x-large;">world</span>"
PASS fontsize 3 on all of "<font size="7"><div>hello</div>world</font>" yields "<div>hello</div>world"
@@ -66,9 +66,9 @@
testSingleToggle("fontsize", 2, selectAll, 'hello world', '<font size="2">hello world</font>');
testSingleToggle("fontsize", 4, selectAll, 'hello world', '<font size="4">hello world</font>');
testSingleToggle("fontsize", 5, selectFirstWord, 'hello world', '<font size="5">hello </font>world');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7">hello <div>world</div></font>', 'hello <div style="font-size: -webkit-xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7"><div>hello</div><div>world</div></font>', '<div>hello</div><div style="font-size: -webkit-xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectSecondWord, '<font size="7"><div>hello</div>world</font>', '<div style="font-size: -webkit-xxx-large;">hello</div>world');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7">hello <div>world</div></font>', 'hello <div style="font-size: xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectFirstWord, '<font size="7"><div>hello</div><div>world</div></font>', '<div>hello</div><div style="font-size: xxx-large;">world</div>');
testSingleToggle("fontsize", 3, selectSecondWord, '<font size="7"><div>hello</div>world</font>', '<div style="font-size: xxx-large;">hello</div>world');

testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><font size="7">hello</font></div><font size="7">world</font>');
@@ -82,7 +82,7 @@
debug("Font size (with CSS)");
styleWithCSS = true;
testSingleToggle("fontsize", 7, selectAll, '<font size="7"><div>hello</div>world</font>', '<font size="7"><div>hello</div>world</font>');
testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: -webkit-xxx-large;">hello</span></div><span style="font-size: -webkit-xxx-large;">world</span>');
testSingleToggle("fontsize", 7, selectAll, '<font size="3"><div>hello</div>world</font>', '<div><span style="font-size: xxx-large;">hello</span></div><span style="font-size: xxx-large;">world</span>');
testSingleToggle("fontsize", 6, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: xx-large;">hello</span></div><span style="font-size: xx-large;">world</span>');
testSingleToggle("fontsize", 5, selectAll, '<font size="7"><div>hello</div>world</font>', '<div><span style="font-size: x-large;">hello</span></div><span style="font-size: x-large;">world</span>');
testSingleToggle("fontsize", 3, selectAll, '<font size="7"><div>hello</div>world</font>', '<div>hello</div>world');
@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<p>Computed style is: 48px</p>
<p>Specified style is: xxx-large</p>
<span id="rendered" style="font-size: xxx-large">Rendering result</span>
</html>
@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<title>-webkit-xxx-large is an alias of xxx-large</title>
<p>Computed style is: <span id="computed"></span></p>
<p>Specified style is: <span id="specified"></span></p>
<span id="rendered" style="font-size: -webkit-xxx-large">Rendering result</span>
<script>
computed.textContent = getComputedStyle(rendered).fontSize;
specified.textContent = rendered.style.fontSize;
</script>
</html>
@@ -8,4 +8,4 @@
<link rel="match" href="font-size-xxx-large-ref.html">
<body>
<p>Test passes if the line below is identical, with matching font size.</p>
<span style="font-size: -webkit-xxx-large">Foo</span>
<span style="font-size: xxx-large">Foo</span>
@@ -19,5 +19,5 @@ PASS <font size="3"> is font-size: medium
PASS <font size="4"> is font-size: large
PASS <font size="5"> is font-size: x-large
PASS <font size="6"> is font-size: xx-large
FAIL <font size="7"> is font-size: xxx-large assert_equals: expected "48px" but got "32px"
PASS <font size="7"> is font-size: xxx-large

@@ -6,7 +6,7 @@ PASS e.style['font-size'] = "medium" should set the property value
PASS e.style['font-size'] = "large" should set the property value
PASS e.style['font-size'] = "x-large" should set the property value
PASS e.style['font-size'] = "xx-large" should set the property value
FAIL e.style['font-size'] = "xxx-large" should set the property value assert_not_equals: property should be set got disallowed value ""
PASS e.style['font-size'] = "xxx-large" should set the property value
PASS e.style['font-size'] = "larger" should set the property value
PASS e.style['font-size'] = "smaller" should set the property value
PASS e.style['font-size'] = "10px" should set the property value
@@ -146,10 +146,11 @@ medium
large
x-large
xx-large
-webkit-xxx-large
xxx-large
-webkit-ruby-text
smaller
larger
-webkit-xxx-large

//
// CSS_PROP_FONT_STRETCH:
@@ -1156,6 +1156,12 @@ static RefPtr<CSSValue> consumeTextSizeAdjust(CSSParserTokenRange& range, CSSPar

static RefPtr<CSSValue> consumeFontSize(CSSParserTokenRange& range, CSSParserMode cssParserMode, UnitlessQuirk unitless = UnitlessQuirk::Forbid)
{
// -webkit-xxx-large is a parse-time alias.
if (range.peek().id() == CSSValueWebkitXxxLarge) {
consumeIdent(range);
return CSSValuePool::singleton().createValue(CSSValueXxxLarge);
}

if (range.peek().id() >= CSSValueXxSmall && range.peek().id() <= CSSValueLarger)
return consumeIdent(range);
return consumeLengthOrPercent(range, cssParserMode, ValueRange::NonNegative, unitless);
@@ -4557,6 +4557,13 @@ std::optional<Vector<FontFamilyRaw>> consumeFontFamilyRaw(CSSParserTokenRange& r

std::optional<FontSizeRaw> consumeFontSizeRaw(CSSParserTokenRange& range, CSSParserMode parserMode, UnitlessQuirk unitless)
{
// -webkit-xxx-large is a parse-time alias.
if (range.peek().id() == CSSValueWebkitXxxLarge) {
if (auto ident = consumeIdentRaw(range); ident && ident == CSSValueWebkitXxxLarge)
return { CSSValueXxxLarge };
return std::nullopt;
}

if (range.peek().id() >= CSSValueXxSmall && range.peek().id() <= CSSValueLarger) {
if (auto ident = consumeIdentRaw(range))
return { *ident };
@@ -1945,7 +1945,7 @@ int legacyFontSizeFromCSSValue(Document& document, CSSPrimitiveValue* value, boo
return 0;
}

if (CSSValueXSmall <= value->valueID() && value->valueID() <= CSSValueWebkitXxxLarge)
if (CSSValueXSmall <= value->valueID() && value->valueID() <= CSSValueXxxLarge)
return value->valueID() - CSSValueXSmall + 1;

return 0;
@@ -167,7 +167,7 @@ bool HTMLFontElement::cssValueFromFontSizeNumber(const String& s, CSSValueID& si
size = CSSValueXxLarge;
break;
case 7:
size = CSSValueWebkitXxxLarge;
size = CSSValueXxxLarge;
break;
default:
ASSERT_NOT_REACHED();
@@ -79,7 +79,7 @@ class FontCascadeDescription : public FontDescription {
CSSValueID keywordSizeAsIdentifier() const
{
CSSValueID identifier = m_keywordSize ? static_cast<CSSValueID>(CSSValueXxSmall + m_keywordSize - 1) : CSSValueInvalid;
ASSERT(identifier == CSSValueInvalid || (identifier >= CSSValueXxSmall && identifier <= CSSValueWebkitXxxLarge));
ASSERT(identifier == CSSValueInvalid || (identifier >= CSSValueXxSmall && identifier <= CSSValueXxxLarge));
return identifier;
}
FontSmoothingMode fontSmoothing() const { return static_cast<FontSmoothingMode>(m_fontSmoothing); }
@@ -99,8 +99,8 @@ class FontCascadeDescription : public FontDescription {
}
void setKeywordSizeFromIdentifier(CSSValueID identifier)
{
ASSERT(!identifier || (identifier >= CSSValueXxSmall && identifier <= CSSValueWebkitXxxLarge));
static_assert(CSSValueWebkitXxxLarge - CSSValueXxSmall + 1 == 8, "Maximum keyword size should be 8.");
ASSERT(!identifier || (identifier >= CSSValueXxSmall && identifier <= CSSValueXxxLarge));
static_assert(CSSValueXxxLarge - CSSValueXxSmall + 1 == 8, "Maximum keyword size should be 8.");
setKeywordSize(identifier ? identifier - CSSValueXxSmall + 1 : 0);
}
void setFontSmoothing(FontSmoothingMode smoothing) { m_fontSmoothing = static_cast<unsigned>(smoothing); }
@@ -1873,7 +1873,7 @@ inline void BuilderCustom::applyValueFontSize(BuilderState& builderState, CSSVal
case CSSValueLarge:
case CSSValueXLarge:
case CSSValueXxLarge:
case CSSValueWebkitXxxLarge:
case CSSValueXxxLarge:
size = Style::fontSizeForKeyword(ident, fontDescription.useFixedDefaultSize(), builderState.document());
fontDescription.setKeywordSizeFromIdentifier(ident);
break;
@@ -40,7 +40,7 @@ float computedFontSizeFromSpecifiedSize(float specifiedSize, bool isAbsoluteSize
float computedFontSizeFromSpecifiedSize(float specifiedSize, bool isAbsoluteSize, bool useSVGZoomRules, const RenderStyle*, const Document&);
float computedFontSizeFromSpecifiedSizeForSVGInlineText(float specifiedSize, bool isAbsoluteSize, float zoomFactor, const Document&);

// Given a CSS keyword id in the range (CSSValueXxSmall to CSSValueWebkitXxxLarge), this function will return
// Given a CSS keyword id in the range (CSSValueXxSmall to CSSValueXxxLarge), this function will return
// the correct font size scaled relative to the user's default (medium).
float fontSizeForKeyword(unsigned keywordID, bool shouldUseFixedDefaultSize, const Settings::Values&, bool inQuirksMode = false);
float fontSizeForKeyword(unsigned keywordID, bool shouldUseFixedDefaultSize, const Document&);
@@ -188,7 +188,7 @@ std::optional<FontCascade> resolveForFontRaw(const FontRaw& fontRaw, FontCascade
case CSSValueLarge:
case CSSValueXLarge:
case CSSValueXxLarge:
case CSSValueWebkitXxxLarge:
case CSSValueXxxLarge:
fontDescription.setKeywordSizeFromIdentifier(ident);
return Style::fontSizeForKeyword(ident, fontDescription.useFixedDefaultSize(), context.settingsValues());
case CSSValueLarger:
@@ -625,7 +625,7 @@ WI.CSSKeywordCompletions._propertyKeywordMap = {
"caption", "icon", "menu", "message-box", "small-caption", "-webkit-mini-control", "-webkit-small-control",
"-webkit-control", "status-bar", "italic", "oblique", "small-caps", "normal", "bold", "bolder", "lighter",
"100", "200", "300", "400", "500", "600", "700", "800", "900", "xx-small", "x-small", "small", "medium",
"large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger", "serif", "sans-serif", "cursive",
"large", "x-large", "xx-large", "xxx-large", "smaller", "larger", "serif", "sans-serif", "cursive",
"fantasy", "monospace", "-webkit-body", "-webkit-pictograph", "-apple-system",
"-apple-system-headline", "-apple-system-body", "-apple-system-subheadline", "-apple-system-footnote",
"-apple-system-caption1", "-apple-system-caption2", "-apple-system-short-headline", "-apple-system-short-body",
@@ -743,7 +743,7 @@ WI.CSSKeywordCompletions._propertyKeywordMap = {
"none", "hidden", "inset", "groove", "ridge", "outset", "dotted", "dashed", "solid", "double"
],
"font-size": [
"xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "-webkit-xxx-large", "smaller", "larger"
"xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "smaller", "larger"
],
"font-variant": [
"small-caps", "normal"

0 comments on commit 07860fa

Please sign in to comment.