scrollIntoView-multiple-nested.html (3607B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM View - Simultaneous scrollIntoViews</title> 5 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/dom/events/scrolling/scroll_support.js"></script> 9 <script src="/css/css-scroll-snap/support/common.js"></script> 10 <script src="resources/simultaneousScrollIntoViews.js"></script> 11 </head> 12 <body> 13 <style> 14 .scroller { 15 overflow-y: scroll; 16 background-color: teal; 17 border: solid 1px black; 18 position: relative; 19 resize: both; 20 display: inline-block; 21 } 22 .scroller.outer { 23 height: 400px; 24 width: 400px; 25 } 26 .scroller.inner { 27 height: 200px; 28 width: 200px; 29 position: absolute; 30 top: 150%; 31 } 32 .space { 33 height: 200vh; 34 width: 200vw; 35 } 36 .box { 37 height: 50px; 38 width: 50px; 39 background-color: purple; 40 } 41 .target { 42 position: absolute; 43 top: 150%; 44 } 45 </style> 46 <div id="outerscroller1" class="outer scroller"> 47 <div class="space"></div> 48 <div id="innerscroller1" class="inner scroller"> 49 <div class="space"></div> 50 <div class="box target" id="target1"></div> 51 </div> 52 </div> 53 <div id="outerscroller2" class="outer scroller"> 54 <div class="space"></div> 55 <div id="innerscroller2" class="inner scroller"> 56 <div class="space"></div> 57 <div class="box target" id="target2"></div> 58 </div> 59 </div> 60 <script> 61 const outerscroller1 = document.getElementById("outerscroller1"); 62 const outerscroller2 = document.getElementById("outerscroller2"); 63 const innerscroller1 = document.getElementById("innerscroller1"); 64 const innerscroller2 = document.getElementById("innerscroller2"); 65 const target1 = document.getElementById("target1"); 66 const target2 = document.getElementById("target2"); 67 68 const scrollers = [ outerscroller1, 69 outerscroller2, 70 innerscroller1, 71 innerscroller2 ]; 72 // Expect the outer scrollers to scroll to the inner scrollers 73 // and the inner scrollers to scroll to their respective targets. 74 const target_offsets = [ innerscroller1.offsetTop, 75 innerscroller2.offsetTop, 76 target1.offsetTop, 77 target2.offsetTop ]; 78 promise_test(async (t) => { 79 await simultaneousScrollIntoViewsTest(t, 80 ["smooth", "smooth"], [target1, target2], scrollers, target_offsets); 81 }, "Simultaneous smooth scrollIntoViews run to completion"); 82 83 promise_test(async (t) => { 84 await simultaneousScrollIntoViewsTest(t, 85 ["smooth", "instant"], [target1, target2], scrollers, target_offsets); 86 }, "Simultaneous smooth,instant scrollIntoViews run to completion"); 87 88 promise_test(async (t) => { 89 await simultaneousScrollIntoViewsTest(t, 90 ["instant", "smooth"], [target1, target2], scrollers, target_offsets); 91 }, "Simultaneous instant,smooth scrollIntoViews run to completion"); 92 93 promise_test(async (t) => { 94 await simultaneousScrollIntoViewsTest(t, 95 ["instant", "instant"], [target1, target2], scrollers, target_offsets); 96 }, "Simultaneous instant scrollIntoViews run to completion"); 97 </script> 98 </body> 99 </html>