3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: 'stretch' of image with zero ratio
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1315857">
10 <link rel=
"help" href=
"https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch">
11 <link rel=
"match" href=
"grid-item-intrinsic-ratio-stretch-006-ref.html">
12 <style type=
"text/css">
13 body
,html
{ color:black
; background:white
; font:16px/1 monospace
; padding:0; margin:0; }
18 grid: auto-flow auto
/ minmax
(auto
, 10px) minmax
(auto
, 30px) minmax
(auto
, 10px) minmax
(auto
, 30px) minmax
(auto
, 10px) minmax
(auto
, 30px) minmax
(auto
, 10px) minmax
(auto
, 30px) auto auto auto auto
;
22 justify-items: stretch
;
24 img:nth-child
(1n) { background: blue
; }
25 img:nth-child
(2n) { background: grey
; }
26 img:nth-child
(3n) { background: tan
; }
27 img:nth-child
(4n) { background: black
; }
32 .jend { justify-self: end
; }
33 .aend { align-self: end
; }
34 .end { justify-self: end
; align-self: end
; }
54 <div class=
"grid sz t2">
80 <div class=
"grid" style=
"grid:auto/auto auto">
87 <div class=
"grid" style=
"grid:minmax(auto,30px) 30px/auto auto">
95 var url
= 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>'
96 var imgs
= document
.querySelectorAll('img');
97 for (var i
= 0; i
< imgs
.length
; ++i
) {
103 <!-- For generating image size results in -ref file (try reloading a few times if you see all zeros)
105 document.body.clientHeight;
106 var imgs = document.querySelectorAll('img');
108 for (var i = 0; i < imgs.length; ++i) {
109 s += " ['"+ imgs[i].width + "px', '" + imgs[i].height + "px'],\n";