wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-07 08:18:41 +09:00
Code Issues Projects Releases Packages Wiki Activity

Issue #1233 - Part 2: Update Reftests

Browse source 
List of relevant patches applied:

1425599 part 15 - [css-grid] Test reference fixes + more tests.

1373678 Part 3: Add line number checks to test_grid_implicit.html.

1416350 - Part 3: Add test to verify line numbers of grids with leading implicit tracks.

1416350 - Part 4: Add a reftest of repeat:auto-fit grids with leading implicit tracks.

1417711 - [css-grid] An abs.pos. grid container child that only covers removed 'auto-fit' tracks should not span to the end padding edge.

1416350 - Part 5: Correct the expected results for grids that have leading implicit tracks.

1418727 part 3 - [css-grid] Reftest updates.
This commit is contained in:
Gaming4JC 2019-09-28 23:25:06 -04:00 • committed by Roy Tam
commit 1f9d16132b
22 changed files with 4150 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

1
dom/grid/test/chrome.ini
View file

@ -2,6 +2,7 @@
[chrome/test_grid_fragmentation.html]
[chrome/test_grid_implicit.html]
[chrome/test_grid_lines.html]
[chrome/test_grid_line_numbers.html]
[chrome/test_grid_object.html]
[chrome/test_grid_repeats.html]
[chrome/test_grid_tracks.html]

63
dom/grid/test/chrome/test_grid_implicit.html
View file

