line-names-008.html (5402B)
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: 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 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 11 <link rel="match" href="line-names-008-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 padding: 4px 0 1px 10px; 30 border: 1px solid black; 31 background: grey; 32 } 33 34 n { 35 grid-row: 1; 36 counter-increment: n; 37 } 38 n::before { content: counter(n, decimal); } 39 40 x { 41 position: absolute; 42 left:0; right:0; 43 background: silver; 44 } 45 46 .hr { writing-mode: horizontal-tb; direction:rtl; } 47 </style> 48 </head> 49 <body> 50 51 <div class="grid"> 52 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 53 <div style="grid-template-areas: '. a a a a';"> 54 <x style="grid-column: a-end -1">x</x> 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 style="grid-template-columns: subgrid [][a][];"> 61 <x style="grid-column: a -1">x</x> 62 </div> 63 </div> 64 65 <div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px"> 66 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 67 <div style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5"> 68 <x style="grid-column: a -1">x</x> 69 </div> 70 </div> 71 72 <div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)"> 73 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 74 <div style="grid-template-columns: subgrid [a]; grid-column:2/span 5"> 75 <x style="grid-column: a -1">x</x> 76 </div> 77 </div> 78 79 <div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)"> 80 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 81 <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6"> 82 <x style="grid-column: a 2 / a -1">x</x> 83 </div> 84 </div> 85 86 <div class="grid"> 87 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 88 <div style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3"> 89 <x style="grid-column: a -1">x</x> 90 </div> 91 </div> 92 93 <div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)"> 94 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 95 <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> 96 <x style="grid-column: a/span a">x</x> 97 </div> 98 </div> 99 100 <div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)"> 101 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 102 <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> 103 <x style="grid-column: a/a 2">x</x> 104 </div> 105 </div> 106 107 <div class="grid"> 108 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 109 <div class="hr" style="grid-template-areas: '. a a a a';"> 110 <x style="grid-column: a-end -1">x</x> 111 </div> 112 </div> 113 114 <div class="grid"> 115 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 116 <div class="hr" style="grid-template-columns: subgrid [][a][];"> 117 <x style="grid-column: a -1">x</x> 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="hr" style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5"> 124 <x style="grid-column: a -1">x</x> 125 </div> 126 </div> 127 128 <div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)"> 129 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 130 <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:2/span 5"> 131 <x style="grid-column: a -1">x</x> 132 </div> 133 </div> 134 135 <div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)"> 136 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 137 <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6"> 138 <x style="grid-column: a 2 / a -1">x</x> 139 </div> 140 </div> 141 142 <div class="grid"> 143 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 144 <div class="hr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3"> 145 <x style="grid-column: a -1">x</x> 146 </div> 147 </div> 148 149 <div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)"> 150 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 151 <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> 152 <x style="grid-column: a/span a">x</x> 153 </div> 154 </div> 155 156 <div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)"> 157 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 158 <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6"> 159 <x style="grid-column: a/a 2">x</x> 160 </div> 161 </div> 162 163 </body> 164 </html>