Bug 1298550 - Re-enable the now-passing part of grid-percent-grid-gap-001.html. r...
[gecko.git] / layout / reftests / css-grid / grid-placement-definite-implicit-001.html
blobb559770948c20c6a3a58cb1dcb81cdff7f4cfa9d
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 Test: Testing placement of grid items outside the explicit grid</title>
9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
11 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids">
12 <link rel="match" href="grid-placement-definite-implicit-001-ref.html">
13 <style type="text/css">
14 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
16 .grid {
17 display: grid;
18 grid-template-columns: 20px 20px 20px 20px;
19 grid-template-rows: 20px;
20 grid-auto-columns: 3px;
21 grid-auto-rows: 20px;
22 border: 1px solid blue;
23 justify-items: stretch;
26 .a { grid-area: 1 / 2; background:lime; }
27 .b { grid-column: span 1 / 2; grid-row: 1; background:pink; }
28 .c { grid-row: 2; background:yellow; }
29 .d { grid-row: 2; grid-column: 1 / span 20000; background:cyan; }
31 span {
32 border: 1px solid;
33 line-height: 18px;
34 min-width: 0;
37 </style>
38 </head>
39 <body style="overflow:hidden">
41 <div class="grid">
42 <span class="a">a</span><span class="b">b</span><span class="c">c</span>
43 </div>
45 <div class="grid">
46 <span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span>
47 </div>
48 <div class="grid">
49 <span class="a">a</span><span class="b" span="3">b</span><span class="c">c</span>
50 </div>
51 <div class="grid">
52 <span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span>
53 </div>
54 <div class="grid">
55 <span class="a">a</span><span class="b" span="100">b</span><span class="c">c</span>
56 </div>
57 <div class="grid">
58 <span class="a">a</span><span class="b" span="9998">b</span>
59 </div>
60 <div class="grid">
61 <span class="a">a</span><span class="b" span="9999">b</span>
62 </div>
63 <div class="grid">
64 <span class="a">a</span><span class="b" span="10000">b</span>
65 </div>
66 <div class="grid">
67 <span class="a">a</span><span class="b" span="12345">b</span>
68 </div>
69 <div class="grid">
70 <span class="a">a</span><span class="b" span="10000">b</span><span class="d">d</span>
71 </div>
72 <div class="grid">
73 <span class="a">a</span><span class="b" span="2">b</span><span class="d">d</span>
74 </div>
75 <div class="grid">
76 <span class="b" style="grid-column: 9997 / span 1000; margin-left:-30000px; ">b</span>
77 </div>
79 <div class="grid cols" style="margin-left:-30000px;">
80 <span class="b" style="grid-column: span 1 / a;">b</span>
81 <span class="c" style="grid-column: a;">c</span>
82 </div>
83 <div class="grid rows" style="grid-auto-rows:3px; grid-auto-cols:20px; margin-top:-30000px; border:none">
84 <span class="b" style="grid-row: span 1 / a;"></span>
85 </div>
87 <script>
88 var elms = document.querySelectorAll("[span]");
89 for (i=0; i < elms.length; ++i) {
90 var e = elms[i];
91 e.style.gridColumnStart = "span " + e.getAttribute("span");
93 var cols = '"';
94 for (j = 0; j < 10010; ++j) {
95 cols += "a "
97 cols += '"';
98 var rows = '';
99 for (j = 0; j < 10010; ++j) {
100 rows += '"a" '
103 var style = document.createElement('style');
104 style.appendChild(document.createTextNode(
105 ".cols { grid-template-areas: " + cols + "; }" +
106 ".rows { grid-template-areas: " + rows + "; }"));
107 var head = document.querySelector("head");
108 head.appendChild(style)
109 </script>
111 </body>
112 </html>