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

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>CSS container Layout Test Reference</title>
   4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
   5 <style>
   6   .container {
   7     margin: 10px;
   8     background: grey;
   9   }
  10
  11   .scrollX {
  12     overflow-x: scroll;
  13   }
  14
  15   .scrollY {
  16     overflow-y: scroll;
  17   }
  18
  19   .fixedSize {
  20     width: 200px;
  21     height: 50px;
  22   }
  23
  24   .container > div {
  25     background: cyan;
  26     width: 100%;
  27     height: 100%;
  28   }
  29
  30   .directionRTL {
  31     direction: rtl;
  32   }
  33 </style>
  34
  35 <p>The test passes if it has the same output than the reference.</p>
  36
  37 <div style="float: left; width: 350px;">
  38
  39   <h2>direction: ltr;</h2>
  40
  41   <div class="container scrollX">
  42     <div>item</div>
  43   </div>
  44
  45   <div class="container scrollY">
  46     <div>item</div>
  47   </div>
  48
  49   <div class="container scrollX scrollY">
  50     <div>item</div>
  51   </div>
  52
  53   <div class="container fixedSize scrollX">
  54     <div>item</div>
  55   </div>
  56
  57   <div class="container fixedSize scrollY">
  58     <div>item</div>
  59   </div>
  60
  61   <div class="container fixedSize scrollX scrollY">
  62     <div>item</div>
  63   </div>
  64
  65 </div>
  66
  67 <div style="float: left; width: 350px;">
  68
  69   <h2>direction: rtl;</h2>
  70
  71   <div class="directionRTL container scrollX">
  72     <div>item</div>
  73   </div>
  74
  75   <div class="directionRTL container scrollY">
  76     <div>item</div>
  77   </div>
  78
  79   <div class="directionRTL container scrollX scrollY">
  80     <div>item</div>
  81   </div>
  82
  83   <div class="directionRTL container fixedSize scrollX">
  84     <div>item</div>
  85   </div>
  86
  87   <div class="directionRTL container fixedSize scrollY">
  88     <div>item</div>
  89   </div>
  90
  91   <div class="directionRTL container fixedSize scrollX scrollY">
  92     <div>item</div>
  93   </div>
  94
  95 </div>