layout/reftests/css-grid/grid-container-overflow-001-ref.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <title>Reference: overflow:hidden/auto</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227162">
  10   <style type="text/css">
  11 html,body {
  12   color:black; background-color:white; font-size:16px; padding:0; margin:0;
  13 }
  14
  15 .grid {
  16   display: grid;
  17   grid-auto-rows: 5px;
  18   grid-template-columns: repeat(3, 8px);
  19   border: 1px solid black;
  20   grid-row-gap: 4px;
  21   grid-column-gap: 2px;
  22   float: left;
  23 }
  24
  25 .grid :first-child { background:lime; }
  26 .grid :nth-child(2n) { border-left:1px solid black; }
  27
  28 x { background: grey;  width:7px; height:5px; }
  29 y { background: blue;  width:7px; height:5px; }
  30 z { background: green; width:7px; height:5px; }
  31
  32   </style>
  33 </head>
  34 <body>
  35
  36 <div class="grid">
  37 <x></x><x></x><x></x>
  38 <y></y><y></y><y></y>
  39 <z></z><z></z><z></z>
  40 </div>
  41
  42 <div class="grid" style="width:40px; justify-content:center; align-content:center;">
  43 <x></x><x></x><x></x>
  44 <y></y><y></y><y></y>
  45 <z></z><z></z><z></z>
  46 </div>
  47
  48 <div class="grid" style="width:40px; justify-content:start; align-content:end;">
  49 <x></x><x></x><x></x>
  50 <y></y><y></y><y></y>
  51 <z></z><z></z><z></z>
  52 </div>
  53
  54 <div class="grid" style="width:40px; height:40px; justify-content:center; align-content:center;">
  55 <x></x><x></x><x></x>
  56 <y></y><y></y><y></y>
  57 <z></z><z></z><z></z>
  58 </div>
  59
  60 <div class="grid" style="height:40px; justify-content:start; align-content:end;">
  61 <x></x><x></x><x></x>
  62 <y></y><y></y><y></y>
  63 <z></z><z></z><z></z>
  64 </div>
  65
  66 <div class="grid" style="width:8px; grid-template-columns: repeat(1, 8px);">
  67 <x></x>
  68 <y></y>
  69 <z></z>
  70 </div>
  71
  72 <div class="grid" style="height:8px; grid-template-rows: repeat(1, 5px);">
  73 <x></x><x></x><x></x>
  74 </div>
  75
  76 <div class="grid" style="width:8px; height:8px; grid-template-columns: 8px; grid-template-rows: 5px;">
  77 <x></x>
  78 </div>
  79
  80 <div class="grid" style="width:8px; height:8px; justify-content:center;  grid-template-columns: 8px; grid-template-rows: 5px;">
  81 <x style="background:grey; border-left:1px solid black;"></x>
  82 </div>
  83
  84 <div class="grid" style="width:8px; height:8px; align-content:center;">
  85 <y style="background:blue; border-left:1px solid black;"></y>
  86 </div>
  87
  88 <div class="grid" style="grid-template-columns: repeat(3, 12px); justify-items:end;">
  89 <x></x><x></x><x></x>
  90 <y></y><y></y><y></y>
  91 <z></z><z></z><z></z>
  92 </div>
  93
  94 <div class="grid" style="grid-auto-rows: 10px;; align-items:end;">
  95 <x></x><x></x><x></x>
  96 <y></y><y></y><y></y>
  97 <z></z><z></z><z></z>
  98 </div>
  99
 100 <div class="grid" style="grid-auto-flow:column; grid-template-rows: repeat(3, 5px);">
 101 <x></x><x></x><x></x>
 102 <y></y><y></y><y></y>
 103 <z></z><z></z><z></z>
 104 </div>
 105
 106 <div class="grid" style="grid-auto-columns: 12px; grid-template-columns: none; ">
 107 <x></x><x></x><x></x>
 108 <y></y><y></y><y></y>
 109 <z></z><z></z><z></z>
 110 </div>
 111
 112 </body>
 113 </html>