popover-anchor-transition.tentative.tentative.html (961B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Tests transitioning display property of anchored popover</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/popover.html"> 5 <link rel="help" href="https://github.com/whatwg/html/pull/9144"> 6 <link rel="author" href="mailto:xiaochengh@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 body { 12 margin: 0; 13 } 14 15 #target { 16 inset: auto; 17 transition: display 2s; 18 } 19 </style> 20 21 <div popover anchor id="target"> 22 Popover 23 </div> 24 25 <script> 26 test(() => { 27 target.showPopover(); 28 const xBefore = target.offsetLeft; 29 const yBefore = target.offsetTop; 30 31 target.hidePopover(); 32 assert_equals(target.offsetLeft, xBefore, 'Should not shift in x axis'); 33 assert_equals(target.offsetTop, yBefore, 'Should not shift in y axis') 34 }, 'Transitioning display property of an anchored popover should not cause a position shift'); 35 </script>