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-vertical-rl-001.html (2938B)

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