LayoutTests/imported/w3c/web-platform-tests/css/css-contain/contain-size-grid-003.html

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>CSS Containment Test: Size containment on grid containers</title>
   4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
   5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
   6 <meta name=assert content="Size containment does apply to grid containers, thus their size is the same than if they don't have contents but taking into account the track sizes.">
   7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
   8 <style>
   9 .grid {
  10   display: inline-grid;
  11   contain: size;
  12   position: relative;
  13   font: 10px/1 Ahem;
  14 }
  15 .wrapper {
  16   width: 300px;
  17   height: 150px;
  18 }
  19 </style>
  20 <script src="/resources/testharness.js"></script>
  21 <script src="/resources/testharnessreport.js"></script>
  22 <script src="/resources/check-layout-th.js"></script>
  23 <body onload="checkLayout('.grid')">
  24
  25 <div id="log"></div>
  26
  27 <div class="grid" style="grid: 50px / 100px;"
  28   data-expected-width="100" data-expected-height="50">
  29 </div>
  30
  31 <div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px;"
  32   data-expected-width="200" data-expected-height="100">
  33 </div>
  34
  35 <div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content;"
  36   data-expected-width="100" data-expected-height="50">
  37 </div>
  38
  39 <div class="grid" style="grid: 50px / 100px; overflow: scroll;"
  40   data-expected-width="115" data-expected-height="65">
  41 </div>
  42
  43 <div class="grid" style="grid: 50px / 100px; width: 200px; height: 100px; overflow: scroll;"
  44   data-expected-width="200" data-expected-height="100">
  45 </div>
  46
  47 <div class="grid" style="grid: 50px / 100px; width: min-content; height: min-content; overflow: scroll;"
  48   data-expected-width="115" data-expected-height="65">
  49 </div>
  50
  51 <div class="grid" style="grid: 50px / 100px; margin: 2px 4px;"
  52   data-expected-width="100" data-expected-height="50">
  53 </div>
  54
  55 <div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px;"
  56   data-expected-width="120" data-expected-height="60">
  57 </div>
  58
  59 <div class="grid" style="grid: 50px / 100px; margin: 2px 4px; border-style: solid; border-width: 5px 10px; padding: 3px 6px;"
  60   data-expected-width="132" data-expected-height="66">
  61 </div>
  62
  63 <div class="grid" style="grid: 60% / 50%;"
  64   data-expected-width="0" data-expected-height="0">
  65 </div>
  66
  67 <div class="grid" style="grid: auto / auto;"
  68   data-expected-width="0" data-expected-height="0">
  69 </div>
  70
  71 <div class="grid" style="grid: 1fr / 2fr;"
  72   data-expected-width="0" data-expected-height="0">
  73 </div>
  74
  75 <div class="grid" style="grid: calc(50px - 10%) / calc(100px + 20%);"
  76   data-expected-width="0" data-expected-height="0">
  77 </div>
  78
  79 <div class="grid" style="grid: fit-content(50px) / fit-content(100px);"
  80   data-expected-width="0" data-expected-height="0">
  81 </div>
  82
  83 <div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px);"
  84   data-expected-width="100" data-expected-height="60">
  85 </div>
  86
  87 <div class="grid" style="grid: minmax(40px, 60px) / minmax(50px, 100px); width: min-content; height: min-content;"
  88   data-expected-width="50" data-expected-height="60">
  89 </div>
  90
  91 <div class="grid" style="grid: auto 50px 20% 1fr / 100px auto 10% 2fr;"
  92   data-expected-width="100" data-expected-height="50">
  93 </div>
  94
  95 <div class="grid" style="grid: repeat(3, 20px) / repeat(4, 25px);"
  96   data-expected-width="100" data-expected-height="60">
  97 </div>
  98
  99 <div class="grid" style="grid: repeat(3, 20px 10px) / repeat(2, 25px auto 25px);"
 100   data-expected-width="100" data-expected-height="90">
 101 </div>
 102
 103 <div class="grid" style="grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);"
 104   data-expected-width="100" data-expected-height="50">
 105 </div>
 106
 107 <div class="grid" style="grid: repeat(auto-fill, 25px 25px) / repeat(auto-fill, 50px 50px);"
 108   data-expected-width="100" data-expected-height="50">
 109 </div>
 110
 111 <div class="grid" style="grid: repeat(auto-fill, 25px 20% 25px) / repeat(auto-fill, 50px 10% 50px);"
 112   data-expected-width="100" data-expected-height="50">
 113 </div>
 114
 115 <div class="grid" style="grid: repeat(auto-fit, 50px) / repeat(auto-fit, 100px);"
 116   data-expected-width="0" data-expected-height="0">
 117 </div>
 118
 119 <div class="grid" style="grid: repeat(auto-fit, 25px 20% 25px) / repeat(auto-fit, 50px 10% 50px);"
 120   data-expected-width="0" data-expected-height="0">
 121 </div>
 122
 123 <div class="grid" style="grid: 10px repeat(auto-fill, 20px) 10px / 25px repeat(auto-fill, 50px) 25px;"
 124   data-expected-width="100" data-expected-height="40">
 125 </div>
 126
 127 <div class="grid" style="grid: 50px fit-content(20px) / 100px fit-content(50px);"
 128   data-expected-width="100" data-expected-height="50">
 129 </div>
 130
 131 <div class="grid" style="grid: 50px / 100px; grid-gap: 10px 20px;"
 132   data-expected-width="100" data-expected-height="50">
 133 </div>
 134
 135 <div class="grid" style="grid: 25px 25px / 50px 50px; grid-gap: 10px 20px;"
 136   data-expected-width="120" data-expected-height="60">
 137 </div>
 138
 139 <div class="grid" style="grid: 10px repeat(2, 10px) / 20px repeat(4, 20px); grid-gap: 5px 10px;"
 140   data-expected-width="140" data-expected-height="40">
 141 </div>
 142
 143 <div class="grid" style="grid: repeat(auto-fill, 10px 20% 10px) / repeat(auto-fill, 20px 10% 20px); grid-gap: 5px 10px;"
 144   data-expected-width="60" data-expected-height="30">
 145 </div>
 146
 147 <div class="grid" style="grid: 50px repeat(auto-fill, 10px 10px) / 100px repeat(auto-fill, 20px 20px); grid-gap: 5px 10px;"
 148   data-expected-width="160" data-expected-height="80">
 149 </div>
 150
 151 <div class="grid" style="grid: repeat(auto-fill, 10px 10px) 50px / repeat(auto-fill, 20px 20px) 100px; grid-gap: 5px 10px;"
 152   data-expected-width="160" data-expected-height="80">
 153 </div>
 154
 155 <div class="grid" style="grid: 25px repeat(auto-fill, 10px 10px) 25px / 50px repeat(auto-fill, 20px 20px) 50px; grid-gap: 5px 10px;"
 156   data-expected-width="170" data-expected-height="85">
 157 </div>
 158
 159 <div class="grid" style="grid: 25px repeat(auto-fit, 10px 10px) 25px / 50px repeat(auto-fit, 20px 20px) 50px; grid-gap: 5px 10px;"
 160   data-expected-width="110" data-expected-height="55">
 161 </div>
 162
 163 <div class="wrapper">
 164   <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
 165     data-expected-width="100" data-expected-height="75">
 166   </div>
 167 </div>
 168
 169 <div class="wrapper">
 170   <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
 171     data-expected-width="0" data-expected-height="0">
 172   </div>
 173 </div>
 174
 175 <div class="wrapper">
 176   <div class="grid" style="grid: repeat(auto-fill, 75px) / repeat(auto-fill, 100px);"
 177     data-expected-width="100" data-expected-height="75">
 178     <div></div>
 179   </div>
 180 </div>
 181
 182 <div class="wrapper">
 183   <div class="grid" style="grid: repeat(auto-fit, 75px) / repeat(auto-fit, 100px);"
 184     data-expected-width="0" data-expected-height="0">
 185     <div></div>
 186   </div>
 187 </div>
 188
 189 <div class="grid" style="grid: auto 50px / 100px auto;"
 190   data-expected-width="100" data-expected-height="50">
 191   <div data-expected-width="100" data-expected-height="10"
 192     data-offset-x="0" data-offset-y="0">X</div>
 193   <div data-expected-width="40" data-expected-height="10"
 194     data-offset-x="100" data-offset-y="0">XX</div>
 195   <div data-expected-width="100" data-expected-height="50"
 196     data-offset-x="0" data-offset-y="10">XXX</div>
 197   <div data-expected-width="40" data-expected-height="50"
 198     data-offset-x="100" data-offset-y="10">XXXX</div>
 199 </div>
 200
 201 </body>