<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Test: text-emphasis-style - open - basic cases</title> <style type="text/css"> @page { font: italic 8pt sans-serif; color: gray; margin: 7%; counter-increment: page; @top-left { content: "CSS Text Module Level 3 CR Test Suite"; } @top-right { content: "Test text-emphasis-style-open-001"; } @bottom-right { content: counter(page); } } </style> <link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp"/> <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-3/#text-emphasis-style"/> <link rel="match" href="reference/text-emphasis-style-open-001-ref.xht"/> <meta name="flags" content=""/> <meta name="assert" content="This property applies emphasis marks to the element's text. "/> <style type="text/css"><![CDATA[ .common { line-height: 1em; position: relative; } .parent { border: solid 1px gray; font-size: 2em; width: 10em; } .refcommon { font-size: 0.5em; left: 0em; position: absolute; top: -1.5em; } #test1 { text-emphasis-style: open; } #test2 { text-emphasis-style: open circle; } #test3 { text-emphasis-style: open dot; } #test4 { text-emphasis-style: open double-circle; } #test5 { text-emphasis-style: open sesame; } #test6 { text-emphasis-style: open triangle; } ]]></style> <script type="text/javascript"> // <![CDATA[ // Set Font Family to 'IPAMincho' function setFontFamily () { var fontName = 'IPAMincho'; var divs = document.getElementsByTagName('div'); var i = 0; var div; while (i < divs.length) { div = divs.item(i); if (div.className == 'parent') { div.style.fontFamily = fontName; } i++; } } // ]]> </script> </head> <body> <div> <p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p> open <div class="parent"> <div><span id="test1">Filler</span> Text</div> <br/> <div> <span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span> Text </div> </div> <br/> open circle <div class="parent"> <div><span id="test2">Filler</span> Text</div> <br/> <div> <span class="common">F<span class="refcommon">○</span></span><span class="common">i<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">l<span class="refcommon">○</span></span><span class="common">e<span class="refcommon">○</span></span><span class="common">r<span class="refcommon">○</span></span> Text </div> </div> <br/> open dot <div class="parent"> <div><span id="test3">Filler</span> Text</div> <br/> <div> <span class="common">F<span class="refcommon">◦</span></span><span class="common">i<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">l<span class="refcommon">◦</span></span><span class="common">e<span class="refcommon">◦</span></span><span class="common">r<span class="refcommon">◦</span></span> Text </div> </div> <br/> open double-circle <div class="parent"> <div><span id="test4">Filler</span> Text</div> <br/> <div> <span class="common">F<span class="refcommon">◎</span></span><span class="common">i<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">l<span class="refcommon">◎</span></span><span class="common">e<span class="refcommon">◎</span></span><span class="common">r<span class="refcommon">◎</span></span> Text </div> </div> <br/> open sesame <div class="parent"> <div><span id="test5">Filler</span> Text</div> <br/> <div> <span class="common">F<span class="refcommon">﹆</span></span><span class="common">i<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">l<span class="refcommon">﹆</span></span><span class="common">e<span class="refcommon">﹆</span></span><span class="common">r<span class="refcommon">﹆</span></span> Text </div> </div> <br/> open triangle <div class="parent"> <div><span id="test6">Filler</span> Text</div> <br/> <div> <span class="common">F<span class="refcommon">△</span></span><span class="common">i<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">l<span class="refcommon">△</span></span><span class="common">e<span class="refcommon">△</span></span><span class="common">r<span class="refcommon">△</span></span> Text </div> </div> <p class="fontChange" style="display: block;"> If you are unable to see font glyphs for certain characters using the browsers default font, install the <a href="http://ossipedia.ipa.go.jp/ipafont/">IPA Font(http://ossipedia.ipa.go.jp/ipafont/)</a> and apply it. <button type="button" onclick="setFontFamily()"> Apply </button> </p> <script type="text/javascript"> if (document.getElementById) { document.getElementById('fontChange').style.display = 'block' } </script> </div> </body> </html>