text-emphasis-style-filled-001.xht (3442B)
1 <?xml version="1.0" encoding="UTF-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>CSS Test: text-emphasis-style - filled - basic cases</title> 6 <link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp" /> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com" /> 8 <link rel="help" title="CSS Text Level 3: 11.2.1. Emphasis Mark Style: the ‘text-emphasis-style’ property" href="http://www.w3.org/TR/css-text-decor-3/#text-emphasis-style-property" /> 9 <link rel="match" href="reference/text-emphasis-style-filled-001-ref.xht"/> 10 <meta name="assert" content="This property applies emphasis marks to the element's text. " /> 11 <style type="text/css"><![CDATA[ 12 .parent 13 { 14 border: solid 1px gray; 15 font: 1.5em/2 monospace; 16 width: 10em; 17 } 18 #test1 19 { 20 text-emphasis-style: filled; /* missing shape computes to 'circle' */ 21 } 22 #test2 23 { 24 text-emphasis-style: filled circle; 25 } 26 #test3 27 { 28 text-emphasis-style: filled dot; 29 } 30 #test4 31 { 32 text-emphasis-style: filled double-circle; 33 } 34 #test5 35 { 36 text-emphasis-style: filled sesame; 37 } 38 #test6 39 { 40 text-emphasis-style: filled triangle; 41 } 42 ]]></style> 43 </head> 44 <body> 45 <div> 46 <p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p> 47 filled 48 <div class="parent"> 49 <div><span id="test1">Filler</span> Text</div> 50 <div> 51 <ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby> 52 Text 53 </div> 54 </div> 55 <br /> 56 filled circle 57 <div class="parent"> 58 <div><span id="test2">Filler</span> Text</div> 59 <div> 60 <ruby><rb>F</rb><rt>●</rt><rb>i</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>l</rb><rt>●</rt><rb>e</rb><rt>●</rt><rb>r</rb><rt>●</rt></ruby> 61 Text 62 </div> 63 </div> 64 <br /> 65 filled dot 66 <div class="parent"> 67 <div><span id="test3">Filler</span> Text</div> 68 <div> 69 <ruby><rb>F</rb><rt>•</rt><rb>i</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>l</rb><rt>•</rt><rb>e</rb><rt>•</rt><rb>r</rb><rt>•</rt></ruby> 70 Text 71 </div> 72 </div> 73 <br /> 74 filled double-circle 75 <div class="parent"> 76 <div><span id="test4">Filler</span> Text</div> 77 <div> 78 <ruby><rb>F</rb><rt>◉</rt><rb>i</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>l</rb><rt>◉</rt><rb>e</rb><rt>◉</rt><rb>r</rb><rt>◉</rt></ruby> 79 Text 80 </div> 81 </div> 82 <br /> 83 filled sesame 84 <div class="parent"> 85 <div><span id="test5">Filler</span> Text</div> 86 <div> 87 <ruby><rb>F</rb><rt>﹅</rt><rb>i</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>l</rb><rt>﹅</rt><rb>e</rb><rt>﹅</rt><rb>r</rb><rt>﹅</rt></ruby> 88 Text 89 </div> 90 </div> 91 <br /> 92 filled triangle 93 <div class="parent"> 94 <div><span id="test6">Filler</span> Text</div> 95 <div> 96 <ruby><rb>F</rb><rt>▲</rt><rb>i</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>l</rb><rt>▲</rt><rb>e</rb><rt>▲</rt><rb>r</rb><rt>▲</rt></ruby> 97 Text 98 </div> 99 </div> 100 </div> 101 </body> 102 </html>