anchor-size-parse-invalid.html (2185B)
1 <!DOCTYPE html> 2 <title>Tests values that are invalid at parse time for the anchor-size() function</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/parsing-testcommon.js"></script> 8 9 <script> 10 // anchor-size() can only be used in properties accepted in `@position-try`. 11 test_invalid_value('font-size', 'anchor-size(--foo width)'); 12 13 // Invalid parameter format 14 test_invalid_value('width', 'anchor-size(--foo, width)'); 15 test_invalid_value('width', 'anchor-size(--foo width,)'); 16 test_invalid_value('width', 'anchor-size(--foo width height)'); 17 test_invalid_value('width', 'anchor-size(--foo width, 10px 20%)'); 18 test_invalid_value('width', 'anchor-size(--foo width, 10px, 20%)'); 19 test_invalid_value('width', 'anchor-size(--foo,)'); 20 test_invalid_value('width', 'anchor-size(, 10px)'); 21 22 // Anchor name must be a dashed ident 23 test_invalid_value('width', 'anchor-size(foo width)'); 24 25 // Invalid anchor size values 26 test_invalid_value('width', 'anchor-size(--foo top)'); 27 test_invalid_value('width', 'anchor-size(--foo 10em)'); 28 test_invalid_value('width', 'anchor-size(--foo 100s)'); 29 test_invalid_value('width', 'anchor-size(--foo 50%)'); 30 31 // Invalid fallback values 32 test_invalid_value('width', 'anchor-size(--foo width, 1)'); 33 test_invalid_value('width', 'anchor-size(--foo width, 100s)'); 34 test_invalid_value('width', 'anchor-size(--foo width, height)'); 35 test_invalid_value('width', 'anchor-size(--foo width, anchor-size(bar width))'); 36 test_invalid_value('width', 'anchor-size(--foo width, anchor(--bar top))'); 37 38 // Invalid anchor size values in calc tree 39 test_invalid_value('width', 'calc(anchor-size(foo width) + 10px + 10%)'); 40 test_invalid_value('width', 'calc(10px + 100 * anchor-size(--foo width, anchor-size(bar bottom)))'); 41 test_invalid_value('width', 'min(anchor-size(--foo width), anchor-size(--bar height), anchor(--baz top))'); 42 43 // Invalid unit anchor size fallback value in calc tree 44 test_invalid_value('top', 'calc(anchor-size(--foo width, 1) + 1px)'); 45 </script>