1 <!DOCTYPE html>
2 <html><head>
3 <meta charset="utf-8">
4 <title>CSS Text: text-align: match-parent</title>
5 <link href="mailto:smontagu@mozilla.com" rel="author" title="Simon Montagu">
6 <link href="http://www.w3.org/TR/css-text-3/#text-align-property" rel="help">
7 <meta content="Text checks that an element with
8 text-align: match-parent inherits its parent's value and calculates
9 'start' and 'end' with respect to its parent's direction" U0003Clink="" href="text-align-match-parent-ref.html" name="assert" rel="match">
10 <style type="text/css">
11 div.start { text-align: start; }
12 div.end { text-align: end; }
13 div.left { text-align: left; }
14 div.right { text-align: right; }
15 div > div { text-align: match-parent; }
16 </style>
17 </head>
18 <body>
19 <div>Test passes if each line that says "Left" is aligned left and
20 each line that says "Right" is aligned right</div>
21 <div class="start" dir="ltr"><div dir="ltr">Left</div></div>
22 <div class="start" dir="ltr"><div dir="rtl">Left</div></div>
23 <div class="start" dir="rtl"><div dir="ltr">Right</div></div>
24 <div class="start" dir="rtl"><div dir="rtl">Right</div></div>
25 <div class="end" dir="ltr"><div dir="ltr">Right</div></div>
26 <div class="end" dir="ltr"><div dir="rtl">Right</div></div>
27 <div class="end" dir="rtl"><div dir="ltr">Left</div></div>
28 <div class="end" dir="rtl"><div dir="rtl">Left</div></div>
29 <div class="left" dir="ltr"><div dir="ltr">Left</div></div>
30 <div class="left" dir="ltr"><div dir="rtl">Left</div></div>
31 <div class="left" dir="rtl"><div dir="ltr">Left</div></div>
32 <div class="left" dir="rtl"><div dir="rtl">Left</div></div>
33 <div class="right" dir="ltr"><div dir="ltr">Right</div></div>
34 <div class="right" dir="ltr"><div dir="rtl">Right</div></div>
35 <div class="right" dir="rtl"><div dir="ltr">Right</div></div>
36 <div class="right" dir="rtl"><div dir="rtl">Right</div></div>
37
38
39 </body></html>