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-indent Percentage - 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: 10.1. Indent Text: the ‘text-indent’ property" href="http://www.w3.org/TR/css-text-3/#text-indent">
7 <link rel="match" href="reference/text-indent-percentage-001-ref.htm">
8 <meta name="flags" content="ahem">
9 <meta name="assert" content="Ensure that text-indent +50% adds 50% of its containing block's width in front of the text.">
10 <style type="text/css">
11 #parent
12 {
13 font: 16px/1em Ahem;
14 position: relative;
15 width: 400px;
16 }
17 #reference1
18 {
19 color: red;
20 left: 0;
21 position: absolute;
22 top: 0;
23 z-index: -1;
24 }
25 #reference2
26 {
27 margin-left: 50%;
28 }
29 #test1
30 {
31 text-indent: 50%;
32 margin-left: -50%;
33 }
34 #test2
35 {
36 text-indent: 50%;
37 }
38 </style>
39 </head>
40 <body>
41 <p>Test passes if there is no red visible on the page.</p>
42 <div id="parent">
43 <div id="reference1">X</div>
44 <div id="test1">X</div>
45 </div>
46 <p>Test passes if the following two text blocks look same in terms of margin-left and text-indent respectively.</p>
47 <div id="test2">
48 abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.<br>
49 ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br>
50 </div>
51 <div>
52 <span id="reference2">abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz.</span><br>
53 ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ.<br>
54 </div>
55 </body>
56 </html>