3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
7 <title>CSS Test: Testing the layout of TAB characters with various 'tab-size' length values
</title>
8 <link rel=
"author" title=
"Mats Palmgren" href=
"mailto:mats@mozilla.com">
9 <link rel=
"help" href=
"https://drafts.csswg.org/css-text-3/#tab-size-property">
11 <meta charset=
"utf-8">
12 <style type=
"text/css">
15 font-family:Ahem
; src:url
(../fonts/Ahem.ttf);
21 color:black
; background-color:white
;
24 tab
{ display:inline-block
; }
25 #t1 tab
{ width:40px; } /* tab-size:20px (valid) */
26 #t2 tab
{ width:50px; } /* tab-size:50px (valid) */
27 #t3 tab
{ width:40px; } /* tab-size:2ch (valid) */
28 #t4 tab
{ width:60px; } /* tab-size:3em (valid) */
29 #t5 tab
{ width:50px; } /* tab-size:calc(10px + 2em) (valid) */
30 #t6 tab
{ width:40px; } /* tab-size:calc(2em) (valid) */
31 #t7 tab
{ width:50px; } /* tab-size:calc(3.5 - 1) (valid) */
32 #t8 tab
{ width:32px; } /* tab-size:0.8ch (valid) */
33 #t9 tab
{ width:20px; } /* tab-size:0px (valid) */
34 #t10 tab
{ width:20px; } /* tab-size:calc(-2em) (valid, but clamped to zero) */
35 #t11 tab
{ width:20px; } /* tab-size:calc(1px - 2px) (valid, but clamped to zero) */
36 #t12 tab
{ width:20px; } /* tab-size:calc(-2.5) (valid, but clamped to zero) */
37 #t13 tab
{ width:160px; } /* tab-size:-2em (invalid, rule ignored, falls back to initial value 8) */
38 #t14 tab
{ width:160px; } /* tab-size:100% (invalid, rule ignored, falls back to initial value 8) */
39 #t15 tab
{ width:160px; } /* tab-size:calc(10% + 2em) (invalid, rule ignored, falls back to initial value 8) */
40 #t16 tab
{ width:20px; } /* tab-size:0 (valid) */
41 #t17 tab
{ width:20px; } /* tab-size:0.0 (valid) */
42 #t18 tab
{ width:40px; } /* tab-size:1 (valid) */
43 #t19 tab
{ width:60px; } /* tab-size:3 (valid) */
44 #t20 tab
{ width:68px; } /* tab-size:3.4 (valid) */
45 #t21 tab
{ width:160px; } /* tab-size:-1.5 (invalid, rule ignored, falls back to initial value 8) */
51 <pre id=
"t1"><tab>A
</tab><tab>B
</tab>C
</pre>
52 <pre id=
"t2"><tab>A
</tab><tab>B
</tab>C
</pre>
53 <pre id=
"t3"><tab>A
</tab><tab>B
</tab>C
</pre>
54 <pre id=
"t4"><tab>A
</tab><tab>B
</tab>C
</pre>
55 <pre id=
"t5"><tab>A
</tab><tab>B
</tab>C
</pre>
56 <pre id=
"t6"><tab>A
</tab><tab>B
</tab>C
</pre>
57 <pre id=
"t7"><tab>A
</tab><tab>B
</tab>C
</pre>
58 <pre id=
"t8"><tab>A
</tab><tab>B
</tab>C
</pre>
59 <pre id=
"t9"><tab>A
</tab><tab>B
</tab>C
</pre>
60 <pre id=
"t10"><tab>A
</tab><tab>B
</tab>C
</pre>
61 <pre id=
"t11"><tab>A
</tab><tab>B
</tab>C
</pre>
62 <pre id=
"t12"><tab>A
</tab><tab>B
</tab>C
</pre>
63 <pre id=
"t13"><tab>A
</tab><tab>B
</tab>C
</pre>
64 <pre id=
"t14"><tab>A
</tab><tab>B
</tab>C
</pre>
65 <pre id=
"t15"><tab>A
</tab><tab>B
</tab>C
</pre>
66 <pre id=
"t16"><tab>A
</tab><tab>B
</tab>C
</pre>
67 <pre id=
"t17"><tab>A
</tab><tab>B
</tab>C
</pre>
68 <pre id=
"t18"><tab>A
</tab><tab>B
</tab>C
</pre>
69 <pre id=
"t19"><tab>A
</tab><tab>B
</tab>C
</pre>
70 <pre id=
"t20"><tab>A
</tab><tab>B
</tab>C
</pre>
71 <pre id=
"t21"><tab>A
</tab><tab>B
</tab>C
</pre>