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 - filled - 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-filled-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: filled;
32 }
33 #test2
34 {
35 text-emphasis-style: filled circle;
36 }
37 #test3
38 {
39 text-emphasis-style: filled dot;
40 }
41 #test4
42 {
43 text-emphasis-style: filled double-circle;
44 }
45 #test5
46 {
47 text-emphasis-style: filled sesame;
48 }
49 #test6
50 {
51 text-emphasis-style: filled triangle;
52 }
53 </style>
54 <script type="text/javascript">
55 //
56 // Set Font Family to 'IPAMincho'
57 function setFontFamily () {
58 var fontName = 'IPAMincho';
59 var divs = document.getElementsByTagName('div');
60 var i = 0;
61 var div;
62 while (i < divs.length) {
63 div = divs.item(i);
64 if (div.className == 'parent') {
65 div.style.fontFamily = fontName;
66 }
67 i++;
68 }
69 }
70 //
71 </script>
72 </head>
73 <body>
74 <div>
75 <p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p>
76 filled
77 <div class="parent">
78 <div><span id="test1">Filler</span> Text</div>
79 <br>
80 <div>
81 <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>
82 Text
83 </div>
84 </div>
85 <br>
86 filled circle
87 <div class="parent">
88 <div><span id="test2">Filler</span> Text</div>
89 <br>
90 <div>
91 <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>
92 Text
93 </div>
94 </div>
95 <br>
96 filled dot
97 <div class="parent">
98 <div><span id="test3">Filler</span> Text</div>
99 <br>
100 <div>
101 <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>
102 Text
103 </div>
104 </div>
105 <br>
106 filled double-circle
107 <div class="parent">
108 <div><span id="test4">Filler</span> Text</div>
109 <br>
110 <div>
111 <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>
112 Text
113 </div>
114 </div>
115 <br>
116 filled sesame
117 <div class="parent">
118 <div><span id="test5">Filler</span> Text</div>
119 <br>
120 <div>
121 <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>
122 Text
123 </div>
124 </div>
125 <br>
126 filled triangle
127 <div class="parent">
128 <div><span id="test6">Filler</span> Text</div>
129 <br>
130 <div>
131 <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>
132 Text
133 </div>
134 </div>
135 <p class="fontChange" style="display: block;">
136 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.
137 <button type="button" onclick="setFontFamily()">
138 Apply
139 </button>
140 </p>
141 <script type="text/javascript">
142 if (document.getElementById) {
143 document.getElementById('fontChange').style.display = 'block'
144 }
145 </script>
146 </div>
147 </body>
148 </html>