anchor-parse-valid.html (2821B)
1 <!DOCTYPE html> 2 <title>Tests parsing of the anchor() function</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 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 const anchorNames = [ 11 '', 12 '--foo', 13 ]; 14 15 const insetProperties = [ 16 'left', 17 'right', 18 'top', 19 'bottom', 20 'inset-block-start', 21 'inset-block-end', 22 'inset-inline-start', 23 'inset-inline-end', 24 ]; 25 26 const anchorSides = [ 27 'inside', 28 'outside', 29 'left', 30 'right', 31 'top', 32 'bottom', 33 'start', 34 'end', 35 'self-start', 36 'self-end', 37 'center', 38 '50%', 39 'calc(50%)', 40 // Array entry in the test list: the first value is the value to be specified; 41 // subsequent values are alternative serializations that will also be accepted 42 // when checking that the value was set. 43 ['min(50%, 100%)', 'calc(50%)'], 44 ]; 45 46 const fallbacks = [ 47 null, 48 '1px', 49 '50%', 50 'calc(50% + 1px)', 51 'anchor(left)', 52 'anchor(--bar left)', 53 'anchor(--bar left, anchor(--baz right))', 54 ]; 55 56 // Tests basic combinations 57 for (let property of insetProperties) { 58 // Using a wrong anchor-side (e.g., `top: anchor(--foo left)`) doesn't cause a 59 // parse error, but triggers the fallback when resolved. 60 for (let name of anchorNames) { 61 for (let side of anchorSides) { 62 // 'side' is either a single value, or an array with a value followed by allowable simplifications. 63 let anchorSide = Array.isArray(side) ? side[0] : side; 64 for (let fallback of fallbacks) { 65 let value = `anchor(${name ? name + ' ' : ''}${anchorSide}${fallback ? ', ' + fallback : ''})`; 66 let expect = Array.isArray(side) 67 ? side.map((s) => `anchor(${name ? name + ' ' : ''}${s}${fallback ? ', ' + fallback : ''})`) 68 : value; 69 test_valid_value(property, value, expect); 70 if (name) { 71 // The <anchor-element> is allowed to appear after the <anchor-side> 72 let value_flip_order = `anchor(${anchorSide} ${name}${fallback ? ', ' + fallback : ''})`; 73 test_valid_value(property, value_flip_order, expect); 74 } 75 } 76 } 77 } 78 } 79 80 // Tests that anchor() can be used in a calc tree 81 // Still follow the simplification process as outlined in https://drafts.csswg.org/css-values-4/#calc-simplification 82 test_valid_value('top', 'calc((anchor(--foo top) + anchor(--bar bottom)) / 2)', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))'); 83 test_valid_value('top', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))'); 84 test_valid_value('top', 'anchor(--foo top, calc(0.5 * anchor(--bar bottom)))'); 85 test_valid_value('top', 'min(100px, 10%, anchor(--foo top), anchor(--bar bottom))'); 86 </script>