text-emphasis-style-shape-001.xht (2954B)
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 - shape - 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-shape-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: circle; 21 } 22 #test2 23 { 24 text-emphasis-style: dot; 25 } 26 #test3 27 { 28 text-emphasis-style: double-circle; 29 } 30 #test4 31 { 32 text-emphasis-style: sesame; 33 } 34 #test5 35 { 36 text-emphasis-style: triangle; 37 } 38 ]]></style> 39 </head> 40 <body> 41 <div> 42 <p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p> 43 circle 44 <div class="parent"> 45 <div><span id="test1">Filler</span> Text</div> 46 <div> 47 <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> 48 Text 49 </div> 50 </div> 51 <br /> 52 dot 53 <div class="parent"> 54 <div><span id="test2">Filler</span> Text</div> 55 <div> 56 <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> 57 Text 58 </div> 59 </div> 60 <br /> 61 double-circle 62 <div class="parent"> 63 <div><span id="test3">Filler</span> Text</div> 64 <div> 65 <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> 66 Text 67 </div> 68 </div> 69 <br /> 70 sesame 71 <div class="parent"> 72 <div><span id="test4">Filler</span> Text</div> 73 <div> 74 <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> 75 Text 76 </div> 77 </div> 78 <br /> 79 triangle 80 <div class="parent"> 81 <div><span id="test5">Filler</span> Text</div> 82 <div> 83 <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> 84 Text 85 </div> 86 </div> 87 </div> 88 </body> 89 </html>