LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>CSS Grid Layout Test: Grid container with scrollbars</title>
   4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
   5 <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
   6 <link rel="match" href="grid-container-scrollbar-vertical-lr-001-ref.html">
   7 <meta name="assert" content="This test verifes that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
   8 <link href="support/grid.css" rel="stylesheet">
   9 <style>
  10   .grid {
  11     margin: 10px;
  12     writing-mode: vertical-lr;
  13   }
  14
  15   .scrollX {
  16     overflow-x: scroll;
  17   }
  18
  19   .scrollY {
  20     overflow-y: scroll;
  21   }
  22
  23   .fixedSize {
  24     width: 200px;
  25     height: 50px;
  26   }
  27
  28   .grid > div {
  29     background: cyan;
  30   }
  31 </style>
  32
  33 <p>The test passes if it has the same output than the reference.</p>
  34
  35 <div style="float: left; width: 350px;">
  36
  37   <h2>direction: ltr;</h2>
  38
  39   <div class="grid scrollX">
  40     <div>item</div>
  41   </div>
  42
  43   <div class="grid scrollY">
  44     <div>item</div>
  45   </div>
  46
  47   <div class="grid scrollX scrollY">
  48     <div>item</div>
  49   </div>
  50
  51   <div class="grid fixedSize scrollX">
  52     <div>item</div>
  53   </div>
  54
  55   <div class="grid fixedSize scrollY">
  56     <div>item</div>
  57   </div>
  58
  59   <div class="grid fixedSize scrollX scrollY">
  60     <div>item</div>
  61   </div>
  62
  63 </div>
  64
  65 <div style="float: left; width: 350px;">
  66
  67   <h2>direction: rtl;</h2>
  68
  69   <div class="directionRTL grid scrollX">
  70     <div>item</div>
  71   </div>
  72
  73   <div class="directionRTL grid scrollY">
  74     <div>item</div>
  75   </div>
  76
  77   <div class="directionRTL grid scrollX scrollY">
  78     <div>item</div>
  79   </div>
  80
  81   <div class="directionRTL grid fixedSize scrollX">
  82     <div>item</div>
  83   </div>
  84
  85   <div class="directionRTL grid fixedSize scrollY">
  86     <div>item</div>
  87   </div>
  88
  89   <div class="directionRTL grid fixedSize scrollX scrollY">
  90     <div>item</div>
  91   </div>
  92
  93 </div>