tor-browser

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

positioned-grid-items-should-not-create-implicit-tracks-001.html (1981B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Positioned grid items should not create implicit tracks</title>
      4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
      6 <meta name="assert" content="This test checks that positioned items shouldn't create implicit tracks on the grid.">
      7 <link rel="stylesheet" href="/fonts/ahem.css">
      8 <link href="/css/support/grid.css" rel="stylesheet">
      9 <style>
     10 
     11 .grid {
     12  grid-auto-columns: 100px;
     13  grid-auto-rows: 50px;
     14  width: 400px;
     15  height: 300px;
     16  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
     17  position: relative;
     18 }
     19 
     20 .absolute {
     21  position: absolute;
     22 }
     23 
     24 .seventhRowFourthColumn {
     25  background-color: coral;
     26  grid-column: 4;
     27  grid-row: 7;
     28 }
     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 <script type="text/javascript">
     35  setup({ explicit_done: true });
     36 </script>
     37 
     38 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
     39 
     40 <div id="log"></div>
     41 
     42 <div class="grid">
     43  <div class="sizedToGridArea absolute seventhRowFourthColumn"
     44    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="300">
     45  </div>
     46  <div class="autoRowAutoColumn"
     47    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">
     48  </div>
     49  <div class="autoRowAutoColumn"
     50    data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">
     51  </div>
     52  <div class="autoRowAutoColumn"
     53    data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50">
     54  </div>
     55  <div class="autoRowAutoColumn"
     56    data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">
     57  </div>
     58 </div>
     59 
     60 </body>