LayoutTests/imported/w3c/web-platform-tests/css/css-grid/grid-model/grid-container-scrollbar-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-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   }
  13
  14   .scrollX {
  15     overflow-x: scroll;
  16   }
  17
  18   .scrollY {
  19     overflow-y: scroll;
  20   }
  21
  22   .fixedSize {
  23     width: 200px;
  24     height: 50px;
  25   }
  26
  27   .grid > div {
  28     background: cyan;
  29   }
  30 </style>
  31
  32 <p>The test passes if it has the same output than the reference.</p>
  33
  34 <div style="float: left; width: 350px;">
  35
  36   <h2>direction: ltr;</h2>
  37
  38   <div class="grid scrollX">
  39     <div>item</div>
  40   </div>
  41
  42   <div class="grid scrollY">
  43     <div>item</div>
  44   </div>
  45
  46   <div class="grid scrollX scrollY">
  47     <div>item</div>
  48   </div>
  49
  50   <div class="grid fixedSize scrollX">
  51     <div>item</div>
  52   </div>
  53
  54   <div class="grid fixedSize scrollY">
  55     <div>item</div>
  56   </div>
  57
  58   <div class="grid fixedSize scrollX scrollY">
  59     <div>item</div>
  60   </div>
  61
  62 </div>
  63
  64 <div style="float: left; width: 350px;">
  65
  66   <h2>direction: rtl;</h2>
  67
  68   <div class="directionRTL grid scrollX">
  69     <div>item</div>
  70   </div>
  71
  72   <div class="directionRTL grid scrollY">
  73     <div>item</div>
  74   </div>
  75
  76   <div class="directionRTL grid scrollX scrollY">
  77     <div>item</div>
  78   </div>
  79
  80   <div class="directionRTL grid fixedSize scrollX">
  81     <div>item</div>
  82   </div>
  83
  84   <div class="directionRTL grid fixedSize scrollY">
  85     <div>item</div>
  86   </div>
  87
  88   <div class="directionRTL grid fixedSize scrollX scrollY">
  89     <div>item</div>
  90   </div>
  91
  92 </div>