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 - color - 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.2. Emphasis Mark Color: the ‘text-emphasis-color’ property" href="http://www.w3.org/TR/css-text-3/#text-emphasis-color">
7 <link rel="match" href="reference/text-emphasis-color-001-ref.htm">
8 <meta name="flags" content="">
9 <meta name="assert" content="This property describes the foreground color of the emphasis marks.">
10 <style type="text/css">
11 .common
12 {
13 line-height: 1em;
14 position: relative;
15 }
16 .emphasis
17 {
18 text-emphasis-style: filled circle;
19 }
20 .parent
21 {
22 border: solid 1px gray;
23 font-size: 2em;
24 width: 10em;
25 }
26 .refcommon
27 {
28 font-size: 0.5em;
29 left: 0em;
30 position: absolute;
31 top: -1.5em;
32 }
33 .black
34 {
35 color: black;
36 }
37 .blue
38 {
39 color: blue;
40 }
41 .green
42 {
43 color: green;
44 }
45 .red
46 {
47 color: red;
48 }
49 .test1
50 {
51 text-emphasis-color: black;
52 }
53 .test2
54 {
55 text-emphasis-color: blue;
56 }
57 .test3
58 {
59 text-emphasis-color: green;
60 }
61 .test4
62 {
63 text-emphasis-color: red;
64 }
65 </style>
66 <script type="text/javascript">
67 //
68 // Set Font Family to 'IPAMincho'
69 function setFontFamily () {
70 var fontName = 'IPAMincho';
71 var divs = document.getElementsByTagName('div');
72 var i = 0;
73 var div;
74 while (i < divs.length) {
75 div = divs.item(i);
76 if (div.className == 'parent') {
77 div.style.fontFamily = fontName;
78 }
79 i++;
80 }
81 }
82 //
83 </script>
84 </head>
85 <body>
86 <div>
87 <p>Test passes if each pair of upper and lower "Filler Text" in the square box is identical.</p>
88 black
89 <div class="parent">
90 <div><span class="emphasis test1">Filler</span> Text</div>
91 <br>
92 <div>
93 <span class="common">F<span class="black refcommon">●</span></span><span class="common">i<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">l<span class="black refcommon">●</span></span><span class="common">e<span class="black refcommon">●</span></span><span class="common">r<span class="black refcommon">●</span></span>
94 Text
95 </div>
96 </div>
97 <br>
98 blue
99 <div class="parent">
100 <div><span class="emphasis test2">Filler</span> Text</div>
101 <br>
102 <div>
103 <span class="common">F<span class="blue refcommon">●</span></span><span class="common">i<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">l<span class="blue refcommon">●</span></span><span class="common">e<span class="blue refcommon">●</span></span><span class="common">r<span class="blue refcommon">●</span></span>
104 Text
105 </div>
106 </div>
107 <br>
108 green
109 <div class="parent">
110 <div><span class="emphasis test3">Filler</span> Text</div>
111 <br>
112 <div>
113 <span class="common">F<span class="green refcommon">●</span></span><span class="common">i<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">l<span class="green refcommon">●</span></span><span class="common">e<span class="green refcommon">●</span></span><span class="common">r<span class="green refcommon">●</span></span>
114 Text
115 </div>
116 </div>
117 <br>
118 red
119 <div class="parent">
120 <div><span class="emphasis test4">Filler</span> Text</div>
121 <br>
122 <div>
123 <span class="common">F<span class="red refcommon">●</span></span><span class="common">i<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">l<span class="red refcommon">●</span></span><span class="common">e<span class="red refcommon">●</span></span><span class="common">r<span class="red refcommon">●</span></span>
124 Text
125 </div>
126 </div>
127 <br>
128 current-color
129 <div class="parent">
130 <div><span class="emphasis">Filler</span> Text</div>
131 <br>
132 <div>
133 <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>
134 Text
135 </div>
136 </div>
137 <p class="fontChange" style="display: block;">
138 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.
139 <button type="button" onclick="setFontFamily()">
140 Apply
141 </button>
142 </p>
143 <script type="text/javascript">
144 if (document.getElementById) {
145 document.getElementById('fontChange').style.display = 'block'
146 }
147 </script>
148 </div>
149 </body>
150 </html>