anchor-ident-function.html (2676B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: The ident() function </title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#ident"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/computed-testcommon.js"></script> 8 <style> 9 #cb { 10 border: 1px solid black; 11 width: 100px; 12 height: 100px; 13 position: relative; 14 } 15 .anchor { 16 width: 15px; 17 height: 15px; 18 background-color: skyblue; 19 position: absolute; 20 top: 30px; 21 } 22 /* sibling-index() could make this nicer, but it's not universally 23 supported at the time of writing: */ 24 .anchor:nth-child(1) { anchor-name: --a1; left: calc(20px * 1); } 25 .anchor:nth-child(2) { anchor-name: --a2; left: calc(20px * 2); } 26 .anchor:nth-child(3) { anchor-name: --a3; left: calc(20px * 3); } 27 #target { 28 width: 15px; 29 height: 15px; 30 background-color: tomato; 31 position: absolute; 32 position-anchor: --a1; 33 } 34 </style> 35 <div id=cb> 36 <div> 37 <div class=anchor></div> 38 <div class=anchor></div> 39 <div class=anchor></div> 40 </div> 41 <div id=target></div> 42 </div> 43 44 <script> 45 // Test the computed values of various anchor related properties: 46 47 let actual_ident = 'ident("--myident" calc(42 * sign(1em - 1px)))'; 48 let expected_ident = '--myident42'; 49 50 // https://drafts.csswg.org/css-anchor-position-1/#name 51 test_computed_value('anchor-name', actual_ident, expected_ident); 52 test_computed_value('anchor-name', `--tl, ${actual_ident}`, 53 `--tl, ${expected_ident}`); 54 test_computed_value('anchor-name', `${actual_ident}, ${actual_ident}`, 55 `${expected_ident}, ${expected_ident}`); 56 57 // https://drafts.csswg.org/css-anchor-position-1/#anchor-scope 58 test_computed_value('anchor-scope', actual_ident, expected_ident); 59 test_computed_value('anchor-scope', `--tl, ${actual_ident}`, 60 `--tl, ${expected_ident}`); 61 test_computed_value('anchor-scope', `${actual_ident}, ${actual_ident}`, 62 `${expected_ident}, ${expected_ident}`); 63 64 // https://drafts.csswg.org/css-anchor-position-1/#position-anchor 65 test_computed_value('position-anchor', actual_ident, expected_ident); 66 67 // Test ident() usage within anchor functions: 68 test_computed_value('left', 'anchor(--a1 left)', '20px'); 69 test_computed_value('left', 'anchor(--a2 left)', '40px'); 70 test_computed_value('left', 'anchor(--a3 left)', '60px'); 71 test_computed_value('left', 'calc(anchor(--a1 left)*4)', '80px'); 72 test_computed_value('width', 'calc(anchor-size(--a1)*2)', '30px'); 73 test_computed_value('width', 'anchor-size(--a1)', '15px'); 74 </script>