src/third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item.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 300px;
  11     grid-template-rows: 50px 150px;
  12     height: 200px;
  13     width: 400px;
  14 }
  15
  16 .percentPadding {
  17     width: 0px;
  18     height: 0px;
  19     padding: 50%;
  20 }
  21
  22 .percentMargin {
  23     width: 0px;
  24     height: 0px;
  25     margin: 50%;
  26 }
  27
  28 .percentPaddingAndMargin {
  29     width: 0px;
  30     height: 0px;
  31     padding: 10%;
  32     margin: 20%;
  33 }
  34 </style>
  35 <script src="../../resources/check-layout.js"></script>
  36 <body onload="checkLayout('.grid')">
  37
  38 <p>Test that resolving percentage padding and margin on grid items works properly on a fixed grid with different writing modes.</p>
  39
  40 <div class="grid">
  41     <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
  42     <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
  43     <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
  44     <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
  45 </div>
  46
  47 <div class="grid verticalRL">
  48     <div class="firstRowFirstColumn percentPadding" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
  49     <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
  50     <div class="secondRowFirstColumn percentPaddingAndMargin" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
  51     <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
  52 </div>
  53
  54 <div class="grid">
  55     <div class="firstRowFirstColumn percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
  56     <div class="firstRowSecondColumn percentMargin verticalRL" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
  57     <div class="secondRowFirstColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
  58     <div class="secondRowSecondColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
  59 </div>
  60
  61 <div class="grid">
  62     <div class="firstRowFirstColumn percentPadding verticalRL" data-expected-padding-top="50" data-expected-padding-right="50" data-expected-padding-bottom="50" data-expected-padding-left="50"></div>
  63     <div class="firstRowSecondColumn percentMargin" data-expected-margin-top="150" data-expected-margin-right="150" data-expected-margin-bottom="150" data-expected-margin-left="150"></div>
  64     <div class="secondRowFirstColumn percentPaddingAndMargin verticalRL" data-expected-padding-top="10" data-expected-padding-right="10" data-expected-padding-bottom="10" data-expected-padding-left="10" data-expected-margin-top="20" data-expected-margin-right="20" data-expected-margin-bottom="20" data-expected-margin-left="20"></div>
  65     <div class="secondRowSecondColumn percentPaddingAndMargin" data-expected-padding-top="30" data-expected-padding-right="30" data-expected-padding-bottom="30" data-expected-padding-left="30" data-expected-margin-top="60" data-expected-margin-right="60" data-expected-margin-bottom="60" data-expected-margin-left="60"></div>
  66 </div>
  67
  68 </body>
  69 </html>