src/third_party/WebKit/LayoutTests/fast/css-grid-layout/place-cell-by-index.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 .grid {
  10     grid-template-columns: 50px 60px;
  11     grid-template-rows: 20px 30px;
  12     max-width: 110px;
  13 }
  14
  15 .firstRowFirstColumn {
  16     width: 10px;
  17     height: 15px;
  18 }
  19
  20 .firstRowSecondColumn {
  21     width: 10px;
  22     height: 15px;
  23 }
  24
  25 .secondRowFirstColumn {
  26     width: 10px;
  27     height: 15px;
  28 }
  29
  30 .secondRowSecondColumn {
  31     width: 10px;
  32     height: 15px;
  33 }
  34 </style>
  35 <script src="../../resources/check-layout.js"></script>
  36 <body onload="checkLayout('.grid')">
  37
  38 <p>Test some simple grid layouts by positioning grid items by index.</p>
  39
  40 <!-- FIXME: The offsets assumes that grid-{column|row}-align are set to 'start', not 'stretch' (the default). Fix
  41      them once we properly implement stretching / alignment. -->
  42 <div style="position: relative">
  43 <div class="grid" data-expected-width="110" data-expected-height="50">
  44     <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
  45     <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
  46     <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
  47     <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
  48 </div>
  49 </div>
  50
  51 <div style="position: relative">
  52 <div class="grid" style="-webkit-writing-mode: horizontal-bt" data-expected-width="110" data-expected-height="50">
  53     <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="35"></div>
  54     <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="35"></div>
  55     <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="15"></div>
  56     <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="15"></div>
  57 </div>
  58 </div>
  59
  60 <div style="position: relative">
  61 <div class="grid" style="-webkit-writing-mode: vertical-rl; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
  62     <div class="firstRowFirstColumn" data-offset-x="40" data-offset-y="0"></div>
  63     <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="50"></div>
  64     <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
  65     <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
  66 </div>
  67 </div>
  68
  69 <div style="position: relative">
  70 <div class="grid" style="-webkit-writing-mode: vertical-lr; margin-bottom: 60px;" data-expected-width="50" data-expected-height="110">
  71     <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
  72     <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50"></div>
  73     <div class="secondRowFirstColumn" data-offset-x="20" data-offset-y="0"></div>
  74     <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="50"></div>
  75 </div>
  76 </div>
  77
  78 </body>
  79 </html>