Tests: Resync imported WPT tests

Author: https://github.com/tcl3
Commit: https://github.com/LadybirdBrowser/ladybird/commit/504a8e6d1d3
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8776
Reviewed-by: https://github.com/shannonbooth ✅

Tests/LibWeb/Text/input/wpt-import/css/css-values/attr-all-types.html

@@ -35,7 +35,7 @@
     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"],
+        "time": ["s", "ms"],
         "frequency": ["Hz", "kHz"]
     };
 
@@ -95,6 +95,24 @@
         elem.style.setProperty(property, null);
     }
 
+    function test_invalid_var(property, varName, varValue, varUse) {
+        var elem = document.getElementById("attr");
+        var expectedValue = window.getComputedStyle(elem).getPropertyValue(property);
+
+        elem.style.setProperty(varName, varValue);
+        elem.style.setProperty(property, varUse);
+
+        test(() => {
+            assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue,
+                          "Setting property \'" + property + "\' to the value \'" + varUse +
+                          "\', where \'" + varName + ": " + varValue + "\' should not change it's value.");
+        }, "Invariant behaviour for var");
+        elem.style.setProperty(varName, null);
+        elem.style.setProperty(property, null);
+    }
+
+    test_invalid_var('background-color', '--foo', 'red', 'var(--foo type(*))');
+
     test_valid_attr('content', 'attr(data-foo)', 'abc', '"abc"');
     test_valid_attr('content', 'attr(data-foo)', 'var(--number)', '"var(--number)"');
     test_valid_attr('content', 'attr(data-foo raw-string)', 'abc', '"abc"');
@@ -109,7 +127,9 @@
     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, serif)', '', 'serif');
     test_valid_attr('font-family', 'attr(non-existent string)', '', '');
+    test_valid_attr('font-family', 'attr(non-existent raw-string)', '', '');
     test_invalid_attr('font-family', 'attr(non-existent type(<string>))', '');
 
     test_valid_attr('animation-name', 'attr(data-foo type(<custom-ident>))', 'anim', 'anim');
@@ -159,10 +179,21 @@
     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('width', 'attr(data-foo type(invalid))', '0px', '');
+    test_valid_attr('width', 'attr(data-foo type(invalid), 10px)', '0px', '10px');
+    test_invalid_attr('width', 'attr(data-foo type(invalid |), 10px)', '0px');
+
+    test_valid_attr('background-color', 'attr(data-foo type(<color>)', '#ff0099aa', '#ff0099aa');
+    test_valid_attr('background-color', 'attr(data-foo type(invalid | blue)', 'blue', 'blue');
+    test_valid_attr('width', 'attr(data-foo type(<length> | <percentage>)', '10%', '10%');
+    test_invalid_attr('width', 'attr(data-foo type(<invalid>)', '10px');
+
     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('height', 'attr(data-foo px)', 'abc', '');
+    test_valid_attr('width', 'attr(non-existent px, 3px)', '10', '3px');
 
     test_valid_attr('font-weight', 'attr(data-foo number)', '10', '10');
 
@@ -226,6 +257,7 @@
     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('width', 'attr(data-foo xx, 3px)', '10');
     test_invalid_attr('width', 'attr(data-foo px)', 'calc(1 + 3)');
     test_invalid_attr('width', 'attr(data-foo px)', 'var(--number)');
 

Tests/LibWeb/Text/input/wpt-import/css/css-values/attr-cycle.html

@@ -64,7 +64,7 @@
   attrElem.removeAttribute('data-bar');
 
   attrElem.setAttribute('data-bar', 'var(--x)');
-  test_attr_cycle('--x', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))');
+  test_attr_cycle('--x', 'attr(data-foo type(*), attr(data-bar type(*)))', 'attr(data-foo type(*))');
   attrElem.removeAttribute('data-bar');
 
   attrElem.style.setProperty('--x', 'attr(data-foo type(*))');
@@ -74,17 +74,32 @@
   attrElem.removeAttribute('data-bar');
 
   /* Cycle with fallback */
-  test_attr_cycle('--x', 'attr(data-foo type(<length>), 11px)', 'attr(data-foo type(<length>))');
   test_attr_cycle('--x', 'attr(data-foo type(<length>))', 'attr(data-foo type(<length>), 11px)');
