third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-ignore-first-line.html

   1 <!DOCTYPE html>
   2 <html>
   3 <link href="resources/grid.css" rel="stylesheet">
   4 <style>
   5     body { line-height: 20px; }
   6     .grid-first-line::first-line { line-height: 100px; }
   7     .container::first-line { line-height: 200px; }
   8 </style>
   9
  10 <script src="../../resources/check-layout.js"></script>
  11 <body onload="checkLayout('.grid,.inline-grid');">
  12 <p>This test grid item should ignore grid container's first-line pseudo-element.</p>
  13
  14 <div class="grid grid-first-line">
  15     <div class="item" data-expected-height=20>The first item.</div>
  16     <div class="item" data-expected-height=20>The second item.</div>
  17 </div>
  18
  19 <div class="inline-grid grid-first-line">
  20     <div class="item" data-expected-height=20>The first item.</div>
  21     <div class="item" data-expected-height=20>The second item.</div>
  22 </div>
  23
  24 <div class="grid grid-first-line" data-expected-height=20>
  25     Anonymous item.
  26 </div>
  27
  28 <div class="inline-grid grid-first-line" data-expected-height=20>
  29     Anonymous item.
  30 </div>
  31
  32 <div class="container">
  33     <div class="grid grid-first-line">
  34         <div class="item" data-expected-height=20>The first item.</div>
  35         <div class="item" data-expected-height=20>The second item.</div>
  36     </div>
  37 </div>
  38
  39 <div class="container">
  40     <div class="inline-grid grid-first-line">
  41         <div class="item" data-expected-height=20>The first item.</div>
  42         <div class="item" data-expected-height=20>The second item.</div>
  43     </div>
  44 </div>
  45
  46 <div class="container">
  47     <div class="grid grid-first-line" data-expected-height=20>
  48         Anonymous item.
  49     </div>
  50 </div>
  51
  52 <div class="container">
  53     <div class="inline-grid grid-first-line" data-expected-height=20>
  54         Anonymous item.
  55     </div>
  56 </div>
  57
  58 <div class="container">
  59     <div class="grid">
  60         <div class="item" data-expected-height=20>The first item.</div>
  61         <div class="item" data-expected-height=20>The second item.</div>
  62     </div>
  63 </div>
  64
  65 <div class="container">
  66     <div class="inline-grid">
  67         <div class="item" data-expected-height=20>The first item.</div>
  68         <div class="item" data-expected-height=20>The second item.</div>
  69     </div>
  70 </div>
  71
  72 <div class="container">
  73     <div class="grid" data-expected-height=20>
  74         Anonymous item.
  75     </div>
  76 </div>
  77
  78 <div class="container">
  79     <div class="inline-grid" data-expected-height=20>
  80         Anonymous item.
  81     </div>
  82 </div>
  83
  84 </body>
  85 </html>