tab-size-spacing-001.html (1601B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text level 3 Test: tab-size, word-spacing and letter-spacing</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> 5 <link rel="help" href="https://drafts.csswg.org/css-text-3/#tab-size-property"> 6 <link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property"> 7 <link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> 8 <link rel="match" href="tab-size-spacing-001-ref.html"> 9 <meta name="assert" content="For the tab-size property, a <number> represents the measure as a multiple of the space character’s advance width (U+0020) including its associated letter-spacing and word-spacing"> 10 <style> 11 .test { 12 white-space: pre; 13 tab-size: 8; /* the initial value, but since we're measuring against it, we might as well be sure */ 14 font-family: monospace; /* because the ch unit is based on the size of the 0 character, 15 and we want to measure space characters 16 so they need to be the same size. */ 17 letter-spacing: 2px; 18 word-spacing: 10px; 19 } 20 span { 21 display: inline-block; 22 width: 20px; 23 height: 20px; 24 background: green; 25 } 26 .ref { 27 position: absolute; 28 z-index: -1; 29 width: 20px; 30 height: 20px; 31 background: red; 32 margin-left: calc( 8ch + 8 * 2px + 8 * 10px ); 33 34 /* this is to avoid antialiasing effects at the edge */ 35 box-sizing: border-box; 36 border: 2px solid white; 37 } 38 </style> 39 40 <p>Test passes if there is a green square and no red. 41 <div class=ref></div> 42 <div class=test>	<span></span></div>