diff --git a/Libraries/LibWeb/CSS/Parser/ArbitrarySubstitutionFunctions.cpp b/Libraries/LibWeb/CSS/Parser/ArbitrarySubstitutionFunctions.cpp
index 01e02044a9b..59dafdef924 100644
--- a/Libraries/LibWeb/CSS/Parser/ArbitrarySubstitutionFunctions.cpp
+++ b/Libraries/LibWeb/CSS/Parser/ArbitrarySubstitutionFunctions.cpp
@@ -347,7 +347,9 @@ Optional<ArbitrarySubstitutionFunctionArguments> parse_according_to_argument_gra
         if (!tokens.has_next_token())
             return ArbitrarySubstitutionFunctionArguments { first_argument.release_value() };
 
-        VERIFY(tokens.next_token().is(Token::Type::Comma));
+        if (!tokens.next_token().is(Token::Type::Comma))
+            return {};
+
         tokens.discard_a_token(); // ,
 
         auto second_argument = Parser::parse_declaration_value(tokens, Parser::StopAtComma::No);
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-all-types.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-all-types.txt
new file mode 100644
index 00000000000..18d0d09d23b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/attr-all-types.txt
@@ -0,0 +1,145 @@
+Harness status: OK
+
+Found 139 tests
+
+81 Pass
+58 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
+Fail	CSS Values and Units Test: attr 5
+Fail	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
+Fail	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
+Fail	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
+Fail	CSS Values and Units Test: attr 19
+Fail	CSS Values and Units Test: attr 20
+Fail	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 24
+Fail	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
+Fail	CSS Values and Units Test: attr 30
+Fail	CSS Values and Units Test: attr 31
+Fail	CSS Values and Units Test: attr 32
+Fail	CSS Values and Units Test: attr 33
+Fail	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
+Fail	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
+Fail	CSS Values and Units Test: attr 48
+Fail	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
+Fail	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 57
+Fail	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 61
+Fail	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 65
+Fail	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 69
+Fail	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 73
+Fail	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 77
+Fail	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 81
+Fail	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
+Pass	CSS Values and Units Test: attr 86
+Pass	CSS Values and Units Test: attr 87
+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 93
+Fail	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
+Fail	CSS Values and Units Test: attr 101
+Fail	CSS Values and Units Test: attr 102
+Fail	CSS Values and Units Test: attr 103
+Fail	CSS Values and Units Test: attr 104
+Fail	CSS Values and Units Test: attr 105
+Fail	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
+Pass	CSS Values and Units Test: attr 110
+Pass	CSS Values and Units Test: attr 111
+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 117
+Pass	CSS Values and Units Test: attr 118
+Pass	CSS Values and Units Test: attr 119
+Fail	CSS Values and Units Test: attr 120
+Pass	CSS Values and Units Test: attr 121
+Pass	CSS Values and Units Test: attr 122
+Pass	CSS Values and Units Test: attr 123
+Pass	CSS Values and Units Test: attr 124
+Pass	CSS Values and Units Test: attr 125
+Pass	CSS Values and Units Test: attr 126
+Pass	CSS Values and Units Test: attr 127
+Pass	CSS Values and Units Test: attr 128
+Pass	CSS Values and Units Test: attr 129
+Pass	CSS Values and Units Test: attr 130
+Pass	CSS Values and Units Test: attr 131
+Pass	CSS Values and Units Test: attr 132
+Pass	CSS Values and Units Test: attr 133
+Pass	CSS Values and Units Test: attr 134
+Pass	CSS Values and Units Test: attr 135
+Pass	CSS Values and Units Test: attr 136
+Pass	CSS Values and Units Test: attr 137
+Pass	CSS Values and Units Test: attr 138
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-values/attr-all-types.html b/Tests/LibWeb/Text/input/wpt-import/css/css-values/attr-all-types.html
new file mode 100644
index 00000000000..84afc713d8f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-values/attr-all-types.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: attr</title>
+<meta name="assert" content="test attr values">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notations">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<style>
+    @property --length {
+        syntax: "<length>";
+        inherits: false;
+        initial-value: 10px;
+    }
+    @property --string {
+        syntax: "<string>";
+        inherits: false;
+        initial-value: "none";
+    }
+    @property --string-list {
+        syntax: "<string>+";
+        inherits: false;
+        initial-value: "none";
+    }
+</style>
+
+<div id="attr" data-bar="3"></div>
+<div id="expected"></div>
+
+<script>
+    const dimensionTypeToUnits = {
+        "length": ["em", "ex", "cap", "ch", "ic", "rem", "lh", "rlh", "vw", "vh", "vi", "vb", "vmin", "vmax"],
+        "angle": ["deg", "grad", "rad", "turn"],
+        "time": ["ms", "ms"],
+        "frequency": ["Hz", "kHz"]
+    };
+
+    const dimensionTypeToProperty = {
+        "length": ["width"],
+        "angle": ["font-style"],
+        "time": ["transition-duration"]
+    }
+
+    function test_dimension_types_and_units() {
+        for(const [type, units] of Object.entries(dimensionTypeToUnits)) {
+            const property = dimensionTypeToProperty[type];
+            const val = "3";
+            units.forEach(unit => {
+                const expectedValue = val + unit;
+
+                const dimensionTypeAttrString = 'attr(data-foo type(<' + type + '>))';
+                test_valid_attr(property, dimensionTypeAttrString, expectedValue, expectedValue);
+
+                const dimensionUnitAttrString = 'attr(data-foo ' + unit + ')';
+                test_valid_attr(property, dimensionUnitAttrString, val, expectedValue);
+            });
+        }
+    }
+
+    function test_valid_attr(property, attrString, attrValue, expectedValue) {
+        var elem = document.getElementById("attr");
+        elem.setAttribute("data-foo", attrValue);
+        elem.style.setProperty(property, attrString);
+
+        var expectedElem =  document.getElementById("expected");
+        expectedElem.style.setProperty(property, expectedValue);
+
+        test(() => {
+            assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
+                          window.getComputedStyle(expectedElem).getPropertyValue(property),
+                          "Value \'" + attrString + "\', where \'data-foo=" + attrValue +
+                          "\' should be valid for the property \'" + property + "\'.");
+        });
+
+        elem.style.setProperty(property, null);
+        expectedElem.style.setProperty(property, null);
+    }
+
+    function test_invalid_attr(property, attrString, attrValue) {
+        var elem = document.getElementById("attr");
+        var expectedValue = window.getComputedStyle(elem).getPropertyValue(property);
+
+        elem.setAttribute("data-foo", attrValue);
+        elem.style.setProperty(property, attrString);
+
+        test(() => {
+            assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue,
+                          "Setting property \'" + property + "\' to the value \'" + attrString +
+                          "\', where \'data-foo=" + attrValue + "\' should not change it's value.");
+        });
+        elem.style.setProperty(property, null);
+    }
+
+    test_valid_attr('content', 'attr(data-foo)', 'abc', '"abc"');
+    test_invalid_attr('content', 'attr(data-foo string)', 'abc');
+    test_valid_attr('content', 'attr(data-foo raw-string)', 'abc', '"abc"');
+    test_valid_attr('content', 'attr(data-foo,)', 'abc', '"abc"');
+
+    test_valid_attr('content', 'attr(data-foo type(<string>))', '"abc"', '"abc"');
+    test_valid_attr('content', 'attr(data-foo type(<string>),)', '"abc"', '"abc"');
+    test_valid_attr('content', 'attr(data-foo type(<string>))', '"attr(data-foo)"', '"attr(data-foo)"');
+    test_valid_attr('content', 'attr(data-foo)', '', '""');
+    test_valid_attr('font-family', 'attr(non-existent)', '', '""');
+    test_valid_attr('font-family', 'attr(non-existent string)', '', '');
+    test_invalid_attr('font-family', 'attr(non-existent type(<string>))', '');
+
+    test_valid_attr('animation-name', 'attr(data-foo type(<custom-ident>))', 'anim', 'anim');
+    test_valid_attr('animation-name', 'attr(data-foo type(<custom-ident>), anim-fallback)', '"anim"', 'anim-fallback');
+    test_valid_attr('animation-name', 'attr(data-foo type(<custom-ident>), anim-fallback)', 'initial', 'anim-fallback');
+
+    test_valid_attr('background-color', 'attr(data-foo type(<color>))', 'red', 'red');
+    test_valid_attr('background-color', 'attr(data-foo type(<color>))', '#ff0099aa', '#ff0099aa');
+    test_valid_attr('background-color', 'attr(data-foo type(<color>), red)', '10', 'red');
+    test_valid_attr('background-color', 'attr(data-foo type(<color>), green)', '1000px', 'green');
+    test_valid_attr('background-color', 'attr(data-foo type(<color>), green)', 'rgb(255, 0, 0)', 'rgb(255, 0, 0)');
+    test_valid_attr('background-color', 'attr(data-foo type(<color>))', 'color-mix(in lch, red, pink)', 'color-mix(in lch, red, pink)');
+    test_valid_attr('background-color', 'attr(data-foo type(<color>))', 'light-dark(#333b3c, #efefec)', 'light-dark(#333b3c, #efefec)');
+
+    test_valid_attr('font-weight', 'attr(data-foo type(<number>))', '10', '10');
+    test_valid_attr('font-weight', 'attr(data-foo type(<number>), 30)', '10px', '30');
+    test_valid_attr('font-weight', 'attr(data-foo type(<number> | lighter | bold), bold)', 'lighter', 'lighter');
+    test_valid_attr('font-weight', 'attr(data-foo type(<number> |  lighter | bold), lighter)', '10px', 'lighter');
+    test_valid_attr('font-weight', 'attr(data-foo type(<number>))', 'calc(3 + 3)', '6');
+    test_valid_attr('font-weight', 'attr(data-foo type(<number>), calc(10 + 20))', '10px', '30');
+
+    test_valid_attr('font-size', 'attr(data-foo type(<percentage>))', '10%', '10%');
+    test_valid_attr('font-size', 'attr(data-foo type(<percentage>), 10px)', 'abc', '10px');
+    test_valid_attr('font-size', 'attr(data-foo type(<percentage> | <length>), 10)', '10px', '10px');
+    test_valid_attr('--x', 'attr(data-foo type(<percentage>), abc)', '10', 'abc');
+    test_valid_attr('--x', 'attr(data-foo type(<url>))', 'url("https://does-not-exist.test/404.png")', 'url("https://does-not-exist.test/404.png")');
+
+    test_valid_attr('width', 'attr(data-foo type(<length>))', '10px', '10px');
+    test_valid_attr('width', 'attr(data-foo type(<length>), red)', '10px', '10px');
+    test_valid_attr('width', 'attr(data-foo type(<length>), 42px)', 'calc(1px + 3px)', '4px');
+
+    test_valid_attr('font-style', 'attr(data-foo type(<angle>))', '10deg', '10deg');
+    test_valid_attr('font-style', 'attr(data-foo type(<angle>), 10deg)', '30', '10deg');
+    test_valid_attr('font-style', 'attr(data-foo type(<angle>), italic)', '30', 'italic');
+    test_valid_attr('font-style', 'attr(data-foo type(<angle>), 3deg)', 'italic', '3deg');
+    test_valid_attr('font-style', 'attr(data-foo type(<angle> | italic), 3deg)', 'italic', 'italic');
+
+    test_valid_attr('transition-duration', 'attr(data-foo type(<time>))', '10ms', '10ms');
+    test_valid_attr('transition-duration', 'attr(data-foo type(<time>), 30s)', '10m', '30s');
+    test_valid_attr('transition-duration', 'attr(data-foo type(<time>), calc(10s + 20s))', '10m', '30s');
+
+    test_valid_attr('height', 'attr(data-foo px)', '10', '10px');
+    test_valid_attr('width', 'calc(attr(data-foo px) + 1px)', '10', '11px');
+    test_valid_attr('font-size', 'attr(data-foo %)', '10', '10%');
+    test_valid_attr('--x', 'attr(data-foo px) 11px', '10', '10px 11px');
+
+    test_valid_attr('--x', 'attr(data-foo type(<number>)) 11', '10', '10 11');
+    test_valid_attr('--string', 'attr(data-foo type(<string>))', '"hello"', '"hello"');
+    test_valid_attr('--string-list', 'attr(data-foo type(<string>+))', '"hello" "hi"', '"hello" "hi"');
+
+    test_valid_attr('width', 'attr(data-foo type(<length>))', 'var(--length, 3px)', '10px');
+    test_valid_attr('--y', 'attr(data-foo type(*))', 'var(--x, 3)', '3');
+    test_valid_attr('--y', 'attr(data-foo type(*))', 'attr(data-bar, 11)', '"3"');
+    test_valid_attr('--y', 'attr(data-foo type(*))', 'attr(data-bar type(<number>), 11)', '3');
+    test_valid_attr('width', 'attr(data-foo type(*))', 'attr(data-bar type(<number>), 11)', '3');
+    test_valid_attr('--y', 'attr(data-foo type(*))', 'attr(data-bar type(<number>), 11) var(--length, 3px)', '3 10px');
+
+    test_dimension_types_and_units();
+
+    test_invalid_attr('animation-name', 'attr(data-foo type(string))', 'abc');
+    test_invalid_attr('animation-name', 'attr(data-foo type(< string>))', 'abc');
+    test_invalid_attr('animation-name', 'attr(data-foo type(<string >))', 'abc');
+
+    test_invalid_attr('animation-name', 'attr(data-foo type(<custom-ident>))', 'initial');
+    test_invalid_attr('animation-name', 'attr(data-foo type(<custom-ident>))', '"anim"');
+    test_invalid_attr('animation-name', 'attr(data-foo type(<custom-ident>))', '"none"');
+    test_invalid_attr('animation-name', 'attr(data-foo type(<custom-ident>) <ident>)', '"none"');
+
+    test_invalid_attr('background-color', 'attr(data-foo type(<color>))', 'rgb(0)');
+    test_invalid_attr('background-color', 'attr(data-foo <red>)', 'abc');
+    test_invalid_attr('background-color', 'attr(data-foo type(<color>) | <red>)', 'abc');
+    test_invalid_attr('background-color', 'attr(data-foo type(<color>) |)', 'abc');
+    test_invalid_attr('background-color', 'attr(data-foo, type(<red>))', 'abc');
+    test_invalid_attr('background-color', 'attr(data-foo, <red>)', 'abc');
+
+    test_invalid_attr('font-size', 'attr(data-foo type(<number> +))', '10');
+    test_invalid_attr('font-size', 'attr(data-foo type(<number>) !)', '10');
+    test_invalid_attr('font-weight', 'attr(data-foo type(<number>)),', '10');
+    test_invalid_attr('width', 'attr(data-foo type(<number>), 30px)', '10');
+
+    test_invalid_attr('font-size', 'attr(data-foo type(<percentage>))', 'abc');
+    test_invalid_attr('font-size', 'attr(data-foo type(<percentage>))', '10% a');
+    test_invalid_attr('font-size', 'attr(data-foo type(<percentage>), 10rad)', 'abc');
+    test_invalid_attr('font-size', 'attr(data-foo type(<number>) | <length>, 30px)', '10');
+
+    test_invalid_attr('width', 'attr(data-foo type(<length>))', '10');
+    test_invalid_attr('width', 'attr(data-foo type(<length>)+)', '10');
+    test_invalid_attr('width', 'attr(data-foo type(<length>) | <percentage>)', '10');
+    test_invalid_attr('width', 'attr(data-foo type(<length>), 30)', 'calc(10 + 20)');
+    test_invalid_attr('width', 'attr(data-foo type(<length>), calc(10 + 20))', 'abc');
+
+    test_invalid_attr('font-style', 'attr(data-foo type(<angle>))', '10%');
+    test_invalid_attr('font-style', 'attr(data-foo type(<angle>))', 'calc(10px + 20px)');
+    test_invalid_attr('font-style', 'attr(data-foo type(<angle>), calc(10 + 20))', 'calc(10px + 20px)');
+
+    test_invalid_attr('transition-duration', 'attr(data-foo type(<time>))', '10');
+    test_invalid_attr('transition-duration', 'attr(data-foo type(<time>, <length>))', '10');
+    test_invalid_attr('transition-duration', 'attr(data-foo type(<time>))', '10 ms');
+    test_invalid_attr('transition-duration', 'attr(data-foo type(<time>))', 'calc(1ms + 2ms)s');
+
+    test_invalid_attr('width', 'attr(data-foo px)', '10px');
+    test_invalid_attr('width', 'attr(data-foo <px>)', '10');
+    test_invalid_attr('width', 'attr(data-foo xx)', '10');
+    test_invalid_attr('transition-duration', 'attr(data-foo ms)', '10px');
+    test_invalid_attr('transition-duration', 'attr(data-foo ms)', '10px foo');
+
+    test_invalid_attr('width', 'attr(())', '10px');
+</script>