third_party/WebKit/LayoutTests/fast/css-grid-layout/percent-padding-margin-resolution-grid-item-update.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5 .grid {
   6     grid-template-columns: 200px 200px;
   7     grid-template-rows: 100px 100px;
   8     height: 200px;
   9     width: 400px;
  10 }
  11
  12 .percentPadding {
  13     width: 0px;
  14     height: 0px;
  15     padding: 50%;
  16 }
  17
  18 .percentMargin {
  19     width: 0px;
  20     height: 0px;
  21     margin: 50%;
  22 }
  23
  24 .percentPaddingAndMargin {
  25     width: 0px;
  26     height: 0px;
  27     padding: 10%;
  28     margin: 20%;
  29 }
  30 </style>
  31 <script src="../../resources/check-layout.js"></script>
  32 <script>
  33 function changeGridTrackSizesAndCheckLayout()
  34 {
  35     var grid = document.getElementsByClassName("grid")[0];
  36     grid.offsetLeft;
  37     grid.style.gridTemplateColumns = "100px 300px";
  38     grid.style.gridTemplateRows = "50px 150px";
  39     checkLayout('.grid');
  40 }
  41 window.addEventListener("load", changeGridTrackSizesAndCheckLayout, false);
  42 </script>
  43 <body>
  44
  45 <p>Test that changing grid tracks size forces the grid items' to resolve percentage padding and margin</p>
  46
  47 <div class="grid">
  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 </body>
  55 </html>