anchor-fallback-invalidation.html (1352B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: Invalidation when the anchor*() fallback matches old style</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> 4 <link rel="help" href="https://issues.chromium.org/issues/333858786"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #cb { 9 position: relative; 10 width: 200px; 11 height: 200px; 12 border: 1px solid black; 13 } 14 15 #anchor { 16 anchor-name: --a; 17 position: absolute; 18 width: 40px; 19 height: 30px; 20 left: 75px; 21 top: 75px; 22 background: coral; 23 } 24 25 #anchored { 26 position: absolute; 27 background: seagreen; 28 width: 50px; 29 height: 50px; 30 } 31 32 #anchored.change { 33 /* The fallbacks match what the unchanged style says, but we shouldn't 34 take the fallbacks here. */ 35 width: anchor-size(--a width, 50px); 36 height: anchor-size(--a height, 50px); 37 } 38 </style> 39 <div id=cb> 40 <div id=anchor></div> 41 <div id=anchored>X</div> 42 </div> 43 <script> 44 test(() => { 45 assert_equals(anchored.offsetWidth, 50); 46 assert_equals(anchored.offsetHeight, 50); 47 48 anchored.classList.toggle('change'); 49 50 assert_equals(anchored.offsetWidth, 40); 51 assert_equals(anchored.offsetHeight, 30); 52 }, 'Correct invalidation when fallbacks match the old style'); 53 </script>