tor-browser

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

grid-positioned-children-writing-modes-001.html (3093B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Grid positioned children writing modes</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-children-writing-modes-001-ref.html">
      7 <meta name="assert" content="This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.">
      8 <link rel="stylesheet" href="/fonts/ahem.css">
      9 <link rel="stylesheet" href="/css/support/grid.css">
     10 <style>
     11 
     12 .grid {
     13  margin: 5px;
     14  width: 100px;
     15  height: 75px;
     16  grid: 20px / 30px;
     17  padding: 5px 10px 15px 20px;
     18  border-style: solid;
     19  border-width: 5px 10px 15px 20px;
     20  float: left;
     21  /* Ensures that the grid container is the containing block of the grid children. */
     22  position: relative;
     23 }
     24 
     25 .absolute {
     26  position: absolute;
     27 }
     28 
     29 .onlyFirstRowOnlyFirstColumn {
     30  background-color: green;
     31  grid-column: 1 / 2;
     32  grid-row: 1 / 2;
     33 }
     34 
     35 .offsets {
     36  left: 0;
     37  top: 0;
     38 }
     39 
     40 .red {
     41  background-color: red;
     42 }
     43 
     44 </style>
     45 
     46 <p>For the test to pass you should see no red and only green boxes. The black box will be positioned depending on the writing mode and text direction values.</p>
     47 
     48 <div class="grid">
     49  <div class="red"></div>
     50  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
     51 </div>
     52 
     53 <div class="grid verticalRL">
     54  <div class="red"></div>
     55  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
     56 </div>
     57 
     58 <div class="grid verticalLR">
     59  <div class="red"></div>
     60  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
     61 </div>
     62 
     63 <div class="grid directionRTL">
     64  <div class="red"></div>
     65  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
     66 </div>
     67 
     68 <div class="grid verticalRL directionRTL">
     69  <div class="red"></div>
     70  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
     71 </div>
     72 
     73 <div class="grid verticalLR directionRTL">
     74  <div class="red"></div>
     75  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
     76 </div>
     77 
     78 <div class="grid">
     79  <div class="red"></div>
     80  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
     81 </div>
     82 
     83 <div class="grid verticalRL">
     84  <div class="red"></div>
     85  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
     86 </div>
     87 
     88 <div class="grid verticalLR">
     89  <div class="red"></div>
     90  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
     91 </div>
     92 
     93 <div class="grid directionRTL">
     94  <div class="red"></div>
     95  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
     96 </div>
     97 
     98 <div class="grid verticalRL directionRTL">
     99  <div class="red"></div>
    100  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
    101 </div>
    102 
    103 <div class="grid verticalLR directionRTL">
    104  <div class="red"></div>
    105  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
    106 </div>