position-area-scrolling-007.html (2601B)
1 <!DOCTYPE html> 2 <title>position-try-fallbacks with flip-block and flip-inline</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-try-fallbacks"> 5 <link rel="help" href="https://issues.chromium.org/issues/400761086"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/test-common.js"></script> 9 <style> 10 #anchor { 11 anchor-name: --a; 12 margin-top: 200px; 13 margin-left: 100px; 14 width: 150px; 15 height: 50px; 16 background: blue; 17 } 18 #anchored { 19 position: absolute; 20 position-anchor: --a; 21 position-area: top left; 22 position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; 23 width: 100%; 24 height: 100%; 25 min-width: 60px; 26 min-height: 60px; 27 background: hotpink; 28 } 29 </style> 30 31 <div style="position:relative; width:400px; height:400px;"> 32 <div id="scroller" style="overflow:scroll; scrollbar-width:none; width:100%; height:100%;"> 33 <div id="anchor"></div> 34 <div style="width:1000px; height:1000px;"></div> 35 <div id="anchored"></div> 36 </div> 37 </div> 38 39 <script> 40 promise_test(async () => { 41 await waitUntilNextAnimationFrame(); 42 await waitUntilNextAnimationFrame(); 43 assert_equals(anchored.offsetLeft, 0); 44 assert_equals(anchored.offsetTop, 0); 45 assert_equals(anchored.offsetWidth, 100); 46 assert_equals(anchored.offsetHeight, 200); 47 }, 'initial position'); 48 49 promise_test(async () => { 50 scroller.scrollTo(0, 150); 51 await waitUntilNextAnimationFrame(); 52 await waitUntilNextAnimationFrame(); 53 assert_equals(anchored.offsetLeft, 0); 54 assert_equals(anchored.offsetTop, 100); 55 assert_equals(anchored.offsetWidth, 100); 56 assert_equals(anchored.offsetHeight, 300); 57 }, 'Scroll down to 0,150'); 58 59 promise_test(async () => { 60 scroller.scrollTo(50, 150); 61 await waitUntilNextAnimationFrame(); 62 await waitUntilNextAnimationFrame(); 63 assert_equals(anchored.offsetLeft, 200); 64 assert_equals(anchored.offsetTop, 100); 65 assert_equals(anchored.offsetWidth, 200); 66 assert_equals(anchored.offsetHeight, 300); 67 }, 'Scroll right to 50,150'); 68 69 promise_test(async () => { 70 scroller.scrollTo(50, 0); 71 await waitUntilNextAnimationFrame(); 72 await waitUntilNextAnimationFrame(); 73 assert_equals(anchored.offsetLeft, 200); 74 assert_equals(anchored.offsetTop, 250); 75 assert_equals(anchored.offsetWidth, 200); 76 assert_equals(anchored.offsetHeight, 150); 77 }, 'Scroll up to 50,0'); 78 </script>