flexbox-ignores-first-letter.html (3341B)
1 <!DOCTYPE html> 2 <link rel="help" href=""> 3 <link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter"> 4 <meta name="assert" content=""> 5 <style> 6 body { line-height: 20px; } 7 .flexbox { display: flex; } 8 .inline-flexbox { display: inline-flex; } 9 .flexbox-first-letter::first-letter { line-height: 100px; color: red; } 10 .container-first-letter::first-letter { line-height: 200px; color: green; } 11 </style> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/resources/check-layout-th.js"></script> 15 16 <body onload="checkLayout('.container');"> 17 18 <div id="log"></div> 19 20 <div class="container"> 21 <div class="flexbox flexbox-first-letter"> 22 <div class="item" data-expected-height=20>The first item.</div> 23 <div class="item" data-expected-height=20>The second item.</div> 24 </div> 25 </div> 26 27 <div class="container"> 28 <div class="inline-flexbox flexbox-first-letter"> 29 <div class="item" data-expected-height=20>The first item.</div> 30 <div class="item" data-expected-height=20>The second item.</div> 31 </div> 32 </div> 33 34 <div class="container"> 35 <div class="flexbox flexbox-first-letter" data-expected-height=20> 36 Anonymous item. 37 </div> 38 </div> 39 40 <div class="container"> 41 <div class="inline-flexbox flexbox-first-letter" data-expected-height=20> 42 Anonymous item. 43 </div> 44 </div> 45 46 <div class="container container-first-letter"> 47 <div class="flexbox flexbox-first-letter"> 48 <div class="item" data-expected-height=20>The first item.</div> 49 <div class="item" data-expected-height=20>The second item.</div> 50 </div> 51 <div data-expected-height=20>Out of flexbox.</div> 52 </div> 53 54 <div class="container container-first-letter"> 55 <div class="inline-flexbox flexbox-first-letter"> 56 <div class="item" data-expected-height=20>The first item.</div> 57 <div class="item" data-expected-height=20>The second item.</div> 58 </div> 59 <div data-expected-height=20>Out of flexbox.</div> 60 </div> 61 62 <div class="container container-first-letter"> 63 <div class="flexbox flexbox-first-letter" data-expected-height=20> 64 Anonymous item. 65 </div> 66 <div data-expected-height=20>Out of flexbox.</div> 67 </div> 68 69 <div class="container container-first-letter"> 70 <div class="inline-flexbox flexbox-first-letter" data-expected-height=20> 71 Anonymous item. 72 </div> 73 <div data-expected-height=20>Out of flexbox.</div> 74 </div> 75 76 <div class="container container-first-letter"> 77 <div class="flexbox"> 78 <div class="item" data-expected-height=20>The first item.</div> 79 <div class="item" data-expected-height=20>The second item.</div> 80 </div> 81 <div data-expected-height=20>Out of flexbox.</div> 82 </div> 83 84 <div class="container container-first-letter"> 85 <div class="inline-flexbox"> 86 <div class="item" data-expected-height=20>The first item.</div> 87 <div class="item" data-expected-height=20>The second item.</div> 88 </div> 89 <div data-expected-height=20>Out of flexbox.</div> 90 </div> 91 92 <div class="container container-first-letter"> 93 <div class="flexbox" data-expected-height=20> 94 Anonymous item. 95 </div> 96 <div data-expected-height=20>Out of flexbox.</div> 97 </div> 98 99 <div class="container container-first-letter"> 100 <div class="inline-flexbox" data-expected-height=20> 101 Anonymous item. 102 </div> 103 <div data-expected-height=20>Out of flexbox.</div> 104 </div> 105 </body>