Bug 1298550 - Re-enable the now-passing part of grid-percent-grid-gap-001.html. r...
[gecko.git] / layout / reftests / css-grid / grid-abspos-items-011.html
blob5706998fefdb6b7f99b09056141f67f9cda3ce3e
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">
14 div {
15 display: grid;
16 position: relative;
17 float: left;
18 width: 20px;
19 height: 20px;
20 background: red;
22 div.green {
23 background: lime;
25 x div {
26 padding: 4px;
27 background: white;
30 span {
31 position: absolute;
32 top:0;left:0;bottom:0;right:0;
33 background: lime;
35 span.red {
36 background: red;
39 .cs { grid-column-start: 1; }
40 .ce { grid-column-end: 1; }
41 .rs { grid-row-start: 1; }
42 .re { grid-row-end: 1; }
44 </style>
45 </head>
46 <body>
48 There should be no red areas.
49 <br clear="all">
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>
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>
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>
68 <div><span class="cs ce rs re"></span></div>
70 <br clear="all">
71 <br clear="all">
73 <!-- the same combinations in a grid container with padding -->
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>
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>
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>
93 <div><span class="cs ce rs re"></span></div>
94 </x>
96 </body>
97 </html>