line-names-007.html (3771B)
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</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-007-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:12px/1 monospace; 15 } 16 17 .grid { 18 position: relative; 19 display: grid; 20 grid: 0.2em / repeat(10,30px); 21 grid-auto-rows: 2em; 22 border: 1px solid; 23 padding: 1px 2px; 24 } 25 26 div > div { 27 display: grid; 28 grid-column: 2 / span 2; 29 grid: auto / subgrid; 30 padding: 4px 33px 1px 10px; 31 border: 3px solid black; 32 background: grey; 33 } 34 35 n { 36 grid-row: 1; 37 counter-increment: n; 38 } 39 n::before { content: counter(n, decimal); } 40 41 x { 42 position: absolute; 43 left:0; right:0; 44 background: silver; 45 } 46 47 .hr { writing-mode: horizontal-tb; direction:rtl; } 48 </style> 49 </head> 50 <body> 51 52 <div class="grid"> 53 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 54 <div style="grid-template-areas: '. a a a a';"> 55 <x style="grid-column: a-end -1">x</x> 56 </div> 57 </div> 58 59 <div class="grid"> 60 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 61 <div style="grid-template-columns: subgrid [a];"> 62 <x style="grid-column: a -1">x</x> 63 </div> 64 </div> 65 66 <div class="grid"> 67 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 68 <div style="grid-template-columns: subgrid [a]; grid-column:1/span 2"> 69 <x style="grid-column: a -1">x</x> 70 </div> 71 </div> 72 73 <div class="grid"> 74 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 75 <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3"> 76 <x style="grid-column: a -1">x</x> 77 </div> 78 </div> 79 80 <div class="grid"> 81 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 82 <div style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3"> 83 <x style="grid-column: a -1">x</x> 84 </div> 85 </div> 86 87 <div class="grid"> 88 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 89 <div style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6"> 90 <x style="grid-column: a">x</x> 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="hr" style="grid-template-areas: '. a a a a';"> 97 <x style="grid-column: a-end -1">x</x> 98 </div> 99 </div> 100 101 <div class="grid"> 102 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 103 <div class="hr" style="grid-template-columns: subgrid [a];"> 104 <x style="grid-column: a -1">x</x> 105 </div> 106 </div> 107 108 <div class="grid"> 109 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 110 <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:1/span 2"> 111 <x style="grid-column: a -1">x</x> 112 </div> 113 </div> 114 115 <div class="grid"> 116 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 117 <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3"> 118 <x style="grid-column: a -1">x</x> 119 </div> 120 </div> 121 122 <div class="grid"> 123 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 124 <div class="hr" style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3"> 125 <x style="grid-column: a -1">x</x> 126 </div> 127 </div> 128 129 <div class="grid"> 130 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 131 <div class="hr" style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6"> 132 <x style="grid-column: a">x</x> 133 </div> 134 </div> 135 136 </body> 137 </html>