tor-browser

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

grid-positioned-items-background-001.html (2174B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Grid positioned items background</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 <link rel="match" href="grid-positioned-items-background-001-ref.html">
      7 <meta name="assert" content="This test checks that the background of positioned items is painted in the right position">
      8 <link rel="stylesheet" href="/fonts/ahem.css">
      9 <link rel="stylesheet" href="/css/support/grid.css">
     10 <style>
     11 
     12 .grid {
     13  grid-template-columns: 100px 200px;
     14  grid-template-rows: 50px 150px;
     15  width: 500px;
     16  height: 300px;
     17  border: 5px solid black;
     18  margin: 30px;
     19  padding: 15px;
     20  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
     21  position: relative;
     22  background-color: transparent;
     23 }
     24 
     25 .container {
     26  position: relative;
     27  float: left;
     28 }
     29 
     30 .absolute {
     31  position: absolute;
     32 }
     33 
     34 .grid > div {
     35  background-color: green;
     36 }
     37 
     38 .lengthSize {
     39  width: 50px;
     40  height: 20px;
     41 }
     42 
     43 .percentageSize {
     44  width: 50%;
     45  height: 20%;
     46 }
     47 
     48 .offsetsSize {
     49  left: 25px;
     50  right: 30px;
     51  top: 35px;
     52  bottom: 40px;
     53 }
     54 
     55 .red {
     56  background-color: red;
     57 }
     58 </style>
     59 
     60 <p>The test passes if you see 4 green boxes and no red.</p>
     61 
     62 <div class="container">
     63  <div class="absolute red" style="left: 55px; top: 50px; width: 100px; height: 50px"></div>
     64  <div class="absolute red" style="left: 290px; top: 50px; width: 50px; height: 20px"></div>
     65  <div class="absolute red" style="left: 50px; top: 115px; width: 50px; height: 30px"></div>
     66  <div class="absolute red" style="left: 175px; top: 135px; width: 145px; height: 75px"></div>
     67  <div class="grid">
     68    <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
     69      style="left: 5px;">
     70    </div>
     71    <div class="absolute onlyFirstRowOnlySecondColumn lengthSize"
     72      style="right: 10px;">
     73    </div>
     74    <div class="absolute onlySecondRowOnlyFirstColumn percentageSize"
     75      style="top: 15px;">
     76    </div>
     77    <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div>
     78  </div>
     79 </div>