grid-container-ignores-first-letter-001.html (3559B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: '::first-letter' is ignored in grid containers</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"> 6 <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter"> 7 <meta name="assert" content="The test checks that grid item should ignore grid container's first-letter pseudo-element."> 8 <link href="/css/support/grid.css" rel="stylesheet"> 9 <style> 10 body { line-height: 20px; } 11 .grid-first-letter::first-letter { line-height: 100px; color: red; } 12 .container-first-letter::first-letter { line-height: 200px; color: green; } 13 </style> 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script src="/resources/check-layout-th.js"></script> 17 18 <body onload="checkLayout('.container');"> 19 20 <div id="log"></div> 21 22 <div class="container"> 23 <div class="grid grid-first-letter"> 24 <div class="item" data-expected-height=20>The first item.</div> 25 <div class="item" data-expected-height=20>The second item.</div> 26 </div> 27 </div> 28 29 <div class="container"> 30 <div class="inline-grid grid-first-letter"> 31 <div class="item" data-expected-height=20>The first item.</div> 32 <div class="item" data-expected-height=20>The second item.</div> 33 </div> 34 </div> 35 36 <div class="container"> 37 <div class="grid grid-first-letter" data-expected-height=20> 38 Anonymous item. 39 </div> 40 </div> 41 42 <div class="container"> 43 <div class="inline-grid grid-first-letter" data-expected-height=20> 44 Anonymous item. 45 </div> 46 </div> 47 48 <div class="container container-first-letter"> 49 <div class="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="inline-grid grid-first-letter"> 58 <div class="item" data-expected-height=20>The first item.</div> 59 <div class="item" data-expected-height=20>The second item.</div> 60 </div> 61 <div data-expected-height=20>Out of grid.</div> 62 </div> 63 64 <div class="container container-first-letter"> 65 <div class="grid grid-first-letter" data-expected-height=20> 66 Anonymous item. 67 </div> 68 <div data-expected-height=20>Out of grid.</div> 69 </div> 70 71 <div class="container container-first-letter"> 72 <div class="inline-grid grid-first-letter" data-expected-height=20> 73 Anonymous item. 74 </div> 75 <div data-expected-height=20>Out of grid.</div> 76 </div> 77 78 <div class="container container-first-letter"> 79 <div class="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="inline-grid"> 88 <div class="item" data-expected-height=20>The first item.</div> 89 <div class="item" data-expected-height=20>The second item.</div> 90 </div> 91 <div data-expected-height=20>Out of grid.</div> 92 </div> 93 94 <div class="container container-first-letter"> 95 <div class="grid" data-expected-height=20> 96 Anonymous item. 97 </div> 98 <div data-expected-height=20>Out of grid.</div> 99 </div> 100 101 <div class="container container-first-letter"> 102 <div class="inline-grid" data-expected-height=20> 103 Anonymous item. 104 </div> 105 <div data-expected-height=20>Out of grid.</div> 106 </div> 107 108 </body>