testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/scroll-snap-initial-layout-000-ref.html

   1 <!DOCTYPE html>
   2 <title>
   3   CSS Scroll Snap Reference
   4 </title>
   5 <style>
   6
   7 .scroller {
   8   width: 100px;
   9   height: 100px;
  10   border: solid blue;
  11   margin: 10px;
  12   display: inline-block;
  13 }
  14
  15 .scroller > div {
  16   width: 30px;
  17   height: 30px;
  18   background: orange;
  19 }
  20
  21 .proxfar {
  22   border-color: orange;
  23 }
  24
  25 </style>
  26
  27 <p>Test passes if there is an orange square precisely at the top left corner of each blue box (no gap),
  28 and each orange box is empty.
  29
  30
  31 <div class="mandatory">
  32   <div class="scroller">
  33     <div></div>
  34   </div>
  35
  36   <div class="scroller">
  37     <div></div>
  38   </div>
  39
  40   <div class="scroller">
  41     <div></div>
  42   </div>
  43
  44   <!-- on-screen -->
  45   <div class="scroller">
  46     <div></div>
  47   </div>
  48
  49   <div class="scroller">
  50     <div></div>
  51   </div>
  52
  53   <div class="scroller">
  54     <div></div>
  55   </div>
  56 </div>
  57
  58 <div class="proximity">
  59   <!-- off-screen -->
  60   <div class="scroller proxfar">
  61   </div>
  62
  63   <div class="scroller proxfar">
  64   </div>
  65
  66   <div class="scroller proxfar">
  67   </div>
  68
  69   <!-- on-screen -->
  70   <div class="scroller">
  71     <div></div>
  72   </div>
  73
  74   <div class="scroller">
  75     <div></div>
  76   </div>
  77
  78   <div class="scroller">
  79     <div></div>
  80   </div>
  81 </div>