grid-placement-abspos-implicit-001.html (2554B)
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 <title>CSS Test: Testing placement of abs.pos. grid items in negative implicit grid</title> 8 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783"> 9 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> 10 <link rel="match" href="grid-abspos-items-001-ref.html"> 11 <meta charset="utf-8"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 position: relative; 18 border: 1px solid; 19 grid-auto-flow: row; 20 grid-auto-columns: 23px; 21 grid-auto-rows: 7px; 22 padding: 1px 7px 3px 13px; 23 width: 200px; 24 height: 60px; 25 } 26 27 span.negative { 28 grid-column: span A 2 / 1; 29 grid-row: A -1; 30 background: none; 31 border: none; 32 } 33 34 .a { 35 grid-column: 1 / 3; 36 grid-row: 3 / 5; 37 } 38 39 .abs { 40 position: absolute; 41 top:3px; left:1px; right:5px; bottom:1px; 42 opacity: 0.7; 43 } 44 .b { 45 grid-column: span A 4 / 2; 46 grid-row: auto / auto; 47 } 48 .c { 49 grid-column: span 5 / 1; /* outside to the left */ 50 grid-row: A -5 / 1; /* outside to the top */ 51 } 52 .d { 53 grid-column: auto / A -3; 54 grid-row: 2 / 1; 55 top: -3px; 56 } 57 .e { 58 grid-column: A -3 / auto; 59 grid-row: A -3 / auto; 60 } 61 .f { 62 grid-column: A -3 / auto; 63 grid-row: auto / A -2; 64 } 65 span { 66 background: lime; 67 border: 1px solid; 68 } 69 </style> 70 </head> 71 <body> 72 73 <div class="grid"> 74 <span class="negative"></span> 75 <span class="a"></span> 76 <span class="b abs">b</span> 77 </div> 78 79 <div class="grid"> 80 <span class="negative"></span> 81 <span class="a"></span> 82 <span class="c abs">c</span> 83 </div> 84 85 <div class="grid"> 86 <span class="negative"></span> 87 <span class="a"></span> 88 <span class="d abs">d</span> 89 </div> 90 91 <div class="grid"> 92 <span class="negative"></span> 93 <span class="a"></span> 94 <span class="e abs">e</span> 95 </div> 96 97 <div class="grid"> 98 <span class="negative"></span> 99 <span class="a"></span> 100 <span class="f abs">f</span> 101 </div> 102 103 <div class="grid"> 104 <span class="negative"></span> 105 <div><span class="b abs">b</span></div> 106 </div> 107 108 <div class="grid"> 109 <span class="negative"></span> 110 <x><span class="c abs">c</span></x> 111 </div> 112 113 <div class="grid"> 114 <span class="negative"></span> 115 <span class="d abs"></span> 116 </div> 117 118 <div class="grid"> 119 <span class="negative"></span> 120 <div><span class="e abs">e</span></div> 121 </div> 122 123 <div class="grid"> 124 <span class="negative"></span> 125 <span class="f abs">f</span> 126 </div> 127 128 </body> 129 </html>