-  test_attr_cycle('--y', 'attr(data-foo type(*), 11px)', 'attr(data-foo type(*))');
+  test_attr_cycle('--x', 'attr(data-foo type(<length>), 3px)', 'var(--x)');
+  test_attr_cycle('--x', 'attr(data-foo type(<length>), 3px)', 'var(--x, 11px)');
+
+  attrElem.style.setProperty('--y', 'attr(data-foo)');
+  test_attr_no_cycle('--x', 'attr(data-foo type(<custom-ident>), 3px)', 'var(--y)', '3px');
+  attrElem.style.setProperty('--y', null);
+
+  /* Cycle within attributes, so we should fallback. */
+  test_attr_no_cycle('--x', 'attr(data-foo type(<length>), 11px)', 'attr(data-foo type(<length>), 3px)', '11px');
+  test_attr_no_cycle('--x', 'attr(data-foo type(<length>), 11px)', 'attr(data-foo type(<length>))', '11px');
+  test_attr_no_cycle('--y', 'attr(data-foo type(*), 11px)', 'attr(data-foo type(*))', '11px');
 
   attrElem.setAttribute('data-bar', '11px');
-  test_attr_cycle('--x', 'attr(data-foo type(<length>), attr(data-bar type(<length>)))', 'attr(data-foo type(*))');
+  test_attr_no_cycle('--x', 'attr(data-foo type(<length>), attr(data-bar type(<length>)))', 'attr(data-foo type(*))', '11px');
   attrElem.removeAttribute('data-bar');
   attrElem.setAttribute('data-bar', 'abc');
-  test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))');
+  test_attr_no_cycle('--y', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))', '"abc"');
   attrElem.removeAttribute('data-bar');
 
+  attrElem.setAttribute('data-bar', 'attr(data-baz type(*), 3px)');
+  attrElem.setAttribute('data-baz', 'attr(data-foo type(*), 4px)');
+  test_attr_no_cycle('--y', 'attr(data-foo type(*), 1px)', 'attr(data-bar type(*), 2px)', '1px');
+  attrElem.removeAttribute('data-bar');
+  attrElem.removeAttribute('data-baz');
+
   /* Cycle with var() and fallback */
   attrElem.style.setProperty('--x', 'var(--y)');
   test_attr_cycle('--y', 'var(--x, 100)', 'var(--y)');
@@ -121,4 +136,7 @@
   test_attr_no_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar, 11) var(--x, 3)', '"var(--x)" "attr(data-bar, 11) var(--x, 3)"');
   attrElem.removeAttribute('data-bar');
   attrElem.style.setProperty('--x', null);
+
+  /* No cycle, wrong attr syntax in attribute */
+  test_attr_no_cycle('--x', 'attr(data-foo type(*), abc)', 'attr(data-foo', 'abc');
 </script>

Tests/LibWeb/Text/input/wpt-import/css/css-values/calc-infinity-nan-computed.html

