tor-browser

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

grid-layout-repeat-notation.html (1390B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <title>CSS Grid Layout Test: repeat notation</title>
      5    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
      6    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation">
      7    <link rel="match" href="../reference/grid-layout-repeat-notation-ref.html">
      8    <meta name="assert" content="the subgrid layout should behave the same as reference.">
      9    <style>
     10      body {
     11        margin: 0;
     12        padding: 0;
     13      }
     14      #caseTitle {
     15        margin: 10px;
     16        height: 40px;
     17      }
     18      #grid {
     19        width: 450px;
     20        background: #eee;
     21        display: grid;
     22        grid-template-columns: repeat(4, 100px) 50px;
     23      }
     24      .a {
     25        background: blue;
     26        grid-column: 1;
     27      }
     28      .b {
     29        background: yellow;
     30        grid-column: 2;
     31      }
     32      .c {
     33        background: orange;
     34        grid-column: 3;
     35      }
     36      .d {
     37        background: cyan;
     38        grid-column: 4;
     39      }
     40      .e {
     41        background: pink;
     42        grid-column: 5;
     43      }
     44    </style>
     45  </head>
     46  <body>
     47    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
     48    <div id="grid">
     49      <div class="a">&nbsp;</div>
     50      <div class="b">&nbsp;</div>
     51      <div class="c">&nbsp;</div>
     52      <div class="d">&nbsp;</div>
     53      <div class="e">&nbsp;</div>
     54    </div>
     55  </body>
     56 </html>