line-names-007-ref.html (2736B)
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</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 position: relative; 17 display: grid; 18 grid: 0.2em / repeat(10,30px); 19 grid-auto-rows: 2em; 20 border: 1px solid; 21 padding: 1px 2px; 22 } 23 24 div > div { 25 padding: 4px 0 1px 0; 26 border: 3px solid black; 27 background: grey; 28 margin-left: 30px; 29 width: 54px; 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>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>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="margin-left:0"> 66 <x>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="width:84px"> 73 <x>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="width:84px"> 80 <x>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="width:174px"> 87 <x>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 class="hr"> 94 <x>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 class="hr"> 101 <x>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" style="margin-left:0"> 108 <x style="grid-column: a -1">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" style="width:84px"> 115 <x>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="width:84px"> 122 <x>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="width:174px"> 129 <x>x</x> 130 </div> 131 </div> 132 133 </body> 134 </html>