scroll-snap-initial-layout-000.html (2978B)
1 <!DOCTYPE html> 2 <title> 3 On-screen vs. Off-screen Snapped Initial Scroll Position (Mandatory and Proximity) 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align"> 6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap"> 7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> 8 <!-- Test assumes 2px proximity is enough to snap. 9 If your implementation has a cogent argument as to why this is too much, 10 please request a change to this test. ~fantasai --> 11 <link rel="match" href="scroll-snap-initial-layout-000-ref.html"> 12 13 <style> 14 body { 15 position: absolute; 16 bottom: 0; 17 top: 0; 18 left: 0; 19 right: 0; 20 overflow: hidden; 21 } 22 23 .scroller { 24 scroll-snap-type: both mandatory; 25 overflow: hidden; 26 scroll-padding: 0; 27 width: 100px; 28 height: 100px; 29 border: solid blue; 30 margin: 10px; 31 display: inline-block; 32 } 33 34 .mandatory > .scroller { 35 scroll-snap-type: both mandatory; 36 } 37 38 .proximity > .scroller { 39 scroll-snap-type: both proximity; 40 } 41 42 .scroller > div { 43 /* padding wrapper */ 44 width: 30px; 45 } 46 47 .scroller > div > div { 48 /* target box */ 49 height: 30px; 50 background: orange; 51 scroll-snap-align: start; 52 } 53 54 .proxfar { 55 border-color: orange; 56 } 57 .proxfar > div > div { 58 background: red; 59 } 60 61 </style> 62 63 <p>Test passes if there is an orange square precisely at the top left corner of each blue box (no gap), 64 and each orange box is empty. 65 66 67 <div class="mandatory"> 68 <!-- off-screen --> 69 <div class="scroller"> 70 <div style="padding: 110px;"><div class="small-target"></div></div> 71 </div> 72 73 <div class="scroller"> 74 <div style="padding-block: 110px;"><div class="small-target"></div></div> 75 </div> 76 77 <div class="scroller"> 78 <div style="padding-inline: 110px;"><div class="small-target"></div></div> 79 </div> 80 81 <!-- on-screen --> 82 <div class="scroller"> 83 <div style="padding: 90px;"><div class="small-target"></div></div> 84 </div> 85 86 <div class="scroller"> 87 <div style="padding-block: 90px;"><div class="small-target"></div></div> 88 </div> 89 90 <div class="scroller"> 91 <div style="padding-inline: 90px;"><div class="small-target"></div></div> 92 </div> 93 </div> 94 95 <div class="proximity"> 96 <!-- off-screen --> 97 <div class="scroller proxfar"> 98 <div style="padding: 110px;"><div class="small-target"></div></div> 99 </div> 100 101 <div class="scroller proxfar"> 102 <div style="padding-block: 110px;"><div class="small-target"></div></div> 103 </div> 104 105 <div class="scroller proxfar"> 106 <div style="padding-inline: 110px;"><div class="small-target"></div></div> 107 </div> 108 109 <!-- on-screen --> 110 <div class="scroller"> 111 <div style="padding: 2px 110px 110px 2px;"><div class="small-target"></div></div> 112 </div> 113 114 <div class="scroller"> 115 <div style="padding: 2px 110px 110px 2px;"><div class="small-target"></div></div> 116 </div> 117 118 <div class="scroller"> 119 <div style="padding: 2px 110px 110px 2px;"><div class="small-target"></div></div> 120 </div> 121 </div>