text-emphasis-position-below-left-001

text-emphasis-position - below left - basic cases

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
ahem
Assertion
This property describes where emphasis marks are drawn at.

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-position - below left - 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.4. Emphasis Mark Position: the ‘text-emphasis-position’ property" href="http://www.w3.org/TR/css-text-3/#text-emphasis-position">
 7 		<link rel="match" href="reference/text-emphasis-position-below-left-001-ref.htm">
 8 		<meta name="flags" content="ahem">
 9 		<meta name="assert" content="This property describes where emphasis marks are drawn at.">
10 		<style type="text/css">
11 			.test
12 			{
13 				text-emphasis-style: filled circle;
14 				text-emphasis-position: below left;
15 			}
16 			/* the CSS below is not part of the test */
17 			.common
18 			{
19 				line-height: 1em;
20 				position: relative;
21 			}
22 			.parent
23 			{
24 				background: yellow;
25 				border: solid 1px gray;
26 				color: blue;
27 				font: 20px/1em ahem;
28 				width: 6em;
29 			}
30 			.refcommon
31 			{
32 				font-size: 0.5em;
33 				left: 0.6em;
34 				position: absolute;
35 			}
36 			.top
37 			{
38 				top: 1.6em;
39 			}
40 		</style>
41 	</head>
42 	<body>
43 		<div>
44 			<p>Test passes if a pair of upper and lower block in the square box is identical.</p>
45 			<p>horizontal</p>
46 			<div class="parent">
47 				<div><span class="test">abc</span> de<br><br></div>
48 			</div>
49 			<br>
50 			<div class="parent">
51 				<div>
52 					<span class="common">a<span class="refcommon top"></span></span><span class="common">b<span class="refcommon top"></span></span><span class="common">c<span class="refcommon top"></span></span>
53 					 de<br>
54 					<br>
55 				</div>
56 			</div>
57 		</div>
58 	</body>
59 </html>