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