text-emphasis-style-string-001

text-emphasis-style - string - basic cases

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Assertion
This property applies emphasis marks to the element's text.

Source

 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>