@@ -76,6 +76,11 @@ testTransformValuesCloseTo("rotate(calc(infinity * 1grad))", 0.0001, "rotate(0de
 testTransformValuesCloseTo("rotate(calc(-infinity * 1grad))", 0.0001, "rotate(0deg)");
 testTransformValuesCloseTo("rotate(calc(NaN * 1grad))", 0.0001, "rotate(0deg)");
 
+// For <number>
+testComputedValueGreaterOrLowerThan("scale", "calc(max(infinity, 10))", REALLY_LARGE);
+testComputedValueGreaterOrLowerThan("scale", "calc(infinity)", REALLY_LARGE);
+testComputedValueGreaterOrLowerThan("scale", "calc(-infinity * 10)", REALLY_LARGE_NEGATIVE);
+
 </script>
 </body>
 </html>

Tests/LibWeb/Text/input/wpt-import/css/css-values/clamp-length-computed.html

@@ -44,4 +44,13 @@ test_length_equals('calc(0px - clamp(10px, 20px, 30px))', '-20px');
 test_length_equals('calc(0px + clamp(30px, 100px, 20px))', '30px');
 test_length_equals('calc(0px - clamp(30px, 100px, 20px))', '-30px');
 
+// "none" values
+test_length_equals('clamp(none, 30px, 33px)', '30px');
+test_length_equals('clamp(none, 33px, 30px)', '30px');
+test_length_equals('clamp(30px, 33px, none)', '33px');
+test_length_equals('clamp(33px, 30px, none)', '33px');
+test_length_equals('clamp(none, 30px, none)', '30px');
+test_length_equals('clamp(1000px, 1em / 1rem * 1px, none)', '1000px');
+test_length_equals('clamp(1600px / 1em * 1px, 1em / 1rem * 1px, none)', '80px');
+
 </script>

Tests/LibWeb/Text/input/wpt-import/css/css-values/random-in-keyframe.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <title>CSS Values and Units Test: random() in @keyframes</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
 <link rel="help" href="https://drafts.csswg.org/css-values-5/#random">
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>

Tests/LibWeb/Text/input/wpt-import/css/css-values/random-serialize.tentative.html

@@ -43,6 +43,10 @@ test_valid_value('width', 'random(fixed calc(2 / 4), 0px, 100px)', 'random(fixed
 
 // Test nested in expressions
 test_valid_value('width', 'calc(2 * random(0px, 100px))');
+test_valid_value('math-depth', 'add(random(0, 3))');
+test_valid_value('color', 'rgb(random(0, 255) random(0, 255) random(0, 255))');
+test_valid_value('color', 'rgb(from blue r g random(b, (150 + b)))');
+test_valid_value('color', 'color-mix(in srgb, rgb(random(0, 255) 0 random(0, 255)), rgb(0 random(0, 255) 0))');
 
 // Test other types
 test_valid_value('max-lines', 'random(25, 50)');

Tests/LibWeb/Text/input/wpt-import/css/css-values/round-mod-rem-computed.html

@@ -13,6 +13,20 @@
 // Simple tests
 test_math_used('round(10,10)', '10', {type:'number'});
 test_math_used('mod(1,1)', '0', {type:'number'});
+test_math_used('mod(0,-2)', '0', {type:'number'});
+test_math_used('mod(2,-2)', '0', {type:'number'});
+test_math_used('mod(4,-2)', '0', {type:'number'});
+test_math_used('mod(-2,-2)', '0', {type:'number'});
+test_math_used('mod(-4,-2)', '0', {type:'number'});
+test_math_used('mod(0, 2)', '0', {type:'number'});
+test_math_used('mod(2, 2)', '0', {type:'number'});
+test_math_used('mod(-2, 2)', '0', {type:'number'});
+test_math_used('mod(1, 2)', '1', {type:'number'});
+test_math_used('mod(3, 2)', '1', {type:'number'});
+test_math_used('mod(-1, 2)', '1', {type:'number'});
+test_math_used('mod(1, -2)', '-1', {type:'number'});
+test_math_used('mod(3, -2)', '-1', {type:'number'});
+test_math_used('mod(-1, -2)', '-1', {type:'number'});
 test_math_used('rem(1,1)', '0', {type:'number'});
 
 // Test basic round

Tests/LibWeb/Text/input/wpt-import/css/css-values/signs-abs-invalid.html

@@ -74,4 +74,5 @@ test_invalid_length('abs(10%)');
 test_invalid_length('1px * sign(10%)');
 test_invalid_length('1px * sign(1em + 10%)');
 test_invalid_length_percentage('1px * sign(10px + 5rad)');
+test_invalid_length('calc(100% + abs(1vmin * 10%))');
 </script>

Tests/LibWeb/Text/input/wpt-import/css/css-values/tree-counting/sibling-function-media-query.tentative.html

@@ -5,28 +5,8 @@
 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10982">
 <script src="../../../resources/testharness.js"></script>
 <script src="../../../resources/testharnessreport.js"></script>
-<style id="test_sheet">
-  #target {
-    background-color: green;
-  }
-  @media (width > CALC(0px * sibling-index())) {
-    #target { background-color: red; }
-  }
-  @media (width > CALC(0px * sibling-count())) {
-    #target { background-color: red; }
-  }
-</style>
-<div id="target"></div>
+<script src="../../../css/mediaqueries/resources/matchmedia-utils.js"></script>
 <script>
-  test(() => {
-    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)");
-  }, "sibling-index() and sibling-count() are not valid in @media queries");
-
-  test(() => {
-    let rules = test_sheet.sheet.cssRules;
-    assert_equals(rules.length, 3);
-    assert_equals(rules[1].media.mediaText, "(width > CALC(0px * sibling-index()))");
-    assert_equals(rules[2].media.mediaText, "(width > CALC(0px * sibling-count()))");
-  }, "@media queries with sibling-index() and sibling-count() as general-enclosed");
-
+  query_should_be_unknown("(width > calc(0px * sibling-index()))");
+  query_should_be_unknown("(width > calc(0px * sibling-count()))");
 </script>