From d6e04fc53a08e91685094f2027e71d0a647636b7 Mon Sep 17 00:00:00 2001
From: Tim Ledbetter <tim.ledbetter@ladybird.org>
Date: Fri, 4 Apr 2025 11:04:35 +0100
Subject: [PATCH] LibWeb: Serialize drop-shadow filter properties in canonical
 order

---
 .../StyleValues/FilterValueListStyleValue.cpp | 12 +--
 .../parsing/filter-computed.txt               | 40 ++++++++++
 .../parsing/filter-parsing-valid.txt          | 45 ++++++++++++
 .../parsing/filter-computed.html              | 68 +++++++++++++++++
 .../parsing/filter-parsing-valid.html         | 73 +++++++++++++++++++
 5 files changed, 232 insertions(+), 6 deletions(-)
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-parsing-valid.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-parsing-valid.html

diff --git a/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
index 32fd2621d58..bc8d45e4829 100644
--- a/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
+++ b/Libraries/LibWeb/CSS/StyleValues/FilterValueListStyleValue.cpp
@@ -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);
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-computed.txt
new file mode 100644
index 00000000000..45991f9854a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-computed.txt
@@ -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)'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-parsing-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-parsing-valid.txt
new file mode 100644
index 00000000000..0db8824f6bb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-parsing-valid.txt
@@ -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
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-computed.html
new file mode 100644
index 00000000000..3670c95bd1d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-computed.html
@@ -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>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-parsing-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-parsing-valid.html
new file mode 100644
index 00000000000..ed64d83db48
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/filter-effects/parsing/filter-parsing-valid.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>