anchor-getComputedStyle-004.html (1469B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tests getComputedStyle() for inset properties using position-area</title> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-value"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #container { 10 position: relative; 11 width: 300px; 12 height: 300px; 13 } 14 #anchor { 15 anchor-name: --a; 16 margin-left: 80px; 17 margin-top: 130px; 18 width: 100px; 19 height: 100px; 20 } 21 .anchored { 22 position: absolute; 23 position-anchor: --a; 24 position-area: center center; 25 } 26 #t1 { 27 inset: 10px; 28 } 29 #t2 { 30 inset: auto; 31 } 32 </style> 33 <div id="container"> 34 <div id="anchor"></div> 35 <div id="t1" class="anchored"></div> 36 <div id="t2" class="anchored"></div> 37 </div> 38 <script> 39 test(() => { 40 const style = getComputedStyle(t1); 41 assert_equals(style.top, "10px"); 42 assert_equals(style.left, "10px"); 43 assert_equals(style.bottom, "10px"); 44 assert_equals(style.right, "10px"); 45 }, "position-area does not affect resolved inset properties"); 46 47 test(() => { 48 const style = getComputedStyle(t2); 49 assert_equals(style.top, "0px"); 50 assert_equals(style.left, "0px"); 51 assert_equals(style.bottom, "0px"); 52 assert_equals(style.right, "0px"); 53 }, "'auto' inset properties resolve to 0px when position-area is non-initial"); 54 </script>