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 - string - 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-string-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 #test
30 {
31 text-emphasis-style: "!";
32 }
33 </style>
34 <script type="text/javascript">
35 //
36 // Set Font Family to 'IPAMincho'
37 function setFontFamily () {
38 var fontName = 'IPAMincho';
39 var divs = document.getElementsByTagName('div');
40 var i = 0;
41 var div;
42 while (i < divs.length) {
43 div = divs.item(i);
44 if (div.className == 'parent') {
45 div.style.fontFamily = fontName;
46 }
47 i++;
48 }
49 }
50 //
51 </script>
52 </head>
53 <body>
54 <div>
55 <p>Test passes if a pair of upper and lower "Filler Text" in the square box is identical.</p>
56 string
57 <div class="parent">
58 <div><span id="test">Filler</span> Text</div>
59 <br>
60 <div class="margin">
61 <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>
62 Text
63 </div>
64 </div>
65 <p class="fontChange" style="display: block;">
66 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.
67 <button type="button" onclick="setFontFamily()">
68 Apply
69 </button>
70 </p>
71 <script type="text/javascript">
72 if (document.getElementById) {
73 document.getElementById('fontChange').style.display = 'block'
74 }
75 </script>
76 </div>
77 </body>
78 </html>