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

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