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-ref.html (1786B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Grid positioned children writing modes reference test</title>
      4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      5 <link rel="stylesheet" href="/css/support/grid.css">
      6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      7 <style>
      8 
      9 .grid {
     10  display: block;
     11  margin: 5px;
     12  width: 100px;
     13  height: 75px;
     14  padding: 5px 10px 15px 20px;
     15  border-style: solid;
     16  border-width: 5px 10px 15px 20px;
     17  float: left;
     18 }
     19 
     20 .green {
     21  background-color: green;
     22  width: 30px;
     23  height: 20px;
     24  font: 10px/1 Ahem;
     25 }
     26 
     27 .verticalSize {
     28  width: 20px;
     29  height: 30px;
     30 }
     31 
     32 </style>
     33 
     34 <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>
     35 
     36 <div class="grid">
     37  <div class="green">XX</div>
     38 </div>
     39 
     40 <div class="grid verticalRL">
     41  <div class="green verticalSize">XX</div>
     42 </div>
     43 
     44 <div class="grid verticalLR">
     45  <div class="green verticalSize">XX</div>
     46 </div>
     47 
     48 <div class="grid directionRTL">
     49  <div class="green">XX</div>
     50 </div>
     51 
     52 <div class="grid verticalRL directionRTL">
     53  <div class="green verticalSize">XX</div>
     54 </div>
     55 
     56 <div class="grid verticalLR directionRTL">
     57  <div class="green verticalSize">XX</div>
     58 </div>
     59 
     60 <div class="grid">
     61  <div class="green">XX</div>
     62 </div>
     63 
     64 <div class="grid verticalRL">
     65  <div class="green verticalSize">XX</div>
     66 </div>
     67 
     68 <div class="grid verticalLR">
     69  <div class="green verticalSize">XX</div>
     70 </div>
     71 
     72 <div class="grid directionRTL">
     73  <div class="green">XX</div>
     74 </div>
     75 
     76 <div class="grid verticalRL directionRTL">
     77  <div class="green verticalSize">XX</div>
     78 </div>
     79 
     80 <div class="grid verticalLR directionRTL">
     81  <div class="green verticalSize">XX</div>
     82 </div>