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