inline-block-alignment-orthogonal-vrl-004.xht (2404B)
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"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 5 <title>CSS Writing Modes Test: text baseline alignment of inline-block in orthogonal flow</title> 6 <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" /> 7 <link rel="reviewer" title="Gerard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2015-06-12 --> 8 <link rel="help" title="4.3 Atomic Inline Baselines" href="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" /> 9 <link rel="match" href="inline-block-alignment-orthogonal-vrl-002-ref.xht" /> 10 <meta name="assert" content="This test checks the generation of text baseline. When 'writing-mode' of the containing block of an inline-block in orthogonal flow is 'horizontal-tb', then the dominant baseline used is the alphabetical baseline. In this test, the inline-block should be 'sitting' on the alphabetical baseline, therefore creating a straight and unbroken bottom edge." /> 11 <meta name="flags" content="ahem" /> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style type="text/css"><![CDATA[ 14 div#horiz-tb 15 { 16 color: orange; 17 font: 60px/1 Ahem; /* computes to 60px/60px */ 18 writing-mode: horizontal-tb; 19 } 20 21 div#inline-block-90 22 { 23 background-color: orange; /* we want the padding-bottom to be painted with orange color */ 24 display: inline-block; 25 font-size: 1.5em; /* computes to 90px */ 26 /* 27 such padding-bottom declaration is arbitrary and only serve to make the 28 test a bit more challenging. 29 */ 30 padding-bottom: 0.5em; /* computes to 45px */ 31 text-orientation: upright; 32 writing-mode: vertical-rl; 33 } 34 35 span.block-descendant 36 { 37 display: block; 38 } 39 40 span#orange30 41 { 42 font-size: 0.5em; /* computes to 30px */ 43 } 44 ]]></style> 45 46 </head> 47 48 <body> 49 50 <p>Test passes if the <strong>bottom edge</strong> of an irregular polygon is straight and unbroken.</p> 51 52 <div id="horiz-tb">É<div id="inline-block-90"> 53 <span class="block-descendant">L</span> 54 <span class="block-descendant">Z</span> 55 </div><span id="orange30">É</span> 56 </div> 57 58 </body> 59 </html>