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 { line-height: 200px; color: green; }
   8 </style>
   9
  10 <script src="../../resources/check-layout.js"></script>
  11 <body onload="checkLayout('.grid-first-letter');">
  12 <p>This test grid item should ignore grid container's first-letter pseudo-element.</p>
  13
  14 <div class="grid grid-first-letter">
  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-letter">
  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-letter" data-expected-height=20>
  25     Anonymous item.
  26 </div>
  27
  28 <div class="inline-grid grid-first-letter" data-expected-height=20>
  29     Anonymous item.
  30 </div>
  31
  32 <div class="container">
  33     <div class="grid grid-first-letter">
  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-letter">
  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-letter" data-expected-height=20>
  48         Anonymous item.
  49     </div>
  50 </div>
  51
  52 <div class="container">
  53     <div class="inline-grid grid-first-letter" data-expected-height=20>
  54         Anonymous item.
  55     </div>
  56 </div>
  57
  58 </body>
  59 </html>