third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <link href="resources/grid.css" rel="stylesheet">
   5 <style>
   6 .grid {
   7     width: 100px;
   8     height: 100px;
   9     grid-template-columns: 20% 50% 30%;
  10     grid-template-rows: 40% 60%;
  11 }
  12
  13 .margin {
  14     margin: 10px;
  15 }
  16
  17 .border {
  18     border: 5px solid black;
  19 }
  20
  21 .padding {
  22     padding: 20px;
  23 }
  24 </style>
  25 <script src="../../resources/check-layout.js"></script>
  26 </head>
  27 <body onload="checkLayout('.grid');">
  28     <p>This test checks that percentage tracks ignore grid container's margin, border and padding in order to calculate their breadths.</p>
  29
  30     <div class="grid">
  31         <div data-expected-width="20" data-expected-height="40"></div>
  32         <div data-expected-width="50" data-expected-height="40"></div>
  33         <div data-expected-width="30" data-expected-height="40"></div>
  34         <div data-expected-width="20" data-expected-height="60"></div>
  35         <div data-expected-width="50" data-expected-height="60"></div>
  36         <div data-expected-width="30" data-expected-height="60"></div>
  37     </div>
  38
  39     <div class="grid margin">
  40         <div data-expected-width="20" data-expected-height="40"></div>
  41         <div data-expected-width="50" data-expected-height="40"></div>
  42         <div data-expected-width="30" data-expected-height="40"></div>
  43         <div data-expected-width="20" data-expected-height="60"></div>
  44         <div data-expected-width="50" data-expected-height="60"></div>
  45         <div data-expected-width="30" data-expected-height="60"></div>
  46     </div>
  47
  48     <div class="grid border">
  49         <div data-expected-width="20" data-expected-height="40"></div>
  50         <div data-expected-width="50" data-expected-height="40"></div>
  51         <div data-expected-width="30" data-expected-height="40"></div>
  52         <div data-expected-width="20" data-expected-height="60"></div>
  53         <div data-expected-width="50" data-expected-height="60"></div>
  54         <div data-expected-width="30" data-expected-height="60"></div>
  55     </div>
  56
  57     <div class="grid padding">
  58         <div data-expected-width="20" data-expected-height="40"></div>
  59         <div data-expected-width="50" data-expected-height="40"></div>
  60         <div data-expected-width="30" data-expected-height="40"></div>
  61         <div data-expected-width="20" data-expected-height="60"></div>
  62         <div data-expected-width="50" data-expected-height="60"></div>
  63         <div data-expected-width="30" data-expected-height="60"></div>
  64     </div>
  65
  66     <div class="grid margin border">
  67         <div data-expected-width="20" data-expected-height="40"></div>
  68         <div data-expected-width="50" data-expected-height="40"></div>
  69         <div data-expected-width="30" data-expected-height="40"></div>
  70         <div data-expected-width="20" data-expected-height="60"></div>
  71         <div data-expected-width="50" data-expected-height="60"></div>
  72         <div data-expected-width="30" data-expected-height="60"></div>
  73     </div>
  74
  75     <div class="grid margin padding">
  76         <div data-expected-width="20" data-expected-height="40"></div>
  77         <div data-expected-width="50" data-expected-height="40"></div>
  78         <div data-expected-width="30" data-expected-height="40"></div>
  79         <div data-expected-width="20" data-expected-height="60"></div>
  80         <div data-expected-width="50" data-expected-height="60"></div>
  81         <div data-expected-width="30" data-expected-height="60"></div>
  82     </div>
  83
  84     <div class="grid border padding">
  85         <div data-expected-width="20" data-expected-height="40"></div>
  86         <div data-expected-width="50" data-expected-height="40"></div>
  87         <div data-expected-width="30" data-expected-height="40"></div>
  88         <div data-expected-width="20" data-expected-height="60"></div>
  89         <div data-expected-width="50" data-expected-height="60"></div>
  90         <div data-expected-width="30" data-expected-height="60"></div>
  91     </div>
  92
  93     <div class="grid margin border padding">
  94         <div data-expected-width="20" data-expected-height="40"></div>
  95         <div data-expected-width="50" data-expected-height="40"></div>
  96         <div data-expected-width="30" data-expected-height="40"></div>
  97         <div data-expected-width="20" data-expected-height="60"></div>
  98         <div data-expected-width="50" data-expected-height="60"></div>
  99         <div data-expected-width="30" data-expected-height="60"></div>
 100     </div>
 101 </body>
 102 </html>