anchor-transition-focus.html (1172B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: Transition with unused position-anchor</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 body:has(:focus) { 8 --unused: foo; 9 } 10 #anchored { 11 position: absolute; 12 position-anchor: --foo; 13 top: 0px; 14 transition: top 0.1s steps(2, start); 15 } 16 :focus ~ #anchored { 17 top: 40px; 18 } 19 </style> 20 <div id="focusable" tabindex="0" focused>Focus me</div> 21 <div id="anchored">Anchored</div> 22 <script> 23 24 promise_test(async t => { 25 document.body.offsetTop; 26 assert_equals(anchored.offsetTop, 0); 27 28 focusable.focus(); 29 assert_equals(anchored.offsetTop, 20); 30 31 const watcher = new EventWatcher(t, anchored, [ "transitionend" ]); 32 await watcher.wait_for("transitionend"); 33 34 assert_equals(anchored.offsetTop, 40); 35 36 focusable.blur(); 37 assert_equals(anchored.offsetTop, 20); 38 39 await watcher.wait_for("transitionend"); 40 assert_equals(anchored.offsetTop, 0); 41 }, "Transition insets with focus()/blur() and unused position-anchor"); 42 43 </script>