overflowing-snap-areas-nested.tentative.html (3118B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-type" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 div { 7 position: absolute; 8 } 9 .scroller-x { 10 overflow: scroll; 11 scroll-snap-type: x mandatory; 12 width: 500px; 13 height: 500px; 14 } 15 .scroller-y { 16 overflow: scroll; 17 scroll-snap-type: y mandatory; 18 width: 500px; 19 height: 500px; 20 } 21 .space { 22 width: 4000px; 23 height: 4000px; 24 } 25 .target { 26 scroll-snap-align: start; 27 height: 400px; 28 width: 400px; 29 } 30 .large-x { 31 width: 3000px; 32 background-color: yellow; 33 } 34 .large-y { 35 height: 2000px; 36 background-color: yellow; 37 } 38 .small { 39 height: 200px; 40 width: 200px; 41 background-color: black; 42 } 43 </style> 44 <div class="scroller-x" id="one-target"> 45 <div class="space"></div> 46 <div class="large-x target" id="single" style="left: 200px;"></div> 47 </div> 48 49 <div class="scroller-x" id="x"> 50 <div class="space"></div> 51 <div style="left: 200px;"> 52 <div class="target large-x"></div> 53 <div class="target small" style="left: 200px"></div> 54 <div class="target small" style="left: 600px"></div> 55 <div class="target small" style="left: 1200px"></div> 56 </div> 57 </div> 58 59 <div class="scroller-y" id="y"> 60 <div class="space"></div> 61 <div style="top: 200px;"> 62 <div class="target large-y"></div> 63 <div class="target small" style="top: 200px"></div> 64 <div class="target small" style="top: 600px"></div> 65 <div class="target small" style="top: 1200px"></div> 66 <div class="target large-y" style="top: 2000px"></div> 67 </div> 68 </div> 69 70 <div class="scroller-x" id="two-axes" style="scroll-snap-type: both mandatory"> 71 <div class="space"></div> 72 <div class="target large-x" style="top: 200px"></div> 73 </div> 74 75 <div class="scroller-x" id="overlapping-overflow" style="scroll-snap-type: both mandatory"> 76 <div class="space"></div> 77 <div style="left: 200px; top: 200px;"> 78 <div class="target small"></div> 79 <div class="target small"></div> 80 <div class="target small"></div> 81 <div class="target large-y large-x"></div> 82 <div class="target small"></div> 83 <div class="target small"></div> 84 <div class="target small"></div> 85 </div> 86 </div> 87 88 <script> 89 var one_target_scroller = document.getElementById("one-target"); 90 var scroller_x = document.getElementById("x"); 91 var scroller_y = document.getElementById("y"); 92 var two_axes_scroller = document.getElementById("two-axes"); 93 var overlapping_scroller = document.getElementById("overlapping-overflow"); 94 95 test(() => { 96 scroller_x.scrollTo(950, 0); 97 assert_equals(scroller_x.scrollLeft, 1000); 98 assert_equals(scroller_x.scrollTop, 0); 99 }, "Snap within a snap area which covers snapport on x selects a valid snap " + 100 "position that avoids the overlapping areas at 800-1000 and 1400-1600."); 101 102 test(() => { 103 scroller_y.scrollTo(0, 950); 104 assert_equals(scroller_y.scrollLeft, 0); 105 assert_equals(scroller_y.scrollTop, 1000); 106 }, "Snap within a snap area which covers snapport on y selects a valid snap " + 107 "position that avoids the overlapping areas at 800-1000 and 1400-1600."); 108 </script>