tor-browser

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

grid-item-margin-auto-columns-rows-001.html (2792B)

      1 <!DOCTYPE html>
      2 <title>CSS Grid: 'auto' sizes with item's margins</title>
      3 <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
      4 <link rel="help" href="https://drafts.csswg.org/css-grid">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
      6 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
      7 <meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins."/>
      8 <link href="/css/support/grid.css" rel="stylesheet">
      9 <link href="/css/support/width-keyword-classes.css" rel="stylesheet">
     10 
     11 <style>
     12 .grid {
     13    grid-template-rows: auto auto;
     14    grid-template-columns: auto auto;
     15 }
     16 
     17 .gridItem {
     18    width: 20px;
     19    height: 40px;
     20 }
     21 
     22 .marginTop {
     23    margin-top: 20px;
     24 }
     25 
     26 .marginBottom {
     27    margin-bottom: 20px;
     28 }
     29 
     30 .borderTop {
     31    border-top: 5px solid;
     32 }
     33 
     34 .borderBottom {
     35    border-bottom: 5px solid;
     36 }
     37 
     38 .paddingTop {
     39    padding-top: 10px;
     40 }
     41 
     42 .paddingBottom {
     43    padding-bottom: 10px;
     44 }
     45 </style>
     46 
     47 <script src="/resources/testharness.js"></script>
     48 <script src="/resources/testharnessreport.js"></script>
     49 <script src="/resources/check-layout-th.js"></script>
     50 
     51 <body onload="checkLayout('.grid')">
     52 <div>
     53    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
     54        <div class="gridItem marginTop firstRowFirstColumn"></div>
     55        <div class="gridItem firstRowSecondColumn"></div>
     56        <div class="gridItem marginBottom secondRowFirstColumn"></div>
     57        <div class="gridItem secondRowSecondColumn"></div>
     58    </div>
     59 </div>
     60 
     61 <div>
     62    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
     63        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
     64        <div class="gridItem firstRowSecondColumn"></div>
     65        <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
     66        <div class="gridItem secondRowSecondColumn"></div>
     67    </div>
     68 </div>
     69 
     70 <div>
     71    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
     72        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
     73        <div class="gridItem firstRowSecondColumn"></div>
     74        <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
     75        <div class="gridItem secondRowSecondColumn"></div>
     76    </div>
     77 </div>
     78 
     79 <div>
     80    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
     81        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
     82        <div class="gridItem firstRowSecondColumn"></div>
     83        <div class="gridItem paddingBottom secondRowFirstColumn"></div>
     84        <div class="gridItem secondRowSecondColumn"></div>
     85    </div>
     86 </div>
     87 </body>