mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-04-23 04:55:15 +00:00
LibWeb: Serialize drop-shadow filter properties in canonical order
This commit is contained in:
Tim Ledbetter
parent
c941170e5a
commit
d6e04fc53a
5 changed files with 232 additions and 6 deletions
|
|
@ -68,14 +68,14 @@ String FilterValueListStyleValue::to_string(SerializationMode) const
|
|||
builder.append(blur.radius->to_string());
|
||||
},
|
||||
[&](FilterOperation::DropShadow const& drop_shadow) {
|
||||
builder.appendff("drop-shadow({} {}"sv,
|
||||
drop_shadow.offset_x, drop_shadow.offset_y);
|
||||
builder.appendff("drop-shadow("sv);
|
||||
if (drop_shadow.color.has_value()) {
|
||||
serialize_a_srgb_value(builder, *drop_shadow.color);
|
||||
builder.append(' ');
|
||||
}
|
||||
builder.appendff("{} {}", drop_shadow.offset_x, drop_shadow.offset_y);
|
||||
if (drop_shadow.radius.has_value())
|
||||
builder.appendff(" {}", drop_shadow.radius->to_string());
|
||||
if (drop_shadow.color.has_value()) {
|
||||
builder.append(' ');
|
||||
serialize_a_srgb_value(builder, *drop_shadow.color);
|
||||
}
|
||||
},
|
||||
[&](FilterOperation::HueRotate const& hue_rotate) {
|
||||
builder.append("hue-rotate("sv);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 34 tests
|
||||
|
||||
9 Pass
|
||||
25 Fail
|
||||
Pass Property filter value 'none'
|
||||
Pass Property filter value 'blur(100px)'
|
||||
Fail Property filter value 'blur()'
|
||||
Pass Property filter value 'brightness(0)'
|
||||
Fail Property filter value 'brightness(300%)'
|
||||
Fail Property filter value 'brightness()'
|
||||
Pass Property filter value 'contrast(0)'
|
||||
Fail Property filter value 'contrast(300%)'
|
||||
Fail Property filter value 'contrast()'
|
||||
Fail Property filter value 'drop-shadow(1px 2px)'
|
||||
Pass Property filter value 'drop-shadow(rgb(4, 5, 6) 1px 2px 0px)'
|
||||
Fail Property filter value 'grayscale(50%)'
|
||||
Fail Property filter value 'grayscale(calc(50%))'
|
||||
Fail Property filter value 'grayscale(2)'
|
||||
Fail Property filter value 'grayscale(calc(2))'
|
||||
Fail Property filter value 'grayscale()'
|
||||
Fail Property filter value 'hue-rotate(90deg)'
|
||||
Fail Property filter value 'hue-rotate()'
|
||||
Pass Property filter value 'invert(0)'
|
||||
Fail Property filter value 'invert(100%)'
|
||||
Fail Property filter value 'invert(2)'
|
||||
Fail Property filter value 'invert()'
|
||||
Pass Property filter value 'opacity(0)'
|
||||
Fail Property filter value 'opacity(100%)'
|
||||
Fail Property filter value 'opacity(2)'
|
||||
Fail Property filter value 'opacity()'
|
||||
Pass Property filter value 'saturate(0)'
|
||||
Fail Property filter value 'saturate(300%)'
|
||||
Fail Property filter value 'saturate()'
|
||||
Pass Property filter value 'sepia(0)'
|
||||
Fail Property filter value 'sepia(100%)'
|
||||
Fail Property filter value 'sepia(2)'
|
||||
Fail Property filter value 'sepia()'
|
||||
Fail Property filter value 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)'
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 39 tests
|
||||
|
||||
30 Pass
|
||||
9 Fail
|
||||
Pass e.style['filter'] = "none" should set the property value
|
||||
Pass e.style['filter'] = "blur(100px)" should set the property value
|
||||
Pass e.style['filter'] = "blur(0)" should set the property value
|
||||
Pass e.style['filter'] = "blur()" should set the property value
|
||||
Pass e.style['filter'] = "brightness(0)" should set the property value
|
||||
Pass e.style['filter'] = "brightness(300%)" should set the property value
|
||||
Pass e.style['filter'] = "brightness()" should set the property value
|
||||
Pass e.style['filter'] = "contrast(0)" should set the property value
|
||||
Pass e.style['filter'] = "contrast(300%)" should set the property value
|
||||
Pass e.style['filter'] = "contrast()" should set the property value
|
||||
Pass e.style['filter'] = "drop-shadow(1px 2px)" should set the property value
|
||||
Pass e.style['filter'] = "drop-shadow(1px 2px 3px)" should set the property value
|
||||
Pass e.style['filter'] = "drop-shadow(0 0 0)" should set the property value
|
||||
Pass e.style['filter'] = "drop-shadow(rgb(4, 5, 6) 1px 2px)" should set the property value
|
||||
Pass e.style['filter'] = "drop-shadow(1px 2px rgb(4, 5, 6))" should set the property value
|
||||
Pass e.style['filter'] = "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)" should set the property value
|
||||
Pass e.style['filter'] = "grayscale(0)" should set the property value
|
||||
Fail e.style['filter'] = "grayscale(300%)" should set the property value
|
||||
Pass e.style['filter'] = "grayscale(calc(300%))" should set the property value
|
||||
Pass e.style['filter'] = "grayscale(calc(101% * sign(1em - 1px)))" should set the property value
|
||||
Pass e.style['filter'] = "grayscale()" should set the property value
|
||||
Fail e.style['filter'] = "hue-rotate(90deg)" should set the property value
|
||||
Fail e.style['filter'] = "hue-rotate(0)" should set the property value
|
||||
Pass e.style['filter'] = "hue-rotate()" should set the property value
|
||||
Pass e.style['filter'] = "invert(0)" should set the property value
|
||||
Fail e.style['filter'] = "invert(300%)" should set the property value
|
||||
Pass e.style['filter'] = "invert()" should set the property value
|
||||
Pass e.style['filter'] = "opacity(0)" should set the property value
|
||||
Fail e.style['filter'] = "opacity(300%)" should set the property value
|
||||
Pass e.style['filter'] = "opacity()" should set the property value
|
||||
Pass e.style['filter'] = "saturate(0)" should set the property value
|
||||
Pass e.style['filter'] = "saturate(300%)" should set the property value
|
||||
Pass e.style['filter'] = "saturate()" should set the property value
|
||||
Pass e.style['filter'] = "sepia(0)" should set the property value
|
||||
Fail e.style['filter'] = "sepia(300%)" should set the property value
|
||||
Pass e.style['filter'] = "sepia()" should set the property value
|
||||
Fail e.style['filter'] = "url(picture.svg#f)" should set the property value
|
||||
Fail e.style['filter'] = "url(\"https://www.example.com/picture.svg#f\")" should set the property value
|
||||
Fail e.style['filter'] = "blur(10px) url(\"picture.svg#f\") contrast(20) brightness(30)" should set the property value
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filter Effects Module Level 1: getComputedStyle().filter</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
|
||||
<meta name="assert" content="filter supports omitted arguments'.">
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<script src="../../../css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<style>
|
||||
#target {
|
||||
color: lime;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("filter", "none");
|
||||
|
||||
test_computed_value("filter", "blur(100px)");
|
||||
test_computed_value("filter", "blur()", "blur(0px)");
|
||||
|
||||
test_computed_value("filter", "brightness(0)");
|
||||
test_computed_value("filter", "brightness(300%)", "brightness(3)");
|
||||
test_computed_value("filter", "brightness()", "brightness(1)");
|
||||
|
||||
test_computed_value("filter", "contrast(0)");
|
||||
test_computed_value("filter", "contrast(300%)", "contrast(3)");
|
||||
test_computed_value("filter", "contrast()", "contrast(1)");
|
||||
|
||||
test_computed_value("filter", "drop-shadow(1px 2px)", "drop-shadow(rgb(0, 255, 0) 1px 2px 0px)");
|
||||
test_computed_value("filter", "drop-shadow(rgb(4, 5, 6) 1px 2px 0px)");
|
||||
|
||||
test_computed_value("filter", "grayscale(50%)", "grayscale(0.5)");
|
||||
test_computed_value("filter", "grayscale(calc(50%))", "grayscale(0.5)");
|
||||
test_computed_value("filter", "grayscale(2)", "grayscale(1)");
|
||||
test_computed_value("filter", "grayscale(calc(2))", "grayscale(1)");
|
||||
test_computed_value("filter", "grayscale()", "grayscale(1)");
|
||||
|
||||
test_computed_value("filter", "hue-rotate(90deg)");
|
||||
test_computed_value("filter", "hue-rotate()", "hue-rotate(0deg)");
|
||||
|
||||
test_computed_value("filter", "invert(0)");
|
||||
test_computed_value("filter", "invert(100%)", "invert(1)");
|
||||
test_computed_value("filter", "invert(2)", "invert(1)");
|
||||
test_computed_value("filter", "invert()", "invert(1)");
|
||||
|
||||
test_computed_value("filter", "opacity(0)");
|
||||
test_computed_value("filter", "opacity(100%)", "opacity(1)");
|
||||
test_computed_value("filter", "opacity(2)", "opacity(1)");
|
||||
test_computed_value("filter", "opacity()", "opacity(1)");
|
||||
|
||||
test_computed_value("filter", "saturate(0)");
|
||||
test_computed_value("filter", "saturate(300%)", "saturate(3)");
|
||||
test_computed_value("filter", "saturate()", "saturate(1)");
|
||||
|
||||
test_computed_value("filter", "sepia(0)");
|
||||
test_computed_value("filter", "sepia(100%)", "sepia(1)");
|
||||
test_computed_value("filter", "sepia(2)", "sepia(1)");
|
||||
test_computed_value("filter", "sepia()", "sepia(1)");
|
||||
|
||||
test_computed_value("filter", 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Filter Effects Module Level 1: parsing filter with valid values</title>
|
||||
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
||||
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
|
||||
<meta name="assert" content="filter supports the full grammar 'none | <filter-function-list>'.">
|
||||
<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("filter", "none");
|
||||
|
||||
test_valid_value("filter", "blur(100px)");
|
||||
test_valid_value("filter", "blur(0)", "blur(0px)");
|
||||
test_valid_value("filter", "blur()", ["blur()", "blur(0px)"]);
|
||||
|
||||
test_valid_value("filter", "brightness(0)");
|
||||
test_valid_value("filter", "brightness(300%)");
|
||||
test_valid_value("filter", "brightness()", ["brightness()", "brightness(1)"]);
|
||||
|
||||
test_valid_value("filter", "contrast(0)");
|
||||
test_valid_value("filter", "contrast(300%)");
|
||||
test_valid_value("filter", "contrast()", ["contrast()", "contrast(1)"]);
|
||||
|
||||
test_valid_value("filter", "drop-shadow(1px 2px)");
|
||||
test_valid_value("filter", "drop-shadow(1px 2px 3px)");
|
||||
test_valid_value("filter", "drop-shadow(0 0 0)", "drop-shadow(0px 0px 0px)");
|
||||
// https://github.com/w3c/fxtf-drafts/issues/240
|
||||
test_valid_value("filter", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
|
||||
test_valid_value("filter", "drop-shadow(1px 2px rgb(4, 5, 6))", "drop-shadow(rgb(4, 5, 6) 1px 2px)");
|
||||
test_valid_value("filter", "drop-shadow(rgba(4, 5, 6, 0.75) 1px 2px 3px)");
|
||||
|
||||
test_valid_value("filter", "grayscale(0)");
|
||||
test_valid_value("filter", "grayscale(300%)", "grayscale(100%)");
|
||||
test_valid_value("filter", "grayscale(calc(300%))");
|
||||
test_valid_value("filter", "grayscale(calc(101% * sign(1em - 1px)))");
|
||||
test_valid_value("filter", "grayscale()", ["grayscale()", "grayscale(1)"]);
|
||||
|
||||
test_valid_value("filter", "hue-rotate(90deg)");
|
||||
test_valid_value("filter", "hue-rotate(0)", "hue-rotate(0deg)"); // https://github.com/w3c/fxtf-drafts/issues/228
|
||||
test_valid_value("filter", "hue-rotate()", ["hue-rotate()", "hue-rotate(0deg)"]);
|
||||
|
||||
test_valid_value("filter", "invert(0)");
|
||||
test_valid_value("filter", "invert(300%)", "invert(100%)");
|
||||
test_valid_value("filter", "invert()", ["invert()", "invert(1)"]);
|
||||
|
||||
test_valid_value("filter", "opacity(0)");
|
||||
test_valid_value("filter", "opacity(300%)", "opacity(100%)");
|
||||
test_valid_value("filter", "opacity()", ["opacity()", "opacity(1)"]);
|
||||
|
||||
test_valid_value("filter", "saturate(0)");
|
||||
test_valid_value("filter", "saturate(300%)");
|
||||
test_valid_value("filter", "saturate()", ["saturate()", "saturate(1)"]);
|
||||
|
||||
test_valid_value("filter", "sepia(0)");
|
||||
test_valid_value("filter", "sepia(300%)", "sepia(100%)");
|
||||
test_valid_value("filter", "sepia()", ["sepia()", "sepia(1)"]);
|
||||
|
||||
// Edge serializes url(...) without quotes. Blink/WebKit and Firefox use quotes.
|
||||
test_valid_value("filter", "url(picture.svg#f)", ['url("picture.svg#f")', 'url(picture.svg#f)']);
|
||||
|
||||
test_valid_value("filter", 'url("https://www.example.com/picture.svg#f")',
|
||||
['url("https://www.example.com/picture.svg#f")', 'url(https://www.example.com/picture.svg#f)']);
|
||||
|
||||
test_valid_value("filter", 'blur(10px) url("picture.svg#f") contrast(20) brightness(30)',
|
||||
['blur(10px) url("picture.svg#f") contrast(20) brightness(30)', 'blur(10px) url(picture.svg#f) contrast(20) brightness(30)']);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue