remove-position-try-rules-001.html (1543B)
1 <!DOCTYPE html> 2 <title>Remove current fallback @position-try rules</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://issues.chromium.org/issues/411170230"> 5 <style id="removeme"> 6 @position-try --pf1 { 7 left: auto; 8 right: anchor(left); 9 top: 200px; 10 } 11 </style> 12 <style id="removemetoo"> 13 @position-try --pf2 { 14 left: auto; 15 right: anchor(left); 16 top: 300px; 17 } 18 </style> 19 <style> 20 #anchor { 21 anchor-name: --a; 22 margin-left: 100px; 23 height: 100px; 24 background: hotpink; 25 } 26 #box { 27 position: absolute; 28 position-anchor: --a; 29 top: 100px; 30 left: anchor(right); 31 position-try-fallbacks: --pf1,--pf2; 32 width: 50px; 33 height: 50px; 34 background: cyan; 35 } 36 </style> 37 <div id="anchor"></div> 38 <div id="box"></div> 39 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="support/test-common.js"></script> 43 <script> 44 promise_test(async () => { 45 // The base style option doesn't fit. The two others do fit. 46 // Remove them one by one. 47 await waitUntilNextAnimationFrame(); 48 await waitUntilNextAnimationFrame(); 49 assert_equals(box.offsetTop, 200); 50 removeme.remove(); 51 await waitUntilNextAnimationFrame(); 52 await waitUntilNextAnimationFrame(); 53 assert_equals(box.offsetTop, 300); 54 removemetoo.remove(); 55 await waitUntilNextAnimationFrame(); 56 await waitUntilNextAnimationFrame(); 57 assert_equals(box.offsetTop, 100); 58 }, "Remove fallback rules"); 59 </script>