text-wrap-balance-004-ref.html (1667B)
1 <!DOCTYPE html> 2 <html lang="en" > 3 <meta charset="utf-8"> 4 <title>CSS test reference</title> 5 <link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'> 6 7 <style> 8 section { 9 width: 50ch; 10 font-family: monospace; 11 } 12 .test, .ref { 13 text-wrap: balance; 14 } 15 .test { color: blue; } 16 .ref { color: orange; } 17 .mis { color: magenta; } 18 19 </style> 20 21 <p>This test passes if the line breaks in the blue text and the orange text occur at the same points, unless they are identical to the magenta text. 22 23 <section class=test> 24 <div> 25 Lorem ipsum dolor sit amet, 26 consectetur adipiscing elit, 27 sed do eiusmod tempor incididunt 28 ut labore et dolore magna aliqua. 29 Ut enim ad minim veniam, 30 quis nostrud exercitation ullamco laboris nisi 31 ut aliquip ex ea commodo consequat. 32 </div> 33 <div> 34 Duis aute irure dolor in reprehenderit 35 in voluptate velit 36 esse cillum dolore eu fugiat nulla pariatur. 37 </div> 38 </section> 39 40 <section class=ref> 41 <div> 42 Lorem ipsum dolor sit amet, 43 consectetur adipiscing elit, 44 sed do eiusmod tempor incididunt 45 ut labore et dolore magna aliqua. 46 Ut enim ad minim veniam, 47 quis nostrud exercitation ullamco laboris nisi 48 ut aliquip ex ea commodo consequat. 49 </div> 50 <div> 51 Duis aute irure dolor in reprehenderit 52 in voluptate velit 53 esse cillum dolore eu fugiat nulla pariatur. 54 </div> 55 </section> 56 57 <section class=mis> 58 Lorem ipsum dolor sit amet, 59 consectetur adipiscing elit, 60 sed do eiusmod tempor incididunt 61 ut labore et dolore magna aliqua. 62 Ut enim ad minim veniam, 63 quis nostrud exercitation ullamco laboris nisi 64 ut aliquip ex ea commodo consequat. 65 <br> 66 Duis aute irure dolor in reprehenderit 67 in voluptate velit 68 esse cillum dolore eu fugiat nulla pariatur. 69 </section>