LibWeb/CSS: Implement type(<syntax>) in attr()

This lets the `attr()` interpret the attribute's contents as an
arbitrary type instead of just as a string or number.

Libraries/LibWeb/CSS/Parser/ArbitrarySubstitutionFunctions.cpp

@@ -6,8 +6,11 @@
 
 #include <LibWeb/CSS/Parser/ArbitrarySubstitutionFunctions.h>
 #include <LibWeb/CSS/Parser/Parser.h>
+#include <LibWeb/CSS/Parser/Syntax.h>
+#include <LibWeb/CSS/Parser/SyntaxParsing.h>
 #include <LibWeb/CSS/PropertyName.h>
 #include <LibWeb/CSS/StyleComputer.h>
+#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
 #include <LibWeb/CSS/StyleValues/UnresolvedStyleValue.h>
 #include <LibWeb/DOM/Element.h>
 
@@ -85,12 +88,16 @@ static Vector<ComponentValue> replace_an_attr_function(DOM::AbstractElement& ele
     auto const second_argument = arguments.get(1);
 
     FlyString attribute_name;
-    Optional<FlyString> maybe_syntax = {};
+
+    struct RawString { };
+    Variant<Empty, NonnullOwnPtr<SyntaxNode>, RawString> syntax;
+    Optional<FlyString> unit_name;
+
     auto failure = [&] -> Vector<ComponentValue> {
         // This is step 6, but defined here for convenience.
 
         // 1. If second arg is null, and syntax was omitted, return an empty CSS <string>.
-        if (!second_argument.has_value() && !maybe_syntax.has_value())
+        if (!second_argument.has_value() && syntax.has<Empty>())
             return { Token::create_string({}) };
 
         // 2. If second arg is null, return the guaranteed-invalid value.
@@ -115,22 +122,29 @@ static Vector<ComponentValue> replace_an_attr_function(DOM::AbstractElement& ele
     first_argument_tokens.discard_whitespace();
 
     // <attr-type> = type( <syntax> ) | raw-string | <attr-unit>
-    // FIXME: Support type(<syntax>)
-    bool is_dimension_unit = false;
     if (first_argument_tokens.next_token().is(Token::Type::Ident)) {
         auto const& syntax_ident = first_argument_tokens.next_token().token().ident();
         if (syntax_ident.equals_ignoring_ascii_case("raw-string"sv)) {
-            maybe_syntax = first_argument_tokens.consume_a_token().token().ident();
+            first_argument_tokens.discard_a_token(); // raw-string
+            syntax = RawString {};
+        } else if (syntax_ident == "%"sv
+            || Angle::unit_from_name(syntax_ident).has_value()
+            || Flex::unit_from_name(syntax_ident).has_value()
+            || Frequency::unit_from_name(syntax_ident).has_value()
+            || Length::unit_from_name(syntax_ident).has_value()
+            || Resolution::unit_from_name(syntax_ident).has_value()
+            || Time::unit_from_name(syntax_ident).has_value()) {
+            syntax = TypeSyntaxNode::create("number"_fly_string).release_nonnull<SyntaxNode>();
+            unit_name = first_argument_tokens.consume_a_token().token().ident();
         } else {
-            is_dimension_unit = syntax_ident == "%"sv
+            return failure();
-                || Angle::unit_from_name(syntax_ident).has_value()
+        }
-                || Flex::unit_from_name(syntax_ident).has_value()
+    } else if (first_argument_tokens.next_token().is_function("type"sv)) {
-                || Frequency::unit_from_name(syntax_ident).has_value()
+        auto const& type_function = first_argument_tokens.consume_a_token().function();
-                || Length::unit_from_name(syntax_ident).has_value()
+        if (auto parsed_syntax = parse_as_syntax(type_function.value)) {
-                || Resolution::unit_from_name(syntax_ident).has_value()
+            syntax = parsed_syntax.release_nonnull();
-                || Time::unit_from_name(syntax_ident).has_value();
+        } else {
-            if (is_dimension_unit)
+            return failure();
-                maybe_syntax = first_argument_tokens.consume_a_token().token().ident();
         }
     }
     first_argument_tokens.discard_whitespace();
@@ -145,29 +159,40 @@ static Vector<ComponentValue> replace_an_attr_function(DOM::AbstractElement& ele
 
     // 4. If syntax is null or the keyword raw-string, return a CSS <string> whose value is attr value.
     // NOTE: No parsing or modification of any kind is performed on the value.
-    if (!maybe_syntax.has_value() || maybe_syntax->equals_ignoring_ascii_case("raw-string"sv))
+    if (syntax.visit(
+            [](Empty) { return true; },
+            [](RawString) { return true; },
+            [](auto&) { return false; })) {
         return { Token::create_string(*attribute_value) };
-    auto syntax = maybe_syntax.release_value();
+    }
 
     // 5. Substitute arbitrary substitution functions in attr value, with «"attribute", attr name» as the substitution
-    //    context, then parse with a attr value, with syntax and el. If that succeeds, return the result; otherwise,
+    //    context, then parse with a <syntax> attr value, with syntax and el. If that succeeds, return the result;
-    //    jump to the last step (labeled FAILURE).
+    //    otherwise, jump to the last step (labeled FAILURE).
     auto parser = Parser::create(ParsingParams { element.element().document() }, attribute_value.value());
     auto unsubstituted_values = parser.parse_as_list_of_component_values();
-    auto substituted_values = substitute_arbitrary_substitution_functions(element, guarded_contexts, unsubstituted_values, SubstitutionContext { SubstitutionContext::DependencyType::Attribute, attribute_name.to_string() });
+    auto substituted_values = substitute_arbitrary_substitution_functions(element, guarded_contexts, unsubstituted_values,
+        SubstitutionContext { SubstitutionContext::DependencyType::Attribute, attribute_name.to_string() });
 
-    // FIXME: Parse using the syntax. For now we just handle `<attr-unit>` here.
+    auto parsed_value = parse_with_a_syntax(ParsingParams { element.document() }, substituted_values, *syntax.get<NonnullOwnPtr<SyntaxNode>>(), element);
-    TokenStream value_tokens { substituted_values };
+    if (parsed_value->is_guaranteed_invalid())
-    value_tokens.discard_whitespace();
-    auto const& component_value = value_tokens.consume_a_token();
-    value_tokens.discard_whitespace();
-    if (value_tokens.has_next_token())
         return failure();
 
-    if (component_value.is(Token::Type::Number) && is_dimension_unit)
+    if (unit_name.has_value()) {
-        return { Token::create_dimension(component_value.token().number_value(), syntax) };
+        // https://drafts.csswg.org/css-values-5/#ref-for-typedef-attr-type%E2%91%A0
+        // If given as an <attr-unit> value, the value is first parsed as if type(<number>) was specified, then the
+        // resulting numeric value is turned into a dimension with the corresponding unit, or a percentage if % was
+        // given. Values that fail to parse as a <number> trigger fallback.
 
-    return failure();
+        // FIXME: The spec is ambiguous about what we should do for non-number-literals.
+        //        Chromium treats them as invalid, so copy that for now.
+        //        Spec issue: https://github.com/w3c/csswg-drafts/issues/12479
+        if (!parsed_value->is_number())
+            return failure();
+        return { Token::create_dimension(parsed_value->as_number().number(), unit_name.release_value()) };
+    }
+
+    return parsed_value->tokenize();
 
     // 6. FAILURE:
     // NB: Step 6 is a lambda defined at the top of the function.

Tests/LibWeb/Ref/input/wpt-import/css/css-values/attr-in-max.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>CSS Values and Units Test: attr() in max()</title>
+
+	<meta name="assert" content="The attr() function notation is allowed inside a max() notation.">
+	<link rel="author" title="Fuqiao Xue" href="mailto:xfq@w3.org">
+	<link rel="help" href="https://drafts.csswg.org/css-values/#attr-notation">
+	<link rel="help" href="https://drafts.csswg.org/css-values/#calc-notation">
+	<link rel="match" href="../../../../expected/wpt-import/css/css-values/reference/200-200-green.html">
+
+	<style>
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+
+			#outer { width: max(attr(data-test type(<length>))); height: 200px; }
+	</style>
+
+</head>
+<body>
+
+	<div id="outer" data-test="200px"></div>
+
+</body>
+</html>

Tests/LibWeb/Ref/input/wpt-import/css/css-values/attr-length-valid-zero-nofallback.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>
+		CSS Values and Units Test:
+		Attribute references (length)
+	</title>
+	<meta name="assert" content="
+		The value of referenced attribute is used correctly as a length (even if it's 0).
+	" />
+
+	<link
+		rel="author"
+		title="François REMY"
+		href="mailto:fremycompany.developer@yahoo.fr"
+	/ >
+
+	<link rel="help" href="http://www.w3.org/TR/css3-values/#attr-notation"/>
+
+	<link
+		rel="match"
+		href="../../../../expected/wpt-import/css/css-values/reference/200-200-green.html"
+	/>
+
+	<style type="text/css">
+
+			html, body { margin: 0px; padding: 0px; }
+
+			html { background: white; overflow: hidden; }
+			#outer { position: relative; background: green; }
+			#outer2 { background: red; }
+
+			#outer { width: 200px; height: 200px; }
+			#outer2 { width: 200px; width: attr(data-test type(<length>)); height: 200px; }
+
+	</style>
+
+</head>
+<body>
+
+	<div id="outer"></div>
+	<div id="outer2" data-test="0"></div>
+
+</body>
+</html>

Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-all-types.txt

@@ -2,91 +2,91 @@ Harness status: OK
 
 Found 139 tests
 
-81 Pass
+128 Pass
-58 Fail
+11 Fail
 Pass	CSS Values and Units Test: attr
 Fail	CSS Values and Units Test: attr 1
 Pass	CSS Values and Units Test: attr 2
 Pass	CSS Values and Units Test: attr 3
-Fail	CSS Values and Units Test: attr 4
+Pass	CSS Values and Units Test: attr 4
-Fail	CSS Values and Units Test: attr 5
+Pass	CSS Values and Units Test: attr 5
-Fail	CSS Values and Units Test: attr 6
+Pass	CSS Values and Units Test: attr 6
 Pass	CSS Values and Units Test: attr 7
 Pass	CSS Values and Units Test: attr 8
 Fail	CSS Values and Units Test: attr 9
-Fail	CSS Values and Units Test: attr 10
+Pass	CSS Values and Units Test: attr 10
-Fail	CSS Values and Units Test: attr 11
+Pass	CSS Values and Units Test: attr 11
 Pass	CSS Values and Units Test: attr 12
 Pass	CSS Values and Units Test: attr 13
-Fail	CSS Values and Units Test: attr 14
+Pass	CSS Values and Units Test: attr 14
-Fail	CSS Values and Units Test: attr 15
+Pass	CSS Values and Units Test: attr 15
 Pass	CSS Values and Units Test: attr 16
 Pass	CSS Values and Units Test: attr 17
-Fail	CSS Values and Units Test: attr 18
+Pass	CSS Values and Units Test: attr 18
-Fail	CSS Values and Units Test: attr 19
+Pass	CSS Values and Units Test: attr 19
-Fail	CSS Values and Units Test: attr 20
+Pass	CSS Values and Units Test: attr 20
-Fail	CSS Values and Units Test: attr 21
+Pass	CSS Values and Units Test: attr 21
 Pass	CSS Values and Units Test: attr 22
-Fail	CSS Values and Units Test: attr 23
+Pass	CSS Values and Units Test: attr 23
 Pass	CSS Values and Units Test: attr 24
-Fail	CSS Values and Units Test: attr 25
+Pass	CSS Values and Units Test: attr 25
 Pass	CSS Values and Units Test: attr 26
 Fail	CSS Values and Units Test: attr 27
 Pass	CSS Values and Units Test: attr 28
-Fail	CSS Values and Units Test: attr 29
+Pass	CSS Values and Units Test: attr 29
 Fail	CSS Values and Units Test: attr 30
-Fail	CSS Values and Units Test: attr 31
+Pass	CSS Values and Units Test: attr 31
-Fail	CSS Values and Units Test: attr 32
+Pass	CSS Values and Units Test: attr 32
-Fail	CSS Values and Units Test: attr 33
+Pass	CSS Values and Units Test: attr 33
-Fail	CSS Values and Units Test: attr 34
+Pass	CSS Values and Units Test: attr 34
 Pass	CSS Values and Units Test: attr 35
 Pass	CSS Values and Units Test: attr 36
 Pass	CSS Values and Units Test: attr 37
 Pass	CSS Values and Units Test: attr 38
-Fail	CSS Values and Units Test: attr 39
+Pass	CSS Values and Units Test: attr 39
-Fail	CSS Values and Units Test: attr 40
+Pass	CSS Values and Units Test: attr 40
 Pass	CSS Values and Units Test: attr 41
 Pass	CSS Values and Units Test: attr 42
 Pass	CSS Values and Units Test: attr 43
 Pass	CSS Values and Units Test: attr 44
 Fail	CSS Values and Units Test: attr 45
 Pass	CSS Values and Units Test: attr 46
-Fail	CSS Values and Units Test: attr 47
+Pass	CSS Values and Units Test: attr 47
-Fail	CSS Values and Units Test: attr 48
+Pass	CSS Values and Units Test: attr 48
-Fail	CSS Values and Units Test: attr 49
+Pass	CSS Values and Units Test: attr 49
 Fail	CSS Values and Units Test: attr 50
 Fail	CSS Values and Units Test: attr 51
-Fail	CSS Values and Units Test: attr 52
+Pass	CSS Values and Units Test: attr 52
-Fail	CSS Values and Units Test: attr 53
+Pass	CSS Values and Units Test: attr 53
 Pass	CSS Values and Units Test: attr 54
 Fail	CSS Values and Units Test: attr 55
-Fail	CSS Values and Units Test: attr 56
+Pass	CSS Values and Units Test: attr 56
 Pass	CSS Values and Units Test: attr 57
-Fail	CSS Values and Units Test: attr 58
+Pass	CSS Values and Units Test: attr 58
 Pass	CSS Values and Units Test: attr 59
-Fail	CSS Values and Units Test: attr 60
+Pass	CSS Values and Units Test: attr 60
 Pass	CSS Values and Units Test: attr 61
-Fail	CSS Values and Units Test: attr 62
+Pass	CSS Values and Units Test: attr 62
 Pass	CSS Values and Units Test: attr 63
-Fail	CSS Values and Units Test: attr 64
+Pass	CSS Values and Units Test: attr 64
 Pass	CSS Values and Units Test: attr 65
-Fail	CSS Values and Units Test: attr 66
+Pass	CSS Values and Units Test: attr 66
 Pass	CSS Values and Units Test: attr 67
-Fail	CSS Values and Units Test: attr 68
+Pass	CSS Values and Units Test: attr 68
 Pass	CSS Values and Units Test: attr 69
-Fail	CSS Values and Units Test: attr 70
+Pass	CSS Values and Units Test: attr 70
 Pass	CSS Values and Units Test: attr 71
-Fail	CSS Values and Units Test: attr 72
+Pass	CSS Values and Units Test: attr 72
 Pass	CSS Values and Units Test: attr 73
-Fail	CSS Values and Units Test: attr 74
+Pass	CSS Values and Units Test: attr 74
 Pass	CSS Values and Units Test: attr 75
-Fail	CSS Values and Units Test: attr 76
+Pass	CSS Values and Units Test: attr 76
 Pass	CSS Values and Units Test: attr 77
-Fail	CSS Values and Units Test: attr 78
+Pass	CSS Values and Units Test: attr 78
 Pass	CSS Values and Units Test: attr 79
-Fail	CSS Values and Units Test: attr 80
+Pass	CSS Values and Units Test: attr 80
 Pass	CSS Values and Units Test: attr 81
-Fail	CSS Values and Units Test: attr 82
+Pass	CSS Values and Units Test: attr 82
 Pass	CSS Values and Units Test: attr 83
 Pass	CSS Values and Units Test: attr 84
 Pass	CSS Values and Units Test: attr 85
@@ -96,21 +96,21 @@ Pass	CSS Values and Units Test: attr 88
 Pass	CSS Values and Units Test: attr 89
 Pass	CSS Values and Units Test: attr 90
 Pass	CSS Values and Units Test: attr 91
-Fail	CSS Values and Units Test: attr 92
+Pass	CSS Values and Units Test: attr 92
 Pass	CSS Values and Units Test: attr 93
-Fail	CSS Values and Units Test: attr 94
+Pass	CSS Values and Units Test: attr 94
 Pass	CSS Values and Units Test: attr 95
 Pass	CSS Values and Units Test: attr 96
 Pass	CSS Values and Units Test: attr 97
 Pass	CSS Values and Units Test: attr 98
 Pass	CSS Values and Units Test: attr 99
-Fail	CSS Values and Units Test: attr 100
+Pass	CSS Values and Units Test: attr 100
 Fail	CSS Values and Units Test: attr 101
 Fail	CSS Values and Units Test: attr 102
-Fail	CSS Values and Units Test: attr 103
+Pass	CSS Values and Units Test: attr 103
-Fail	CSS Values and Units Test: attr 104
+Pass	CSS Values and Units Test: attr 104
-Fail	CSS Values and Units Test: attr 105
+Pass	CSS Values and Units Test: attr 105
-Fail	CSS Values and Units Test: attr 106
+Pass	CSS Values and Units Test: attr 106
 Pass	CSS Values and Units Test: attr 107
 Pass	CSS Values and Units Test: attr 108
 Pass	CSS Values and Units Test: attr 109
@@ -120,7 +120,7 @@ Pass	CSS Values and Units Test: attr 112
 Pass	CSS Values and Units Test: attr 113
 Pass	CSS Values and Units Test: attr 114
 Pass	CSS Values and Units Test: attr 115
-Fail	CSS Values and Units Test: attr 116
+Pass	CSS Values and Units Test: attr 116
 Pass	CSS Values and Units Test: attr 117
 Pass	CSS Values and Units Test: attr 118
 Pass	CSS Values and Units Test: attr 119

Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-cycle.txt

@@ -2,27 +2,27 @@ Harness status: OK
 
 Found 22 tests
 
-2 Pass
+18 Pass
-20 Fail
+4 Fail
 Fail	CSS Values and Units Test: attr
-Fail	CSS Values and Units Test: attr 1
+Pass	CSS Values and Units Test: attr 1
-Fail	CSS Values and Units Test: attr 2
+Pass	CSS Values and Units Test: attr 2
 Fail	CSS Values and Units Test: attr 3
-Fail	CSS Values and Units Test: attr 4
+Pass	CSS Values and Units Test: attr 4
-Fail	CSS Values and Units Test: attr 5
+Pass	CSS Values and Units Test: attr 5
-Fail	CSS Values and Units Test: attr 6
+Pass	CSS Values and Units Test: attr 6
-Fail	CSS Values and Units Test: attr 7
+Pass	CSS Values and Units Test: attr 7
 Fail	CSS Values and Units Test: attr 8
-Fail	CSS Values and Units Test: attr 9
+Pass	CSS Values and Units Test: attr 9
-Fail	CSS Values and Units Test: attr 10
+Pass	CSS Values and Units Test: attr 10
 Fail	CSS Values and Units Test: attr 11
-Fail	CSS Values and Units Test: attr 12
+Pass	CSS Values and Units Test: attr 12
 Pass	CSS Values and Units Test: attr 13
-Fail	CSS Values and Units Test: attr 14
+Pass	CSS Values and Units Test: attr 14
-Fail	CSS Values and Units Test: attr 15
+Pass	CSS Values and Units Test: attr 15
-Fail	CSS Values and Units Test: attr 16
+Pass	CSS Values and Units Test: attr 16
-Fail	CSS Values and Units Test: attr 17
+Pass	CSS Values and Units Test: attr 17
-Fail	CSS Values and Units Test: attr 18
+Pass	CSS Values and Units Test: attr 18
 Pass	CSS Values and Units Test: attr 19
-Fail	CSS Values and Units Test: attr 20
+Pass	CSS Values and Units Test: attr 20
-Fail	CSS Values and Units Test: attr 21
+Pass	CSS Values and Units Test: attr 21

Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-invalidation.txt

@@ -2,5 +2,5 @@ Harness status: OK
 
 Found 1 tests
 
-1 Fail
+1 Pass
-Fail	CSS Values and Units Test: attr() invalidation
+Pass	CSS Values and Units Test: attr() invalidation

Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-null-namespace.txt

@@ -2,10 +2,10 @@ Harness status: OK
 
 Found 5 tests
 
-1 Pass
+2 Pass
-4 Fail
+3 Fail
 Pass	Sanity check
-Fail	Attribute in null-namespace is substituted
+Pass	Attribute in null-namespace is substituted
 Fail	Fallback is taken when attribute does not exist in null-namespace
 Fail	Attribute in null-namespace is substituted (JS)
 Fail	Fallback is taken when attribute does not does exist in null-namespace (JS)

Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-security.txt

@@ -2,8 +2,8 @@ Harness status: Error
 
 Found 22 tests
 
-14 Pass
+15 Pass
-8 Fail
+7 Fail
 Pass	'--x: image-set(attr(data-foo))' with data-foo="https://does-not-exist.test/404.png"
 Pass	'background-image: image-set(attr(data-foo))' with data-foo="https://does-not-exist.test/404.png"
 Fail	'background-image: image-set("https://does-not-exist.test/404.png")' with data-foo="https://does-not-exist.test/404.png"
@@ -13,13 +13,13 @@ Fail	'background-image: src("https://does-not-exist.test/404.png")' with data-fo
 Pass	'--x: src(string("https://does-not-exist.test" attr(data-foo)))' with data-foo="/404.png"
 Pass	'background-image: src(string("https://does-not-exist.test" attr(data-foo)))' with data-foo="/404.png"
 Fail	'background-image: src(string("https://does-not-exist.test/""404.png"))' with data-foo="/404.png"
-Fail	'--x: attr(data-foo type(<url>))' with data-foo="url(https://does-not-exist.test/404.png)"
+Pass	'--x: attr(data-foo type(<url>))' with data-foo="url(https://does-not-exist.test/404.png)"
-Pass	'background-image: attr(data-foo type(<url>))' with data-foo="url(https://does-not-exist.test/404.png)"
+Fail	'background-image: attr(data-foo type(<url>))' with data-foo="url(https://does-not-exist.test/404.png)"
 Pass	'background-image: url("https://does-not-exist.test/404.png")' with data-foo="url(https://does-not-exist.test/404.png)"
 Pass	'--x: image(attr(data-foo))' with data-foo="https://does-not-exist.test/404.png"
 Pass	'background-image: image(attr(data-foo))' with data-foo="https://does-not-exist.test/404.png"
 Fail	'background-image: image("https://does-not-exist.test/404.png")' with data-foo="https://does-not-exist.test/404.png"
-Fail	'background-image: url(https://does-not-exist.test/404.png), attr(data-foo type(<image>))' with data-foo="linear-gradient(#000000, #ffffff)"
+Pass	'background-image: url(https://does-not-exist.test/404.png), attr(data-foo type(<image>))' with data-foo="linear-gradient(#000000, #ffffff)"
 Fail	'--x: image-set(var(--y, attr(data-foo)))' with data-foo="https://does-not-exist.test/404.png"
 Pass	'background-image: image-set(var(--y, attr(data-foo)))' with data-foo="https://does-not-exist.test/404.png"
 Pass	'--x: image-set(var(--some-string))' with data-foo="https://does-not-exist.test/404.png"