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 - above 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-above-left-002-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: above left;
15 }
16
17 .test-vertical
18 {
19 writing-mode: vertical-rl;
20 }
21 /* the CSS below is not part of the test */
22 .common
23 {
24 line-height: 1em;
25 position: relative;
26 }
27 .displayarea
28 {
29 border: solid 1px gray;
30 padding: 10px;
31 width: 10em;
32 }
33 .floatright
34 {
35 float: right;
36 }
37 .parent
38 {
39 background: yellow;
40 border: solid 1px gray;
41 color: blue;
42 font: 20px/1em ahem;
43 height: 6em;
44 width: 2em;
45 }
46 .refcommon
47 {
48 font-size: 0.5em;
49 left: 1.1em;
50 position: absolute;
51 top: 0.1em;
52 }
53 </style>
54 </head>
55 <body>
56 <div>
57 <p>Test passes if a pair of left and right block in the square box is identical.</p>
58 <p>vertical</p>
59 <div class="displayarea">
60 <div class="parent floatright">
61 <span class="common"> a<span class="refcommon">●</span></span><br>
62 <span class="common"> b<span class="refcommon">●</span></span><br>
63 <span class="common"> c<span class="refcommon">●</span></span><br>
64 <br>
65 <span class="common"> d</span><br>
66 <span class="common"> e</span><br>
67 </div>
68 <div class="parent test-vertical">
69 <span class="test">abc</span> de
70 </div>
71 </div>
72 </div>
73 </body>
74 </html>