line-names-012.html (6370B)
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>CSS Grid Test: subgrid line name ordering matches writing direction</title> 9 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 11 <link rel="match" href="line-names-012-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:12px/1 monospace; 15 } 16 17 .grid { 18 display: grid; 19 grid: 0.2em 1.4em / repeat(10,30px); 20 border: 1px solid; 21 padding: 0 2px; 22 } 23 24 div > div { 25 position: relative; 26 display: grid; 27 grid-column: 2 / span 2; 28 grid: auto / subgrid; 29 border: 1px solid black; 30 background: grey; 31 } 32 33 n { 34 grid-row: 1; 35 counter-increment: n; 36 } 37 n::before { content: counter(n, decimal); } 38 39 x { 40 background: silver; 41 } 42 43 .rtl { writing-mode: horizontal-tb; direction:rtl; } 44 .ltr { writing-mode: horizontal-tb; direction:ltr; } 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 class="rtl" style="grid-template-columns: subgrid [a][][];"> 52 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 53 <x style="grid-column: a;">x</x> 54 </div> 55 </div> 56 </div> 57 58 <div class="grid"> 59 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 60 <div class="rtl" style="grid-template-columns: subgrid [][][a];"> 61 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 62 <x style="grid-column: a;">x</x> 63 </div> 64 </div> 65 </div> 66 67 <div class="grid"> 68 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 69 <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> 70 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 71 <x style="grid-column: a -1;">x</x> 72 </div> 73 </div> 74 </div> 75 76 <div class="grid"> 77 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 78 <div class="rtl" style="grid-template-columns: subgrid [a][a] 30px;"> 79 <div class="ltr" style="grid-template-columns: subgrid [][][a];"> 80 <x style="grid-column: a;">x</x> 81 </div> 82 </div> 83 </div> 84 85 <div class="grid"> 86 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 87 <div class="rtl" style="grid-template-columns: subgrid [a][a] 30px;"> 88 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 89 <x style="grid-column: a -1;">x</x> 90 </div> 91 </div> 92 </div> 93 94 <div class="grid"> 95 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 96 <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> 97 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 98 <x style="grid-column: a;">x</x> 99 </div> 100 </div> 101 </div> 102 103 <div class="grid"> 104 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 105 <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> 106 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 107 <x style="grid-column: a -1;">x</x> 108 </div> 109 </div> 110 </div> 111 112 <div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;"> 113 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 114 <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> 115 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 116 <x style="grid-column: a;">x</x> 117 </div> 118 </div> 119 </div> 120 121 <div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;"> 122 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 123 <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;"> 124 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 125 <x style="grid-column: a -1;">x</x> 126 </div> 127 </div> 128 </div> 129 130 <div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;"> 131 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 132 <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column:2/span 5;"> 133 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 134 <x style="grid-column: a;">x</x> 135 </div> 136 </div> 137 </div> 138 139 <div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px"> 140 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 141 <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column:2/span 5;"> 142 <div class="ltr" style="grid-template-columns: subgrid [a][][];"> 143 <x style="grid-column: a -1;">x</x> 144 </div> 145 </div> 146 </div> 147 148 <div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px);"> 149 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 150 <div class="rtl" style="grid-template-columns: subgrid [a][a]; grid-column:2/span 5;"> 151 <div class="ltr" style="grid-template-columns: subgrid [a][a];"> 152 <x style="grid-column: a;">x</x> 153 </div> 154 </div> 155 </div> 156 157 <div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px);"> 158 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 159 <div class="rtl" style="grid-template-columns: subgrid [a][a]; grid-column:2/span 5;"> 160 <div class="ltr" style="grid-template-columns: subgrid [a][a];"> 161 <x style="grid-column: a 2;">x</x> 162 </div> 163 </div> 164 </div> 165 166 <div class="grid"> 167 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 168 <div class="rtl" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> 169 <div class="ltr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> 170 <x style="grid-column: a;">x</x> 171 </div> 172 </div> 173 </div> 174 175 <div class="grid"> 176 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 177 <div class="rtl" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> 178 <div class="ltr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;"> 179 <x style="grid-column: a 2;">x</x> 180 </div> 181 </div> 182 </div> 183 184 </body> 185 </html>