third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-paddings-and-writing-modes.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 80px;
   7 }
   8
   9 .block {
  10     background-color: grey;
  11     width: 80px;
  12     height: 80px;
  13     position: relative;
  14     padding: 4px 8px 12px 16px;
  15     margin-bottom: 4px;
  16 }
  17
  18 .item {
  19     font: 15px/1 Ahem;
  20     background-color: green;
  21     grid-column: 1 / 2;
  22     grid-row: 1 / 2;
  23     width: 40px;
  24     height: 20px;
  25 }
  26 </style>
  27
  28 <body>
  29     <div class="grid block">
  30         <div class="item">X</div>
  31     </div>
  32     <div class="grid block verticalRL">
  33         <div class="item">X</div>
  34     </div>
  35     <div class="grid block verticalLR">
  36         <div class="item">X</div>
  37     </div>
  38     <div class="grid block directionRTL">
  39         <div class="item">X</div>
  40     </div>
  41     <div class="grid block directionRTL verticalRL">
  42         <div class="item">X</div>
  43     </div>
  44     <div class="grid block directionRTL verticalLR">
  45         <div class="item">X</div>
  46     </div>
  47 </body>
  48
  49 </body>
  50 </html>