text-wrap-balance-word-spacing-001-ref.html (1583B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>CSS Text level 4 Test: text-wrap-style should account for word-spacing</title> 6 <link rel="author" title="Yulun Wu"> 7 <link rel="help" href="https://www.w3.org/TR/css-text-4/#word-spacing-property"> 8 <link rel="help" href="https://www.w3.org/TR/css-text-4/#text-wrap-style"> 9 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 11 <style> 12 body { 13 font-family: "Ahem"; 14 font-size: 12px; 15 width: 500px; 16 } 17 .spacing-10 { 18 word-spacing: 10px; 19 } 20 .spacing-30 { 21 word-spacing: 30px; 22 } 23 .balance-first-line-spacing-30::first-line { 24 word-spacing: 30px; 25 } 26 .img1 { 27 background-color: green; 28 width: 20px; 29 height: 10px; 30 } 31 .img2 { 32 background-color: green; 33 width: 20px; 34 height: 10px; 35 margin-left: 30px; 36 margin-right: 30px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="spacing-10">This passes if this div is one line </div> 42 <div class="spacing-30">This passes if this<br> div has the exact<br> correct breaking points</div> 43 <div class="spacing-30">This passes if this div has<br> the exact correct breaking<br> points</div> 44 <div class="balance-first-line-spacing-30">This passes if this div<br> has the exact correct breaking points</div> 45 <div>test<img class="img1">test <img class="img2"> test</div> 46 </body> 47 </html>