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 right - 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-right-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 right;
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 class="margin">
52 <div class="margin">
53 <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>
54 de<br>
55 <br>
56 </div>
57 </div>
58 </div>
59 </div>
60 </body>
61 </html>