tor-browser

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

flex-content-distribution-001.html (2898B)

      1 <!DOCTYPE html>
      2 <title>CSS Grid Layout Test: free space computation with flex lengths.</title>
      3 <link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
      4 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-flex-tracks">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
      6 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=150359">
      7 <link rel="stylesheet" href="/css/support/grid.css">
      8 <link rel="stylesheet" href="/css/support/alignment.css">
      9 <meta name="assert" content="Test that free space is properly computed after computing fr tracks so that we could use it for content distribution." />
     10 
     11 <style>
     12 .freeSpaceForColumnsGrid {
     13    grid-template: 100% / minmax(20px, 0.7fr);
     14    width: 50px;
     15    height: 100px;
     16 }
     17 
     18 .freeSpaceForRowsGrid {
     19    grid-template: minmax(20px, 0.7fr) / 100%;
     20    width: 50px;
     21    height: 100px;
     22 }
     23 
     24 .container { position: relative; }
     25 
     26 .item {
     27    width: 100%;
     28    height: 50px;
     29    background-color: red;
     30 }
     31 
     32 .item2 {
     33    width: 50px;
     34    height: 100%;
     35    background-color: red;
     36 }
     37 
     38 </style>
     39 
     40 <script src="/resources/testharness.js"></script>
     41 <script src="/resources/testharnessreport.js"></script>
     42 <script src="/resources/check-layout-th.js"></script>
     43 
     44 <body onload="checkLayout('.grid');">
     45 
     46 <p>Grid with justify-content: start.</p>
     47 <div class="container">
     48    <div class="grid freeSpaceForColumnsGrid justifyContentStart">
     49        <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
     50    </div>
     51 </div>
     52 
     53 <p>Grid with justify-content: center.</p>
     54 <div class="container">
     55    <div class="grid freeSpaceForColumnsGrid justifyContentCenter">
     56        <div class="item" data-offset-x="8" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
     57    </div>
     58 </div>
     59 
     60 <p>Grid with justify-content: end.</p>
     61 <div class="container">
     62    <div class="grid freeSpaceForColumnsGrid justifyContentEnd">
     63        <div class="item" data-offset-x="15" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
     64    </div>
     65 </div>
     66 
     67 <p>Grid with align-content: start.</p>
     68 <div class="container">
     69    <div class="grid freeSpaceForRowsGrid alignContentStart">
     70        <div class="item2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="70"></div>
     71    </div>
     72 </div>
     73 
     74 <p>Grid with align-content: center.</p>
     75 <div class="container">
     76    <div class="grid freeSpaceForRowsGrid alignContentCenter">
     77        <div class="item2" data-offset-x="0" data-offset-y="15" data-expected-width="50" data-expected-height="70"></div>
     78    </div>
     79 </div>
     80 
     81 <p>Grid with align-content: end.</p>
     82 <div class="container">
     83    <div class="grid freeSpaceForRowsGrid alignContentEnd">
     84        <div class="item2" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="70"></div>
     85    </div>
     86 </div>
     87 </body>