layout/reftests/css-grid/grid-item-stretch-001.html

   1 <!DOCTYPE HTML>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <html><head>
   7   <meta charset="utf-8">
   8   <title>CSS Grid Test: align-items:stretch / justify-items:stretch </title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
  10   <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
  11   <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-items-property">
  12   <link rel="match" href="grid-align-content-001-ref.html">
  13   <style type="text/css">
  14 html,body {
  15   color:black; background-color:white; font-size:16px; padding:0; margin:0;
  16 }
  17 separator { clear:both; display:block; height:6px; }
  18
  19 .grid {
  20   display: grid;
  21   float: left;
  22   border: 1px solid;
  23   border-block-start: 2px solid blue;
  24   grid-template: 1px 25px 5px / 3px 21px 1px;
  25   padding: 1px 1px 3px 2px;
  26   margin-right: 2px;
  27   width: 40px;
  28   height: 40px;
  29   align-items: stretch;
  30   justify-items: stretch;
  31 }
  32
  33 span {
  34   position: relative;
  35   grid-area: 2 / 2 / 3 / 3; /* the center area */
  36   display: block;
  37   width: 17px;
  38   height: 13px;
  39   background: red;
  40   /* good for manual debugging but causes anti-aliasing diff: */
  41   /* border-block-start: 2px solid blue; */
  42   /* border-inline-start: 2px solid lime; */
  43   border-block-start: 2px solid black;
  44   border-inline-start: 2px solid black;
  45   margin: 1px 1px 2px 2px;
  46 }
  47
  48 abs1,abs2,abs3,abs4 {
  49   position: absolute;
  50   top:0;left:0;bottom:0;right:0;
  51   width:2px; height:2px;
  52   background: black;
  53 }
  54 abs1 { top:auto; left:auto; }
  55 abs2 { top:auto; right:auto; }
  56 abs3 { bottom:auto; left:auto; }
  57 abs4 { bottom:auto; right:auto; }
  58 fill {
  59   display: block;
  60   width: 100%;
  61   height: 100%;
  62   background: lightgrey;
  63 }
  64
  65 .hl { writing-mode: horizontal-tb; direction:ltr; }
  66 .hr { writing-mode: horizontal-tb; direction:rtl; }
  67 .vl { writing-mode: vertical-lr; }
  68 .vr { writing-mode: vertical-rl; }
  69 .vlr { writing-mode: vertical-lr; direction:rtl; }
  70 .vrl { writing-mode: vertical-rl; direction:ltr; }
  71
  72 .stretch1 { }
  73 .stretch2 { height:auto; }
  74 .stretch3 { height:auto; max-height:13px; }
  75 .stretch4 { width:auto; }
  76 .stretch5 { width:auto; max-width:17px; }
  77 .stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; }
  78 .stretch7 { width:auto; height:auto; }
  79
  80   </style>
  81 </head>
  82 <body>
  83 <pre>
  84 There should be no red areas.
  85 All grey areas should have a black dot in each corner.
  86 </pre>
  87
  88
  89 <script>
  90 var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
  91 var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
  92 var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
  93              "stretch6", "stretch7" ];
  94 for (var i = 0; i < gridwm.length; ++i) {
  95   for (var j = 0; j < wm.length; ++j) {
  96     for (var k = 0; k < test.length; ++k) {
  97       var div = document.createElement("div");
  98       div.className = "grid " + gridwm[i];
  99       var span = document.createElement("span");
 100       span.className = wm[j] + " " + test[k];
 101       div.appendChild(span);
 102       span.appendChild(document.createElement("fill"));
 103       span.appendChild(document.createElement("abs1"));
 104       span.appendChild(document.createElement("abs2"));
 105       span.appendChild(document.createElement("abs3"));
 106       span.appendChild(document.createElement("abs4"));
 107
 108       document.body.appendChild(div)
 109     }
 110     if (j % 2 == 1) document.body.appendChild(document.createElement("separator"));
 111   }
 112 }
 113 </script>
 114
 115
 116 </body>
 117 </html>