third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-track-breadths-regarding-container-size.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     grid-template-columns: 20% 50% 30%;
   8     grid-template-rows: 40%;
   9 }
  10
  11 .fixedSize {
  12     width: 400px;
  13     height: 400px;
  14 }
  15
  16 .calculatedSize {
  17     width: calc(200px + 20%);
  18     height: calc(300px + 10%);
  19 }
  20
  21 .percentageSize {
  22     width: 50%;
  23     height: 50%;
  24 }
  25
  26 .indefiniteSize {
  27     width: -webkit-fit-content;
  28     height: auto;
  29 }
  30
  31 .legacyIntrinsicSize {
  32     width: intrinsic;
  33     height: intrinsic;
  34 }
  35
  36 .firstRowFirstColumn {
  37     color: blue;
  38     background-color: cyan;
  39 }
  40
  41 .firstRowSecondColumn {
  42     color: green;
  43     background-color: lime;
  44 }
  45
  46 .firstRowThirdColumn {
  47     color: brown;
  48     background-color: yellow;
  49     grid-column: 3;
  50     grid-row: 1;
  51 }
  52 </style>
  53 <script src="../../resources/check-layout.js"></script>
  54 </head>
  55 <body onload="checkLayout('.grid');">
  56     <p>This test checks percentage track breadths are resolved properly regarding the container size.</p>
  57     <div class="unconstrainedContainer">
  58         <div class="grid">
  59             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="200" data-expected-height="10">XX</div>
  60             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="500" data-expected-height="10">XXXXX</div>
  61             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="300" data-expected-height="10">XXX</div>
  62         </div>
  63     </div>
  64
  65     <div class="indefiniteSize">
  66         <div class="grid">
  67             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
  68             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
  69             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
  70         </div>
  71     </div>
  72
  73     <div class="unconstrainedContainer">
  74         <div class="grid fixedSize">
  75             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
  76             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
  77             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
  78         </div>
  79     </div>
  80
  81     <div class="indefiniteSize">
  82         <div class="grid fixedSize">
  83             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
  84             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
  85             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
  86         </div>
  87     </div>
  88
  89     <div class="indefiniteSize">
  90         <div class="grid calculatedSize">
  91             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
  92             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
  93             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
  94         </div>
  95     </div>
  96
  97     <div class="unconstrainedContainer">
  98         <div class="grid calculatedSize">
  99             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="80" data-expected-height="160">XX</div>
 100             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="200" data-expected-height="160">XXXXX</div>
 101             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="120" data-expected-height="160">XXX</div>
 102         </div>
 103     </div>
 104
 105     <div class="indefiniteSize">
 106         <div class="grid percentageSize">
 107             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 108             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 109             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 110         </div>
 111     </div>
 112
 113     <div class="unconstrainedContainer">
 114         <div class="grid percentageSize">
 115             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="100" data-expected-height="200">XX</div>
 116             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="250" data-expected-height="200">XXXXX</div>
 117             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="150" data-expected-height="200">XXX</div>
 118         </div>
 119     </div>
 120
 121     <div class="indefiniteSize">
 122         <div class="grid indefiniteSize">
 123             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 124             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 125             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 126         </div>
 127     </div>
 128
 129     <div class="unconstrainedContainer">
 130         <div class="grid indefiniteSize">
 131             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 132             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 133             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 134         </div>
 135     </div>
 136
 137     <div class="indefiniteSize">
 138         <div class="grid legacyIntrinsicSize">
 139             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 140             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 141             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 142         </div>
 143     </div>
 144
 145     <div class="unconstrainedContainer">
 146         <div class="grid legacyIntrinsicSize">
 147             <div class="firstRowFirstColumn sizedToGridArea" data-expected-width="20" data-expected-height="10">XX</div>
 148             <div class="firstRowSecondColumn sizedToGridArea" data-expected-width="50" data-expected-height="10">XXXXX</div>
 149             <div class="firstRowThirdColumn sizedToGridArea" data-expected-width="30" data-expected-height="10">XXX</div>
 150         </div>
 151     </div>
 152
 153 </body>
 154 </html>