1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: text-emphasis-style - shape - basic cases</title>
5 <link rel="author" title="Makoto Kikuchi" href="mailto:kikuchi@est.co.jp">
6 <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">
7 <link rel="match" href="reference/text-emphasis-style-shape-001-ref.htm">
8 <meta name="flags" content="">
9 <meta name="assert" content="This property applies emphasis marks to the element's text. ">
10 <style type="text/css">
11 .common
12 {
13 line-height: 1em;
14 position: relative;
15 }
16 .parent
17 {
18 border: solid 1px gray;
19 font-size: 2em;
20 width: 10em;
21 }
22 .refcommon
23 {
24 font-size: 0.5em;
25 left: 0em;
26 position: absolute;
27 top: -1.5em;
28 }
29 #test1
30 {
31 text-emphasis-style: circle;
32 }
33 #test2
34 {
35 text-emphasis-style: dot;
36 }
37 #test3
38 {
39 text-emphasis-style: double-circle;
40 }
41 #test4
42 {
43 text-emphasis-style: sesame;
44 }
45 #test5
46 {
47 text-emphasis-style: triangle;
48 }
49 </style>
50 <script type="text/javascript">
51 //
52 // Set Font Family to 'IPAMincho'
53 function setFontFamily () {
54 var fontName = 'IPAMincho';
55 var divs = document.getElementsByTagName('div');
56 var i = 0;
57 var div;
58 while (i < divs.length) {
59 div = divs.item(i);
60 if (div.className == 'parent') {
61 div.style.fontFamily = fontName;
62 }
63 i++;
64 }
65 }
66 //
67 </script>
68 </head>
69 <body>
70 <div>
71 <p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p>
72 circle
73 <div class="parent">
74 <div><span id="test1">Filler</span> Text</div>
75 <br>
76 <div>
77 <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>
78 Text
79 </div>
80 </div>
81 <br>
82 dot
83 <div class="parent">
84 <div><span id="test2">Filler</span> Text</div>
85 <br>
86 <div>
87 <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>
88 Text
89 </div>
90 </div>
91 <br>
92 double-circle
93 <div class="parent">
94 <div><span id="test3">Filler</span> Text</div>
95 <br>
96 <div>
97 <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>
98 Text
99 </div>
100 </div>
101 <br>
102 sesame
103 <div class="parent">
104 <div><span id="test4">Filler</span> Text</div>
105 <br>
106 <div>
107 <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>
108 Text
109 </div>
110 </div>
111 <br>
112 triangle
113 <div class="parent">
114 <div><span id="test5">Filler</span> Text</div>
115 <br>
116 <div>
117 <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>
118 Text
119 </div>
120 </div>
121 <p class="fontChange" style="display: block;">
122 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.
123 <button type="button" onclick="setFontFamily()">
124 Apply
125 </button>
126 </p>
127 <script type="text/javascript">
128 if (document.getElementById) {
129 document.getElementById('fontChange').style.display = 'block'
130 }
131 </script>
132 </div>
133 </body>
134 </html>