tor-browser

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

grid-items-relative-offsets-002.html (4295B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Grid Layout Test: Grid items with relative offsets</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/#grid-item-sizing">
      6 <meta name="assert" content="Checks that relative percentage offests work for grid items.">
      7 <link rel="stylesheet" href="/css/support/grid.css">
      8 <style>
      9 .grid {
     10  position: relative;
     11  grid: 90px 60px 30px / 200px 150px 100px;
     12  inline-size: 600px;
     13  block-size: 300px;
     14 }
     15 
     16 .grid > div { position: relative; }
     17 </style>
     18 <script src="/resources/testharness.js"></script>
     19 <script src="/resources/testharnessreport.js"></script>
     20 <script src="/resources/check-layout-th.js"></script>
     21 
     22 <body onload="checkLayout('.grid')">
     23 
     24 <div id="log"></div>
     25 
     26 <h3>Direction LTR</h3>
     27 
     28 <div class="grid">
     29  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
     30    data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
     31  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
     32    data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
     33  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
     34    data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
     35 </div>
     36 
     37 <h3>Direction RTL</h3>
     38 
     39 <div class="grid directionRTL">
     40  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
     41    data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
     42  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
     43    data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
     44  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
     45    data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
     46 </div>
     47 
     48 <h2>Writing Mode vertical-lr</h2>
     49 
     50 <h3>Direction LTR</h3>
     51 
     52 <div class="grid verticalLR">
     53  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
     54    data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
     55  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
     56    data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
     57  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
     58    data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
     59 </div>
     60 
     61 <h3>Direction RTL</h3>
     62 
     63 <div class="grid verticalLR directionRTL">
     64  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
     65    data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
     66  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
     67    data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
     68  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
     69    data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
     70 </div>
     71 
     72 <h2>Writing Mode vertical-rl</h2>
     73 
     74 <h3>Direction LTR</h3>
     75 
     76 <div class="grid verticalRL">
     77  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
     78    data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
     79  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
     80    data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
     81  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
     82    data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
     83 </div>
     84 
     85 <h3>Direction RTL</h3>
     86 
     87 <div class="grid verticalRL directionRTL">
     88  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
     89    data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
     90  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
     91    data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
     92  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
     93    data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
     94 </div>