line-names-006.html (3639B)
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 resolution</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-006-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; 15 } 16 17 div > div { background: grey; grid-column: 2 / span 2; } 18 19 i { 20 grid-row: 1; 21 counter-increment: i; 22 } 23 i::before { content: counter(i, decimal); } 24 25 x { background: silver; } 26 27 .hr { writing-mode: horizontal-tb; direction:rtl; } 28 </style> 29 </head> 30 <body> 31 32 <div style="display:grid"> 33 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 34 <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> 35 <x style="grid-column: a-end -1">x</x> 36 </div> 37 </div> 38 39 <div style="display:grid"> 40 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 41 <div style="display:grid; grid:auto/subgrid [a];"> 42 <x style="grid-column: a -1">x</x> 43 </div> 44 </div> 45 46 <div style="display:grid"> 47 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 48 <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> 49 <x style="grid-column: a -1">x</x> 50 </div> 51 </div> 52 53 <div style="display:grid"> 54 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 55 <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> 56 <x style="grid-column: a -1">x</x> 57 </div> 58 </div> 59 60 <div style="display:grid"> 61 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 62 <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> 63 <x style="grid-column: a -1">x</x> 64 </div> 65 </div> 66 67 <div style="display:grid"> 68 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 69 <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> 70 <x style="grid-column: a">x</x> 71 </div> 72 </div> 73 74 <div style="display:grid"> 75 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 76 <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';"> 77 <x style="grid-column: a-end -1">x</x> 78 </div> 79 </div> 80 81 <div style="display:grid"> 82 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 83 <div class="hr" style="display:grid; grid:auto/subgrid [a];"> 84 <x style="grid-column: a -1">x</x> 85 </div> 86 </div> 87 88 <div style="display:grid"> 89 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 90 <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2"> 91 <x style="grid-column: a -1">x</x> 92 </div> 93 </div> 94 95 <div style="display:grid"> 96 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 97 <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3"> 98 <x style="grid-column: a -1">x</x> 99 </div> 100 </div> 101 102 <div style="display:grid"> 103 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 104 <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3"> 105 <x style="grid-column: a -1">x</x> 106 </div> 107 </div> 108 109 <div style="display:grid"> 110 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 111 <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6"> 112 <x style="grid-column: a">x</x> 113 </div> 114 </div> 115 116 </body> 117 </html>