anchor-inherited.html (1419B)
1 <!DOCTYPE html> 2 <title>Tests that anchor functions inherit as pixels</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <script src="/css/css-anchor-position/support/test-common.js"></script> 8 9 <style> 10 .cb { 11 width: 400px; 12 height: 400px; 13 position: relative; 14 border: 1px solid black; 15 } 16 17 .anchor { 18 width: 100px; 19 height: 100px; 20 top: 10px; 21 left: 20px; 22 position: absolute; 23 background: red; 24 anchor-name: --a; 25 } 26 27 .anchored { 28 position-anchor: --a; 29 position: absolute; 30 /* Anchored directly on top */ 31 top: anchor(top); 32 left: anchor(left); 33 width: anchor-size(width); 34 height: anchor-size(height); 35 background: coral; 36 } 37 38 /* The child should have the same size as the anchored element, 39 and inset by top:10px,left:20px vs. that element. */ 40 .child { 41 position-anchor: --unknown; /* Should have no effect. */ 42 position: relative; 43 background: skyblue; 44 top: inherit; 45 left: inherit; 46 width: inherit; 47 height: inherit; 48 } 49 50 </style> 51 52 <body onload="checkLayoutForAnchorPos('.child')"> 53 54 <div class=cb> 55 <div class=anchor></div> 56 <div class=anchored> 57 <div class=child 58 data-offset-x=20 data-offset-y=10 59 data-expected-width=100 data-expected-height=100></div> 60 </div> 61 </div> 62 63 </body>