@ -33,6 +33,11 @@ body {
grid-template-rows: [areaA-end areaB-start areaC-end] 50px [areaA-start areaB-end areaC-start];
}
.template4 {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 50px;
}
.box {
background-color: #444;
color: #fff;
@ -50,6 +55,9 @@ body {
.d {
grid-area: areaD;
}
.e {
grid-column: -7 / 5;
}
</style>
<script>
@ -78,9 +86,12 @@ function runTests() {
is(grid.cols.lines[4].type, "implicit", "Grid column line 5 is implicit.");
is(grid.cols.lines[5].type, "implicit", "Grid column line 6 is implicit.");
is(grid.rows.lines[0].type, "implicit", "Grid row line 1 is implicit.");
is(grid.rows.lines[1].type, "explicit", "Grid row line 2 is explicit.");
is(grid.rows.lines[3].type, "explicit", "Grid row line 4 is explicit.");
is(grid.rows.lines[0].type, "implicit", "Grid row line 0 is implicit.");
is(grid.rows.lines[0].number, 0, "Grid row line 0 has correct number.");
is(grid.rows.lines[1].type, "explicit", "Grid row line 1 is explicit.");
is(grid.rows.lines[1].number, 1, "Grid row line 1 has correct number.");
is(grid.rows.lines[3].type, "explicit", "Grid row line 3 is explicit.");
is(grid.rows.lines[3].number, 3, "Grid row line 3 has correct number.");
// test that row line 1 gets the name forced on it by placement of item B
todo_isnot(grid.rows.lines[0].names.indexOf("got-this-name-implicitly"), -1,
@ -221,6 +232,48 @@ function runTests() {
}
}
// test the fourth grid wrapper
wrapper = document.getElementById("wrapper4");
grid = wrapper.getGridFragments()[0];
// test column and row line counts
is(grid.cols.lines.length, 8,
"Grid.cols.lines property expands properly with implicit columns on both sides."
);
is(grid.rows.lines.length, 2,
"Grid.rows.lines property is as expected"
);
if (grid.cols.lines.length == 8) {
// check that all the lines get correct implict/explicit type and number
let expectedType = [
"implicit",
"implicit",
"implicit",
"explicit",
"explicit",
"explicit",
"explicit",
"implicit",
];
let expectedNumber = [
0,
0,
0,
1,
2,
3,
4,
5,
];
for (let i = 0; i < grid.cols.lines.length; i++) {
let line = grid.cols.lines[i];
is(line.type, expectedType[i], "Line index " + i + " has expected type.");
is(line.number, expectedNumber[i], "Line index " + i + " has expected number.");
}
}
SimpleTest.finish();
}
</script>
@ -246,5 +299,9 @@ function runTests() {
<div id="boxC" class="box c">C</div>
</div>
<div id="wrapper4" class="wrapper template4">
<div id="boxE" class="box e">E</div>
</div>
</body>
</html>

101
dom/grid/test/chrome/test_grid_line_numbers.html Normal file
View file

@ -0,0 +1,101 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<style>
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 0px;
background-color: #f00;
}
.wrapper > div {
background-color: #444;
color: #fff;
}
.repeatColumns {
width: 600px;
grid-auto-columns: 50px;
grid-template-columns: repeat(auto-fit, 100px);
}
.repeatRows {
height: 600px;
grid-auto-rows: 50px;
grid-template-rows: repeat(auto-fit, 100px);
}
</style>
<script>
'use strict';
SimpleTest.waitForExplicitFinish();
function testLines(elementName, lines, expectedValues) {
is(lines.count, expectedValues.count, elementName + " has expected number of lines.");
for (let i = 0; i < lines.length; i++) {
is(lines[i].number, expectedValues[i].number, elementName + " line index " + i + " has expected number.");
}
}
function runTests() {
let grid;
let lines;
let expectedValues;
grid = document.getElementById("gridWithColumns").getGridFragments()[0];
lines = grid.cols.lines;
expectedValues = [
{ "number": 0 },
{ "number": 0 },
{ "number": 1 },
{ "number": 2 },
{ "number": 3 },
{ "number": 4 },
{ "number": 5 },
{ "number": 6 },
{ "number": 7 },
{ "number": 8 },
];
testLines("gridWithColumns", lines, expectedValues);
grid = document.getElementById("gridWithRows").getGridFragments()[0];
lines = grid.rows.lines;
expectedValues = [
{ "number": 0 },
{ "number": 0 },
{ "number": 1 },
{ "number": 2 },
{ "number": 3 },
{ "number": 4 },
{ "number": 5 },
{ "number": 6 },
{ "number": 7 },
{ "number": 8 },
];
testLines("gridWithRows", lines, expectedValues);
SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">
<div id="gridWithColumns" class="wrapper repeatColumns">
<div style="grid-column: -9">A</div>
<div style="grid-column: 4">B</div>
<div style="grid-column: 7">C</div>
</div>
<div id="gridWithRows" class="wrapper repeatRows">
<div style="grid-row: span 3 / 2">A</div>
<div style="grid-row: 4">B</div>
<div style="grid-row: 5">C</div>
<div style="grid-row: span 2 / 8">D</div>
</div>
</body>
</html>

10
layout/generic/nsGridContainerFrame.cpp
View file

@ -725,9 +725,6 @@ struct nsGridContainerFrame::LineRange
mEnd > mStart, "invalid line range");
mEnd -= aNumRemovedTracks[mEnd];
}
if (mStart == mEnd) {
mEnd = nsGridContainerFrame::kAutoLine;
}
}
/**
* Return the contribution of this line range for step 2 in
@ -5179,10 +5176,15 @@ nsGridContainerFrame::LineRange::ToPositionAndLengthForAbsPos(
: GridLineSide::eBeforeGridGap;
nscoord endPos = aTracks.GridLineEdge(mEnd, side);
*aLength = std::max(aGridOrigin + endPos, 0);
} else {
} else if (MOZ_LIKELY(mStart != mEnd)) {
nscoord pos;
ToPositionAndLength(aTracks.mSizes, &pos, aLength);
*aPos = aGridOrigin + pos;
} else {
// The grid area only covers removed 'auto-fit' tracks.
nscoord pos = aTracks.GridLineEdge(mStart, GridLineSide::eBeforeGridGap);
*aPos = aGridOrigin + pos;
*aLength = nscoord(0);
}
}
}

4
layout/generic/test/mochitest.ini
View file

@ -138,3 +138,7 @@ support-files = file_taintedfilters_feDisplacementMap-tainted-1.svg file_tainted
support-files = file_scroll_position_restore.html
[test_scroll_animation_restore.html]
[test_scroll_position_iframe.html]
[test_grid_track_sizing_algo_001.html]
skip-if = debug == true # the test is slow
[test_grid_track_sizing_algo_002.html]
skip-if = debug == true # the test is slow

1641
layout/generic/test/test_grid_track_sizing_algo_001.html Normal file
View file

File diff suppressed because it is too large Load diff

1641
layout/generic/test/test_grid_track_sizing_algo_002.html Normal file
View file

File diff suppressed because it is too large Load diff

15
layout/reftests/css-grid/grid-col-max-sizing-max-content-001-ref.html
View file

@ -17,9 +17,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
clear:left;
}
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; }
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
.c3 { width:10px; margin: 2px 18px 1px 71px; }
span {
display: block;
@ -52,21 +52,22 @@ x { display:inline-block; width:10px; height:18px; }
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:436px">
<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
<span class="c1" style="width:374px; margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="c1" style="width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:583px;">
<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
<span class="c1" style="width:507px; margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
@ -74,13 +75,13 @@ x { display:inline-block; width:10px; height:18px; }
<div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>
<div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div>

15
layout/reftests/css-grid/grid-col-max-sizing-max-content-002-ref.html
View file

@ -21,9 +21,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
clear:left;
}
.c1 { min-width:40px; margin-bottom: 2px; margin-right: 47px; }
.c1 { width:40px; margin-bottom: 2px; margin-right: 47px; }
.r1 { min-width:70px; margin-left: 38px; margin-top: 2px; }
.c3 { min-width:0; margin: 2px 18px 1px 85px; }
.c3 { width:10px; margin: 2px 18px 1px 71px; }
span {
display: block;
@ -56,21 +56,22 @@ x { display:inline-block; width:10px; height:18px; }
<span class="r1"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:436px">
<span class="c1" style="margin-right:41px"><x>&nbsp;</x></span>
<span class="c1" style="width:374px; margin-right:41px"><x>&nbsp;</x></span>
<span class="r1" style="margin-left:5px"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap" style="float:left;"><div class="grid" style="width:500px;">
<span class="c1" style="min-width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="c1" style="width:20px;margin-right:448px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:583px;">
<span class="c1" style="margin-right:55px"><x>&nbsp;</x></span>
<span class="c1" style="width:507px; margin-right:55px"><x>&nbsp;</x></span>
<span class="r1"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
@ -78,13 +79,13 @@ x { display:inline-block; width:10px; height:18px; }
<div class="wrap"><div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>
<div class="wrap"><div class="grid" style="width:389px;">
<span class="c1" style="width:100px"><x>&nbsp;</x></span>
<span class="r1" style="width:300px;margin-left:68px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x>&nbsp;</x></span>
</div></div>

8
layout/reftests/css-grid/grid-flex-min-sizing-002-ref.html
View file

@ -127,10 +127,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
}
.gF {
grid-template-columns: 22px
1px
1px
auto;
grid-template-columns: 2px
20px
2px
0;
}

4
layout/reftests/css-grid/grid-max-sizing-flex-004-ref.html
View file

@ -51,8 +51,8 @@ x { display:inline-block; height:10px; width:18px; }
<div class="grid flex" style="width:1px;height:1px;"><span class="c1" style="margin-top:1px"><x></x></span></div>
-->
<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:23px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<div class="grid mm" style="width:0;height:0;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<div class="grid mm" style="width:1px;height:1px;"><span class="c1" style="min-width:18px;min-height:10px"><x></x></span><span class="c2" style="position:relative;left:14px;width:18px;min-width:0;z-index:-1"><x></x></span></div>
<!-- TODO: fails due to broken align:stretch
<div class="grid zero" style="width:0;height:0;"><span class="c1"><x></x></span></div>
<div class="grid zero" style="width:1px;height:1px;"><span class="c1"><x></x></span></div>

64
layout/reftests/css-grid/grid-repeat-auto-fill-fit-006-ref.html
View file

@ -129,55 +129,55 @@ float { float:left; margin-right:20px; }
<body>
<float>
<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
<float>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c1 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x1"><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x1"><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t2 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c3 t2 x1"><a></a><b></b><f></f><x></x></div>
<div class="grid c1 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c1 t1 x1 p1"><a></a><b></b><f></f></div>
<div class="grid c2 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div>
<div class="grid c3 t1 x1 p1"><a></a><b></b><c></c><e></e><f></f></div>
<div class="grid c1 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c2 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c3 t2 x0 p1"><a></a><b></b><c></c><d></d><e></e><f></f></div>
<div class="grid c1 t2 x0 p1"><a></a><b></b><f></f></div>
<div class="grid c2 t2 x0 p1"><a></a><b></b><f></f></div>
<div class="grid c3 t2 x0 p1"><a></a><b></b><f></f></div>
</float>
</body>

22
layout/reftests/css-grid/grid-repeat-auto-fill-fit-007-ref.html
View file

@ -146,7 +146,7 @@ float { float:left; margin-right:20px; }
<div class="grid c2 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x5"><x></x><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x4"><x></x><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
@ -154,23 +154,23 @@ float { float:left; margin-right:20px; }
<div class="grid c2 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x4"><x></x><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x3"><x></x><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
<float>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 x2"><x></x><a></a><b></b><f></f><x></x></div>
<div class="grid c2 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c3 t1 x2"><x></x><a></a><b></b><c></c><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 x2"><x></x><a></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
</body>

33
layout/reftests/css-grid/grid-repeat-auto-fill-fit-008-ref.html
View file

@ -139,8 +139,7 @@ float { float:left; margin-right:20px; }
.x2 e { left:23px; width:20px; right:auto; }
.c2.x2 e { left:20px; }
.t1.c3.x2 e { width:40px; }
.t1.c3.x2 b { width:63px; }
.t1.c3.x2 e { width:20px; }
.t1.c3.x2 c { width:20px; right:auto;}
.t2.x5 e { left:23px; width:60px; }
@ -159,35 +158,35 @@ float { float:left; margin-right:20px; }
<div class="grid c2 t1 n x5"><x></x><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e class="s2a e6a"></e><f class="e5a"></f><x></x></div>
<div class="grid c3 t1 n x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e class="s2 e6b"></e><f class="e5b"></f><x></x></div>
<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><c></c><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><c></c><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c1 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:82px"></a><b></b><d></d><e class="s2"></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 m x5"><x></x><x></x><x></x><x></x><y></y><a style="width:75px"></a><b></b><d></d><e class="s2e"></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 m x5"><x></x><x></x><x></x><x></x><y></y><y></y><a style="width:67px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c1 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t1 o x4"><x></x><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 o x4"><x></x><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 o x4"><x></x><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 n x3"><x></x><x></x><y></y><a style="width:62px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t1 n x3"><x></x><x></x><y></y><a style="width:55px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n x3"><x></x><x></x><y></y><y></y><a style="width:47px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><c></c><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x3"><x></x><x></x><y></y><a style="width:102px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c2 t2 n x3"><x></x><x></x><y></y><a style="width:95px"></a><b></b><d></d><e></e><f class="e5"></f><x></x></div>
<div class="grid c3 t2 n x3"><x></x><x></x><y></y><y></y><a style="width:87px"></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
<float>
<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:87px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t1 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t1 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t1 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><c></c><d></d><e></e><f></f><x></x></div>
<div class="grid c1 t2 n x2"><x></x><y></y><a style="width:122px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c2 t2 n x2"><x></x><y></y><a style="width:115px"></a><b></b><d></d><e></e><f></f><x></x></div>
<div class="grid c3 t2 n x2"><x></x><y></y><y></y><a style="width:107px"></a><b></b><d></d><e></e><f></f><x></x></div>
</float>
</body>

34
layout/reftests/css-grid/grid-repeat-auto-fill-fit-008.html
View file

@ -156,32 +156,32 @@ function testGridTemplateColumns(elem, expected) {
}
}
var a1 = [
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c d] 20px 3px",
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 20px",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c d] 20px 3px"
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 20px 3px"
];
var a2 = [
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d]",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d]",
"3px [a b] 0px [c b] 20px [c b] 20px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c b] 0px [c d]",
"[a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px",
"3px [a b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c d] 3px"
"3px [a b] 0px [c b] 20px [c b] 0px [c b] 20px [c b] 0px [c b] 0px [c b] 0px [c d] 3px"
];
function runTest() {
var t1 = document.querySelectorAll('.t1');
@ -195,7 +195,7 @@ function runTest() {
document.documentElement.className='';
}
document.addEventListener('MozReftestInvalidate', runTest, false);
document.addEventListener('MozReftestInvalidate', runTest);
</script>

144
layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>Reference: repeat(auto-fit) with removed tracks</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
<style type="text/css">
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
}
.container {
width: 200px;
}
.grid {
position: relative;
display: grid;
grid: 10px / repeat(5, 30px);
grid-auto-columns: 2px;
background: lightgrey;
margin-bottom: 4px;
grid-gap: 5px;
}
.distribute {
grid-gap: 0;
align-content: space-around;
}
span {
background: blue;
height: 10px;
}
.abs {
position: absolute;
top:0; right:0; bottom:0; left:0;
grid-column-end: span 1;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="grid">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 3" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / auto" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 3" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 2" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / auto" class="abs"></span>
</div>
</div>
</body>
</html>

160
layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: repeat(auto-fit) with removed tracks</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711">
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
<link rel="match" href="grid-repeat-auto-fill-fit-012-ref.html">
<style type="text/css">
html,body {
color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0;
}
.container {
width: 200px;
}
.grid {
position: relative;
display: grid;
grid: 10px / repeat(auto-fit, 30px);
grid-auto-columns: 2px;
background: lightgrey;
margin-bottom: 4px;
grid-gap: 5px;
}
.distribute {
grid-gap: 0;
align-content: space-around;
}
span {
background: blue;
height: 10px;
}
.abs {
position: absolute;
top:0; right:0; bottom:0; left:0;
grid-column-end: span 1;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<div class="grid">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 3"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 1 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2 / 4"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 4 / 5"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 5" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid">
<span style="grid-column: 2 / 10" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 3"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 4 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 1 / 5" class="abs"></span>
<span style="grid-column: 1"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 2 / 4"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
<span style="grid-column: 4 / 5"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 5" class="abs"></span>
</div>
</div>
<div class="container">
<div class="grid distribute">
<span style="grid-column: 2 / 10" class="abs"></span>
</div>
</div>
</body>
</html>

116
layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html Normal file
View file

@ -0,0 +1,116 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test Reference: test auto placement in repeat auto-fit grids with leading implicit tracks</title>
<style type="text/css">
body {
margin: 10px;
font-size: 10px;
}
.wrapper {
display: grid;
width: 600px;
background-color: #f00;
}
.wrapper > * {
background-color: #444;
color: #fff;
}
.templateFit {
grid-template-columns: 10px 10px repeat(auto-fill, 40px);
}
.templateFixedFit {
grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px);
}
.templateFitFixed {
grid-template-columns: 10px 10px repeat(auto-fill, 40px) 40px;
}
.templateFixedFitFixed {
grid-template-columns: 10px calc(10px + 20px) repeat(auto-fill, 40px) 40px;
}
z {
grid-column: 1;
}
z::after {
content: "Z";
}
y {
grid-column: auto;
}
y::after {
content: "Y";
}
b {
grid-column: 3;
}
b::after {
content: "B";
}
c {
grid-column: 4;
}
c::after {
content: "C";
}
d {
grid-column: 5;
}
d::after {
content: "D";
}
e {
grid-column: 6;
}
e::after {
content: "E";
}
f {
grid-column: 7;
}
f::after {
content: "F";
}
</style>
</head>
<body>
<div class="wrapper templateFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFixedFit"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><d style="grid-column: 4"></d><f style="grid-column: 5"></f></div>
</body>
</html>

135
layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html Normal file
View file

@ -0,0 +1,135 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Grid Test: test placement in repeat auto-fit grids with leading implicit tracks</title>
<link rel="author" title="Brad Werth" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1416350">
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill">
<link rel="match" href="grid-repeat-auto-fill-fit-013-ref.html">
<style type="text/css">
body {
margin: 10px;
font-size: 10px;
}
.wrapper {
display: grid;
width: 600px;
background-color: #f00;
grid-auto-columns: 10px;
grid-auto-flow: row;
}
.wrapper > * {
background-color: #444;
color: #fff;
}
.relative {
position: relative;
}
.absposchild {
z-index: -1;
position: absolute;
grid-column-end: span 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.templateFit {
grid-template-columns: repeat(auto-fit, 40px);
}
.templateFixedFit {
grid-template-columns: 20px repeat(auto-fit, 40px);
}
.templateFitFixed {
grid-template-columns: repeat(auto-fit, 40px) 40px;
}
.templateFixedFitFixed {
grid-template-columns: 20px repeat(auto-fit, 40px) 40px;
}
z {
grid-column: -18;
}
z::after {
content: "Z";
}
y {
grid-column: auto;
}
y::after {
content: "Y";
}
b {
grid-column: 3;
}
b::after {
content: "B";
}
c {
grid-column: 5;
}
c::after {
content: "C";
}
d {
grid-column: 7;
}
d::after {
content: "D";
}
e {
grid-column: 9;
}
e::after {
content: "E";
}
f {
grid-column: 11;
}
f::after {
content: "F";
}
</style>
</head>
<body>
<div class="wrapper templateFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
<div class="wrapper templateFixedFit"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFit"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFixedFit relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
<div class="wrapper templateFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><y></y></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d></div>
<div class="wrapper templateFixedFitFixed"><z></z><b></b><c></c><d></d><e></e><f></f></div>
<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d></div>
<div class="wrapper templateFixedFitFixed relative"><z></z><b></b><c class="absposchild"></c><d></d><e class="absposchild"></e><f></f></div>
</body>
</html>

30
layout/reftests/css-grid/grid-track-intrinsic-sizing-002-ref.html
View file

@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
background: grey;
}
.g1 .d1 {
width: 52px;
width: 0px;
}
.g2 .d1 {
width: 56px;
width: 0px;
}
.g2f .d1 {
width: 69px;
width: 0px;
}
.g3 .d1 {
width: 56px;
width: 0px;
}
.g4 .d1 {
width: 96px;
width: 80px;
}
.g4f .d1 {
width: 69px;
width: 0px;
}
.g5 .d1 {
width: 96px;
width: 80px;
}
.g6 .d1 {
width: 69px;
width: 0px;
}
.g6f .d1 {
width: 69px;
width: 0px;
}
.g7 .d1 {
width: 69px;
width: 0px;
}
.g8 .t {
width: 196px;
@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 200px;
}
.g9 .d1 {
width: 69px;
width: 0px;
}
.gA .d1 {
width: 93px;
width: 80px;
}
.gB .d1 {
width: 93px;
width: 80px;
}
.gC .d1 {
width: 93px;
width: 80px;
}
.gD .d1 {
width: 93px;
width: 80px;
}
.t { grid-column: span 1; border:2px solid; }

48
layout/reftests/css-grid/grid-track-intrinsic-sizing-003-ref.html
View file

@ -27,34 +27,34 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
background: grey;
}
.g1 .d1 {
width: 52px;
width: 0px;
}
.g2 .d1 {
width: 56px;
width: 0px;
}
.g2f .d1 {
width: 69px;
}
.g3 .d1 {
width: 56px;
width: 0px;
}
.g4 .d1 {
width: 96px;
width: 80px;
}
.g4f .d1 {
width: 104px;
}
.g5 .d1 {
width: 96px;
width: 80px;
}
.g6 .d1 {
width: 69px;
width: 0px;
}
.g6f .d1 {
width: 89px;
}
.g7 .d1 {
width: 69px;
width: 0px;
}
.g8 .t {
width: 196px;
@ -63,19 +63,19 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 200px;
}
.g9 .d1 {
width: 69px;
width: 0px;
}
.gA .d1 {
width: 93px;
width: 80px;
}
.gB .d1 {
width: 93px;
width: 80px;
}
.gC .d1 {
width: 93px;
width: 80px;
}
.gD .d1 {
width: 93px;
width: 80px;
}
.d2 {
position: absolute;
@ -84,10 +84,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
background: blue;
}
.g1 .d2 {
width: 448px;
width: 500px;
}
.g2 .d2 {
width: 444px;
width: 500px;
}
.g2f .d2 {
right: auto;
@ -95,10 +95,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 35px;
}
.g3 .d2 {
width: 444px;
width: 500px;
}
.g4 .d2 {
width: 404px;
width: 420px;
}
.g4f .d2 {
right: auto;
@ -106,10 +106,10 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 35px;
}
.g5 .d2 {
width: 404px;
width: 420px;
}
.g6 .d2 {
width: 431px;
width: 500px;
}
.g6f .d2 {
right: auto;
@ -117,25 +117,25 @@ body,html { color:black; background:white; font-family:monospace; font-size:16px
width: 35px;
}
.g7 .d2 {
width: 431px;
width: 500px;
}
.g8 .d2 {
width: 300px;
}
.g9 .d2 {
width: 431px;
width: 500px;
}
.gA .d2 {
width: 407px;
width: 420px;
}
.gB .d2 {
width: 407px;
width: 420px;
}
.gC .d2 {
width: 407px;
width: 420px;
}
.gD .d2 {
width: 407px;
width: 420px;
}
.t { grid-column: span 1; border:2px solid; }

6
layout/reftests/css-grid/reftest.list
View file

@ -112,9 +112,9 @@ skip-if(Android) == grid-auto-min-sizing-percent-001.html grid-auto-min-sizing-p
== grid-item-auto-min-size-clamp-001.html grid-item-auto-min-size-clamp-001-ref.html
== grid-item-auto-min-size-clamp-002.html grid-item-auto-min-size-clamp-002-ref.html
== grid-item-auto-min-size-clamp-003.html grid-item-auto-min-size-clamp-003-ref.html
== grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html
# == grid-item-auto-min-size-clamp-004.html grid-item-auto-min-size-clamp-004-ref.html # bug 1421976
== grid-item-auto-min-size-clamp-005.html grid-item-auto-min-size-clamp-005-ref.html
== grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html
# == grid-item-auto-min-size-clamp-006.html grid-item-auto-min-size-clamp-006-ref.html # bug 1421976
== grid-item-auto-min-size-clamp-007.html grid-item-auto-min-size-clamp-007-ref.html
== grid-item-overflow-stretch-001.html grid-item-overflow-stretch-001-ref.html
== grid-item-overflow-stretch-002.html grid-item-overflow-stretch-002-ref.html
@ -184,6 +184,8 @@ skip-if(Android&&isDebugBuild) == grid-row-gap-004.html grid-row-gap-004-ref.htm
== grid-repeat-auto-fill-fit-009.html grid-repeat-auto-fill-fit-009-ref.html
== grid-repeat-auto-fill-fit-010.html grid-repeat-auto-fill-fit-010-ref.html
== grid-repeat-auto-fill-fit-011.html grid-repeat-auto-fill-fit-010-ref.html
== grid-repeat-auto-fill-fit-012.html grid-repeat-auto-fill-fit-012-ref.html
== grid-repeat-auto-fill-fit-013.html grid-repeat-auto-fill-fit-013-ref.html
== grid-item-blockifying-001.html grid-item-blockifying-001-ref.html
== grid-fragmentation-001.html grid-fragmentation-001-ref.html
== grid-fragmentation-002.html grid-fragmentation-002-ref.html