nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/LayoutTests/fast/css/parsing-relative-color-synt...

562 lines
63 KiB
Plaintext
Raw Permalink Normal View History

Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
Test the parsing of CSS Color 5 Relative Color Syntax.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
rgb(from ...)
PASS computedStyle("background-color", "rgb(from rebeccapurple r g b)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g b / alpha)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g b / alpha)") is "rgba(26, 51, 77, 0.4)"
PASS computedStyle("background-color", "rgb(from hsl(120deg 20% 50% / .5) r g b / alpha)") is "rgba(102, 153, 102, 0.5)"
PASS computedStyle("background-color", "rgb(from rgb(from rebeccapurple r g b) r g b)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "rgb(from color(display-p3 0 1 0) r g b / alpha)") is "rgb(0, 255, 0)"
PASS computedStyle("background-color", "rgb(from rebeccapurple 0 0 0)") is "rgb(0, 0, 0)"
PASS computedStyle("background-color", "rgb(from rebeccapurple 0 0 0 / 0)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "rgb(from rebeccapurple 0 g b / alpha)") is "rgb(0, 51, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r 0 b / alpha)") is "rgb(102, 0, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g 0 / alpha)") is "rgb(102, 51, 0)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g b / 0)") is "rgba(102, 51, 153, 0)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) 0 g b / alpha)") is "rgba(0, 51, 77, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r 0 b / alpha)") is "rgba(26, 0, 77, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g 0 / alpha)") is "rgba(26, 51, 0, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g b / 0)") is "rgba(26, 51, 77, 0)"
PASS computedStyle("background-color", "rgb(from rebeccapurple 25 g b / alpha)") is "rgb(25, 51, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r 25 b / alpha)") is "rgb(102, 25, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g 25 / alpha)") is "rgb(102, 51, 25)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g b / .25)") is "rgba(102, 51, 153, 0.25)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) 25 g b / alpha)") is "rgba(25, 51, 77, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r 25 b / alpha)") is "rgba(26, 25, 77, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g 25 / alpha)") is "rgba(26, 51, 25, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g b / .25)") is "rgba(26, 51, 77, 0.25)"
PASS computedStyle("background-color", "rgb(from rebeccapurple 25% g b / alpha)") is "rgb(64, 51, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r 25% b / alpha)") is "rgb(102, 64, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g 25% / alpha)") is "rgb(102, 51, 64)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g b / 25%)") is "rgba(102, 51, 153, 0.25)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) 25% g b / alpha)") is "rgba(64, 51, 77, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r 25% b / alpha)") is "rgba(26, 64, 77, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g 25% / alpha)") is "rgba(26, 51, 64, 0.4)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g b / 25%)") is "rgba(26, 51, 77, 0.25)"
PASS computedStyle("background-color", "rgb(from rebeccapurple 25 g b / 25%)") is "rgba(25, 51, 153, 0.25)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r 25 b / 25%)") is "rgba(102, 25, 153, 0.25)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r g 25 / 25%)") is "rgba(102, 51, 25, 0.25)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) 25 g b / 25%)") is "rgba(25, 51, 77, 0.25)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r 25 b / 25%)") is "rgba(26, 25, 77, 0.25)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r g 25 / 25%)") is "rgba(26, 51, 25, 0.25)"
Support calc() on components inside relative color syntax colors https://bugs.webkit.org/show_bug.cgi?id=226272 Reviewed by Darin Adler. Source/WebCore: Added new and updated test cases to fast/css/parsing-relative-color-syntax.html. Updates support for the CSS Color 5 "Relative Color Syntax" to support both calc() on components and component permutations within the syntax. This allows for things like: background: lch(from var(--primary-color) 60% calc(c * 0.8) h); or background: lch(from rebeccapurple g b r); To make this work, the calc() infrastructure now supports passing a CSSCalcSymbolTable which allows the logic in the parser to lookup unknown identifiers when parsing a value. The relative color syntax parsers can then build an appropriate CSSCalcSymbolTable filled with the components of the origin color. Since these calc() values are not serialized, this can all happen in the parser, but if we to be able serialize them in the future, CSSCalcPrimitiveValueNode could be updated to store the symbol name in addition to storing the value and type (or we could we could add a new node for it). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/calc/CSSCalcSymbolTable.cpp: Added. * css/calc/CSSCalcSymbolTable.h: Added. Add CSSCalcSymbolTable which contains a mapping from CSSValueID to CSSUnitType/double pairs. * css/calc/CSSCalcExpressionNodeParser.cpp: (WebCore::CSSCalcExpressionNodeParser::parseValue): When trying to construct a value node, if the token is a identifier, use the new symbol table to look up a type/value to use instead. Use a switch to make things a bit more clear that differentiation is being done based on token type. * css/calc/CSSCalcExpressionNodeParser.h: Add reference to a CSSCalcSymbolTable to the parser. The parser should only ever be used on the stack, so this works well and allows us to avoid copying the table. * css/calc/CSSCalcValue.cpp: (WebCore::CSSCalcValue::create): * css/calc/CSSCalcValue.h: Pass the CSSCalcSymbolTable to the parser if one is provided. An overload was used to avoid #including CSSCalcSymbolTable.h in the header just to add a default value. * css/makevalues.pl: Give a concrete base of uint16_t to allow it to be forward declared and add DefaultHash and HashTraits to allow it to be used with HashTable. These match the definition of CSSPropertyID. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::CalcParser::CalcParser): (WebCore::CSSPropertyParserHelpers::consumeNumberRaw): (WebCore::CSSPropertyParserHelpers::consumePercentWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleRaw): (WebCore::CSSPropertyParserHelpers::consumeAngleWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleOrPercent): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrPercentOrIdentNormalizedForRelativeRGB): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::extractChannelValue): Deleted. (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): Deleted. Rework relative color syntax parsing to allow permutation of channel symbols and use of the calc() symbol table support to allow passing in the channels. This makes the relatative color syntax variants much closer to the normal variants (with the exception of passing the symbol table) and a subsequent change will attempt to merge them further. LayoutTests: Updated test and results for update support including calc() and compoment permutation. * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278304 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-01 13:50:16 +00:00
PASS computedStyle("background-color", "rgb(from rebeccapurple g b r)") is "rgb(51, 153, 102)"
PASS computedStyle("background-color", "rgb(from rebeccapurple b alpha r / g)") is "rgba(153, 255, 102, 0.2)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r r r / r)") is "rgba(102, 102, 102, 0.4)"
PASS computedStyle("background-color", "rgb(from rebeccapurple alpha alpha alpha / alpha)") is "rgb(255, 255, 255)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) g b r)") is "rgb(51, 77, 26)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) b alpha r / g)") is "rgba(77, 102, 26, 0.2)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r r r / r)") is "rgba(26, 26, 26, 0.1)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)") is "rgba(102, 102, 102, 0.4)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r 10% 10)") is "rgb(102, 26, 10)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r 10 10%)") is "rgb(102, 10, 26)"
PASS computedStyle("background-color", "rgb(from rebeccapurple 0% 10 10)") is "rgb(0, 10, 10)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r 10% 10)") is "rgb(26, 26, 10)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) r 10 10%)") is "rgb(26, 10, 26)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) 0% 10 10)") is "rgb(0, 10, 10)"
PASS computedStyle("background-color", "rgb(from rebeccapurple calc(r) calc(g) calc(b))") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r calc(g * .5) 10)") is "rgb(102, 26, 10)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r calc(b * .5) 10)") is "rgb(102, 77, 10)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r calc(b * .5 + g * .5) 10)") is "rgb(102, 102, 10)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)") is "rgb(102, 51, 10)"
PASS computedStyle("background-color", "rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)") is "rgb(102, 51, 10)"
PASS computedStyle("background-color", "rgb(from rgb(10%, 20%, 30%, 40%) calc(r) calc(g) calc(b) / calc(alpha))") is "rgba(26, 51, 77, 0.4)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS computedStyle("background-color", "rgb(from rebeccapurple red g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "rgb(from rebeccapurple l g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "rgb(from rebeccapurple h g b)") is "rgba(0, 0, 0, 0)"
hsl(from ...)
PASS computedStyle("background-color", "hsl(from rebeccapurple h s l)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h s l / alpha)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h s l / alpha)") is "rgba(26, 51, 77, 0.4)"
PASS computedStyle("background-color", "hsl(from hsl(120deg 20% 50% / .5) h s l / alpha)") is "rgba(102, 153, 102, 0.5)"
PASS computedStyle("background-color", "hsl(from hsl(from rebeccapurple h s l) h s l)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hsl(from color(display-p3 0 1 0) h s l / alpha)") is "rgb(0, 255, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 0 0% 0%)") is "rgb(0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 0deg 0% 0%)") is "rgb(0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 0 0% 0% / 0)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 0deg 0% 0% / 0)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 0 s l / alpha)") is "rgb(153, 51, 51)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 0deg s l / alpha)") is "rgb(153, 51, 51)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h 0% l / alpha)") is "rgb(102, 102, 102)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h s 0% / alpha)") is "rgb(0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h s l / 0)") is "rgba(102, 51, 153, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) 0 s l / alpha)") is "rgba(77, 26, 26, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) 0deg s l / alpha)") is "rgba(77, 26, 26, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h 0% l / alpha)") is "rgba(52, 52, 52, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h s 0% / alpha)") is "rgba(0, 0, 0, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h s l / 0)") is "rgba(26, 51, 77, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 25 s l / alpha)") is "rgb(153, 94, 51)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 25deg s l / alpha)") is "rgb(153, 94, 51)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h 25% l / alpha)") is "rgb(102, 77, 128)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h s 25% / alpha)") is "rgb(64, 32, 96)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h s l / .25)") is "rgba(102, 51, 153, 0.25)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) 25 s l / alpha)") is "rgba(77, 47, 26, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) 25deg s l / alpha)") is "rgba(77, 47, 26, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h 25% l / alpha)") is "rgba(39, 51, 64, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h s 25% / alpha)") is "rgba(32, 63, 95, 0.4)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h s l / .25)") is "rgba(26, 51, 77, 0.25)"
Support calc() on components inside relative color syntax colors https://bugs.webkit.org/show_bug.cgi?id=226272 Reviewed by Darin Adler. Source/WebCore: Added new and updated test cases to fast/css/parsing-relative-color-syntax.html. Updates support for the CSS Color 5 "Relative Color Syntax" to support both calc() on components and component permutations within the syntax. This allows for things like: background: lch(from var(--primary-color) 60% calc(c * 0.8) h); or background: lch(from rebeccapurple g b r); To make this work, the calc() infrastructure now supports passing a CSSCalcSymbolTable which allows the logic in the parser to lookup unknown identifiers when parsing a value. The relative color syntax parsers can then build an appropriate CSSCalcSymbolTable filled with the components of the origin color. Since these calc() values are not serialized, this can all happen in the parser, but if we to be able serialize them in the future, CSSCalcPrimitiveValueNode could be updated to store the symbol name in addition to storing the value and type (or we could we could add a new node for it). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/calc/CSSCalcSymbolTable.cpp: Added. * css/calc/CSSCalcSymbolTable.h: Added. Add CSSCalcSymbolTable which contains a mapping from CSSValueID to CSSUnitType/double pairs. * css/calc/CSSCalcExpressionNodeParser.cpp: (WebCore::CSSCalcExpressionNodeParser::parseValue): When trying to construct a value node, if the token is a identifier, use the new symbol table to look up a type/value to use instead. Use a switch to make things a bit more clear that differentiation is being done based on token type. * css/calc/CSSCalcExpressionNodeParser.h: Add reference to a CSSCalcSymbolTable to the parser. The parser should only ever be used on the stack, so this works well and allows us to avoid copying the table. * css/calc/CSSCalcValue.cpp: (WebCore::CSSCalcValue::create): * css/calc/CSSCalcValue.h: Pass the CSSCalcSymbolTable to the parser if one is provided. An overload was used to avoid #including CSSCalcSymbolTable.h in the header just to add a default value. * css/makevalues.pl: Give a concrete base of uint16_t to allow it to be forward declared and add DefaultHash and HashTraits to allow it to be used with HashTable. These match the definition of CSSPropertyID. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::CalcParser::CalcParser): (WebCore::CSSPropertyParserHelpers::consumeNumberRaw): (WebCore::CSSPropertyParserHelpers::consumePercentWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleRaw): (WebCore::CSSPropertyParserHelpers::consumeAngleWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleOrPercent): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrPercentOrIdentNormalizedForRelativeRGB): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::extractChannelValue): Deleted. (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): Deleted. Rework relative color syntax parsing to allow permutation of channel symbols and use of the calc() symbol table support to allow passing in the channels. This makes the relatative color syntax variants much closer to the normal variants (with the exception of passing the symbol table) and a subsequent change will attempt to merge them further. LayoutTests: Updated test and results for update support including calc() and compoment permutation. * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278304 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-01 13:50:16 +00:00
PASS computedStyle("background-color", "hsl(from rebeccapurple h l s)") is "rgb(128, 77, 179)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h alpha l / s)") is "rgba(102, 0, 204, 0.5)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h l l / l)") is "rgba(102, 61, 143, 0.4)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h alpha alpha / alpha)") is "rgb(255, 255, 255)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h l s)") is "rgb(101, 126, 152)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h alpha l / s)") is "rgba(31, 51, 72, 0.494)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h l l / l)") is "rgba(41, 51, 62, 0.204)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h alpha alpha / alpha)") is "rgba(61, 101, 143, 0.4)"
PASS computedStyle("background-color", "hsl(from rebeccapurple s h l)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple s s s / s)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h h h / h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) s h l)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) s s s / s)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h h h / h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple calc(h) calc(s) calc(l))") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) calc(h) calc(s) calc(l) / calc(alpha))") is "rgba(26, 51, 77, 0.4)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS computedStyle("background-color", "hsl(from rebeccapurple h 10% 10)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h 10 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple 10% s l)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h 10% 10)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) h 10 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rgb(10%, 20%, 30%, 40%) 10% s l)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple hue s l)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple x s l)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hsl(from rebeccapurple h g b)") is "rgba(0, 0, 0, 0)"
hwb(from ...)
PASS computedStyle("background-color", "hwb(from rebeccapurple h w b)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h w b / alpha)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h w b / alpha)") is "rgba(26, 51, 77, 0.4)"
PASS computedStyle("background-color", "hwb(from hsl(120deg 20% 50% / .5) h w b / alpha)") is "rgba(102, 153, 102, 0.5)"
PASS computedStyle("background-color", "hwb(from hwb(from rebeccapurple h w b) h w b)") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hwb(from color(display-p3 0 1 0) h w b / alpha)") is "rgb(0, 255, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 0 0% 0%)") is "rgb(255, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 0deg 0% 0%)") is "rgb(255, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 0 0% 0% / 0)") is "rgba(255, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 0deg 0% 0% / 0)") is "rgba(255, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 0 w b / alpha)") is "rgb(153, 51, 51)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 0deg w b / alpha)") is "rgb(153, 51, 51)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h 0% b / alpha)") is "rgb(77, 0, 153)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h w 0% / alpha)") is "rgb(153, 51, 255)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h w b / 0)") is "rgba(102, 51, 153, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) 0 w b / alpha)") is "rgba(77, 26, 26, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) 0deg w b / alpha)") is "rgba(77, 26, 26, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h 0% b / alpha)") is "rgba(0, 38, 77, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h w 0% / alpha)") is "rgba(26, 138, 255, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h w b / 0)") is "rgba(26, 51, 77, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 25 w b / alpha)") is "rgb(153, 94, 51)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 25deg w b / alpha)") is "rgb(153, 94, 51)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h 25% b / alpha)") is "rgb(108, 64, 153)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h w 25% / alpha)") is "rgb(121, 51, 191)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h w b / .25)") is "rgba(102, 51, 153, 0.25)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) 25 w b / alpha)") is "rgba(77, 47, 26, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) 25deg w b / alpha)") is "rgba(77, 47, 26, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h 25% b / alpha)") is "rgba(64, 70, 77, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h w 25% / alpha)") is "rgba(26, 107, 191, 0.4)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h w b / .25)") is "rgba(26, 51, 77, 0.25)"
Support calc() on components inside relative color syntax colors https://bugs.webkit.org/show_bug.cgi?id=226272 Reviewed by Darin Adler. Source/WebCore: Added new and updated test cases to fast/css/parsing-relative-color-syntax.html. Updates support for the CSS Color 5 "Relative Color Syntax" to support both calc() on components and component permutations within the syntax. This allows for things like: background: lch(from var(--primary-color) 60% calc(c * 0.8) h); or background: lch(from rebeccapurple g b r); To make this work, the calc() infrastructure now supports passing a CSSCalcSymbolTable which allows the logic in the parser to lookup unknown identifiers when parsing a value. The relative color syntax parsers can then build an appropriate CSSCalcSymbolTable filled with the components of the origin color. Since these calc() values are not serialized, this can all happen in the parser, but if we to be able serialize them in the future, CSSCalcPrimitiveValueNode could be updated to store the symbol name in addition to storing the value and type (or we could we could add a new node for it). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/calc/CSSCalcSymbolTable.cpp: Added. * css/calc/CSSCalcSymbolTable.h: Added. Add CSSCalcSymbolTable which contains a mapping from CSSValueID to CSSUnitType/double pairs. * css/calc/CSSCalcExpressionNodeParser.cpp: (WebCore::CSSCalcExpressionNodeParser::parseValue): When trying to construct a value node, if the token is a identifier, use the new symbol table to look up a type/value to use instead. Use a switch to make things a bit more clear that differentiation is being done based on token type. * css/calc/CSSCalcExpressionNodeParser.h: Add reference to a CSSCalcSymbolTable to the parser. The parser should only ever be used on the stack, so this works well and allows us to avoid copying the table. * css/calc/CSSCalcValue.cpp: (WebCore::CSSCalcValue::create): * css/calc/CSSCalcValue.h: Pass the CSSCalcSymbolTable to the parser if one is provided. An overload was used to avoid #including CSSCalcSymbolTable.h in the header just to add a default value. * css/makevalues.pl: Give a concrete base of uint16_t to allow it to be forward declared and add DefaultHash and HashTraits to allow it to be used with HashTable. These match the definition of CSSPropertyID. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::CalcParser::CalcParser): (WebCore::CSSPropertyParserHelpers::consumeNumberRaw): (WebCore::CSSPropertyParserHelpers::consumePercentWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleRaw): (WebCore::CSSPropertyParserHelpers::consumeAngleWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleOrPercent): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrPercentOrIdentNormalizedForRelativeRGB): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::extractChannelValue): Deleted. (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): Deleted. Rework relative color syntax parsing to allow permutation of channel symbols and use of the calc() symbol table support to allow passing in the channels. This makes the relatative color syntax variants much closer to the normal variants (with the exception of passing the symbol table) and a subsequent change will attempt to merge them further. LayoutTests: Updated test and results for update support including calc() and compoment permutation. * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278304 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-01 13:50:16 +00:00
PASS computedStyle("background-color", "hwb(from rebeccapurple h b w)") is "rgb(153, 102, 204)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h alpha w / b)") is "rgba(213, 213, 213, 0.4)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h w w / w)") is "rgba(128, 51, 204, 0.2)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h alpha alpha / alpha)") is "rgb(128, 128, 128)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h b w)") is "rgb(178, 203, 229)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h alpha w / b)") is "rgba(102, 164, 229, 0.698)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h w w / w)") is "rgba(26, 126, 229, 0.1)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h alpha alpha / alpha)") is "rgba(102, 127, 153, 0.4)"
PASS computedStyle("background-color", "hwb(from rebeccapurple w h b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple b b b / b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h h h / h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) w b h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) b b b / b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h h h / h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple calc(h) calc(w) calc(b))") is "rgb(102, 51, 153)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) calc(h) calc(w) calc(b) / calc(alpha))") is "rgba(26, 51, 77, 0.4)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS computedStyle("background-color", "hwb(from rebeccapurple h 10% 10)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h 10 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple 10% w b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h 10% 10)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) h 10 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rgb(10%, 20%, 30%, 40%) 10% w b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple hue w b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple x w b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "hwb(from rebeccapurple h g b)") is "rgba(0, 0, 0, 0)"
lab(from ...)
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l a b)") is "lab(25% 20 50)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l a b / alpha)") is "lab(25% 20 50)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l a b / alpha)") is "lab(25% 20 50 / 0.4)"
PASS computedStyle("background-color", "lab(from lab(from lab(25% 20 50) l a b) l a b)") is "lab(25% 20 50)"
PASS computedStyle("background-color", "lab(from color(display-p3 0 0 0) l a b / alpha)") is "lab(0% 0 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) 0% 0 0)") is "lab(0% 0 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) 0% 0 0 / 0)") is "lab(0% 0 0 / 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) 0% a b / alpha)") is "lab(0% 20 50)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l 0 b / alpha)") is "lab(25% 0 50)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l a 0 / alpha)") is "lab(25% 20 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l a b / 0)") is "lab(25% 20 50 / 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) 0% a b / alpha)") is "lab(0% 20 50 / 0.4)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l 0 b / alpha)") is "lab(25% 0 50 / 0.4)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l a 0 / alpha)") is "lab(25% 20 0 / 0.4)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l a b / 0)") is "lab(25% 20 50 / 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) 35% a b / alpha)") is "lab(35% 20 50)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l 35 b / alpha)") is "lab(25% 35 50)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l a 35 / alpha)") is "lab(25% 20 35)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l a b / .35)") is "lab(25% 20 50 / 0.35)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) 35% a b / alpha)") is "lab(35% 20 50 / 0.4)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l 35 b / alpha)") is "lab(25% 35 50 / 0.4)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l a 35 / alpha)") is "lab(25% 20 35 / 0.4)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l a b / .35)") is "lab(25% 20 50 / 0.35)"
Support calc() on components inside relative color syntax colors https://bugs.webkit.org/show_bug.cgi?id=226272 Reviewed by Darin Adler. Source/WebCore: Added new and updated test cases to fast/css/parsing-relative-color-syntax.html. Updates support for the CSS Color 5 "Relative Color Syntax" to support both calc() on components and component permutations within the syntax. This allows for things like: background: lch(from var(--primary-color) 60% calc(c * 0.8) h); or background: lch(from rebeccapurple g b r); To make this work, the calc() infrastructure now supports passing a CSSCalcSymbolTable which allows the logic in the parser to lookup unknown identifiers when parsing a value. The relative color syntax parsers can then build an appropriate CSSCalcSymbolTable filled with the components of the origin color. Since these calc() values are not serialized, this can all happen in the parser, but if we to be able serialize them in the future, CSSCalcPrimitiveValueNode could be updated to store the symbol name in addition to storing the value and type (or we could we could add a new node for it). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/calc/CSSCalcSymbolTable.cpp: Added. * css/calc/CSSCalcSymbolTable.h: Added. Add CSSCalcSymbolTable which contains a mapping from CSSValueID to CSSUnitType/double pairs. * css/calc/CSSCalcExpressionNodeParser.cpp: (WebCore::CSSCalcExpressionNodeParser::parseValue): When trying to construct a value node, if the token is a identifier, use the new symbol table to look up a type/value to use instead. Use a switch to make things a bit more clear that differentiation is being done based on token type. * css/calc/CSSCalcExpressionNodeParser.h: Add reference to a CSSCalcSymbolTable to the parser. The parser should only ever be used on the stack, so this works well and allows us to avoid copying the table. * css/calc/CSSCalcValue.cpp: (WebCore::CSSCalcValue::create): * css/calc/CSSCalcValue.h: Pass the CSSCalcSymbolTable to the parser if one is provided. An overload was used to avoid #including CSSCalcSymbolTable.h in the header just to add a default value. * css/makevalues.pl: Give a concrete base of uint16_t to allow it to be forward declared and add DefaultHash and HashTraits to allow it to be used with HashTable. These match the definition of CSSPropertyID. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::CalcParser::CalcParser): (WebCore::CSSPropertyParserHelpers::consumeNumberRaw): (WebCore::CSSPropertyParserHelpers::consumePercentWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleRaw): (WebCore::CSSPropertyParserHelpers::consumeAngleWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleOrPercent): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrPercentOrIdentNormalizedForRelativeRGB): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::extractChannelValue): Deleted. (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): Deleted. Rework relative color syntax parsing to allow permutation of channel symbols and use of the calc() symbol table support to allow passing in the channels. This makes the relatative color syntax variants much closer to the normal variants (with the exception of passing the symbol table) and a subsequent change will attempt to merge them further. LayoutTests: Updated test and results for update support including calc() and compoment permutation. * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278304 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-01 13:50:16 +00:00
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l b a)") is "lab(25% 50 20)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l a a / a)") is "lab(25% 20 20)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l b a)") is "lab(25% 50 20)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l a a / a)") is "lab(25% 20 20)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l alpha a / b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l alpha a / b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
Support calc() on components inside relative color syntax colors https://bugs.webkit.org/show_bug.cgi?id=226272 Reviewed by Darin Adler. Source/WebCore: Added new and updated test cases to fast/css/parsing-relative-color-syntax.html. Updates support for the CSS Color 5 "Relative Color Syntax" to support both calc() on components and component permutations within the syntax. This allows for things like: background: lch(from var(--primary-color) 60% calc(c * 0.8) h); or background: lch(from rebeccapurple g b r); To make this work, the calc() infrastructure now supports passing a CSSCalcSymbolTable which allows the logic in the parser to lookup unknown identifiers when parsing a value. The relative color syntax parsers can then build an appropriate CSSCalcSymbolTable filled with the components of the origin color. Since these calc() values are not serialized, this can all happen in the parser, but if we to be able serialize them in the future, CSSCalcPrimitiveValueNode could be updated to store the symbol name in addition to storing the value and type (or we could we could add a new node for it). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/calc/CSSCalcSymbolTable.cpp: Added. * css/calc/CSSCalcSymbolTable.h: Added. Add CSSCalcSymbolTable which contains a mapping from CSSValueID to CSSUnitType/double pairs. * css/calc/CSSCalcExpressionNodeParser.cpp: (WebCore::CSSCalcExpressionNodeParser::parseValue): When trying to construct a value node, if the token is a identifier, use the new symbol table to look up a type/value to use instead. Use a switch to make things a bit more clear that differentiation is being done based on token type. * css/calc/CSSCalcExpressionNodeParser.h: Add reference to a CSSCalcSymbolTable to the parser. The parser should only ever be used on the stack, so this works well and allows us to avoid copying the table. * css/calc/CSSCalcValue.cpp: (WebCore::CSSCalcValue::create): * css/calc/CSSCalcValue.h: Pass the CSSCalcSymbolTable to the parser if one is provided. An overload was used to avoid #including CSSCalcSymbolTable.h in the header just to add a default value. * css/makevalues.pl: Give a concrete base of uint16_t to allow it to be forward declared and add DefaultHash and HashTraits to allow it to be used with HashTable. These match the definition of CSSPropertyID. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::CalcParser::CalcParser): (WebCore::CSSPropertyParserHelpers::consumeNumberRaw): (WebCore::CSSPropertyParserHelpers::consumePercentWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleRaw): (WebCore::CSSPropertyParserHelpers::consumeAngleWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleOrPercent): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrPercentOrIdentNormalizedForRelativeRGB): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::extractChannelValue): Deleted. (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): Deleted. Rework relative color syntax parsing to allow permutation of channel symbols and use of the calc() symbol table support to allow passing in the channels. This makes the relatative color syntax variants much closer to the normal variants (with the exception of passing the symbol table) and a subsequent change will attempt to merge them further. LayoutTests: Updated test and results for update support including calc() and compoment permutation. * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278304 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-01 13:50:16 +00:00
PASS computedStyle("background-color", "lab(from lab(25% 20 50) calc(l) calc(a) calc(b))") is "lab(25% 20 50)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))") is "lab(25% 20 50 / 0.4)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l 10% 10)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) l 10 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) 10 a b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l 10% 10)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) l 10 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50 / 40%) 10 a b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) lightness a b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) x a b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lab(from lab(25% 20 50) h g b)") is "rgba(0, 0, 0, 0)"
lch(from ...)
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c h)") is "lch(70% 45 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c h / alpha)") is "lch(70% 45 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c h/ alpha)") is "lch(70% 45 30 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(from lch(70% 45 30) l c h) l c h)") is "lch(70% 45 30)"
PASS computedStyle("background-color", "lch(from color(display-p3 0 0 0) l c h / alpha)") is "lch(0% 0 0)"
Remove support for no longer specific color(lab ...) syntax https://bugs.webkit.org/show_bug.cgi?id=226439 Reviewed by Darin Adler. Source/WebCore: Remove support for parsing the color(lab ...) syntax. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::parseColorFunctionParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunctionForLabParameters): Deleted. LayoutTests: Remove test cases for color(lab) (keeping one to ensure it doesn't work) and update uses of color(lab ...) to use lab(...) instead. * fast/css/parsing-lab-colors-expected.txt: * fast/css/parsing-lab-colors.html: * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: * TestExpectations: Canonical link: https://commits.webkit.org/238305@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278268 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-05-31 03:44:27 +00:00
PASS computedStyle("background-color", "lch(from lab(70% 45 30) l c h / alpha)") is "lch(70% 54.08327 33.690067)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS computedStyle("background-color", "lch(from lch(70% 45 30) 0% 0 0)") is "lch(0% 0 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) 0% 0 0deg)") is "lch(0% 0 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) 0% 0 0 / 0)") is "lch(0% 0 0 / 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) 0% 0 0deg / 0)") is "lch(0% 0 0 / 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) 0% c h / alpha)") is "lch(0% 45 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l 0 h / alpha)") is "lch(70% 0 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c 0 / alpha)") is "lch(70% 45 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c 0deg / alpha)") is "lch(70% 45 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c h / 0)") is "lch(70% 45 30 / 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) 0% c h / alpha)") is "lch(0% 45 30 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l 0 h / alpha)") is "lch(70% 0 30 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c 0 / alpha)") is "lch(70% 45 0 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c 0deg / alpha)") is "lch(70% 45 0 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c h / 0)") is "lch(70% 45 30 / 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) 25% c h / alpha)") is "lch(25% 45 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l 25 h / alpha)") is "lch(70% 25 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c 25 / alpha)") is "lch(70% 45 25)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c 25deg / alpha)") is "lch(70% 45 25)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c h / .25)") is "lch(70% 45 30 / 0.25)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) 25% c h / alpha)") is "lch(25% 45 30 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l 25 h / alpha)") is "lch(70% 25 30 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c 25 / alpha)") is "lch(70% 45 25 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c 25deg / alpha)") is "lch(70% 45 25 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c h / .25)") is "lch(70% 45 30 / 0.25)"
Support calc() on components inside relative color syntax colors https://bugs.webkit.org/show_bug.cgi?id=226272 Reviewed by Darin Adler. Source/WebCore: Added new and updated test cases to fast/css/parsing-relative-color-syntax.html. Updates support for the CSS Color 5 "Relative Color Syntax" to support both calc() on components and component permutations within the syntax. This allows for things like: background: lch(from var(--primary-color) 60% calc(c * 0.8) h); or background: lch(from rebeccapurple g b r); To make this work, the calc() infrastructure now supports passing a CSSCalcSymbolTable which allows the logic in the parser to lookup unknown identifiers when parsing a value. The relative color syntax parsers can then build an appropriate CSSCalcSymbolTable filled with the components of the origin color. Since these calc() values are not serialized, this can all happen in the parser, but if we to be able serialize them in the future, CSSCalcPrimitiveValueNode could be updated to store the symbol name in addition to storing the value and type (or we could we could add a new node for it). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/calc/CSSCalcSymbolTable.cpp: Added. * css/calc/CSSCalcSymbolTable.h: Added. Add CSSCalcSymbolTable which contains a mapping from CSSValueID to CSSUnitType/double pairs. * css/calc/CSSCalcExpressionNodeParser.cpp: (WebCore::CSSCalcExpressionNodeParser::parseValue): When trying to construct a value node, if the token is a identifier, use the new symbol table to look up a type/value to use instead. Use a switch to make things a bit more clear that differentiation is being done based on token type. * css/calc/CSSCalcExpressionNodeParser.h: Add reference to a CSSCalcSymbolTable to the parser. The parser should only ever be used on the stack, so this works well and allows us to avoid copying the table. * css/calc/CSSCalcValue.cpp: (WebCore::CSSCalcValue::create): * css/calc/CSSCalcValue.h: Pass the CSSCalcSymbolTable to the parser if one is provided. An overload was used to avoid #including CSSCalcSymbolTable.h in the header just to add a default value. * css/makevalues.pl: Give a concrete base of uint16_t to allow it to be forward declared and add DefaultHash and HashTraits to allow it to be used with HashTable. These match the definition of CSSPropertyID. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::CalcParser::CalcParser): (WebCore::CSSPropertyParserHelpers::consumeNumberRaw): (WebCore::CSSPropertyParserHelpers::consumePercentWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleRaw): (WebCore::CSSPropertyParserHelpers::consumeAngleWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleOrPercent): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrPercentOrIdentNormalizedForRelativeRGB): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::extractChannelValue): Deleted. (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): Deleted. Rework relative color syntax parsing to allow permutation of channel symbols and use of the calc() symbol table support to allow passing in the channels. This makes the relatative color syntax variants much closer to the normal variants (with the exception of passing the symbol table) and a subsequent change will attempt to merge them further. LayoutTests: Updated test and results for update support including calc() and compoment permutation. * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278304 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-01 13:50:16 +00:00
PASS computedStyle("background-color", "lch(from lch(70% 45 30) alpha c h / l)") is "lch(100% 45 30 / 0.7)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c c / alpha)") is "lch(70% 45 45)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) alpha c h / alpha)") is "lch(100% 45 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) alpha c c / alpha)") is "lch(100% 45 45)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) alpha c h / l)") is "lch(40% 45 30 / 0.7)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c c / alpha)") is "lch(70% 45 45 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) alpha c h / alpha)") is "lch(40% 45 30 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) alpha c c / alpha)") is "lch(40% 45 45 / 0.4)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) h l c / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) c c c / c)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) h l c / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) c c c / c)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) calc(l) calc(c) calc(h))") is "lch(70% 45 30)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))") is "lch(70% 45 30 / 0.4)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l 10% h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l c 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) 10 c h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l 10% h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) l c 10%)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30 / 40%) 10 c h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) lightness c h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) x c h)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "lch(from lch(70% 45 30) l g b)") is "rgba(0, 0, 0, 0)"
Add support for "relative color syntax" for color() https://bugs.webkit.org/show_bug.cgi?id=226513 Reviewed by Darin Adler. Source/WebCore: CSS Color 5 has recently been update to support relative color syntax for the color() function in addition to the existing rgb(), hsl(), hwb(), lab() and lch(). Took the opertunity to refactor other relative color syntax parsing to share more code between relative and non-relative parsers using a shared function with lambdas to differentiate the component consumers. This was done for all the color types except rgb() and hsl(), which have notable differences in parsing between the relative and non-relative version. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::parseNonRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::colorByNormalizingHSLComponents): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseNonRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseNonRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseNonRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseNonRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunctionForRGBTypes): (WebCore::CSSPropertyParserHelpers::parseRelativeColorFunctionForRGBTypes): (WebCore::CSSPropertyParserHelpers::parseColorFunctionForXYZParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeColorFunctionForXYZParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeColorFunctionParameters): (WebCore::CSSPropertyParserHelpers::parseNonRelativeColorFunctionParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunctionParameters): LayoutTests: Updated test and results now that we support relative color syntax for color(srgb ...), color(a98-rgb ...), color(rec2020 ...), color(prophoto-rgb ...) and color(xyz ...). * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238394@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278364 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-02 17:38:56 +00:00
color(from ... ${color} ...)
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b)") is "color(srgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b / alpha)") is "color(srgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b)") is "color(srgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / alpha)") is "color(srgb 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(from color(srgb 0.7 0.5 0.3) srgb r g b) srgb r g b)") is "color(srgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 0 0 0)") is "color(srgb 0 0 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 0 0 0)") is "color(srgb 0 0 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 0 0 0 / 0)") is "color(srgb 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 0 0 0 / 0)") is "color(srgb 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 0 g b / alpha)") is "color(srgb 0 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r 0 b / alpha)") is "color(srgb 0.7 0 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g 0 / alpha)") is "color(srgb 0.7 0.5 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b / 0)") is "color(srgb 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb 0 g b / alpha)") is "color(srgb 0 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r 0 b / alpha)") is "color(srgb 0.7 0 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g 0 / alpha)") is "color(srgb 0.7 0.5 0 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / 0)") is "color(srgb 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 0.2 g b / alpha)") is "color(srgb 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 20% g b / alpha)") is "color(srgb 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r 0.2 b / alpha)") is "color(srgb 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r 20% b / alpha)") is "color(srgb 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g 0.2 / alpha)") is "color(srgb 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g 20% / alpha)") is "color(srgb 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b / 0.2)") is "color(srgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b / 20%)") is "color(srgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb 0.2 g b / alpha)") is "color(srgb 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb 20% g b / alpha)") is "color(srgb 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r 0.2 b / alpha)") is "color(srgb 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r 20% b / alpha)") is "color(srgb 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g 0.2 / alpha)") is "color(srgb 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g 20% / alpha)") is "color(srgb 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / 0.2)") is "color(srgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r g b / 20%)") is "color(srgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb g b r)") is "color(srgb 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb b alpha r / g)") is "color(srgb 0.3 1 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r r r / r)") is "color(srgb 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb alpha alpha alpha / alpha)") is "color(srgb 1 1 1)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb g b r)") is "color(srgb 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb b alpha r / g)") is "color(srgb 0.3 0.4 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb r r r / r)") is "color(srgb 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb alpha alpha alpha / alpha)") is "color(srgb 0.4 0.4 0.4 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb calc(r) calc(g) calc(b))") is "color(srgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3 / 40%) srgb calc(r) calc(g) calc(b) / calc(alpha))") is "color(srgb 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb 10deg g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r 10deg b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb r g b / 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb red g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb x g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(srgb 0.7 0.5 0.3) srgb l g b)") is "rgba(0, 0, 0, 0)"
color(from ... ${color} ...)
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b)") is "color(a98-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha)") is "color(a98-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b)") is "color(a98-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / alpha)") is "color(a98-rgb 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b) a98-rgb r g b)") is "color(a98-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 0 0)") is "color(a98-rgb 0 0 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 0 0)") is "color(a98-rgb 0 0 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 0 0 / 0)") is "color(a98-rgb 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 0 0 / 0)") is "color(a98-rgb 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0 g b / alpha)") is "color(a98-rgb 0 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r 0 b / alpha)") is "color(a98-rgb 0.7 0 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g 0 / alpha)") is "color(a98-rgb 0.7 0.5 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / 0)") is "color(a98-rgb 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb 0 g b / alpha)") is "color(a98-rgb 0 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r 0 b / alpha)") is "color(a98-rgb 0.7 0 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g 0 / alpha)") is "color(a98-rgb 0.7 0.5 0 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / 0)") is "color(a98-rgb 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 0.2 g b / alpha)") is "color(a98-rgb 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 20% g b / alpha)") is "color(a98-rgb 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r 0.2 b / alpha)") is "color(a98-rgb 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r 20% b / alpha)") is "color(a98-rgb 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g 0.2 / alpha)") is "color(a98-rgb 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g 20% / alpha)") is "color(a98-rgb 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / 0.2)") is "color(a98-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / 20%)") is "color(a98-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb 0.2 g b / alpha)") is "color(a98-rgb 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb 20% g b / alpha)") is "color(a98-rgb 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r 0.2 b / alpha)") is "color(a98-rgb 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r 20% b / alpha)") is "color(a98-rgb 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g 0.2 / alpha)") is "color(a98-rgb 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g 20% / alpha)") is "color(a98-rgb 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / 0.2)") is "color(a98-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r g b / 20%)") is "color(a98-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb g b r)") is "color(a98-rgb 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb b alpha r / g)") is "color(a98-rgb 0.3 1 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r r r / r)") is "color(a98-rgb 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb alpha alpha alpha / alpha)") is "color(a98-rgb 1 1 1)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb g b r)") is "color(a98-rgb 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb b alpha r / g)") is "color(a98-rgb 0.3 0.4 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb r r r / r)") is "color(a98-rgb 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb alpha alpha alpha / alpha)") is "color(a98-rgb 0.4 0.4 0.4 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb calc(r) calc(g) calc(b))") is "color(a98-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3 / 40%) a98-rgb calc(r) calc(g) calc(b) / calc(alpha))") is "color(a98-rgb 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb 10deg g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r 10deg b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb red g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb x g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb l g b)") is "rgba(0, 0, 0, 0)"
color(from ... ${color} ...)
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b)") is "color(rec2020 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / alpha)") is "color(rec2020 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b)") is "color(rec2020 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / alpha)") is "color(rec2020 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b) rec2020 r g b)") is "color(rec2020 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 0 0 0)") is "color(rec2020 0 0 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 0 0 0)") is "color(rec2020 0 0 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 0 0 0 / 0)") is "color(rec2020 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 0 0 0 / 0)") is "color(rec2020 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 0 g b / alpha)") is "color(rec2020 0 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r 0 b / alpha)") is "color(rec2020 0.7 0 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g 0 / alpha)") is "color(rec2020 0.7 0.5 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / 0)") is "color(rec2020 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 0 g b / alpha)") is "color(rec2020 0 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r 0 b / alpha)") is "color(rec2020 0.7 0 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g 0 / alpha)") is "color(rec2020 0.7 0.5 0 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / 0)") is "color(rec2020 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 0.2 g b / alpha)") is "color(rec2020 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 20% g b / alpha)") is "color(rec2020 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r 0.2 b / alpha)") is "color(rec2020 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r 20% b / alpha)") is "color(rec2020 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g 0.2 / alpha)") is "color(rec2020 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g 20% / alpha)") is "color(rec2020 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / 0.2)") is "color(rec2020 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / 20%)") is "color(rec2020 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 0.2 g b / alpha)") is "color(rec2020 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 20% g b / alpha)") is "color(rec2020 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r 0.2 b / alpha)") is "color(rec2020 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r 20% b / alpha)") is "color(rec2020 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g 0.2 / alpha)") is "color(rec2020 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g 20% / alpha)") is "color(rec2020 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / 0.2)") is "color(rec2020 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r g b / 20%)") is "color(rec2020 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 g b r)") is "color(rec2020 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 b alpha r / g)") is "color(rec2020 0.3 1 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r r r / r)") is "color(rec2020 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 alpha alpha alpha / alpha)") is "color(rec2020 1 1 1)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 g b r)") is "color(rec2020 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 b alpha r / g)") is "color(rec2020 0.3 0.4 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 r r r / r)") is "color(rec2020 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 alpha alpha alpha / alpha)") is "color(rec2020 0.4 0.4 0.4 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 calc(r) calc(g) calc(b))") is "color(rec2020 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3 / 40%) rec2020 calc(r) calc(g) calc(b) / calc(alpha))") is "color(rec2020 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 10deg g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r 10deg b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 r g b / 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 red g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 x g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(rec2020 0.7 0.5 0.3) rec2020 l g b)") is "rgba(0, 0, 0, 0)"
color(from ... ${color} ...)
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b)") is "color(prophoto-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / alpha)") is "color(prophoto-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b)") is "color(prophoto-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / alpha)") is "color(prophoto-rgb 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b) prophoto-rgb r g b)") is "color(prophoto-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 0 0)") is "color(prophoto-rgb 0 0 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 0 0)") is "color(prophoto-rgb 0 0 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 0 0 / 0)") is "color(prophoto-rgb 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 0 0 / 0)") is "color(prophoto-rgb 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0 g b / alpha)") is "color(prophoto-rgb 0 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r 0 b / alpha)") is "color(prophoto-rgb 0.7 0 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g 0 / alpha)") is "color(prophoto-rgb 0.7 0.5 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / 0)") is "color(prophoto-rgb 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb 0 g b / alpha)") is "color(prophoto-rgb 0 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r 0 b / alpha)") is "color(prophoto-rgb 0.7 0 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g 0 / alpha)") is "color(prophoto-rgb 0.7 0.5 0 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / 0)") is "color(prophoto-rgb 0.7 0.5 0.3 / 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 0.2 g b / alpha)") is "color(prophoto-rgb 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 20% g b / alpha)") is "color(prophoto-rgb 0.2 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r 0.2 b / alpha)") is "color(prophoto-rgb 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r 20% b / alpha)") is "color(prophoto-rgb 0.7 0.2 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g 0.2 / alpha)") is "color(prophoto-rgb 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g 20% / alpha)") is "color(prophoto-rgb 0.7 0.5 0.2)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / 0.2)") is "color(prophoto-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / 20%)") is "color(prophoto-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb 0.2 g b / alpha)") is "color(prophoto-rgb 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb 20% g b / alpha)") is "color(prophoto-rgb 0.2 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r 0.2 b / alpha)") is "color(prophoto-rgb 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r 20% b / alpha)") is "color(prophoto-rgb 0.7 0.2 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g 0.2 / alpha)") is "color(prophoto-rgb 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g 20% / alpha)") is "color(prophoto-rgb 0.7 0.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / 0.2)") is "color(prophoto-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r g b / 20%)") is "color(prophoto-rgb 0.7 0.5 0.3 / 0.2)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb g b r)") is "color(prophoto-rgb 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb b alpha r / g)") is "color(prophoto-rgb 0.3 1 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r r r / r)") is "color(prophoto-rgb 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb alpha alpha alpha / alpha)") is "color(prophoto-rgb 1 1 1)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb g b r)") is "color(prophoto-rgb 0.5 0.3 0.7)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb b alpha r / g)") is "color(prophoto-rgb 0.3 0.4 0.7 / 0.5)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb r r r / r)") is "color(prophoto-rgb 0.7 0.7 0.7 / 0.7)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb alpha alpha alpha / alpha)") is "color(prophoto-rgb 0.4 0.4 0.4 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb calc(r) calc(g) calc(b))") is "color(prophoto-rgb 0.7 0.5 0.3)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3 / 40%) prophoto-rgb calc(r) calc(g) calc(b) / calc(alpha))") is "color(prophoto-rgb 0.7 0.5 0.3 / 0.4)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb 10deg g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r 10deg b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b / 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb red g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb x g b)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb l g b)") is "rgba(0, 0, 0, 0)"
color(from ... xyz ...)
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y z)") is "color(xyz 7 -20.5 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y z / alpha)") is "color(xyz 7 -20.5 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x y z)") is "color(xyz 7 -20.5 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x y z / alpha)") is "color(xyz 7 -20.5 100 / 0.4)"
PASS computedStyle("background-color", "color(from color(from color(xyz 7 -20.5 100) xyz x y z) xyz x y z)") is "color(xyz 7 -20.5 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz 0 0 0)") is "color(xyz 0 0 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz 0 0 0)") is "color(xyz 0 0 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz 0 0 0 / 0)") is "color(xyz 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz 0 0 0 / 0)") is "color(xyz 0 0 0 / 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz 0 y z / alpha)") is "color(xyz 0 -20.5 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x 0 z / alpha)") is "color(xyz 7 0 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y 0 / alpha)") is "color(xyz 7 -20.5 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y z / 0)") is "color(xyz 7 -20.5 100 / 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz 0 y z / alpha)") is "color(xyz 0 -20.5 100 / 0.4)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x 0 z / alpha)") is "color(xyz 7 0 100 / 0.4)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x y 0 / alpha)") is "color(xyz 7 -20.5 0 / 0.4)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x y z / 0)") is "color(xyz 7 -20.5 100 / 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz 0.2 y z / alpha)") is "color(xyz 0.2 -20.5 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x 0.2 z / alpha)") is "color(xyz 7 0.2 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y 0.2 / alpha)") is "color(xyz 7 -20.5 0.2)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y z / 0.2)") is "color(xyz 7 -20.5 100 / 0.2)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y z / 20%)") is "color(xyz 7 -20.5 100 / 0.2)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz 0.2 y z / alpha)") is "color(xyz 0.2 -20.5 100 / 0.4)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x 0.2 z / alpha)") is "color(xyz 7 0.2 100 / 0.4)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x y 0.2 / alpha)") is "color(xyz 7 -20.5 0.2 / 0.4)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x y z / 0.2)") is "color(xyz 7 -20.5 100 / 0.2)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz y z x)") is "color(xyz -20.5 100 7)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x x x / x)") is "color(xyz 7 7 7)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz y z x)") is "color(xyz -20.5 100 7)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz x x x / x)") is "color(xyz 7 7 7)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz z alpha x / y)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz z alpha x / y)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz alpha alpha alpha / alpha)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz calc(x) calc(y) calc(z))") is "color(xyz 7 -20.5 100)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100 / 40%) xyz calc(x) calc(y) calc(z) / calc(alpha))") is "color(xyz 7 -20.5 100 / 0.4)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz 10deg y z)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x 10deg z)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz x y z / 10deg)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz red y)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz r y z)") is "rgba(0, 0, 0, 0)"
PASS computedStyle("background-color", "color(from color(xyz 7 -20.5 100) xyz l y z)") is "rgba(0, 0, 0, 0)"
Spec Examples
Support calc() on components inside relative color syntax colors https://bugs.webkit.org/show_bug.cgi?id=226272 Reviewed by Darin Adler. Source/WebCore: Added new and updated test cases to fast/css/parsing-relative-color-syntax.html. Updates support for the CSS Color 5 "Relative Color Syntax" to support both calc() on components and component permutations within the syntax. This allows for things like: background: lch(from var(--primary-color) 60% calc(c * 0.8) h); or background: lch(from rebeccapurple g b r); To make this work, the calc() infrastructure now supports passing a CSSCalcSymbolTable which allows the logic in the parser to lookup unknown identifiers when parsing a value. The relative color syntax parsers can then build an appropriate CSSCalcSymbolTable filled with the components of the origin color. Since these calc() values are not serialized, this can all happen in the parser, but if we to be able serialize them in the future, CSSCalcPrimitiveValueNode could be updated to store the symbol name in addition to storing the value and type (or we could we could add a new node for it). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/calc/CSSCalcSymbolTable.cpp: Added. * css/calc/CSSCalcSymbolTable.h: Added. Add CSSCalcSymbolTable which contains a mapping from CSSValueID to CSSUnitType/double pairs. * css/calc/CSSCalcExpressionNodeParser.cpp: (WebCore::CSSCalcExpressionNodeParser::parseValue): When trying to construct a value node, if the token is a identifier, use the new symbol table to look up a type/value to use instead. Use a switch to make things a bit more clear that differentiation is being done based on token type. * css/calc/CSSCalcExpressionNodeParser.h: Add reference to a CSSCalcSymbolTable to the parser. The parser should only ever be used on the stack, so this works well and allows us to avoid copying the table. * css/calc/CSSCalcValue.cpp: (WebCore::CSSCalcValue::create): * css/calc/CSSCalcValue.h: Pass the CSSCalcSymbolTable to the parser if one is provided. An overload was used to avoid #including CSSCalcSymbolTable.h in the header just to add a default value. * css/makevalues.pl: Give a concrete base of uint16_t to allow it to be forward declared and add DefaultHash and HashTraits to allow it to be used with HashTable. These match the definition of CSSPropertyID. * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::CalcParser::CalcParser): (WebCore::CSSPropertyParserHelpers::consumeNumberRaw): (WebCore::CSSPropertyParserHelpers::consumePercentWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleRaw): (WebCore::CSSPropertyParserHelpers::consumeAngleWorkerSafe): (WebCore::CSSPropertyParserHelpers::consumeAngleOrPercent): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrPercentOrIdentNormalizedForRelativeRGB): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::extractChannelValue): Deleted. (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): Deleted. Rework relative color syntax parsing to allow permutation of channel symbols and use of the calc() symbol table support to allow passing in the channels. This makes the relatative color syntax variants much closer to the normal variants (with the exception of passing the symbol table) and a subsequent change will attempt to merge them further. LayoutTests: Updated test and results for update support including calc() and compoment permutation. * fast/css/parsing-relative-color-syntax-expected.txt: * fast/css/parsing-relative-color-syntax.html: Canonical link: https://commits.webkit.org/238341@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278304 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-06-01 13:50:16 +00:00
PASS computedStyle("background-color", "rgb(from var(--bg-color) r g b / 80%)") is "rgba(0, 0, 255, 0.8)"
PASS computedStyle("background-color", "lch(from var(--color) calc(l / 2) c h)") is "lch(23.138971% 67.989716 134.39125)"
PASS computedStyle("background-color", "rgb(from var(--color) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11))") is "rgb(76, 76, 76)"
PASS computedStyle("background-color", "lch(from var(--color) l 0 h)") is "lch(46.277943% 0 134.39125)"
PASS computedStyle("background-color", "rgb(from indianred 255 g b)") is "rgb(255, 92, 92)"
PASS computedStyle("background-color", "hsl(from var(--accent) calc(h + 180deg) s l)") is "rgb(178, 32, 40)"
PASS computedStyle("background-color", "lab(from var(--mycolor) l a b / 100%)") is "lab(62.751923% 52.45802 -34.117283)"
PASS computedStyle("background-color", "lab(from var(--mycolor) l a b / calc(alpha * 0.8))") is "lab(62.751923% 52.45802 -34.117283 / 0.8)"
PASS computedStyle("background-color", "lab(from var(--mycolor) l a b / calc(alpha - 20%))") is "lab(62.751923% 52.45802 -34.117283 / 0.8)"
PASS computedStyle("background-color", "lab(from var(--mycolor) l 0 0)") is "lab(62.751923% 0 0)"
PASS computedStyle("background-color", "lch(from peru calc(l * 0.8) c h)") is "lch(49.80138% 54.003296 63.680317)"
PASS computedStyle("background-color", "LCH(from var(--accent) l c calc(h + 180deg))") is "lch(65.49473% 39.446903 10.114471)"
PASS computedStyle("background-color", "lch(from var(--mycolor) l 0 h)") is "lch(62.751923% 0 326.96112)"
PASS computedStyle("background-color", "var(--mygray)") is "lch(62.751923% 0 326.96112)"
PASS computedStyle("background-color", "lch(from var(--mygray) l 30 h)") is "lch(62.751923% 30 326.96112)"
Add experimental support for CSS Color 5 Relative Color Syntax https://bugs.webkit.org/show_bug.cgi?id=221880 Reviewed by Darin Adler. Source/WebCore: Adds initial support for CSS Color 5 Relative Color Syntax - https://drafts.csswg.org/css-color-5/#relative-colors This feature is off by default and can be enabled via the CSSRelativeColorSyntaxEnabled experimental preference flag. As this is the initial commit for this functionality, it is not yet complete. This adds basic parsing and resolution for relative rgb(), hsl(), hwb(), lab() and lch(), but does not yet implement support for calc() functions that can operate on the channel keywords nor does it support using system keyword colors as the origin of the relative colors. Some additional caveats about this initial implementation that need further clarification from the spec editors: 1. Currently, we only allow using the channel corresponding to to the position of that channel in the replacement syntax. This means you can't do: rgb(from red g r b) to permute the channels. 2. For rgb(), which allows r, g, and b to be all numbers or all percentages, we currently don't assume either number or percentage, and wait until some constant value is provided to set the type. That means that: rgb(from red r g 10) will treat r, ang g as numbers, but: rgb(from red r g 10%) will treat r and g as percentages. This is not currently observable other than that we reject something that mixes the two, such as rgb(from red r 10 10%) but will be fully observable once processing the channels via calc() is supported. Test: fast/css/parsing-relative-color-syntax.html * css/CSSValueKeywords.in: * css/parser/CSSParserContext.cpp: (WebCore::operator==): * css/parser/CSSParserContext.h: (WebCore::CSSParserContextHash::hash): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeOriginColor): (WebCore::CSSPropertyParserHelpers::consumeOptionalAlphaOrIdent): (WebCore::CSSPropertyParserHelpers::consumeHueOrIdent): (WebCore::CSSPropertyParserHelpers::consumeNumberOrIdent): (WebCore::CSSPropertyParserHelpers::consumePercentOrIdent): (WebCore::CSSPropertyParserHelpers::extractChannelValue): (WebCore::CSSPropertyParserHelpers::resolveRelativeColorChannel): (WebCore::CSSPropertyParserHelpers::consumeRelativeRGBComponent): (WebCore::CSSPropertyParserHelpers::parseRelativeRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRGBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeHSLParameters): (WebCore::CSSPropertyParserHelpers::parseHSLParameters): (WebCore::CSSPropertyParserHelpers::normalizeWhitenessBlackness): (WebCore::CSSPropertyParserHelpers::parseRelativeHWBParameters): (WebCore::CSSPropertyParserHelpers::parseHWBParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLabParameters): (WebCore::CSSPropertyParserHelpers::parseLabParameters): (WebCore::CSSPropertyParserHelpers::parseRelativeLCHParameters): (WebCore::CSSPropertyParserHelpers::parseLCHParameters): (WebCore::CSSPropertyParserHelpers::parseColorFunction): Source/WTF: * Scripts/Preferences/WebPreferencesExperimental.yaml: Add new experimental preference for CSS Color 5 Relative Color Syntax which is off by default. LayoutTests: * fast/css/parsing-relative-color-syntax-expected.txt: Added. * fast/css/parsing-relative-color-syntax.html: Added. Add basic parsing and computed style computation tests for relative color syntax. Canonical link: https://commits.webkit.org/234324@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@273127 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2021-02-19 05:51:08 +00:00
PASS successfullyParsed is true
TEST COMPLETE