summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html
diff options
context:
space:
mode:
authorGaming4JC <g4jc@hyperbola.info>2019-09-28 23:25:06 -0400
committerGaming4JC <g4jc@hyperbola.info>2019-09-28 23:47:04 -0400
commitf1adcd1eeed03591f10ecc72c5e5b71856a18ca9 (patch)
tree687b2a90bc14b1f83a38d7ba1462d647e9bb7eee /layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html
parent22851ce36d97fca5a4768f3c49a4fff6cebd320a (diff)
downloadUXP-f1adcd1eeed03591f10ecc72c5e5b71856a18ca9.tar
UXP-f1adcd1eeed03591f10ecc72c5e5b71856a18ca9.tar.gz
UXP-f1adcd1eeed03591f10ecc72c5e5b71856a18ca9.tar.lz
UXP-f1adcd1eeed03591f10ecc72c5e5b71856a18ca9.tar.xz
UXP-f1adcd1eeed03591f10ecc72c5e5b71856a18ca9.zip
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.
Diffstat (limited to 'layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html')
-rw-r--r--layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html160
1 files changed, 160 insertions, 0 deletions
diff --git a/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html
new file mode 100644
index 000000000..7ed0843af
--- /dev/null
+++ b/layout/reftests/css-grid/grid-repeat-auto-fill-fit-012.html
@@ -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>