tor-browser

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

row-auto-repeat-007.html (3947B)

      1 <!DOCTYPE html>
      2 <title>Auto repeat tracks and min sizes</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-grid-3">
      4 <meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks.">
      5 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com">
      6 <style>
      7 .grid-lanes {
      8    position: relative;
      9    display: grid-lanes;
     10    grid-lanes-direction: row;
     11    grid-template-rows: repeat(auto-fill, 50px);
     12    min-width: 300px;
     13    min-height: 200px;
     14    float: left;
     15    background: pink;
     16 }
     17 .border {
     18  border: 10px solid;
     19 }
     20 .border-box {
     21  box-sizing: border-box;
     22 }
     23 .item {
     24  background: lime;
     25  /* Place item on the last row. */
     26  grid-row: -2;
     27  width: 300px;
     28  height: 100%;
     29 }
     30 </style>
     31 <script src="/resources/testharness.js"></script>
     32 <script src="/resources/testharnessreport.js"></script>
     33 <script src="/resources/check-layout-th.js"></script>
     34 <body onload="checkLayout('.grid-lanes');">
     35 
     36 <div id="log"></div>
     37 
     38 <div class="grid-lanes" data-expected-width="300" data-expected-height="200">
     39  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     40 </div>
     41 
     42 <div class="grid-lanes" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
     43  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     44 </div>
     45 
     46 <div class="grid-lanes" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
     47  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     48 </div>
     49 
     50 <div class="grid-lanes" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
     51  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     52 </div>
     53 
     54 <div class="grid-lanes border" data-expected-width="320" data-expected-height="220">
     55  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     56 </div>
     57 
     58 <div class="grid-lanes border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220">
     59  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     60 </div>
     61 
     62 <div class="grid-lanes border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
     63  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     64 </div>
     65 
     66 <div class="grid-lanes border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
     67  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     68 </div>
     69 
     70 <div class="grid-lanes border border-box" data-expected-width="320" data-expected-height="220">
     71  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     72 </div>
     73 
     74 <div class="grid-lanes border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
     75  <div class="item" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
     76 </div>
     77 
     78 <div class="grid-lanes border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
     79  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     80 </div>
     81 
     82 <div class="grid-lanes border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
     83  <div class="item" data-offset-x="0" data-offset-y="150" data-expected-width="300" data-expected-height="50"></div>
     84 </div>
     85 
     86 </body>