third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-margin-border-padding-scrollbar.html

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