first-line-pseudo-012.xht (2037B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 3 <head> 4 <title>CSS Test: vertical-align: length on :first-line</title> 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 6 <link rel="reviewer" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-10-06 --> 7 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/first-line/012.html" type="text/html"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo" /> 9 <link rel="match" href="first-line-pseudo-012-ref.xht" /> 10 11 <meta name="flags" content="ahem may" /> 12 13 <!-- 14 vertical-align may apply to :first-line selector but is not required by the spec. 15 More info: 16 http://lists.w3.org/Archives/Public/public-css-testsuite/2013Oct/0000.html 17 --> 18 19 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 20 <style type="text/css"> 21 .container { font-size: 3.125em; } 22 .test, .control, .reference { border: solid black; width: 1em; } 23 .test, .control { font: 1em/1 Ahem; color: aqua; background: yellow; } 24 .a { background: fuchsia; } 25 .test:first-line, .control .first-line { vertical-align: 0.8em; } 26 .reference .ra { height: 0.8em; background: aqua; } 27 .reference .rb { height: 0.2em; background: fuchsia; } 28 .reference .rc { height: 0.8em; background: yellow; } 29 .reference .rd { height: 1.0em; background: aqua; } 30 </style> 31 </head> 32 <body> 33 <p>The next three boxes should be pixel-perfect identical.</p> 34 <div class="container"> 35 <p class="test"> 36 <span class="a">É</span> 37 <span class="b">X</span> 38 </p> 39 <p class="control"> 40 <span class="first-line"><span class="a">É</span></span> 41 <span class="b">X</span> 42 </p> 43 <div class="reference"> 44 <div class="ra"></div> 45 <div class="rb"></div> 46 <div class="rc"></div> 47 <div class="rd"></div> 48 </div> 49 </div> 50 </body> 51 </html>