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

   1 <!DOCTYPE html>
   2 <meta charset="utf-8">
   3 <title>CSS Containment Test: Size containment on grid container with explicit non-intrinsically sized tracks (and gaps)</title>
   4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
   5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
   6 <meta name=assert content="grid-gap, grid-template-columns, and grid-template-rows do affect the size of the grid, even with size containment">
   7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
   8
   9 <style>
  10 body {
  11   overflow: hidden;
  12 }
  13 div {
  14   position: absolute;
  15 }
  16 #red {
  17   background: red;
  18   width: 100px;
  19   height: 100px;
  20 }
  21 #test {
  22   background: green;
  23
  24   contain: size;
  25   display: grid;
  26   grid-gap: 20px;
  27   grid-template-columns: auto 80px; /* 0 + 20 + 80 = 100 */
  28   grid-template-rows: 40px 40px; /* 40 + 20 + 40 = 100 */
  29   font-size: 800px;
  30 }
  31 </style>
  32
  33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  34 <div id=red></div>
  35 <div id=test>&nbsp;</div>
  36
  37 <!--
  38 The &nbsp;, auto sized column, and 800px font size
  39 are to make the test fail in browsers
  40 that do not implement contain:size at all,
  41 by making the box non square.
  42 -->
  43
  44