text-emphasis-style-open-001

text-emphasis-style - open - 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 - open - 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-open-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: open;
 32 				}
 33 				#test2
 34 				{
 35 					text-emphasis-style: open circle;
 36 				}
 37 				#test3
 38 				{
 39 					text-emphasis-style: open dot;
 40 				}
 41 				#test4
 42 				{
 43 					text-emphasis-style: open double-circle;
 44 				}
 45 				#test5
 46 				{
 47 					text-emphasis-style: open sesame;
 48 				}
 49 				#test6
 50 				{
 51 					text-emphasis-style: open 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 			open
 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 			open 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 			open 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 			open 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 			open 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 			open 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>