text-wrap-balance-word-spacing-001.html (1758B)
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="match" href="reference/text-wrap-balance-word-spacing-001-ref.html"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> 11 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 12 <style> 13 body { 14 font-family: "Ahem"; 15 font-size: 12px; 16 width: 500px; 17 } 18 .spacing-10-balance { 19 word-spacing: 10px; 20 text-wrap-style: balance; 21 } 22 .spacing-30-balance { 23 word-spacing: 30px; 24 text-wrap-style: balance; 25 } 26 .spacing-30 { 27 word-spacing: 30px; 28 } 29 .balance-first-line-spacing-30 { 30 text-wrap-style: balance; 31 } 32 .balance-first-line-spacing-30::first-line { 33 word-spacing: 30px; 34 } 35 .img1 { 36 background-color: green; 37 width: 20px; 38 height: 10px; 39 } 40 </style> 41 </head> 42 <body> 43 <div class="spacing-10-balance">This passes if this div is one line </div> 44 <div class="spacing-30-balance">This passes if this div has the exact correct breaking points</div> 45 <div class="spacing-30">This passes if this div has the exact correct breaking points</div> 46 <div class="balance-first-line-spacing-30">This passes if this div has the exact correct breaking points</div> 47 <div class="spacing-30-balance">test<img class="img1">test <img class="img1"> test</div> 48 </body> 49 </html>