grid-abspos-items-011.html (2432B)
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: abs pos areas in empty grid</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1215099"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items"> 11 <link rel="match" href="grid-abspos-items-011-ref.html"> 12 <style type="text/css"> 13 14 div { 15 display: grid; 16 position: relative; 17 float: left; 18 width: 20px; 19 height: 20px; 20 background: red; 21 } 22 div.green { 23 background: lime; 24 } 25 x div { 26 padding: 4px; 27 background: white; 28 } 29 30 span { 31 position: absolute; 32 top:0;left:0;bottom:0;right:0; 33 background: lime; 34 } 35 span.red { 36 background: red; 37 } 38 39 .cs { grid-column-start: 1; } 40 .ce { grid-column-end: 1; } 41 .rs { grid-row-start: 1; } 42 .re { grid-row-end: 1; } 43 44 </style> 45 </head> 46 <body> 47 48 There should be no red areas. 49 <br clear="all"> 50 51 <div><span class="cs"></span></div> 52 <div class="green"><span class="ce red"></span></div> 53 <div><span class="rs"></span></div> 54 <div class="green"><span class="re red"></span></div> 55 56 <div><span class="cs ce"></span></div> 57 <div><span class="cs rs"></span></div> 58 <div class="green"><span class="cs re red"></span></div> 59 <div class="green"><span class="ce rs red"></span></div> 60 <div class="green"><span class="ce re red"></span></div> 61 <div><span class="rs re"></span></div> 62 63 <div><span class="cs ce rs"></span></div> 64 <div class="green"><span class="cs ce re red"></span></div> 65 <div><span class="rs re cs"></span></div> 66 <div class="green"><span class="rs re ce red"></span></div> 67 68 <div><span class="cs ce rs re"></span></div> 69 70 <br clear="all"> 71 <br clear="all"> 72 73 <!-- the same combinations in a grid container with padding --> 74 75 <x> 76 <div><span class="cs"></span></div> 77 <div><span class="ce"></span></div> 78 <div><span class="rs"></span></div> 79 <div><span class="re"></span></div> 80 81 <div><span class="cs ce"></span></div> 82 <div><span class="cs rs"></span></div> 83 <div><span class="cs re"></span></div> 84 <div><span class="ce rs"></span></div> 85 <div><span class="ce re"></span></div> 86 <div><span class="rs re"></span></div> 87 88 <div><span class="cs ce rs"></span></div> 89 <div><span class="cs ce re"></span></div> 90 <div><span class="rs re cs"></span></div> 91 <div><span class="rs re ce"></span></div> 92 93 <div><span class="cs ce rs re"></span></div> 94 </x> 95 96 </body> 97 </html>