зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1226697 part 2 - [css-grid] Reftest fixes.
This commit is contained in:
Mats Palmgren
Родитель
bf96241100
Коммит
79555ba1f2
|
|
@ -110,6 +110,12 @@ span {
|
|||
._n { } ._n ~ span { left: 20px; }
|
||||
._n2 { } ._n2 ~ span { top: 20px; }
|
||||
.A3Xe { left: 60px; }
|
||||
.asA { } .asA ~ span { left: 20px; }
|
||||
.asA2 { } .asA2 ~ span { top: 20px; }
|
||||
.a2sA2 { width: 40px; } .a2sA2 ~ span { left: 20px; top: 20px; }
|
||||
.as1 { } .as1 ~ span { left: 20px; }
|
||||
.as2 { } .as2 ~ span { top: 20px; }
|
||||
.as3 { left: 20px; }
|
||||
|
||||
.c1 { background:grey; }
|
||||
|
||||
|
|
@ -210,6 +216,15 @@ span {
|
|||
<div class="grid"><span class="_n" ></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="asA"></span><span class="c1"></span></div>
|
||||
</div>
|
||||
|
||||
<div style="float:left; width:140px; clear:both">
|
||||
<div class="grid"><span class="asA2"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="as1"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="as2"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="as3"></span><span class="c1"></span></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -122,6 +122,12 @@ span {
|
|||
._n { grid-column: auto / 1; }
|
||||
._n2 { grid-column: auto / 2; }
|
||||
.A3Xe { grid-column: A 3 / X 2; }
|
||||
.asA { grid-column: span A / A; }
|
||||
.asA2 { grid-column: span A / A 2; }
|
||||
.a2sA2 { grid-column: span A 2 / A 2; }
|
||||
.as1 { grid-column: span A / 1; }
|
||||
.as2 { grid-column: span A / 2; }
|
||||
.as3 { grid-column: span A / 3; }
|
||||
|
||||
.c1 { grid-column:1; grid-row:auto; background:grey; }
|
||||
|
||||
|
|
@ -223,6 +229,15 @@ span {
|
|||
<div class="grid"><span class="_n" ></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="asA"></span><span class="c1"></span></div>
|
||||
</div>
|
||||
|
||||
<div style="float:left; width:140px; clear:both">
|
||||
<div class="grid"><span class="asA2"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="as1"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="as2"></span><span class="c1"></span></div>
|
||||
<div class="grid"><span class="as3"></span><span class="c1"></span></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,10 @@ body,html { color:black; background:white; font-size:12px; padding:0; margin:0;
|
|||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
grid-auto-rows: 20px;
|
||||
grid-auto-rows: 15px;
|
||||
grid-gap: 1px;
|
||||
}
|
||||
.t1 {
|
||||
grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px;
|
||||
|
|
@ -30,6 +32,16 @@ x {
|
|||
background: lime;
|
||||
border: 1px solid;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
border: 1px solid blue;
|
||||
bottom:0;height:0;left:0;right:0;
|
||||
grid-row-end:span 1!important;
|
||||
}
|
||||
.a2 { bottom:2px; }
|
||||
.a3 { bottom:4px; }
|
||||
.a4 { bottom:6px; }
|
||||
.a5 { bottom:8px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -38,17 +50,18 @@ x {
|
|||
<pre>
|
||||
grid-template-columns: 60px [A] 60px 60px;
|
||||
grid-auto-columns: 40px;
|
||||
grid-gap: 1px;
|
||||
</pre>
|
||||
|
||||
<pre>grid-column-start:</pre>
|
||||
<div class="grid t1">
|
||||
<div class="grid t1" style="padding-right:13px; border-right-width:5px">
|
||||
<x style="grid-row:1; grid-column-start:5; background:grey"></x>
|
||||
<x style="grid-row:2; grid-column-start:7">-1</x>
|
||||
<x style="grid-row:2; grid-column-start:8">4</x>
|
||||
<x style="grid-row:3; grid-column-start:6">-2</x>
|
||||
<x style="grid-row:3; grid-column-start:5">-3</x>
|
||||
<x style="grid-row:3; grid-column-start:4">-4</x>
|
||||
<x style="grid-row:3; grid-column-start:3">-5</x>
|
||||
<x style="grid-row:2; grid-column-start:8">-1</x>
|
||||
<x style="grid-row:3; grid-column-start:8">4</x>
|
||||
<x style="grid-row:3; grid-column-start:7">-2</x>
|
||||
<x style="grid-row:3; grid-column-start:6">-3</x>
|
||||
<x style="grid-row:3; grid-column-start:5">-4</x>
|
||||
<x style="grid-row:3; grid-column-start:4">-5</x>
|
||||
<x style="grid-row:4; grid-column-start:6">A -1</x>
|
||||
<x style="grid-row:4; grid-column-start:4">B -1</x>
|
||||
<x style="grid-row:5; grid-column-start:4">A -2</x>
|
||||
|
|
@ -62,17 +75,36 @@ grid-auto-columns: 40px;
|
|||
<x style="grid-row:8; grid-column-start:10">A 3</x>
|
||||
<x style="grid-row:8; grid-column-start:11">A 4</x>
|
||||
<x style="grid-row:8; grid-column-start:12">A 5</x>
|
||||
<y style="grid-row:2; grid-column-start:8"></y>
|
||||
<y style="grid-row:3; grid-column-start:8"></y>
|
||||
<y style="grid-row:3; grid-column-start:7" class="a2"></y>
|
||||
<y style="grid-row:3; grid-column-start:6" class="a3"></y>
|
||||
<y style="grid-row:3; grid-column-start:5" class="a4"></y>
|
||||
<y style="grid-row:3; grid-column-start:4" class="a5"></y>
|
||||
<y style="grid-row:4; grid-column-start:6"></y>
|
||||
<y style="grid-row:4; grid-column-start:4" class="a2"></y>
|
||||
<y style="grid-row:5; grid-column-start:4"></y>
|
||||
<y style="grid-row:6; grid-column-start:3"></y>
|
||||
<y style="grid-row:6; grid-column-start:2" class="a2"></y>
|
||||
<y style="grid-row:6; grid-column-start:1" class="a3"></y>
|
||||
<y style="grid-row:7; grid-column-start:6"></y>
|
||||
<y style="grid-row:7; grid-column-start:9" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-start:6"></y>
|
||||
<y style="grid-row:8; grid-column-start:9" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-start:10" class="a3"></y>
|
||||
<y style="grid-row:8; grid-column-start:11" class="a4"></y>
|
||||
<y style="grid-row:8; grid-column-start:12" class="a5"></y>
|
||||
</div>
|
||||
|
||||
<pre>grid-column-end:</pre>
|
||||
<div class="grid t2">
|
||||
<div class="grid t2" style="padding-left:13px;">
|
||||
<x style="grid-row:1; grid-column-start:6; background:grey"></x>
|
||||
<x style="grid-row:2; grid-column-start:7">-1</x>
|
||||
<x style="grid-row:2; grid-column-start:8">4</x>
|
||||
<x style="grid-row:3; grid-column-start:6">-2</x>
|
||||
<x style="grid-row:3; grid-column-start:5">-3</x>
|
||||
<x style="grid-row:3; grid-column-start:4">-4</x>
|
||||
<x style="grid-row:3; grid-column-start:3">-5</x>
|
||||
<x style="grid-row:2; grid-column-start:8">-1</x>
|
||||
<x style="grid-row:3; grid-column-start:8">4</x>
|
||||
<x style="grid-row:3; grid-column-start:7">-2</x>
|
||||
<x style="grid-row:3; grid-column-start:6">-3</x>
|
||||
<x style="grid-row:3; grid-column-start:5">-4</x>
|
||||
<x style="grid-row:3; grid-column-start:4">-5</x>
|
||||
<x style="grid-row:4; grid-column-start:6">A -1</x>
|
||||
<x style="grid-row:4; grid-column-start:4">B -1</x>
|
||||
<x style="grid-row:5; grid-column-start:4">A -2</x>
|
||||
|
|
@ -86,17 +118,36 @@ grid-auto-columns: 40px;
|
|||
<x style="grid-row:8; grid-column-start:10">A 3</x>
|
||||
<x style="grid-row:8; grid-column-start:11">A 4</x>
|
||||
<x style="grid-row:8; grid-column-start:12">A 5</x>
|
||||
<y style="grid-row:2; grid-column-end:9"></y>
|
||||
<y style="grid-row:3; grid-column-end:9"></y>
|
||||
<y style="grid-row:3; grid-column-end:8" class="a5"></y>
|
||||
<y style="grid-row:3; grid-column-end:7" class="a4"></y>
|
||||
<y style="grid-row:3; grid-column-end:6" class="a3"></y>
|
||||
<y style="grid-row:3; grid-column-end:5" class="a2"></y>
|
||||
<y style="grid-row:4; grid-column-end:7"></y>
|
||||
<y style="grid-row:4; grid-column-end:5" class="a2"></y>
|
||||
<y style="grid-row:5; grid-column-end:5"></y>
|
||||
<y style="grid-row:6; grid-column-end:4"></y>
|
||||
<y style="grid-row:6; grid-column-end:3" class="a2"></y>
|
||||
<y style="grid-row:6; grid-column-end:2" class="a3"></y>
|
||||
<y style="grid-row:7; grid-column-end:7"></y>
|
||||
<y style="grid-row:7; grid-column-end:10" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-end:7"></y>
|
||||
<y style="grid-row:8; grid-column-end:10" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-end:11" class="a3"></y>
|
||||
<y style="grid-row:8; grid-column-end:12" class="a4"></y>
|
||||
<y style="grid-row:8; grid-column-end:13" class="a5"></y>
|
||||
</div>
|
||||
|
||||
<pre>grid-column: / span A 2</pre>
|
||||
<div class="grid t3">
|
||||
<x style="grid-row:1; grid-column:5; background:grey"></x>
|
||||
<x style="grid-row:2; grid-column:7/span 3;">-1</x>
|
||||
<x style="grid-row:2; grid-column:8/span 2;">-1</x>
|
||||
<x style="grid-row:3; grid-column:8/span 2;">4</x>
|
||||
<x style="grid-row:4; grid-column:6/span 4;">-2</x>
|
||||
<x style="grid-row:5; grid-column:5/span 4;">-3</x>
|
||||
<x style="grid-row:6; grid-column:4/span 5;">-4</x>
|
||||
<x style="grid-row:7; grid-column:3/span 6;">-5</x>
|
||||
<x style="grid-row:4; grid-column:7/span 3;">-2</x>
|
||||
<x style="grid-row:5; grid-column:6/span 4;">-3</x>
|
||||
<x style="grid-row:6; grid-column:5/span 4;">-4</x>
|
||||
<x style="grid-row:7; grid-column:4/span 5;">-5</x>
|
||||
<x style="grid-row:8; grid-column:6/span 4;">A -1</x>
|
||||
<x style="grid-row:9; grid-column:4/span 5;">B -1</x>
|
||||
<x style="grid-row:10; grid-column:4/span 5;">A -2</x>
|
||||
|
|
@ -110,6 +161,25 @@ grid-auto-columns: 40px;
|
|||
<x style="grid-row:18; grid-column:10/span 2;">A 3</x>
|
||||
<x style="grid-row:19; grid-column:11/span 2;">A 4</x>
|
||||
<x style="grid-row:20; grid-column:12/span 2;">A 5</x>
|
||||
<y style="grid-row:2; grid-column:8/span 2;"></y>
|
||||
<y style="grid-row:3; grid-column:8/span 2;"></y>
|
||||
<y style="grid-row:4; grid-column:7/span 3;"></y>
|
||||
<y style="grid-row:5; grid-column:6/span 4;"></y>
|
||||
<y style="grid-row:6; grid-column:5/span 4;"></y>
|
||||
<y style="grid-row:7; grid-column:4/span 5;"></y>
|
||||
<y style="grid-row:8; grid-column:6/span 4;"></y>
|
||||
<y style="grid-row:9; grid-column:4/span 5;"></y>
|
||||
<y style="grid-row:10; grid-column:4/span 5;"></y>
|
||||
<y style="grid-row:11; grid-column:3/span 6;"></y>
|
||||
<y style="grid-row:12; grid-column:2/span 7;"></y>
|
||||
<y style="grid-row:13; grid-column:1/span 8;"></y>
|
||||
<y style="grid-row:14; grid-column:6/span 4;"></y>
|
||||
<y style="grid-row:15; grid-column:9/span 1;"></y>
|
||||
<y style="grid-row:16; grid-column:6/span 4;"></y>
|
||||
<y style="grid-row:17; grid-column:9/span 2;"></y>
|
||||
<y style="grid-row:18; grid-column:10/span 2;"></y>
|
||||
<y style="grid-row:19; grid-column:11/span 2;"></y>
|
||||
<y style="grid-row:20; grid-column:12/span 2;"></y>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -14,16 +14,28 @@ body,html { color:black; background:white; font-size:12px; padding:0; margin:0;
|
|||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
grid-template-columns: 60px [A] 60px 60px;
|
||||
grid-auto-columns: 40px;
|
||||
grid-auto-rows: 20px;
|
||||
grid-auto-rows: 15px;
|
||||
grid-gap: 1px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: lime;
|
||||
border: 1px solid;
|
||||
}
|
||||
y {
|
||||
position: absolute;
|
||||
border: 1px solid blue;
|
||||
bottom:0;height:0;left:0;right:0;
|
||||
grid-row-end:span 1!important;
|
||||
}
|
||||
.a2 { bottom:2px; }
|
||||
.a3 { bottom:4px; }
|
||||
.a4 { bottom:6px; }
|
||||
.a5 { bottom:8px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -32,13 +44,14 @@ x {
|
|||
<pre>
|
||||
grid-template-columns: 60px [A] 60px 60px;
|
||||
grid-auto-columns: 40px;
|
||||
grid-gap: 1px;
|
||||
</pre>
|
||||
|
||||
<pre>grid-column-start:</pre>
|
||||
<div class="grid">
|
||||
<div class="grid" style="padding-right:13px; border-right-width:5px">
|
||||
<x style="grid-row:1; grid-column:1; background:grey"></x>
|
||||
<x style="grid-row:2; grid-column-start:-1">-1</x>
|
||||
<x style="grid-row:2; grid-column-start:4">4</x>
|
||||
<x style="grid-row:3; grid-column-start:4">4</x>
|
||||
<x style="grid-row:3; grid-column-start:-2">-2</x>
|
||||
<x style="grid-row:3; grid-column-start:-3">-3</x>
|
||||
<x style="grid-row:3; grid-column-start:-4">-4</x>
|
||||
|
|
@ -56,13 +69,32 @@ grid-auto-columns: 40px;
|
|||
<x style="grid-row:8; grid-column-start:A 3">A 3</x>
|
||||
<x style="grid-row:8; grid-column-start:A 4">A 4</x>
|
||||
<x style="grid-row:8; grid-column-start:A 5">A 5</x>
|
||||
<y style="grid-row:2; grid-column-start:-1"></y>
|
||||
<y style="grid-row:3; grid-column-start:4"></y>
|
||||
<y style="grid-row:3; grid-column-start:-2" class="a2"></y>
|
||||
<y style="grid-row:3; grid-column-start:-3" class="a3"></y>
|
||||
<y style="grid-row:3; grid-column-start:-4" class="a4"></y>
|
||||
<y style="grid-row:3; grid-column-start:-5" class="a5"></y>
|
||||
<y style="grid-row:4; grid-column-start:A -1"></y>
|
||||
<y style="grid-row:4; grid-column-start:B -1" class="a2"></y>
|
||||
<y style="grid-row:5; grid-column-start:A -2"></y>
|
||||
<y style="grid-row:6; grid-column-start:A -3"></y>
|
||||
<y style="grid-row:6; grid-column-start:A -4" class="a2"></y>
|
||||
<y style="grid-row:6; grid-column-start:A -5" class="a3"></y>
|
||||
<y style="grid-row:7; grid-column-start:A"></y>
|
||||
<y style="grid-row:7; grid-column-start:B" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-start:A 1"></y>
|
||||
<y style="grid-row:8; grid-column-start:A 2" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-start:A 3" class="a3"></y>
|
||||
<y style="grid-row:8; grid-column-start:A 4" class="a4"></y>
|
||||
<y style="grid-row:8; grid-column-start:A 5" class="a5"></y>
|
||||
</div>
|
||||
|
||||
<pre>grid-column-end:</pre>
|
||||
<div class="grid">
|
||||
<div class="grid" style="padding-left:13px;">
|
||||
<x style="grid-row:1; grid-column:1; background:grey"></x>
|
||||
<x style="grid-row:2; grid-column-end:-1">-1</x>
|
||||
<x style="grid-row:2; grid-column-end:4">4</x>
|
||||
<x style="grid-row:3; grid-column-end:4">4</x>
|
||||
<x style="grid-row:3; grid-column-end:-5">-5</x>
|
||||
<x style="grid-row:3; grid-column-end:-4">-4</x>
|
||||
<x style="grid-row:3; grid-column-end:-3">-3</x>
|
||||
|
|
@ -80,6 +112,25 @@ grid-auto-columns: 40px;
|
|||
<x style="grid-row:8; grid-column-end:A 3">A 3</x>
|
||||
<x style="grid-row:8; grid-column-end:A 4">A 4</x>
|
||||
<x style="grid-row:8; grid-column-end:A 5">A 5</x>
|
||||
<y style="grid-row:2; grid-column-end:-1"></y>
|
||||
<y style="grid-row:3; grid-column-end:4"></y>
|
||||
<y style="grid-row:3; grid-column-end:-5" class="a2"></y>
|
||||
<y style="grid-row:3; grid-column-end:-4" class="a3"></y>
|
||||
<y style="grid-row:3; grid-column-end:-3" class="a4"></y>
|
||||
<y style="grid-row:3; grid-column-end:-2" class="a5"></y>
|
||||
<y style="grid-row:4; grid-column-end:A -1"></y>
|
||||
<y style="grid-row:4; grid-column-end:B -1" class="a2"></y>
|
||||
<y style="grid-row:5; grid-column-end:A -2"></y>
|
||||
<y style="grid-row:6; grid-column-end:A -3"></y>
|
||||
<y style="grid-row:6; grid-column-end:A -4" class="a2"></y>
|
||||
<y style="grid-row:6; grid-column-end:A -5" class="a3"></y>
|
||||
<y style="grid-row:7; grid-column-end:A"></y>
|
||||
<y style="grid-row:7; grid-column-end:B" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-end:A 1"></y>
|
||||
<y style="grid-row:8; grid-column-end:A 2" class="a2"></y>
|
||||
<y style="grid-row:8; grid-column-end:A 3" class="a3"></y>
|
||||
<y style="grid-row:8; grid-column-end:A 4" class="a4"></y>
|
||||
<y style="grid-row:8; grid-column-end:A 5" class="a5"></y>
|
||||
</div>
|
||||
|
||||
<pre>grid-column: / span A 2</pre>
|
||||
|
|
@ -104,6 +155,25 @@ grid-auto-columns: 40px;
|
|||
<x style="grid-row:18; grid-column:A 3/span A 2">A 3</x>
|
||||
<x style="grid-row:19; grid-column:A 4/span A 2">A 4</x>
|
||||
<x style="grid-row:20; grid-column:A 5/span A 2">A 5</x>
|
||||
<y style="grid-row:2; grid-column:-1/span A 2"></y>
|
||||
<y style="grid-row:3; grid-column:4/span A 2"></y>
|
||||
<y style="grid-row:4; grid-column:-2/span A 2"></y>
|
||||
<y style="grid-row:5; grid-column:-3/span A 2"></y>
|
||||
<y style="grid-row:6; grid-column:-4/span A 2"></y>
|
||||
<y style="grid-row:7; grid-column:-5/span A 2"></y>
|
||||
<y style="grid-row:8; grid-column:A -1/span A 2"></y>
|
||||
<y style="grid-row:9; grid-column:B -1/span A 2"></y>
|
||||
<y style="grid-row:10; grid-column:A -2/span A 2"></y>
|
||||
<y style="grid-row:11; grid-column:A -3/span A 2"></y>
|
||||
<y style="grid-row:12; grid-column:A -4/span A 2"></y>
|
||||
<y style="grid-row:13; grid-column:A -5/span A 2"></y>
|
||||
<y style="grid-row:14; grid-column:A/span A 2"></y>
|
||||
<y style="grid-row:15; grid-column:B/span B"></y>
|
||||
<y style="grid-row:16; grid-column:A 1/span A 2"></y>
|
||||
<y style="grid-row:17; grid-column:A 2/span A 2"></y>
|
||||
<y style="grid-row:18; grid-column:A 3/span A 2"></y>
|
||||
<y style="grid-row:19; grid-column:A 4/span A 2"></y>
|
||||
<y style="grid-row:20; grid-column:A 5/span A 2"></y>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче