[CSS Grid Layout] Ignore ::first-letter pseudo-element
[WebKit-https.git] / 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>