src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-negative-integer-explicit-grid-resolution.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 if (window.testRunner)
   5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
   6 </script>
   7 <link href="resources/grid.css" rel="stylesheet">
   8 <style>
   9 .columnGrid {
  10     grid-template-columns: 50px 100px;
  11     /* grid-template-rows is left unset so that the grid items' row is implicit. */
  12     font: 10px/1 Ahem;
  13 }
  14
  15 .rowGrid {
  16     grid-template-rows: 50px 100px;
  17     /* grid-template-columns is left unset so that the grid items' column is implicit. */
  18     font: 10px/1 Ahem;
  19 }
  20 </style>
  21 <script src="../../resources/check-layout.js"></script>
  22 <body onload="checkLayout('.grid');">
  23
  24 <p>Test that negative &lt;integer&gt; positions are resolved against the explicit grid (that is don't account for implicit columns and rows).</p>
  25
  26 <div class="constrainedContainer">
  27     <div class="grid columnGrid">
  28         <div class="sizedToGridArea autoRowThirdColumn" data-expected-width="60" data-expected-height="30">XXXXXX XXXXX XXXXX</div>
  29         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-expected-width="100" data-expected-height="30"></div>
  30     </div>
  31 </div>
  32
  33 <div class="constrainedContainer">
  34     <div class="grid columnGrid">
  35         <div class="sizedToGridArea thirdRowAutoColumn" data-expected-width="50" data-expected-height="30">XXXXXX XXXXX XXXXX</div>
  36         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-expected-width="100" data-expected-height="0"></div>
  37     </div>
  38 </div>
  39
  40 <div class="constrainedContainer">
  41     <div class="grid rowGrid">
  42         <div class="sizedToGridArea autoRowThirdColumn" data-expected-width="60" data-expected-height="50">XXXXXX XXXXX XXXXX</div>
  43         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-expected-width="0" data-expected-height="100"></div>
  44     </div>
  45 </div>
  46
  47 <div class="constrainedContainer">
  48     <div class="grid rowGrid">
  49         <div class="sizedToGridArea thirdRowAutoColumn" data-expected-width="60" data-expected-height="30">XXXXXX XXXXX XXXXX</div>
  50         <div class="sizedToGridArea autoLastRowAutoLastColumn" data-expected-width="60" data-expected-height="100"></div>
  51     </div>
  52 </div>
  53
  54 </body>
  55 </html>