tor-browser

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

grid-self-baseline-changes-grid-area-size-011.html (1925B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
      4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
      6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
      7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
      8 <link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
      9 <meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and gutters.">
     10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
     11 <style>
     12 .block, .grid { font: 10px/1 Ahem; }
     13 .big { font-size: 20px; }
     14 .block {
     15  position: absolute;
     16  z-index: -1;
     17  background: green;
     18  width: 100px;
     19  height: 100px;
     20 }
     21 .block > div {
     22  position: absolute;
     23  color: red;
     24 }
     25 .grid {
     26  display: inline-grid;
     27  color: green;
     28  grid-auto-rows: 50px;
     29  justify-items: baseline;
     30  grid-column-gap: 20px;
     31 }
     32 .grid > div { writing-mode: vertical-lr; }
     33 .firstRowFirstColumn {
     34  grid-row: 1;
     35  grid-column: 1;
     36 }
     37 .secondRowFirstColumn {
     38  grid-row: 2;
     39  grid-column: 1;
     40 }
     41 .firstRowSecondColumn {
     42  grid-row: 1;
     43  grid-column: 2;
     44 }
     45 </style>
     46 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
     47 <div class="block">
     48  <div style="top: 0px; left: 5px;">XXX<br>XXX</div>
     49  <div style="top: 0px; left: 55px;">X</div>
     50  <div style="top: 10px; left: 55px;">X</div>
     51  <div style="top: 20px; left: 15px;">X</div>
     52  <div style="top: 30px; left: 15px;">X</div>
     53  <div style="top: 30px; left: 55px;">X</div>
     54  <div style="top: 50px; left: 0px" class="big">X</div>
     55 </div>
     56 <div class="grid">
     57  <div class="firstRowFirstColumn">XX XXXX XX</div>
     58  <div class="secondRowFirstColumn big">X</div>
     59  <div class="firstRowSecondColumn">XX X</div>
     60 </div>