tor-browser

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

display-grid.html (2222B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <title>CSS Grid Layout: display: grid</title>
      5  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
      6  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
      7  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/>
      8  <link rel="match" href="../reference/display-grid-ref.html">
      9  <meta name="assert" content="'display: grid' causes an element to generate a block-level grid container box."/>
     10  <style type="text/css">
     11    #container {
     12      position:relative;
     13      width:400px;
     14      height:100px;
     15    }
     16 
     17    #grid {
     18      display:grid;
     19      grid-template-columns:100px 300px;
     20      grid-template-rows:70px 30px;
     21      height:100%;
     22    }
     23 
     24    #cell1 {
     25      grid-column:1;
     26      grid-row:1;
     27      background-color:green;
     28      height:70px;
     29    }
     30 
     31    #cell2 {
     32      grid-column:2;
     33      grid-row:1;
     34      background-color:limegreen;
     35      height:70px;
     36    }
     37 
     38    #cell3 {
     39      grid-column:1;
     40      grid-row:2;
     41      background-color:limegreen;
     42      height:30px;
     43    }
     44 
     45    #cell4 {
     46      grid-column:2;
     47      grid-row:2;
     48      background-color:green;
     49      height:30px;
     50    }
     51 
     52    .error {
     53      position:absolute;
     54      top:0;
     55      left:0;
     56      height:100%;
     57      width:100%;
     58      z-index:-1;
     59    }
     60 
     61    #table {
     62      width:100%;
     63      height:100%;
     64      border-collapse:collapse;
     65    }
     66 
     67    #table td {
     68      padding:0;
     69      vertical-align:top;
     70    }
     71 
     72    #table td:first-child {
     73      width:100px;
     74    }
     75 
     76    #table tr:last-child td {
     77      height:30px;
     78    }
     79  </style>
     80 </head>
     81 <body>
     82 <p>Test passes if there are 4 green rectangles and no red.</p>
     83 
     84 <div id="container">
     85  <div id="grid">
     86    <div id="cell1">cell1</div>
     87    <div id="cell2">cell2</div>
     88    <div id="cell3">cell3</div>
     89    <div id="cell4">cell4</div>
     90  </div>
     91  <div class="error">
     92    <table id="table">
     93      <tbody>
     94      <tr>
     95        <td style="background-color:#f00">cell1</td>
     96        <td style="background-color:#e00">cell2</td>
     97      </tr>
     98      <tr>
     99        <td style="background-color:#e00">cell3</td>
    100        <td style="background-color:#f00">cell4</td>
    101      </tr>
    102      </tbody>
    103    </table>
    104  </div>
    105 </div>
    106 </body>
    107 </html>