mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-29 11:57:32 +09:00
Issue #1233 - Part 2: Update Reftests
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
Roy Tam
parent
f22ad944b7
commit
1f9d16132b
22 changed files with 4150 additions and 145 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
1641
layout/generic/test/test_grid_track_sizing_algo_001.html
Normal file
File diff suppressed because it is too large
Load diff
1641
layout/generic/test/test_grid_track_sizing_algo_002.html
Normal file
1641
layout/generic/test/test_grid_track_sizing_algo_002.html
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -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> </x></span>
|
||||
<span class="r1"><x> </x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width:436px">
|
||||
<span class="c1" style="margin-right:41px"><x> </x></span>
|
||||
<span class="c1" style="width:374px; margin-right:41px"><x> </x></span>
|
||||
<span class="r1" style="margin-left:5px"><x> </x></span>
|
||||
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width:500px;">
|
||||
<span class="c1" style="min-width:20px;margin-right:448px"><x> </x></span>
|
||||
<span class="c1" style="width:20px;margin-right:448px"><x> </x></span>
|
||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width:583px;">
|
||||
<span class="c1" style="margin-right:55px"><x> </x></span>
|
||||
<span class="c1" style="width:507px; margin-right:55px"><x> </x></span>
|
||||
<span class="r1"><x> </x></span>
|
||||
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </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> </x></span>
|
||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="width:389px;">
|
||||
<span class="c1" style="width:100px"><x> </x></span>
|
||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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> </x></span>
|
||||
<span class="r1"><x> </x></span>
|
||||
</div></div>
|
||||
|
||||
<div class="wrap"><div class="grid" style="width:436px">
|
||||
<span class="c1" style="margin-right:41px"><x> </x></span>
|
||||
<span class="c1" style="width:374px; margin-right:41px"><x> </x></span>
|
||||
<span class="r1" style="margin-left:5px"><x> </x></span>
|
||||
<span class="c3" style="margin-left:405px; float:left;margin-top:1px;"><x> </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> </x></span>
|
||||
<span class="c1" style="width:20px;margin-right:448px"><x> </x></span>
|
||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||
<span class="r1" style="min-width:30px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||
<span class="r1" style="min-width:10px;margin-left:28px; margin-right:426px"><x> </x></span>
|
||||
</div></div>
|
||||
|
||||
<div class="wrap"><div class="grid" style="width:583px;">
|
||||
<span class="c1" style="margin-right:55px"><x> </x></span>
|
||||
<span class="c1" style="width:507px; margin-right:55px"><x> </x></span>
|
||||
<span class="r1"><x> </x></span>
|
||||
<span class="c3" style="margin-left:538px; float:left;margin-top:1px;"><x> </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> </x></span>
|
||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||
</div></div>
|
||||
|
||||
<div class="wrap"><div class="grid" style="width:389px;">
|
||||
<span class="c1" style="width:100px"><x> </x></span>
|
||||
<span class="r1" style="width:300px;margin-left:68px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:245px;float:left;margin-top:1px;"><x> </x></span>
|
||||
<span class="c3" style="margin-left:131px;float:left;margin-top:1px;"><x> </x></span>
|
||||
</div></div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
144
layout/reftests/css-grid/grid-repeat-auto-fill-fit-012-ref.html
Normal 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
160
layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html
Normal 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
116
layout/reftests/css-grid/grid-repeat-auto-fill-fit-013-ref.html
Normal 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
135
layout/reftests/css-grid/grid-repeat-auto-fill-fit-013.html
Normal 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>
|
||||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue