tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

grid-repeat-auto-fill-fit-013-ref.html (3011B)

      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 Reference: test auto placement in repeat auto-fit grids with leading implicit tracks</title>
      9 <style type="text/css">
     10 body {
     11  margin: 10px;
     12  font-size: 10px;
     13 }
     14 .wrapper {
     15  display: grid;
     16  width: 600px;
     17  background-color: #f00;
     18 }
     19 .wrapper > * {
     20  background-color: #444;
     21  color: #fff;
     22 }
     23 
     24 .templateFit {
     25  grid-template-columns: 10px 10px repeat(auto-fill, 40px);
     26 }
     27 .templateFixedFit {
     28  grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px);
     29 }
     30 .templateFitFixed {
     31  grid-template-columns: 10px 10px repeat(auto-fill, 40px) 40px;
     32 }
     33 .templateFixedFitFixed {
     34  grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px) 40px;
     35 }
     36 
     37 z {
     38  grid-column: 1;
     39 }
     40 z::after {
     41  content: "Z";
     42 }
     43 
     44 y {
     45  grid-column: auto;
     46 }
     47 y::after {
     48  content: "Y";
     49 }
     50 
     51 
     52 b {
     53  grid-column: 3;
     54 }
     55 b::after {
     56  content: "B";
     57 }
     58 
     59 c {
     60  grid-column: 4;
     61 }
     62 c::after {
     63  content: "C";
     64 }
     65 
     66 d {
     67  grid-column: 5;
     68 }
     69 d::after {
     70  content: "D";
     71 }
     72 
     73 e {
     74  grid-column: 6;
     75 }
     76 e::after {
     77  content: "E";
     78 }
     79 
     80 f {
     81  grid-column: 7;
     82 }
     83 f::after {
     84  content: "F";
     85 }
     86 
     87 </style>
     88 </head>
     89 <body>
     90 
     91 <div class="wrapper templateFit"><z></z><b></b><y></y></div>
     92 <div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
     93 <div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
     94 <div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d></div>
     95 <div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
     96 
     97 <div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
     98 <div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
     99 <div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
    100 <div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d></div>
    101 <div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
    102 
    103 <div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
    104 <div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
    105 <div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
    106 <div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
    107 <div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
    108 
    109 <div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
    110 <div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
    111 <div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
    112 <div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
    113 <div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
    114 
    115 </body>
    116 </html>