tab-size-length-ref.html (3309B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 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"> 10 11 <meta charset="utf-8"> 12 <style type="text/css"> 13 14 @font-face { 15 font-family:Ahem; src:url(../fonts/Ahem.ttf); 16 } 17 * { 18 font:20px/20px Ahem; 19 } 20 html,body { 21 color:black; background-color:white; 22 } 23 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) */ 46 47 </style> 48 </head> 49 <body> 50 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> 72 73 </body> 74 </html>