- Revision
- 268157
- Author
- [email protected]
- Date
- 2020-10-07 15:41:25 -0700 (Wed, 07 Oct 2020)
Log Message
Using CSS wide keywords as a fallback for variable substitution works inconsistently.
https://bugs.webkit.org/show_bug.cgi?id=197158
Patch by Tyler Wilcock <[email protected]> on 2020-10-07
Reviewed by Darin Adler.
Source/WebCore:
Enable CSS-wide keywords to be used as variable fallbacks.
See spec-issue for further discussion:
https://github.com/w3c/csswg-drafts/issues/5325
Patch inspired by Chromium's implementation:
https://bugs.chromium.org/p/chromium/issues/detail?id=954963#c5
Tests: fast/css/variables/css-wide-keywords-in-fallback-inherited-property.html
fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property.html
* css/parser/CSSPropertyParser.cpp: Add `maybeConsumeCSSWideKeyword`
function.
(WebCore::CSSPropertyParser::parseSingleValue): Before trying to parse
the property-specific values for the input `property`, first try parsing the
CSS-wide keywords via `maybeConsumeCSSWideKeyword`.
(WebCore::CSSPropertyParser::consumeCSSWideKeyword): Refactor to use
`maybeConsumeCSSWideKeyword`.
LayoutTests:
Add tests ensuring CSS-wide keywords are functional as variable
fallbacks.
* fast/css/variables/css-wide-keywords-in-fallback-inherited-property-expected.html: Added.
* fast/css/variables/css-wide-keywords-in-fallback-inherited-property.html: Added.
* fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property-expected.html: Added.
* fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (268156 => 268157)
--- trunk/LayoutTests/ChangeLog 2020-10-07 22:29:46 UTC (rev 268156)
+++ trunk/LayoutTests/ChangeLog 2020-10-07 22:41:25 UTC (rev 268157)
@@ -1,3 +1,18 @@
+2020-10-07 Tyler Wilcock <[email protected]>
+
+ Using CSS wide keywords as a fallback for variable substitution works inconsistently.
+ https://bugs.webkit.org/show_bug.cgi?id=197158
+
+ Reviewed by Darin Adler.
+
+ Add tests ensuring CSS-wide keywords are functional as variable
+ fallbacks.
+
+ * fast/css/variables/css-wide-keywords-in-fallback-inherited-property-expected.html: Added.
+ * fast/css/variables/css-wide-keywords-in-fallback-inherited-property.html: Added.
+ * fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property-expected.html: Added.
+ * fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property.html: Added.
+
2020-10-07 Peng Liu <[email protected]>
[Media in GPU Process] Unskip some layout tests
Added: trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-inherited-property-expected.html (0 => 268157)
--- trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-inherited-property-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-inherited-property-expected.html 2020-10-07 22:41:25 UTC (rev 268157)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+ #wrapper { color: blue; }
+
+ #initial { color: initial; }
+ #inherit { color: inherit; }
+ #unset { color: unset; }
+ </style>
+</head>
+<body>
+<div id="wrapper">
+ <div id="initial">
+ This should be initial colored text via the `initial` keyword.
+ </div>
+ <div id="inherit">
+ This should be blue-colored text via the `inherit` keyword.
+ </div>
+ <div id="unset">
+ This should be blue-colored text via the `unset` keyword.
+ </div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-inherited-property.html (0 => 268157)
--- trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-inherited-property.html (rev 0)
+++ trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-inherited-property.html 2020-10-07 22:41:25 UTC (rev 268157)
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+ #wrapper { color: blue; }
+
+ #initial { color: var(--unknownVar, initial); }
+ #inherit { color: var(--unknownVar, inherit); }
+ #unset { color: var(--unknownVar, unset); }
+ </style>
+</head>
+<body>
+<div id="wrapper">
+ <div id="initial">
+ This should be initial colored text via the `initial` keyword.
+ </div>
+ <div id="inherit">
+ This should be blue-colored text via the `inherit` keyword.
+ </div>
+ <div id="unset">
+ This should be blue-colored text via the `unset` keyword.
+ </div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property-expected.html (0 => 268157)
--- trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property-expected.html 2020-10-07 22:41:25 UTC (rev 268157)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+ div {
+ border-style: solid;
+ border-width: 20px;
+ }
+ #wrapper {
+ border-color: blue;
+ height: 380px;
+ width: 600px
+ }
+ #wrapper > div {
+ height: 60px;
+ width: 520px;
+ margin: 20px;
+ }
+
+ #initial { border-color: initial; }
+ #inherit { border-color: inherit; }
+ #unset { border-color: unset; }
+ </style>
+</head>
+<body>
+<div id="wrapper">
+ <div id="initial">
+ This box should have an initial colored 20px border via the `initial` keyword.
+ </div>
+ <div id="inherit">
+ This box should have a blue-colored 20px border via the `inherit` keyword.
+ </div>
+ <div id="unset">
+ This box should have an initial colored 20px border via the `unset` keyword.
+ </div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property.html (0 => 268157)
--- trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property.html (rev 0)
+++ trunk/LayoutTests/fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property.html 2020-10-07 22:41:25 UTC (rev 268157)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+ div {
+ border-style: solid;
+ border-width: 20px;
+ }
+ #wrapper {
+ border-color: blue;
+ height: 380px;
+ width: 600px
+ }
+ #wrapper > div {
+ height: 60px;
+ width: 520px;
+ margin: 20px;
+ }
+
+ #initial { border-color: var(--unknownVar, initial); }
+ #inherit { border-color: var(--unknownVar, inherit); }
+ #unset { border-color: var(--unknownVar, unset); }
+ </style>
+</head>
+<body>
+<div id="wrapper">
+ <div id="initial">
+ This box should have an initial colored 20px border via the `initial` keyword.
+ </div>
+ <div id="inherit">
+ This box should have a blue-colored 20px border via the `inherit` keyword.
+ </div>
+ <div id="unset">
+ This box should have an initial colored 20px border via the `unset` keyword.
+ </div>
+</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (268156 => 268157)
--- trunk/Source/WebCore/ChangeLog 2020-10-07 22:29:46 UTC (rev 268156)
+++ trunk/Source/WebCore/ChangeLog 2020-10-07 22:41:25 UTC (rev 268157)
@@ -1,3 +1,29 @@
+2020-10-07 Tyler Wilcock <[email protected]>
+
+ Using CSS wide keywords as a fallback for variable substitution works inconsistently.
+ https://bugs.webkit.org/show_bug.cgi?id=197158
+
+ Reviewed by Darin Adler.
+
+ Enable CSS-wide keywords to be used as variable fallbacks.
+
+ See spec-issue for further discussion:
+ https://github.com/w3c/csswg-drafts/issues/5325
+
+ Patch inspired by Chromium's implementation:
+ https://bugs.chromium.org/p/chromium/issues/detail?id=954963#c5
+
+ Tests: fast/css/variables/css-wide-keywords-in-fallback-inherited-property.html
+ fast/css/variables/css-wide-keywords-in-fallback-non-inherited-property.html
+
+ * css/parser/CSSPropertyParser.cpp: Add `maybeConsumeCSSWideKeyword`
+ function.
+ (WebCore::CSSPropertyParser::parseSingleValue): Before trying to parse
+ the property-specific values for the input `property`, first try parsing the
+ CSS-wide keywords via `maybeConsumeCSSWideKeyword`.
+ (WebCore::CSSPropertyParser::consumeCSSWideKeyword): Refactor to use
+ `maybeConsumeCSSWideKeyword`.
+
2020-10-07 Zalan Bujtas <[email protected]>
[LFC][Integration] Use display structures (InlineContent) to provide content height and baseline used values
Modified: trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp (268156 => 268157)
--- trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2020-10-07 22:29:46 UTC (rev 268156)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp 2020-10-07 22:41:25 UTC (rev 268157)
@@ -274,9 +274,35 @@
return parseSuccess;
}
+static RefPtr<CSSValue> maybeConsumeCSSWideKeyword(CSSParserTokenRange& range)
+{
+ CSSParserTokenRange rangeCopy = range;
+ CSSValueID valueID = rangeCopy.consumeIncludingWhitespace().id();
+ if (!rangeCopy.atEnd())
+ return nullptr;
+
+ RefPtr<CSSValue> value;
+ if (valueID == CSSValueInherit)
+ value = CSSValuePool::singleton().createInheritedValue();
+ else if (valueID == CSSValueInitial)
+ value = CSSValuePool::singleton().createExplicitInitialValue();
+ else if (valueID == CSSValueUnset)
+ value = CSSValuePool::singleton().createUnsetValue();
+ else if (valueID == CSSValueRevert)
+ value = CSSValuePool::singleton().createRevertValue();
+ else
+ return nullptr;
+
+ range = rangeCopy;
+ return value;
+}
+
RefPtr<CSSValue> CSSPropertyParser::parseSingleValue(CSSPropertyID property, const CSSParserTokenRange& range, const CSSParserContext& context)
{
CSSPropertyParser parser(range, context, nullptr);
+ if (auto value = maybeConsumeCSSWideKeyword(parser.m_range))
+ return value;
+
RefPtr<CSSValue> value = parser.parseSingleValue(property);
if (!value || !parser.m_range.atEnd())
return nullptr;
@@ -339,21 +365,9 @@
bool CSSPropertyParser::consumeCSSWideKeyword(CSSPropertyID propertyID, bool important)
{
CSSParserTokenRange rangeCopy = m_range;
- CSSValueID valueID = rangeCopy.consumeIncludingWhitespace().id();
- if (!rangeCopy.atEnd())
+ auto value = maybeConsumeCSSWideKeyword(rangeCopy);
+ if (!value)
return false;
-
- RefPtr<CSSValue> value;
- if (valueID == CSSValueInherit)
- value = CSSValuePool::singleton().createInheritedValue();
- else if (valueID == CSSValueInitial)
- value = CSSValuePool::singleton().createExplicitInitialValue();
- else if (valueID == CSSValueUnset)
- value = CSSValuePool::singleton().createUnsetValue();
- else if (valueID == CSSValueRevert)
- value = CSSValuePool::singleton().createRevertValue();
- else
- return false;
const StylePropertyShorthand& shorthand = shorthandForProperty(propertyID);
if (!shorthand.length()) {
