testing/web-platform/tests/css/css-scroll-snap/snap-after-initial-layout/writing-mode-vertical-rl.html

   1 <!DOCTYPE html>
   2 <title>
   3   Scrollers should snap to the closest snap point on initial layout
   4   (using 'writing-mode: vertical-rl')
   5 </title>
   6 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
   7 <link rel="match" href="snap-after-initial-layout-ref.html" />
   8 <style>
   9 div {
  10   position: absolute;
  11   margin: 0;
  12 }
  13
  14 #scroller {
  15   /* Chrome bug using 'position:absolute' with LayoutNG disabled */
  16   position: relative;
  17
  18   height: 500px;
  19   width: 500px;
  20   overflow: hidden;
  21   scroll-snap-type: both mandatory;
  22   writing-mode: vertical-rl;
  23 }
  24
  25 #close-target {
  26   width: 200px;
  27   height: 200px;
  28   border: solid green 50px;
  29   top: 50px;
  30   left: 150px;
  31   margin: 50px;
  32   background-color: green;
  33   scroll-snap-align: start;
  34 }
  35
  36 #far-target {
  37   width: 300px;
  38   height: 300px;
  39   top: 100px;
  40   left: 500px;
  41   background-color: red;
  42   scroll-snap-align: start;
  43 }
  44
  45 .area {
  46   width: 2000px;
  47   height: 2000px;
  48 }
  49 </style>
  50
  51 <div id="scroller">
  52   <div class="area"></div>
  53   <div id="close-target"></div>
  54   <div id="far-target"></div>
  55 </div>