diff options
Diffstat (limited to '')
-rw-r--r-- | layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html b/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html new file mode 100644 index 0000000000..f12ee1c32f --- /dev/null +++ b/layout/reftests/css-grid/grid-track-fit-content-sizing-002-ref.html @@ -0,0 +1,148 @@ +<!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: fit-content() track sizing</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133"> + <style type="text/css"> +body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } + +.grid { + display: grid; + grid-auto-rows: 5px; + justify-content: start; + position: relative; + border: 1px solid; +} + +.c1 { grid-template-columns: fit-content(40%) 25px minmax(100px, 1fr); } +.c2 { grid-template-columns: fit-content(40%) 25px 0 25px minmax(100px, 1fr); } +.c3 { grid-template-columns: fit-content(40%) 25px fit-content(40%) 25px minmax(0px, 1fr); } +.c4 { grid-template-columns: fit-content(40%) 25px 100px 25px minmax(100px, 1fr); } +.c5 { grid-template-columns: fit-content(40%) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); } +.c6 { grid-template-columns: fit-content(calc(1px - 99%)) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); } +.c7 { grid-template-columns: fit-content(40%) 25px fit-content(40%); } + +span { + grid-column: 1 / span 3; + grid-row: 2; + height: 2px; + background: lime; + min-width: 50px; +} +.c1 span { grid-column:1; } + +a { + display: inline-block; + width: 50px; + height: 1px; +} + +y { + position: absolute; + left: 0; right: 0; top: 0; + height: 2px; + background: purple; + grid-column: 1 / 2; +} +y:nth-of-type(2n) { background: orange; grid-column: 3 / 4; } + + </style> +</head> +<body> + +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> + +<div style="width:502px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:442px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:382px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:322px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:262px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:202px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:142px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:82px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:22px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +<div style="width:2px"> +<div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +<div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> +</div> + +</body> +</html> |