LibWeb: Clamp grayscale, invert, filter and opacity filter values to 1

Author: https://github.com/tcl3
Commit: e73438e82c
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4222
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -4432,6 +4432,12 @@ RefPtr<CSSStyleValue> Parser::parse_filter_value_list_value(TokenStream<Componen
                     return {};
                 if (amount->is_number() && amount->number().value() < 0)
                     return {};
+                if (first_is_one_of(filter_token, FilterToken::Grayscale, FilterToken::Invert, FilterToken::Opacity, FilterToken::Sepia)) {
+                    if (amount->is_percentage() && amount->percentage().value() > 100)
+                        amount = Percentage { 100 };
+                    if (amount->is_number() && amount->number().value() > 1)
+                        amount = Number { Number::Type::Integer, 1.0 };
+                }
             }
             return if_no_more_tokens_return(FilterOperation::Color { filter_token_to_operation(filter_token), amount.value_or(Number { Number::Type::Integer, 1 }) });
         }

Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-computed.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 34 tests
 
-18 Pass
+22 Pass
-16 Fail
+12 Fail
 Pass	Property filter value 'none'
 Pass	Property filter value 'blur(100px)'
 Pass	Property filter value 'blur()'
@@ -17,24 +17,24 @@ 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)'
+Pass	Property filter value 'grayscale(2)'
 Fail	Property filter value 'grayscale(calc(2))'
 Pass	Property filter value 'grayscale()'
 Fail	Property filter value 'hue-rotate(90deg)'
 Pass	Property filter value 'hue-rotate()'
 Pass	Property filter value 'invert(0)'
 Fail	Property filter value 'invert(100%)'
-Fail	Property filter value 'invert(2)'
+Pass	Property filter value 'invert(2)'
 Pass	Property filter value 'invert()'
 Pass	Property filter value 'opacity(0)'
 Fail	Property filter value 'opacity(100%)'
-Fail	Property filter value 'opacity(2)'
+Pass	Property filter value 'opacity(2)'
 Pass	Property filter value 'opacity()'
 Pass	Property filter value 'saturate(0)'
 Fail	Property filter value 'saturate(300%)'
 Pass	Property filter value 'saturate()'
 Pass	Property filter value 'sepia(0)'
 Fail	Property filter value 'sepia(100%)'
-Fail	Property filter value 'sepia(2)'
+Pass	Property filter value 'sepia(2)'
 Pass	Property filter value 'sepia()'
 Fail	Property filter value 'blur(10px) url("https://www.example.com/picture.svg#f") contrast(20) brightness(30)'

Tests/LibWeb/Text/expected/wpt-import/css/filter-effects/parsing/filter-parsing-valid.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 39 tests
 
-31 Pass
+35 Pass
-8 Fail
+4 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
@@ -21,7 +21,7 @@ Pass	e.style['filter'] = "drop-shadow(rgb(4, 5, 6) 1px 2px)" should set the prop
 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(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
@@ -29,16 +29,16 @@ Fail	e.style['filter'] = "hue-rotate(90deg)" should set the property value
 Pass	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(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(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(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