tor-browser

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

line-names-008-ref.html (3892B)

      1 <!DOCTYPE HTML>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html><head>
      7  <meta charset="utf-8">
      8  <title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
      9  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
     10  <style>
     11 html,body {
     12  color:black; background-color:white; font:12px/1 monospace;
     13 }
     14 
     15 .grid {
     16  display: grid;
     17  grid: 0.2em 1.4em / repeat(10,30px);
     18  border: 1px solid;
     19  padding: 0 2px;
     20 }
     21 
     22 div > div {
     23  position: relative;
     24  display: grid;
     25  grid-column: 2 / span 2;
     26  grid: auto / subgrid;
     27  padding: 4px 0 1px 10px;
     28  border: 1px solid black;
     29  background: grey;
     30 }
     31 
     32 n {
     33  grid-row: 1;
     34  counter-increment: n;
     35 }
     36 n::before { content: counter(n, decimal); }
     37 
     38 x {
     39  position: absolute;
     40  left:0; right:0;
     41  background: silver;
     42 }
     43 
     44 .hr { writing-mode: horizontal-tb; direction:rtl; }
     45  </style>
     46 </head>
     47 <body>
     48 
     49 <div class="grid">
     50 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     51  <div>
     52    <x style="grid-column: -1">x</x>
     53  </div>
     54 </div>
     55 
     56 <div class="grid">
     57 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     58  <div>
     59    <x style="grid-column: 2">x</x>
     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 style="grid-column-end:span 5">
     66    <x style="grid-column: 2">x</x>
     67  </div>
     68 </div>
     69 
     70 <div class="grid">
     71 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     72  <div style="grid-column:2/span 5">
     73    <x style="grid-column: 4">x</x>
     74  </div>
     75 </div>
     76 
     77 <div class="grid">
     78 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     79  <div style="grid-column-end:span 6">
     80    <x style="grid-column: 2 / 4">x</x>
     81  </div>
     82 </div>
     83 
     84 <div class="grid">
     85 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     86  <div style="grid-column-end:span 3">
     87    <x style="grid-column: -1">x</x>
     88  </div>
     89 </div>
     90 
     91 <div class="grid">
     92 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
     93  <div style="grid-column:2/span 6">
     94    <x style="grid-column: 3 / 5">x</x>
     95  </div>
     96 </div>
     97 
     98 <div class="grid">
     99 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    100  <div style="grid-column:2/span 6">
    101    <x style="grid-column: 3 / 5">x</x>
    102  </div>
    103 </div>
    104 
    105 <div class="grid">
    106 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    107  <div class="hr">
    108    <x style="grid-column: 3 / auto">x</x>
    109  </div>
    110 </div>
    111 
    112 <div class="grid">
    113 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    114  <div class="hr">
    115    <x style="grid-column: 2 / auto">x</x>
    116  </div>
    117 </div>
    118 
    119 <div class="grid">
    120 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    121  <div class="hr" style="grid-column-end:span 5">
    122    <x style="grid-column: 2 / auto">x</x>
    123  </div>
    124 </div>
    125 
    126 <div class="grid">
    127 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    128  <div class="hr" style="grid-column:2/span 5">
    129    <x style="grid-column: 6 / auto">x</x>
    130  </div>
    131 </div>
    132 
    133 <div class="grid">
    134 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    135  <div class="hr" style="grid-column-end:span 6">
    136    <x style="grid-column: 2 / 4">x</x>
    137  </div>
    138 </div>
    139 
    140 <div class="grid">
    141 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    142  <div class="hr" style="grid-column-end:span 3">
    143    <x style="grid-column: 4 / auto">x</x>
    144  </div>
    145 </div>
    146 
    147 <div class="grid">
    148 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    149  <div class="hr" style="grid-column:2/span 6">
    150    <x style="grid-column: 5 / 7">x</x>
    151  </div>
    152 </div>
    153 
    154 <div class="grid">
    155 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
    156  <div class="hr" style="grid-column:2/span 6">
    157    <x style="grid-column: 5 / 7">x</x>
    158  </div>
    159 </div>
    160 
    161 </body>
    162 </html>