layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.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>CSS Grid Test: test placement in repeat auto-fit grids with leading implicit tracks</title>
   9 <link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350">
  10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
  11 <link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html">
  12 <style type="text/css">
  13 body {
  14   margin: 10px;
  15   font-size: 10px;
  16 }
  17 .wrapper {
  18   display: grid;
  19   width: 600px;
  20   background-color: #f00;
  21   grid-auto-columns: 10px;
  22   grid-auto-flow: row;
  23 }
  24 .wrapper > * {
  25   background-color: #444;
  26   color: #fff;
  27 }
  28
  29 .relative {
  30   position: relative;
  31 }
  32
  33 .absposchild {
  34   z-index: -1;
  35   position: absolute;
  36   grid-column-end: span 1;
  37   top: 0px;
  38   bottom: 0px;
  39   left: 0px;
  40   right: 0px;
  41 }
  42
  43 .templateFit {
  44   grid-template-columns: repeat(auto-fit, 40px);
  45 }
  46 .templateFixedFit {
  47   grid-template-columns: 20px repeat(auto-fit, 40px);
  48 }
  49 .templateFitFixed {
  50   grid-template-columns: repeat(auto-fit, 40px) 40px;
  51 }
  52 .templateFixedFitFixed {
  53   grid-template-columns: 20px repeat(auto-fit, 40px) 40px;
  54 }
  55
  56 z {
  57   grid-column: -18;
  58 }
  59 z::after {
  60   content: "Z";
  61 }
  62
  63 y {
  64   grid-column: auto;
  65 }
  66 y::after {
  67   content: "Y";
  68 }
  69
  70
  71 b {
  72   grid-column: 3;
  73 }
  74 b::after {
  75   content: "B";
  76 }
  77
  78 c {
  79   grid-column: 5;
  80 }
  81 c::after {
  82   content: "C";
  83 }
  84
  85 d {
  86   grid-column: 7;
  87 }
  88 d::after {
  89   content: "D";
  90 }
  91
  92 e {
  93   grid-column: 9;
  94 }
  95 e::after {
  96   content: "E";
  97 }
  98
  99 f {
 100   grid-column: 11;
 101 }
 102 f::after {
 103   content: "F";
 104 }
 105
 106 </style>
 107 </head>
 108 <body>
 109
 110 <div class="wrapper templateFit"><z></z><b></b><y></y></div>
 111 <div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
 112 <div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
 113 <div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
 114 <div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
 115
 116 <div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
 117 <div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
 118 <div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
 119 <div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
 120 <div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
 121
 122 <div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
 123 <div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
 124 <div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
 125 <div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
 126 <div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
 127
 128 <div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
 129 <div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
 130 <div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
 131 <div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
 132 <div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
 133
 134 </body>
 135 </html>