position-area-scrolling-003.tentative.html (3710B)
1 <!DOCTYPE html> 2 <title>position-area to include current scroll position at first layout</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-1/#scroll"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/test-common.js"></script> 8 <iframe id="iframe" width="500" height="500" srcdoc=' 9 <style> 10 body { 11 overflow: hidden; 12 margin: 0; 13 } 14 .pos { 15 position: absolute; 16 box-sizing: border-box; 17 border: solid; 18 position-anchor: --anchor; 19 width: 50%; 20 height: 50%; 21 background: cyan; 22 } 23 #container.thicker > .pos { 24 border-width: thick; 25 } 26 </style> 27 <div style="width:1000px; height:1000px;"> 28 <div id="container"> 29 <div style="height:200px;"></div> 30 <div style="anchor-name:--anchor; margin-left:200px; width:100px; height:100px; background:gray;"></div> 31 <div id="e1" class="pos" style="position-area:top left;"></div> 32 <div id="e2" class="pos" style="position-area:top center;"></div> 33 <div id="e3" class="pos" style="position-area:top right;"></div> 34 <div id="e4" class="pos" style="position-area:center left;"></div> 35 <div id="e5" class="pos" style="position-area:center center;"></div> 36 <div id="e6" class="pos" style="position-area:center right;"></div> 37 <div id="e7" class="pos" style="position-area:bottom left;"></div> 38 <div id="e8" class="pos" style="position-area:bottom center;"></div> 39 <div id="e9" class="pos" style="position-area:bottom right;"></div> 40 </div> 41 </div> 42 '></iframe> 43 <script> 44 // Wait for the iframe to load: 45 onload = function() { 46 const doc = iframe.contentWindow.document; 47 const container = doc.getElementById('container'); 48 const e1 = doc.getElementById('e1'); 49 const e2 = doc.getElementById('e2'); 50 const e3 = doc.getElementById('e3'); 51 const e4 = doc.getElementById('e4'); 52 const e5 = doc.getElementById('e5'); 53 const e6 = doc.getElementById('e6'); 54 const e7 = doc.getElementById('e7'); 55 const e8 = doc.getElementById('e8'); 56 const e9 = doc.getElementById('e9'); 57 58 function assert_rects_equal(elm, x, y, width, height) { 59 assert_equals(elm.offsetLeft, x, (elm.id + " x")); 60 assert_equals(elm.offsetTop, y, (elm.id + " y")); 61 assert_equals(elm.offsetWidth, width, (elm.id + " width")); 62 assert_equals(elm.offsetHeight, height, (elm.id + " height")); 63 } 64 65 function assert_sizes() { 66 assert_rects_equal(e1, 100, 100, 100, 100); 67 assert_rects_equal(e2, 225, 100, 50, 100); 68 assert_rects_equal(e3, 300, 100, 100, 100); 69 assert_rects_equal(e4, 100, 225, 100, 50); 70 assert_rects_equal(e5, 225, 225, 50, 50); 71 assert_rects_equal(e6, 300, 225, 100, 50); 72 assert_rects_equal(e7, 100, 300, 100, 350); 73 assert_rects_equal(e8, 225, 300, 50, 350); 74 assert_rects_equal(e9, 300, 300, 100, 350); 75 } 76 77 promise_test(async() => { 78 assert_sizes(); 79 }, "Initial scroll position"); 80 81 promise_test(async() => { 82 await waitUntilNextAnimationFrame(); 83 await waitUntilNextAnimationFrame(); 84 iframe.contentWindow.scrollTo(40, 60); 85 await waitUntilNextAnimationFrame(); 86 await waitUntilNextAnimationFrame(); 87 assert_sizes(); 88 }, "Scroll to 40,60"); 89 90 promise_test(async() => { 91 container.style.display = "none"; 92 await waitUntilNextAnimationFrame(); 93 await waitUntilNextAnimationFrame(); 94 container.style.display = "block"; 95 await waitUntilNextAnimationFrame(); 96 await waitUntilNextAnimationFrame(); 97 assert_sizes(); 98 }, "Redisplay at 40,60"); 99 } 100 </script>