tor-browser

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

display-inline-grid.html (2302B)

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