mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-07 16:49:54 +00:00
LibWeb/CSS: Shorten the length of srgb serialization
The WPT tests require the shortest possible serialization that support an 8 bits roundtrip. As an example, `128` is serialized to `0.5` while `127` needs more precision and thus will be serialized to `0.498`. This commit fixes 33 WPT subtests in css/css-color.
This commit is contained in:
Lucas CHOLLET
Sam Atkins
parent
ded6695c52
commit
ad3dd547b7
Notes:
github-actions[bot]
2024-12-04 11:31:36 +00:00
Author: https://github.com/LucasChollet
Commit: ad3dd547b7
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2540
Reviewed-by: https://github.com/AtkinsSJ ✅
16 changed files with 8478 additions and 3 deletions
|
|
@ -135,16 +135,64 @@ void serialize_unicode_ranges(StringBuilder& builder, Vector<Gfx::UnicodeRange>
|
|||
});
|
||||
}
|
||||
|
||||
namespace {
|
||||
|
||||
char nth_digit(u32 value, u8 digit)
|
||||
{
|
||||
// This helper is used to format integers.
|
||||
// nth_digit(745, 1) -> '5'
|
||||
// nth_digit(745, 2) -> '4'
|
||||
// nth_digit(745, 3) -> '7'
|
||||
|
||||
VERIFY(value < 1000);
|
||||
VERIFY(digit <= 3);
|
||||
VERIFY(digit > 0);
|
||||
|
||||
while (digit > 1) {
|
||||
value /= 10;
|
||||
digit--;
|
||||
}
|
||||
|
||||
return '0' + value % 10;
|
||||
}
|
||||
|
||||
Array<char, 4> format_to_8bit_compatible(u8 value)
|
||||
{
|
||||
// This function formats to the shortest string that roundtrips at 8 bits.
|
||||
// As an example:
|
||||
// 127 / 255 = 0.498 ± 0.001
|
||||
// 128 / 255 = 0.502 ± 0.001
|
||||
// But round(.5 * 255) == 128, so this function returns (note that it's only the fractional part):
|
||||
// 127 -> "498"
|
||||
// 128 -> "5"
|
||||
|
||||
u32 const three_digits = (value * 1000u + 127) / 255;
|
||||
u32 const rounded_to_two_digits = (three_digits + 5) / 10 * 10;
|
||||
|
||||
if ((rounded_to_two_digits * 255 / 100 + 5) / 10 != value)
|
||||
return { nth_digit(three_digits, 3), nth_digit(three_digits, 2), nth_digit(three_digits, 1), '\0' };
|
||||
|
||||
u32 const rounded_to_one_digit = (three_digits + 50) / 100 * 100;
|
||||
if ((rounded_to_one_digit * 255 / 100 + 5) / 10 != value)
|
||||
return { nth_digit(rounded_to_two_digits, 3), nth_digit(rounded_to_two_digits, 2), '\0', '\0' };
|
||||
|
||||
return { nth_digit(rounded_to_one_digit, 3), '\0', '\0', '\0' };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/css-color-4/#serializing-sRGB-values
|
||||
void serialize_a_srgb_value(StringBuilder& builder, Color color)
|
||||
{
|
||||
// The serialized form is derived from the computed value and thus, uses either the rgb() or rgba() form
|
||||
// (depending on whether the alpha is exactly 1, or not), with lowercase letters for the function name.
|
||||
// NOTE: Since we use Gfx::Color, having an "alpha of 1" means its value is 255.
|
||||
if (color.alpha() == 255)
|
||||
if (color.alpha() == 0)
|
||||
builder.appendff("rgba({}, {}, {}, 0)"sv, color.red(), color.green(), color.blue());
|
||||
else if (color.alpha() == 255)
|
||||
builder.appendff("rgb({}, {}, {})"sv, color.red(), color.green(), color.blue());
|
||||
else
|
||||
builder.appendff("rgba({}, {}, {}, {:.4})"sv, color.red(), color.green(), color.blue(), (float)(color.alpha()) / 255.0f);
|
||||
builder.appendff("rgba({}, {}, {}, 0.{})"sv, color.red(), color.green(), color.blue(), format_to_8bit_compatible(color.alpha()).data());
|
||||
}
|
||||
|
||||
String serialize_an_identifier(StringView ident)
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ At time 750:
|
|||
background-color: rgb(147, 157, 168)
|
||||
background-repeat: space
|
||||
bottom: 100%
|
||||
box-shadow: rgb(81, 71, 210) 75px 150px 227.5px 0px, rgba(0, 0, 174, 0.749) 37.5px 7.5px 15px 22.5px
|
||||
box-shadow: rgb(81, 71, 210) 75px 150px 227.5px 0px, rgba(0, 0, 174, 0.75) 37.5px 7.5px 15px 22.5px
|
||||
color: rgb(81, 71, 210)
|
||||
transform: matrix(1, 0, 0, 1, 75, 75)
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,62 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 56 tests
|
||||
|
||||
50 Pass
|
||||
6 Fail
|
||||
Pass Property color value 'hwb(120 30% 50%)'
|
||||
Pass Property color value 'hwb(120 30% 50% / 0.5)'
|
||||
Pass Property color value 'hwb(120 30% 50% / 50%)'
|
||||
Pass Property color value 'hwb(none none none)'
|
||||
Pass Property color value 'hwb(0 0% 0%)'
|
||||
Pass Property color value 'hwb(none none none / none)'
|
||||
Pass Property color value 'hwb(0 0% 0% / 0)'
|
||||
Pass Property color value 'hwb(120 none none)'
|
||||
Pass Property color value 'hwb(120 0% 0%)'
|
||||
Pass Property color value 'hwb(120 80% none)'
|
||||
Pass Property color value 'hwb(120 80% 0%)'
|
||||
Pass Property color value 'hwb(120 none 50%)'
|
||||
Pass Property color value 'hwb(120 0% 50%)'
|
||||
Pass Property color value 'hwb(120 30% 50% / none)'
|
||||
Pass Property color value 'hwb(120 30% 50% / 0)'
|
||||
Pass Property color value 'hwb(120 30% 50% / 0%)'
|
||||
Pass Property color value 'hwb(none 100% 50% / none)'
|
||||
Pass Property color value 'hwb(0 100% 50% / 0)'
|
||||
Pass Property color value 'hwb(0 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(30 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(60 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(120 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(180 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(210 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(240 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(270 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(300 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(330 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(360 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90deg 50% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 0% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 12.5% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 25% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 37.5% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 62.5% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 75% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 87.5% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 100% 50%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 0%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 12.5%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 25%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 37.5%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 62.5%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 75%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 87.5%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 100%)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 50% / 0)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 50% / 0.2)' [HWB value should parse and round correctly]
|
||||
Pass Property color value 'hwb(90 50% 50% / 1)' [HWB value should parse and round correctly]
|
||||
Fail Property color value 'hwb(calc(110deg + (sign(1em - 10px) * 10deg)) 30% 50% / 50%)'
|
||||
Fail Property color value 'hwb(calc(110 + (sign(1em - 10px) * 10)) 30 50 / 0.5)'
|
||||
Fail Property color value 'hwb(120deg 30% 50% / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Fail Property color value 'hwb(120 30 50 / calc(0.75 + (sign(1em - 10px) * 0.1)))'
|
||||
Fail Property color value 'hwb(calc(110deg + (sign(2cqw - 10px) * 10deg)) 30 50 / 51%)'
|
||||
Fail Property color value 'hwb(calc(110deg + (sign(2cqw - 10px) * 10deg)) 30 50 / 52%)'
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 99 tests
|
||||
|
||||
79 Pass
|
||||
20 Fail
|
||||
Pass Property color value 'rgb(none none none)'
|
||||
Pass Property color value 'rgb(none none none / none)'
|
||||
Pass Property color value 'rgb(128 none none)'
|
||||
Pass Property color value 'rgb(128 none none / none)'
|
||||
Pass Property color value 'rgb(none none none / .5)'
|
||||
Pass Property color value 'rgb(20% none none)'
|
||||
Pass Property color value 'rgb(20% none none / none)'
|
||||
Pass Property color value 'rgb(none none none / 50%)'
|
||||
Pass Property color value 'rgba(none none none)'
|
||||
Pass Property color value 'rgba(none none none / none)'
|
||||
Pass Property color value 'rgba(128 none none)'
|
||||
Pass Property color value 'rgba(128 none none / none)'
|
||||
Pass Property color value 'rgba(none none none / .5)'
|
||||
Pass Property color value 'rgba(20% none none)'
|
||||
Pass Property color value 'rgba(20% none none / none)'
|
||||
Pass Property color value 'rgba(none none none / 50%)'
|
||||
Pass Property color value 'rgb(2.5, 3.4, 4.6)' [Tests that RGB channels are rounded appropriately]
|
||||
Pass Property color value 'rgb(00, 51, 102)' [Valid numbers should be parsed]
|
||||
Pass Property color value 'r\gb(00, 51, 102)' [Correct escape sequences should still parse]
|
||||
Pass Property color value 'r\67 b(00, 51, 102)' [Correct escape sequences should still parse]
|
||||
Pass Property color value 'RGB(153, 204, 255)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgB(0, 0, 0)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgB(0, 51, 255)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgb(0,51,255)' [Lack of whitespace should not affect parsing]
|
||||
Pass Property color value 'rgb(0 , 51 ,255)' [Whitespace should not affect parsing]
|
||||
Pass Property color value 'rgb(/* R */0, /* G */51, /* B */255)' [Comments should be allowed within function]
|
||||
Pass Property color value 'rgb(-51, 306, 0)' [Invalid values should be clamped to 0 and 255 respectively]
|
||||
Pass Property color value 'rgb(42%, 3%, 50%)' [Valid percentages should be parsed]
|
||||
Pass Property color value 'RGB(100%, 100%, 100%)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgB(0%, 0%, 0%)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgB(10%, 20%, 30%)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgb(10%,20%,30%)' [Whitespace should not affect parsing]
|
||||
Pass Property color value 'rgb(10% , 20% ,30%)' [Whitespace should not affect parsing]
|
||||
Pass Property color value 'rgb(/* R */ 10%, /* G */ 20%, /* B */ 30%)' [Comments should not affect parsing]
|
||||
Pass Property color value 'rgb(-12%, 110%, 1400%)' [Invalid values should be clamped to 0 and 255 respectively]
|
||||
Pass Property color value 'rgb(0, 0, 0, 0)' [RGB and RGBA are synonyms]
|
||||
Pass Property color value 'rgb(0%, 0%, 0%, 0%)' [RGB and RGBA are synonyms]
|
||||
Pass Property color value 'rgb(0%, 0%, 0%, 0)' [RGB and RGBA are synonyms]
|
||||
Pass Property color value 'rgba(0, 0, 0, 0)' [Valid numbers should be parsed]
|
||||
Pass Property color value 'rgba(204, 0, 102, 0.3)' [Valid numbers should be parsed]
|
||||
Pass Property color value 'RGBA(255, 255, 255, 0)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgBA(0, 51, 255, 1)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgba(0, 51, 255, 1.1)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'rgba(0, 51, 255, 37)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'rgba(0, 51, 255, 0.42)' [Valid numbers should be parsed]
|
||||
Pass Property color value 'rgba(0, 51, 255, 0)' [Valid numbers should be parsed]
|
||||
Pass Property color value 'rgba(0, 51, 255, -0.1)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'rgba(0, 51, 255, -139)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'RGBA(100%, 100%, 100%, 0)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgba(42%, 3%, 50%, 0.3)' [Valid percentages should be parsed]
|
||||
Pass Property color value 'rgBA(0%, 20%, 100%, 1)' [Capitalization should not affect parsing]
|
||||
Pass Property color value 'rgba(0%, 20%, 100%, 1.1)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'rgba(0%, 20%, 100%, 37)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'rgba(0%, 20%, 100%, 0.42)' [Valid percentages should be parsed]
|
||||
Pass Property color value 'rgba(0%, 20%, 100%, 0)' [Valid percentages should be parsed]
|
||||
Pass Property color value 'rgba(0%, 20%, 100%, -0.1)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'rgba(0%, 20%, 100%, -139)' [Invalid alpha values should be clamped to 0 and 1 respectively]
|
||||
Pass Property color value 'rgba(255, 255, 255, 0%)' [Percent alpha values are accepted in rgb/rgba]
|
||||
Pass Property color value 'rgba(0%, 0%, 0%, 0%)' [Percent alpha values are accepted in rgb/rgba]
|
||||
Pass Property color value 'rgba(0%, 0%, 0%)' [RGB and RGBA are synonyms]
|
||||
Pass Property color value 'rgba(0, 0, 0)' [RGB and RGBA are synonyms]
|
||||
Pass Property color value 'rgb(calc(infinity), 0, 0)' [Red channel resolves positive infinity to 255]
|
||||
Pass Property color value 'rgb(0, calc(infinity), 0)' [Green channel resolves positive infinity to 255]
|
||||
Pass Property color value 'rgb(0, 0, calc(infinity))' [Blue channel resolves positive infinity to 255]
|
||||
Pass Property color value 'rgba(0, 0, 0, calc(infinity))' [Alpha channel resolves positive infinity to fully opaque]
|
||||
Pass Property color value 'rgb(calc(-infinity), 0, 0)' [Red channel resolves negative infinity to zero]
|
||||
Pass Property color value 'rgb(0, calc(-infinity), 0)' [Green channel resolves negative infinity to zero]
|
||||
Pass Property color value 'rgb(0, 0, calc(-infinity))' [Blue channel resolves negative infinity to zero]
|
||||
Pass Property color value 'rgba(0, 0, 0, calc(-infinity))' [Alpha channel resolves negative infinity to fully transparent]
|
||||
Pass Property color value 'rgb(calc(NaN), 0, 0)' [Red channel resolves NaN to zero]
|
||||
Pass Property color value 'rgb(0, calc(NaN), 0)' [Green channel resolves NaN to zero]
|
||||
Pass Property color value 'rgb(0, 0, calc(NaN))' [Blue channel resolves NaN to zero]
|
||||
Pass Property color value 'rgba(0, 0, 0, calc(NaN))' [Alpha channel resolves NaN to zero]
|
||||
Pass Property color value 'rgb(calc(0 / 0), 0, 0)' [Red channel resolves NaN equivalent calc statements to zero]
|
||||
Pass Property color value 'rgb(0, calc(0 / 0), 0)' [Green channel resolves NaN equivalent calc statements to zero]
|
||||
Pass Property color value 'rgb(0, 0, calc(0 / 0))' [Blue channel resolves NaN equivalent calc statements to zero]
|
||||
Pass Property color value 'rgba(0, 0, 0, calc(0 / 0))' [Alpha channel resolves NaN equivalent calc statements to zero]
|
||||
Pass Property color value 'rgb(var(--high), 0, 0)' [Variables above 255 get clamped to 255.]
|
||||
Pass Property color value 'rgb(var(--negative), 64, 128)' [Variables below 0 get clamped to 0.]
|
||||
Fail Property color value 'rgb(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)'
|
||||
Fail Property color value 'rgba(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)'
|
||||
Fail Property color value 'rgb(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)'
|
||||
Fail Property color value 'rgba(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)'
|
||||
Fail Property color value 'rgb(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Fail Property color value 'rgba(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Fail Property color value 'rgb(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))'
|
||||
Fail Property color value 'rgba(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))'
|
||||
Fail Property color value 'rgb(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)'
|
||||
Fail Property color value 'rgba(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)'
|
||||
Fail Property color value 'rgb(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)'
|
||||
Fail Property color value 'rgba(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)'
|
||||
Fail Property color value 'rgb(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Fail Property color value 'rgba(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))'
|
||||
Fail Property color value 'rgb(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))'
|
||||
Fail Property color value 'rgba(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))'
|
||||
Fail Property color value 'rgba(calc(50% + (sign(1em - 10px) * 10%)) 0 0% / 0.5)'
|
||||
Fail Property color value 'rgba(0% 0 0% / calc(0.75 + (sign(1em - 10px) * 0.1)))'
|
||||
Fail Property color value 'rgba(calc(50% + (sign(2cqw - 10px) * 10%)), 0%, 0%, 51%)'
|
||||
Fail Property color value 'rgba(calc(50% + (sign(2cqw - 10px) * 10%)), 0%, 0%, 52%)'
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 16 tests
|
||||
|
||||
16 Pass
|
||||
Pass Property color value 'currentcolor'
|
||||
Pass Property color value 'transparent'
|
||||
Pass Property color value 'red'
|
||||
Pass Property color value 'magenta'
|
||||
Pass Property color value '#234'
|
||||
Pass Property color value '#FEDCBA'
|
||||
Pass Property color value 'rgb(2, 3, 4)'
|
||||
Pass Property color value 'rgb(100%, 0%, 0%)'
|
||||
Pass Property color value 'rgba(2, 3, 4, 0.5)'
|
||||
Pass Property color value 'rgba(2, 3, 4, 50%)'
|
||||
Pass Property color value 'hsl(120, 100%, 50%)'
|
||||
Pass Property color value 'hsla(120, 100%, 50%, 0.25)'
|
||||
Pass Property color value 'rgb(-2, 3, 4)'
|
||||
Pass Property color value 'rgb(100, 200, 300)'
|
||||
Pass Property color value 'rgb(20, 10, 0, -10)'
|
||||
Pass Property color value 'rgb(100%, 200%, 300%)'
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 59 tests
|
||||
|
||||
41 Pass
|
||||
18 Fail
|
||||
Pass e.style['color'] = "hsl(120 30% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30% 50% / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(none none none)" should set the property value
|
||||
Pass e.style['color'] = "hsl(0 0% 0%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(none none none / none)" should set the property value
|
||||
Pass e.style['color'] = "hsl(0 0% 0% / 0)" should set the property value
|
||||
Pass e.style['color'] = "hsla(none none none)" should set the property value
|
||||
Pass e.style['color'] = "hsla(0 0% 0%)" should set the property value
|
||||
Pass e.style['color'] = "hsla(none none none / none)" should set the property value
|
||||
Pass e.style['color'] = "hsla(0 0% 0% / 0)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 none none)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 0% 0%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 80% none)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 80% 0%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 none 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 0% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 100% 50% / none)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 100% 50% / 0)" should set the property value
|
||||
Pass e.style['color'] = "hsl(none 100% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(0 100% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30 50)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30 50 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30% 50)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30% 50 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30 50% / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 none 50)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 none 50 / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30 none)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30 none / 0.5)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120 30 50 / none)" should set the property value
|
||||
Pass e.style['color'] = "hsl(0 -50% 40%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(30 -50% 60)" should set the property value
|
||||
Pass e.style['color'] = "hsl(0 -50 40%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(30 -50 60)" should set the property value
|
||||
Pass e.style['color'] = "hsl(calc(infinity) 100% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(calc(-infinity) 100% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(calc(0 / 0) 100% 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(90 50% 50% / calc(infinity))" should set the property value
|
||||
Pass e.style['color'] = "hsl(90 50% 50% / calc(-infinity))" should set the property value
|
||||
Pass e.style['color'] = "hsl(90 50% 50% / calc(0 / 0))" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsl(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsl(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "hsl(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "hsl(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "hsl(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100 300 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100% 300% / 0.5)" should set the property value
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 70 tests
|
||||
|
||||
48 Pass
|
||||
22 Fail
|
||||
Pass e.style['color'] = "rgb(none none none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(none none none / none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(128 none none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(128 none none / none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(none none none / .5)" should set the property value
|
||||
Pass e.style['color'] = "rgb(20% none none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(20% none none / none)" should set the property value
|
||||
Pass e.style['color'] = "rgb(none none none / 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(none none none)" should set the property value
|
||||
Pass e.style['color'] = "rgba(none none none / none)" should set the property value
|
||||
Pass e.style['color'] = "rgba(128 none none)" should set the property value
|
||||
Pass e.style['color'] = "rgba(128 none none / none)" should set the property value
|
||||
Pass e.style['color'] = "rgba(none none none / .5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(20% none none)" should set the property value
|
||||
Pass e.style['color'] = "rgba(20% none none / none)" should set the property value
|
||||
Pass e.style['color'] = "rgba(none none none / 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgb(-2 3 4)" should set the property value
|
||||
Pass e.style['color'] = "rgb(-20% 20% 40%)" should set the property value
|
||||
Pass e.style['color'] = "rgb(257 30 40)" should set the property value
|
||||
Pass e.style['color'] = "rgb(250% 20% 40%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(-2 3 4)" should set the property value
|
||||
Pass e.style['color'] = "rgba(-20% 20% 40%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(257 30 40)" should set the property value
|
||||
Pass e.style['color'] = "rgba(250% 20% 40%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(-2 3 4 / .5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(-20% 20% 40% / 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(257 30 40 / 50%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(250% 20% 40% / .5)" should set the property value
|
||||
Pass e.style['color'] = "rgb(250% 51 40%)" should set the property value
|
||||
Pass e.style['color'] = "rgb(255 20% 102)" should set the property value
|
||||
Pass e.style['color'] = "rgb(500, 0, 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(-500, 64, 128)" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(infinity), 0, 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, calc(infinity), 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, 0, calc(infinity))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0, 0, 0, calc(infinity))" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(-infinity), 0, 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, calc(-infinity), 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, 0, calc(-infinity))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0, 0, 0, calc(-infinity))" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(NaN), 0, 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, calc(NaN), 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, 0, calc(NaN))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0, 0, 0, calc(NaN))" should set the property value
|
||||
Pass e.style['color'] = "rgb(calc(0 / 0), 0, 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, calc(0 / 0), 0)" should set the property value
|
||||
Pass e.style['color'] = "rgb(0, 0, calc(0 / 0))" should set the property value
|
||||
Pass e.style['color'] = "rgba(0, 0, 0, calc(0 / 0))" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgb(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgb(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)" should set the property value
|
||||
Fail e.style['color'] = "rgb(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgb(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))" should set the property value
|
||||
Fail e.style['color'] = "rgb(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 0 0% / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(0% 0 0% / calc(0.75 + (sign(1em - 10px) * 0.1)))" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)) 400 -400 / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)) 400% -400% / 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50 + (sign(1em - 10px) * 10)), 400, -400, 0.5)" should set the property value
|
||||
Fail e.style['color'] = "rgba(calc(50% + (sign(1em - 10px) * 10%)), 400%, -400%, 0.5)" should set the property value
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 16 tests
|
||||
|
||||
16 Pass
|
||||
Pass e.style['color'] = "currentcolor" should set the property value
|
||||
Pass e.style['color'] = "transparent" should set the property value
|
||||
Pass e.style['color'] = "red" should set the property value
|
||||
Pass e.style['color'] = "magenta" should set the property value
|
||||
Pass e.style['color'] = "#234" should set the property value
|
||||
Pass e.style['color'] = "#FEDCBA" should set the property value
|
||||
Pass e.style['color'] = "rgb(2, 3, 4)" should set the property value
|
||||
Pass e.style['color'] = "rgb(100%, 0%, 0%)" should set the property value
|
||||
Pass e.style['color'] = "rgba(2, 3, 4, 0.5)" should set the property value
|
||||
Pass e.style['color'] = "rgba(2, 3, 4, 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsl(120, 100%, 50%)" should set the property value
|
||||
Pass e.style['color'] = "hsla(120, 100%, 50%, 0.25)" should set the property value
|
||||
Pass e.style['color'] = "rgb(-2, 3, 4)" should set the property value
|
||||
Pass e.style['color'] = "rgb(100, 200, 300)" should set the property value
|
||||
Pass e.style['color'] = "rgb(20, 10, 0, -10)" should set the property value
|
||||
Pass e.style['color'] = "rgb(100%, 200%, 300%)" should set the property value
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 4: Computation of colors using HWB notation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values">
|
||||
<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<style>
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
tests = [
|
||||
["hwb(120 30% 50%)", "rgb(77, 128, 77)"],
|
||||
["hwb(120 30% 50% / 0.5)", "rgba(77, 128, 77, 0.5)"],
|
||||
["hwb(120 30% 50% / 50%)", "rgba(77, 128, 77, 0.5)"],
|
||||
["hwb(none none none)", "rgb(255, 0, 0)"],
|
||||
["hwb(0 0% 0%)", "rgb(255, 0, 0)"],
|
||||
["hwb(none none none / none)", "rgba(255, 0, 0, 0)"],
|
||||
["hwb(0 0% 0% / 0)", "rgba(255, 0, 0, 0)"],
|
||||
["hwb(120 none none)", "rgb(0, 255, 0)"],
|
||||
["hwb(120 0% 0%)", "rgb(0, 255, 0)"],
|
||||
["hwb(120 80% none)", "rgb(204, 255, 204)"],
|
||||
["hwb(120 80% 0%)", "rgb(204, 255, 204)"],
|
||||
["hwb(120 none 50%)", "rgb(0, 128, 0)"],
|
||||
["hwb(120 0% 50%)", "rgb(0, 128, 0)"],
|
||||
["hwb(120 30% 50% / none)", "rgba(77, 128, 77, 0)"],
|
||||
["hwb(120 30% 50% / 0)", "rgba(77, 128, 77, 0)"],
|
||||
["hwb(120 30% 50% / 0%)", "rgba(77, 128, 77, 0)"],
|
||||
["hwb(none 100% 50% / none)", "rgba(170, 170, 170, 0)"],
|
||||
["hwb(0 100% 50% / 0)", "rgba(170, 170, 170, 0)"],
|
||||
|
||||
["hwb(0 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(30 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(60 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(120 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(180 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(210 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(240 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(270 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(300 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(330 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(360 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(90deg 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 0% 50%)", "rgb(64, 128, 0)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 12.5% 50%)", "rgb(80, 128, 32)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 25% 50%)", "rgb(96, 128, 64)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 37.5% 50%)", "rgb(112, 128, 96)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 62.5% 50%)", "rgb(142, 142, 142)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 75% 50%)", "rgb(153, 153, 153)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 87.5% 50%)", "rgb(162, 162, 162)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 100% 50%)", "rgb(170, 170, 170)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 0%)", "rgb(191, 255, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 12.5%)", "rgb(175, 223, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 25%)", "rgb(159, 191, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 37.5%)", "rgb(143, 159, 128)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 62.5%)", "rgb(113, 113, 113)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 75%)", "rgb(102, 102, 102)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 87.5%)", "rgb(93, 93, 93)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 100%)", "rgb(85, 85, 85)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 50% / 0)", "rgba(128, 128, 128, 0)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 50% / 0.2)", "rgba(128, 128, 128, 0.2)", "HWB value should parse and round correctly"],
|
||||
["hwb(90 50% 50% / 1)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"],
|
||||
|
||||
// calc(50% + (sign(1em - 10px) * 10%)), with its font relative units, must be evaluatated for computed value.
|
||||
["hwb(calc(110deg + (sign(1em - 10px) * 10deg)) 30% 50% / 50%)", "rgba(77, 128, 77, 0.5)"],
|
||||
["hwb(calc(110 + (sign(1em - 10px) * 10)) 30 50 / 0.5)", "rgba(77, 128, 77, 0.5)"],
|
||||
["hwb(120deg 30% 50% / calc(50% + (sign(1em - 10px) * 10%)))", "rgba(77, 128, 77, 0.6)"],
|
||||
["hwb(120 30 50 / calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgba(77, 128, 77, 0.85)"],
|
||||
];
|
||||
|
||||
for (const test of tests) {
|
||||
test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined);
|
||||
}
|
||||
|
||||
// Ensure that `calc` values work with dynamically changing relative units (slighly different alpha values to make test harness not complain about duplicate tests).
|
||||
document.getElementById("container").style.width = "1000px";
|
||||
test_computed_value("color", "hwb(calc(110deg + (sign(2cqw - 10px) * 10deg)) 30 50 / 51%)", "rgba(77, 128, 77, 0.51)");
|
||||
document.getElementById("container").style.width = "100px";
|
||||
test_computed_value("color", "hwb(calc(110deg + (sign(2cqw - 10px) * 10deg)) 30 50 / 52%)", "rgba(94, 128, 77, 0.52)");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 4: Computation of colors using RGB notation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values">
|
||||
<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<style>
|
||||
:root {
|
||||
--high: 500;
|
||||
--negative: -100;
|
||||
}
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
tests = [
|
||||
["rgb(none none none)", "rgb(0, 0, 0)"],
|
||||
["rgb(none none none / none)", "rgba(0, 0, 0, 0)"],
|
||||
["rgb(128 none none)", "rgb(128, 0, 0)"],
|
||||
["rgb(128 none none / none)", "rgba(128, 0, 0, 0)"],
|
||||
["rgb(none none none / .5)", "rgba(0, 0, 0, 0.5)"],
|
||||
["rgb(20% none none)", "rgb(51, 0, 0)"],
|
||||
["rgb(20% none none / none)", "rgba(51, 0, 0, 0)"],
|
||||
["rgb(none none none / 50%)", "rgba(0, 0, 0, 0.5)"],
|
||||
["rgba(none none none)", "rgb(0, 0, 0)"],
|
||||
["rgba(none none none / none)", "rgba(0, 0, 0, 0)"],
|
||||
["rgba(128 none none)", "rgb(128, 0, 0)"],
|
||||
["rgba(128 none none / none)", "rgba(128, 0, 0, 0)"],
|
||||
["rgba(none none none / .5)", "rgba(0, 0, 0, 0.5)"],
|
||||
["rgba(20% none none)", "rgb(51, 0, 0)"],
|
||||
["rgba(20% none none / none)", "rgba(51, 0, 0, 0)"],
|
||||
["rgba(none none none / 50%)", "rgba(0, 0, 0, 0.5)"],
|
||||
|
||||
["rgb(2.5, 3.4, 4.6)", ["rgb(3, 3, 5)", "rgb(2.5, 3.4, 4.6)"], "Tests that RGB channels are rounded appropriately"],
|
||||
|
||||
["rgb(00, 51, 102)", "rgb(0, 51, 102)", "Valid numbers should be parsed"],
|
||||
["r\\gb(00, 51, 102)", "rgb(0, 51, 102)", "Correct escape sequences should still parse"],
|
||||
["r\\67 b(00, 51, 102)", "rgb(0, 51, 102)", "Correct escape sequences should still parse"],
|
||||
["RGB(153, 204, 255)", "rgb(153, 204, 255)", "Capitalization should not affect parsing"],
|
||||
["rgB(0, 0, 0)", "rgb(0, 0, 0)", "Capitalization should not affect parsing"],
|
||||
["rgB(0, 51, 255)", "rgb(0, 51, 255)", "Capitalization should not affect parsing"],
|
||||
["rgb(0,51,255)", "rgb(0, 51, 255)", "Lack of whitespace should not affect parsing"],
|
||||
["rgb(0\t, 51 ,255)", "rgb(0, 51, 255)", "Whitespace should not affect parsing"],
|
||||
["rgb(/* R */0, /* G */51, /* B */255)", "rgb(0, 51, 255)", "Comments should be allowed within function"],
|
||||
["rgb(-51, 306, 0)", "rgb(0, 255, 0)", "Invalid values should be clamped to 0 and 255 respectively"],
|
||||
["rgb(42%, 3%, 50%)", "rgb(107, 8, 128)", "Valid percentages should be parsed"],
|
||||
["RGB(100%, 100%, 100%)", "rgb(255, 255, 255)", "Capitalization should not affect parsing"],
|
||||
["rgB(0%, 0%, 0%)", "rgb(0, 0, 0)", "Capitalization should not affect parsing"],
|
||||
["rgB(10%, 20%, 30%)", "rgb(26, 51, 77)", "Capitalization should not affect parsing"],
|
||||
["rgb(10%,20%,30%)", "rgb(26, 51, 77)", "Whitespace should not affect parsing"],
|
||||
["rgb(10%\t, 20% ,30%)", "rgb(26, 51, 77)", "Whitespace should not affect parsing"],
|
||||
["rgb(/* R */ 10%, /* G */ 20%, /* B */ 30%)", "rgb(26, 51, 77)", "Comments should not affect parsing"],
|
||||
["rgb(-12%, 110%, 1400%)", "rgb(0, 255, 255)", "Invalid values should be clamped to 0 and 255 respectively"],
|
||||
["rgb(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "RGB and RGBA are synonyms"],
|
||||
["rgb(0%, 0%, 0%, 0%)", "rgba(0, 0, 0, 0)", "RGB and RGBA are synonyms"],
|
||||
["rgb(0%, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "RGB and RGBA are synonyms"],
|
||||
["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "Valid numbers should be parsed"],
|
||||
["rgba(204, 0, 102, 0.3)", "rgba(204, 0, 102, 0.3)", "Valid numbers should be parsed"],
|
||||
["RGBA(255, 255, 255, 0)", "rgba(255, 255, 255, 0)", "Capitalization should not affect parsing"],
|
||||
["rgBA(0, 51, 255, 1)", "rgb(0, 51, 255)", "Capitalization should not affect parsing"],
|
||||
["rgba(0, 51, 255, 1.1)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["rgba(0, 51, 255, 37)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["rgba(0, 51, 255, 0.42)", "rgba(0, 51, 255, 0.42)", "Valid numbers should be parsed"],
|
||||
["rgba(0, 51, 255, 0)", "rgba(0, 51, 255, 0)", "Valid numbers should be parsed"],
|
||||
["rgba(0, 51, 255, -0.1)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["rgba(0, 51, 255, -139)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["RGBA(100%, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "Capitalization should not affect parsing"],
|
||||
["rgba(42%, 3%, 50%, 0.3)", "rgba(107, 8, 128, 0.3)", "Valid percentages should be parsed"],
|
||||
["rgBA(0%, 20%, 100%, 1)", "rgb(0, 51, 255)", "Capitalization should not affect parsing"],
|
||||
["rgba(0%, 20%, 100%, 1.1)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["rgba(0%, 20%, 100%, 37)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["rgba(0%, 20%, 100%, 0.42)", "rgba(0, 51, 255, 0.42)", "Valid percentages should be parsed"],
|
||||
["rgba(0%, 20%, 100%, 0)", "rgba(0, 51, 255, 0)", "Valid percentages should be parsed"],
|
||||
["rgba(0%, 20%, 100%, -0.1)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["rgba(0%, 20%, 100%, -139)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"],
|
||||
["rgba(255, 255, 255, 0%)", "rgba(255, 255, 255, 0)", "Percent alpha values are accepted in rgb/rgba"],
|
||||
["rgba(0%, 0%, 0%, 0%)", "rgba(0, 0, 0, 0)", "Percent alpha values are accepted in rgb/rgba"],
|
||||
["rgba(0%, 0%, 0%)", "rgb(0, 0, 0)", "RGB and RGBA are synonyms"],
|
||||
["rgba(0, 0, 0)", "rgb(0, 0, 0)", "RGB and RGBA are synonyms"],
|
||||
|
||||
// rgb are in the range [0, 255], alpha is in the range [0, 1].
|
||||
// calc(infinity) resolves to the upper bound while calc(-infinity) and calc(NaN) resolves the lower bound.
|
||||
// See: https://github.com/w3c/csswg-drafts/issues/8629
|
||||
["rgb(calc(infinity), 0, 0)", "rgb(255, 0, 0)", "Red channel resolves positive infinity to 255"],
|
||||
["rgb(0, calc(infinity), 0)", "rgb(0, 255, 0)", "Green channel resolves positive infinity to 255"],
|
||||
["rgb(0, 0, calc(infinity))", "rgb(0, 0, 255)", "Blue channel resolves positive infinity to 255"],
|
||||
["rgba(0, 0, 0, calc(infinity))", "rgb(0, 0, 0)", "Alpha channel resolves positive infinity to fully opaque"],
|
||||
["rgb(calc(-infinity), 0, 0)", "rgb(0, 0, 0)", "Red channel resolves negative infinity to zero"],
|
||||
["rgb(0, calc(-infinity), 0)", "rgb(0, 0, 0)", "Green channel resolves negative infinity to zero"],
|
||||
["rgb(0, 0, calc(-infinity))", "rgb(0, 0, 0)", "Blue channel resolves negative infinity to zero"],
|
||||
["rgba(0, 0, 0, calc(-infinity))", "rgba(0, 0, 0, 0)", "Alpha channel resolves negative infinity to fully transparent"],
|
||||
["rgb(calc(NaN), 0, 0)", "rgb(0, 0, 0)", "Red channel resolves NaN to zero"],
|
||||
["rgb(0, calc(NaN), 0)", "rgb(0, 0, 0)", "Green channel resolves NaN to zero"],
|
||||
["rgb(0, 0, calc(NaN))", "rgb(0, 0, 0)", "Blue channel resolves NaN to zero"],
|
||||
["rgba(0, 0, 0, calc(NaN))", "rgba(0, 0, 0, 0)", "Alpha channel resolves NaN to zero"],
|
||||
["rgb(calc(0 / 0), 0, 0)", "rgb(0, 0, 0)", "Red channel resolves NaN equivalent calc statements to zero"],
|
||||
["rgb(0, calc(0 / 0), 0)", "rgb(0, 0, 0)", "Green channel resolves NaN equivalent calc statements to zero"],
|
||||
["rgb(0, 0, calc(0 / 0))", "rgb(0, 0, 0)", "Blue channel resolves NaN equivalent calc statements to zero"],
|
||||
["rgba(0, 0, 0, calc(0 / 0))", "rgba(0, 0, 0, 0)", "Alpha channel resolves NaN equivalent calc statements to zero"],
|
||||
|
||||
["rgb(var(--high), 0, 0)", "rgb(255, 0, 0)", "Variables above 255 get clamped to 255."],
|
||||
["rgb(var(--negative), 64, 128)", "rgb(0, 64, 128)", "Variables below 0 get clamped to 0."],
|
||||
|
||||
// calc(50% + (sign(1em - 10px) * 10%)), with its font relative units, must be evaluatated for computed value.
|
||||
["rgb(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)", "rgba(153, 0, 0, 0.5)"],
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)", "rgba(153, 0, 0, 0.5)"],
|
||||
["rgb(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)", "rgba(60, 0, 0, 0.5)"],
|
||||
["rgba(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)", "rgba(60, 0, 0, 0.5)"],
|
||||
["rgb(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "rgba(0, 0, 0, 0.6)"],
|
||||
["rgba(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "rgba(0, 0, 0, 0.6)"],
|
||||
["rgb(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgba(0, 0, 0, 0.85)"],
|
||||
["rgba(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgba(0, 0, 0, 0.85)"],
|
||||
|
||||
["rgb(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)", "rgba(153, 0, 0, 0.5)"],
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)", "rgba(153, 0, 0, 0.5)"],
|
||||
["rgb(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)", "rgba(60, 0, 0, 0.5)"],
|
||||
["rgba(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)", "rgba(60, 0, 0, 0.5)"],
|
||||
["rgb(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))", "rgba(0, 0, 0, 0.6)"],
|
||||
["rgba(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))", "rgba(0, 0, 0, 0.6)"],
|
||||
["rgb(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgba(0, 0, 0, 0.85)"],
|
||||
["rgba(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgba(0, 0, 0, 0.85)"],
|
||||
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)) 0 0% / 0.5)", "rgba(153, 0, 0, 0.5)"],
|
||||
["rgba(0% 0 0% / calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgba(0, 0, 0, 0.85)"],
|
||||
];
|
||||
|
||||
for (const test of tests) {
|
||||
test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined);
|
||||
}
|
||||
|
||||
// Ensure that `calc` values work with dynamically changing relative units (slighly different alpha values to make test harness not complain about duplicate tests).
|
||||
document.getElementById("container").style.width = "1000px";
|
||||
test_computed_value("color", "rgba(calc(50% + (sign(2cqw - 10px) * 10%)), 0%, 0%, 51%)", "rgba(153, 0, 0, 0.51)");
|
||||
document.getElementById("container").style.width = "100px";
|
||||
test_computed_value("color", "rgba(calc(50% + (sign(2cqw - 10px) * 10%)), 0%, 0%, 52%)", "rgba(102, 0, 0, 0.52)");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 3: getComputedStyle().color</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-3/#foreground">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<style>
|
||||
#container {
|
||||
color: rgb(255, 0, 0);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
test_computed_value("color", "currentcolor", "rgb(255, 0, 0)");
|
||||
test_computed_value("color", "transparent", "rgba(0, 0, 0, 0)");
|
||||
test_computed_value("color", "red", "rgb(255, 0, 0)");
|
||||
test_computed_value("color", "magenta", "rgb(255, 0, 255)");
|
||||
test_computed_value("color", "#234", "rgb(34, 51, 68)");
|
||||
test_computed_value("color", "#FEDCBA", "rgb(254, 220, 186)");
|
||||
test_computed_value("color", "rgb(2, 3, 4)");
|
||||
test_computed_value("color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)");
|
||||
test_computed_value("color", "rgba(2, 3, 4, 0.5)");
|
||||
test_computed_value("color", "rgba(2, 3, 4, 50%)", "rgba(2, 3, 4, 0.5)");
|
||||
test_computed_value("color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)");
|
||||
test_computed_value("color", "hsla(120, 100%, 50%, 0.25)", "rgba(0, 255, 0, 0.25)");
|
||||
test_computed_value("color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)");
|
||||
test_computed_value("color", "rgb(100, 200, 300)", "rgb(100, 200, 255)");
|
||||
test_computed_value("color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)");
|
||||
test_computed_value("color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 4: Parsing and serialization of colors using valid HSL notation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
tests = [
|
||||
["hsl(120 30% 50%)", "rgb(89, 166, 89)"],
|
||||
["hsl(120 30% 50% / 0.5)", "rgba(89, 166, 89, 0.5)"],
|
||||
["hsl(none none none)", "rgb(0, 0, 0)"],
|
||||
["hsl(0 0% 0%)", "rgb(0, 0, 0)"],
|
||||
["hsl(none none none / none)", "rgba(0, 0, 0, 0)"],
|
||||
["hsl(0 0% 0% / 0)", "rgba(0, 0, 0, 0)"],
|
||||
["hsla(none none none)", "rgb(0, 0, 0)"],
|
||||
["hsla(0 0% 0%)", "rgb(0, 0, 0)"],
|
||||
["hsla(none none none / none)", "rgba(0, 0, 0, 0)"],
|
||||
["hsla(0 0% 0% / 0)", "rgba(0, 0, 0, 0)"],
|
||||
["hsl(120 none none)", "rgb(0, 0, 0)"],
|
||||
["hsl(120 0% 0%)", "rgb(0, 0, 0)"],
|
||||
["hsl(120 80% none)", "rgb(0, 0, 0)"],
|
||||
["hsl(120 80% 0%)", "rgb(0, 0, 0)"],
|
||||
["hsl(120 none 50%)", "rgb(128, 128, 128)"],
|
||||
["hsl(120 0% 50%)", "rgb(128, 128, 128)"],
|
||||
["hsl(120 100% 50% / none)", "rgba(0, 255, 0, 0)"],
|
||||
["hsl(120 100% 50% / 0)", "rgba(0, 255, 0, 0)"],
|
||||
["hsl(none 100% 50%)", "rgb(255, 0, 0)"],
|
||||
["hsl(0 100% 50%)", "rgb(255, 0, 0)"],
|
||||
|
||||
// Test with number components.
|
||||
["hsl(120 30 50)", "rgb(89, 166, 89)"],
|
||||
["hsl(120 30 50 / 0.5)", "rgba(89, 166, 89, 0.5)"],
|
||||
["hsl(120 30% 50)", "rgb(89, 166, 89)"],
|
||||
["hsl(120 30% 50 / 0.5)", "rgba(89, 166, 89, 0.5)"],
|
||||
["hsl(120 30 50%)", "rgb(89, 166, 89)"],
|
||||
["hsl(120 30 50% / 0.5)", "rgba(89, 166, 89, 0.5)"],
|
||||
["hsl(120 none 50)", "rgb(128, 128, 128)"],
|
||||
["hsl(120 none 50 / 0.5)", "rgba(128, 128, 128, 0.5)"],
|
||||
["hsl(120 30 none)", "rgb(0, 0, 0)"],
|
||||
["hsl(120 30 none / 0.5)", "rgba(0, 0, 0, 0.5)"],
|
||||
["hsl(120 30 50 / none)", "rgba(89, 166, 89, 0)"],
|
||||
|
||||
// Test parse-time clamp of negative saturation to zero
|
||||
["hsl(0 -50% 40%)", "rgb(102, 102, 102)"],
|
||||
["hsl(30 -50% 60)", "rgb(153, 153, 153)"],
|
||||
["hsl(0 -50 40%)", "rgb(102, 102, 102)"],
|
||||
["hsl(30 -50 60)", "rgb(153, 153, 153)"],
|
||||
|
||||
// Test non-finite values. calc(infinity) goes to upper bound while calc(-infinity) and NaN go to the lower bound.
|
||||
// See: https://github.com/w3c/csswg-drafts/issues/8629
|
||||
["hsl(calc(infinity) 100% 50%)", "rgb(255, 0, 0)"], // hsl(360 100% 50%)
|
||||
["hsl(calc(-infinity) 100% 50%)", "rgb(255, 0, 0)"], // hsl(0 100% 50%)
|
||||
["hsl(calc(0 / 0) 100% 50%)", "rgb(255, 0, 0)"], // hsl(0 100% 50%)
|
||||
["hsl(90 50% 50% / calc(infinity))", "rgb(128, 191, 64)"], // hsl(90 50% 50%)
|
||||
["hsl(90 50% 50% / calc(-infinity))", "rgba(128, 191, 64, 0)"], // hsl(90 50% 50% / 0)
|
||||
["hsl(90 50% 50% / calc(0 / 0))", "rgba(128, 191, 64, 0)"], // hsl(90 50% 50% / 0)
|
||||
|
||||
// calc(50% + (sign(1em - 10px) * 10%)) cannot be evaluated eagerly because font relative units are not yet known at parse time.
|
||||
["hsl(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)", "hsl(calc(50deg + (10deg * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsla(calc(50deg + (sign(1em - 10px) * 10deg)), 0%, 0%, 50%)", "hsl(calc(50deg + (10deg * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsl(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)", "hsl(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsla(calc(50 + (sign(1em - 10px) * 10)), 0%, 0%, 50%)", "hsl(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsl(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "hsl(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["hsla(0deg, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "hsl(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["hsl(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "hsl(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["hsla(0, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "hsl(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
|
||||
["hsl(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)", "hsl(calc(50deg + (10deg * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsla(calc(50deg + (sign(1em - 10px) * 10deg)) 0% 0% / 50%)", "hsl(calc(50deg + (10deg * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsl(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)", "hsl(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsla(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)", "hsl(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["hsl(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))", "hsl(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["hsla(0deg 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))", "hsl(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["hsl(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))", "hsl(0 0 0 / calc(0.75 + (0.1 * sign(1em - 10px))))"],
|
||||
["hsla(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))", "hsl(0 0 0 / calc(0.75 + (0.1 * sign(1em - 10px))))"],
|
||||
|
||||
["hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100 300 / 0.5)", "hsl(calc(50deg + (10deg * sign(1em - 10px))) 0 300 / 0.5)"],
|
||||
["hsla(calc(50deg + (sign(1em - 10px) * 10deg)) -100% 300% / 0.5)", "hsl(calc(50deg + (10deg * sign(1em - 10px))) 0 300 / 0.5)"],
|
||||
];
|
||||
|
||||
for (const test of tests) {
|
||||
test_valid_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 4: Parsing and serialization of colors using valid RGB notation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
tests = [
|
||||
["rgb(none none none)", "rgb(0, 0, 0)"],
|
||||
["rgb(none none none / none)", "rgba(0, 0, 0, 0)"],
|
||||
["rgb(128 none none)", "rgb(128, 0, 0)"],
|
||||
["rgb(128 none none / none)", "rgba(128, 0, 0, 0)"],
|
||||
["rgb(none none none / .5)", "rgba(0, 0, 0, 0.5)"],
|
||||
["rgb(20% none none)", "rgb(51, 0, 0)"],
|
||||
["rgb(20% none none / none)", "rgba(51, 0, 0, 0)"],
|
||||
["rgb(none none none / 50%)", "rgba(0, 0, 0, 0.5)"],
|
||||
["rgba(none none none)", "rgb(0, 0, 0)"],
|
||||
["rgba(none none none / none)", "rgba(0, 0, 0, 0)"],
|
||||
["rgba(128 none none)", "rgb(128, 0, 0)"],
|
||||
["rgba(128 none none / none)", "rgba(128, 0, 0, 0)"],
|
||||
["rgba(none none none / .5)", "rgba(0, 0, 0, 0.5)"],
|
||||
["rgba(20% none none)", "rgb(51, 0, 0)"],
|
||||
["rgba(20% none none / none)", "rgba(51, 0, 0, 0)"],
|
||||
["rgba(none none none / 50%)", "rgba(0, 0, 0, 0.5)"],
|
||||
["rgb(-2 3 4)", "rgb(0, 3, 4)"],
|
||||
["rgb(-20% 20% 40%)", "rgb(0, 51, 102)"],
|
||||
["rgb(257 30 40)", "rgb(255, 30, 40)"],
|
||||
["rgb(250% 20% 40%)", "rgb(255, 51, 102)"],
|
||||
["rgba(-2 3 4)", "rgb(0, 3, 4)"],
|
||||
["rgba(-20% 20% 40%)", "rgb(0, 51, 102)"],
|
||||
["rgba(257 30 40)", "rgb(255, 30, 40)"],
|
||||
["rgba(250% 20% 40%)", "rgb(255, 51, 102)"],
|
||||
["rgba(-2 3 4 / .5)", "rgba(0, 3, 4, 0.5)"],
|
||||
["rgba(-20% 20% 40% / 50%)", "rgba(0, 51, 102, 0.5)"],
|
||||
["rgba(257 30 40 / 50%)", "rgba(255, 30, 40, 0.5)"],
|
||||
["rgba(250% 20% 40% / .5)", "rgba(255, 51, 102, 0.5)"],
|
||||
|
||||
// Test with mixed components.
|
||||
["rgb(250% 51 40%)", "rgb(255, 51, 102)"],
|
||||
["rgb(255 20% 102)", "rgb(255, 51, 102)"],
|
||||
|
||||
// rgb are in the range [0, 255], alpha is in the range [0, 1].
|
||||
// Values above or below these numbers should get resolved to the upper/lower bound.
|
||||
["rgb(500, 0, 0)", "rgb(255, 0, 0)"],
|
||||
["rgb(-500, 64, 128)", "rgb(0, 64, 128)"],
|
||||
|
||||
// calc(infinity) resolves to the upper bound while calc(-infinity) and calc(NaN) resolves the lower bound.
|
||||
// See: https://github.com/w3c/csswg-drafts/issues/8629
|
||||
["rgb(calc(infinity), 0, 0)", "rgb(255, 0, 0)"],
|
||||
["rgb(0, calc(infinity), 0)", "rgb(0, 255, 0)"],
|
||||
["rgb(0, 0, calc(infinity))", "rgb(0, 0, 255)"],
|
||||
["rgba(0, 0, 0, calc(infinity))", "rgb(0, 0, 0)"],
|
||||
["rgb(calc(-infinity), 0, 0)", "rgb(0, 0, 0)"],
|
||||
["rgb(0, calc(-infinity), 0)", "rgb(0, 0, 0)"],
|
||||
["rgb(0, 0, calc(-infinity))", "rgb(0, 0, 0)"],
|
||||
["rgba(0, 0, 0, calc(-infinity))", "rgba(0, 0, 0, 0)"],
|
||||
["rgb(calc(NaN), 0, 0)", "rgb(0, 0, 0)"],
|
||||
["rgb(0, calc(NaN), 0)", "rgb(0, 0, 0)"],
|
||||
["rgb(0, 0, calc(NaN))", "rgb(0, 0, 0)"],
|
||||
["rgba(0, 0, 0, calc(NaN))", "rgba(0, 0, 0, 0)"],
|
||||
["rgb(calc(0 / 0), 0, 0)", "rgb(0, 0, 0)"],
|
||||
["rgb(0, calc(0 / 0), 0)", "rgb(0, 0, 0)"],
|
||||
["rgb(0, 0, calc(0 / 0))", "rgb(0, 0, 0)"],
|
||||
["rgba(0, 0, 0, calc(0 / 0))", "rgba(0, 0, 0, 0)"],
|
||||
|
||||
// calc(50% + (sign(1em - 10px) * 10%)) cannot be evaluated eagerly because font relative units are not yet known at parse time.
|
||||
["rgb(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)", "rgb(calc(50% + (10% * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)), 0%, 0%, 50%)", "rgb(calc(50% + (10% * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgb(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)", "rgb(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgba(calc(50 + (sign(1em - 10px) * 10)), 0, 0, 0.5)", "rgb(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgb(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "rgb(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["rgba(0%, 0%, 0%, calc(50% + (sign(1em - 10px) * 10%)))", "rgb(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["rgb(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgb(0 0 0 / calc(0.75 + (0.1 * sign(1em - 10px))))"],
|
||||
["rgba(0, 0, 0, calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgb(0 0 0 / calc(0.75 + (0.1 * sign(1em - 10px))))"],
|
||||
|
||||
["rgb(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)", "rgb(calc(50% + (10% * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)) 0% 0% / 50%)", "rgb(calc(50% + (10% * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgb(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)", "rgb(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgba(calc(50 + (sign(1em - 10px) * 10)) 0 0 / 0.5)", "rgb(calc(50 + (10 * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgb(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))", "rgb(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["rgba(0% 0% 0% / calc(50% + (sign(1em - 10px) * 10%)))", "rgb(0 0 0 / calc(50% + (10% * sign(1em - 10px))))"],
|
||||
["rgb(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgb(0 0 0 / calc(0.75 + (0.1 * sign(1em - 10px))))"],
|
||||
["rgba(0 0 0 / calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgb(0 0 0 / calc(0.75 + (0.1 * sign(1em - 10px))))"],
|
||||
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)) 0 0% / 0.5)", "rgb(calc(50% + (10% * sign(1em - 10px))) 0 0 / 0.5)"],
|
||||
["rgba(0% 0 0% / calc(0.75 + (sign(1em - 10px) * 0.1)))", "rgb(0 0 0 / calc(0.75 + (0.1 * sign(1em - 10px))))"],
|
||||
|
||||
["rgba(calc(50 + (sign(1em - 10px) * 10)) 400 -400 / 0.5)", "rgb(calc(50 + (10 * sign(1em - 10px))) 255 0 / 0.5)"],
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)) 400% -400% / 0.5)", "rgb(calc(50% + (10% * sign(1em - 10px))) 255 0 / 0.5)"],
|
||||
["rgba(calc(50 + (sign(1em - 10px) * 10)), 400, -400, 0.5)", "rgb(calc(50 + (10 * sign(1em - 10px))) 255 0 / 0.5)"],
|
||||
["rgba(calc(50% + (sign(1em - 10px) * 10%)), 400%, -400%, 0.5)", "rgb(calc(50% + (10% * sign(1em - 10px))) 255 0 / 0.5)"],
|
||||
];
|
||||
|
||||
for (const test of tests) {
|
||||
test_valid_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Color Level 3: parsing color with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-3/#foreground">
|
||||
<meta name="assert" content="color supports the '<color>' grammar defined in CSS Color Level 3.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("color", "currentcolor");
|
||||
test_valid_value("color", "transparent");
|
||||
test_valid_value("color", "red");
|
||||
test_valid_value("color", "magenta");
|
||||
test_valid_value("color", "#234", "rgb(34, 51, 68)");
|
||||
test_valid_value("color", "#FEDCBA", "rgb(254, 220, 186)");
|
||||
test_valid_value("color", "rgb(2, 3, 4)");
|
||||
test_valid_value("color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)");
|
||||
test_valid_value("color", "rgba(2, 3, 4, 0.5)");
|
||||
test_valid_value("color", "rgba(2, 3, 4, 50%)", "rgba(2, 3, 4, 0.5)");
|
||||
test_valid_value("color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)");
|
||||
test_valid_value("color", "hsla(120, 100%, 50%, 0.25)", "rgba(0, 255, 0, 0.25)");
|
||||
test_valid_value("color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)");
|
||||
test_valid_value("color", "rgb(100, 200, 300)", "rgb(100, 200, 255)");
|
||||
test_valid_value("color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)");
|
||||
test_valid_value("color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue