tor-browser

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

writing-directions-001.html (2793B)

      1 <!DOCTYPE HTML>
      2 <html><head>
      3  <meta charset="utf-8">
      4  <title>CSS Grid Test: nested subgrids map margin/border/padding according to writing direction</title>
      5  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
      6  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
      7  <link rel="match" href="writing-directions-001-ref.html">
      8  <style>
      9 html,body {
     10  font:12px/1 monospace;
     11 }
     12 
     13 .grid {
     14  display: grid;
     15  grid: 0.2em 1.4em / repeat(10, 30px);
     16  border: 1px solid;
     17  padding: 0 0 0 0;
     18 }
     19 
     20 div > div {
     21  display: grid;
     22  grid-column: 2 / span 3;
     23  grid: auto / subgrid;
     24  border: 1px solid;
     25  background: grey;
     26 }
     27 
     28 n {
     29  grid-row: 1;
     30  counter-increment: n;
     31 }
     32 n::before { content: counter(n, decimal); }
     33 
     34 x {
     35  background: silver;
     36 }
     37 
     38 .rtl { direction:rtl; }
     39 .ltr { direction:ltr; }
     40 
     41  </style>
     42 </head>
     43 <body>
     44 
     45 <div class="grid">
     46  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     47    <div class="rtl" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
     48      <div class="ltr" style="grid-template-columns: subgrid;">
     49        <x style="grid-column: 1;">x</x>
     50      </div>
     51    </div>
     52 </div>
     53 
     54 <div class="grid">
     55  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     56    <div class="rtl" style="grid-template-columns: subgrid; ">
     57      <div class="ltr" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
     58        <x style="grid-column: 1;">x</x>
     59      </div>
     60    </div>
     61 </div>
     62 
     63 <div class="grid">
     64  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     65    <div class="rtl" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
     66      <div class="ltr" style="grid-template-columns: subgrid; ">
     67        <x style="grid-column: 1;">x</x>
     68      </div>
     69    </div>
     70 </div>
     71 
     72 <div class="grid">
     73  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     74    <div class="rtl" style="grid-template-columns: subgrid;">
     75      <div class="ltr" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
     76        <x style="grid-column: 1;">x</x>
     77      </div>
     78    </div>
     79 </div>
     80 
     81 <div class="grid">
     82  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     83    <div class="rtl" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
     84      <div class="ltr" style="grid-template-columns: subgrid; ">
     85        <x style="grid-column: 1;">x</x>
     86      </div>
     87    </div>
     88 </div>
     89 
     90 <div class="grid">
     91  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     92    <div class="rtl" style="grid-template-columns: subgrid;">
     93      <div class="ltr" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
     94        <x style="grid-column: 1;">x</x>
     95      </div>
     96    </div>
     97 </div>
     98 
     99 </body>
    100 </html>