src/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-padding-margin.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: 100px;
  11     grid-template-rows: 50px;
  12     /* Force the grid element to be shrink-to-fit. */
  13     position: absolute;
  14 }
  15
  16 .padding {
  17     padding: 20px 10px 30px 50px;
  18 }
  19
  20 .border {
  21     border-style: solid;
  22     border-color: green;
  23     border-width: 10px 20px 30px 40px;
  24 }
  25 </style>
  26 <script src="../../resources/check-layout.js"></script>
  27 <body onload="checkLayout('.grid')">
  28
  29 <p>Test that paddings and borders are added to a grid element's size.</p>
  30
  31 <div class="grid padding" data-expected-height="100" data-expected-width="160"></div>
  32 <div class="grid padding verticalRL" data-expected-height="150" data-expected-width="110"></div>
  33 <div class="grid border" data-expected-height="90" data-expected-width="160"></div>
  34 <div class="grid border verticalRL" data-expected-height="140" data-expected-width="110"></div>
  35 <div class="grid border padding" data-expected-height="140" data-expected-width="220"></div>
  36 <div class="grid border padding verticalRL" data-expected-height="190" data-expected-width="170"></div>
  37
  38 </body>
  39 </html>