70 lines
1.9 KiB
HTML
70 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<meta charset="utf-8">
|
|
<title>CSS test: balancing and forced breaks</title>
|
|
<link rel='author' title='Florian Rivoal' href='https://florian.rivoal.net/'>
|
|
<link rel='help' href='https://drafts.csswg.org/css-text-4/#text-wrap-style'>
|
|
<meta name="assert" content="Groups of lines separated by a forced line break are processed separately.">
|
|
<link rel="match" href="reference/text-wrap-balance-004-ref.html">
|
|
<link rel="mismatch" href="reference/text-wrap-balance-004-misref.html">
|
|
|
|
<style>
|
|
section {
|
|
width: 50ch;
|
|
font-family: monospace;
|
|
}
|
|
.test, .ref {
|
|
text-wrap: balance;
|
|
}
|
|
.test { color: blue; }
|
|
.ref { color: orange; }
|
|
.mis { color: magenta; }
|
|
|
|
</style>
|
|
|
|
<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.
|
|
|
|
<section class=test>
|
|
Lorem ipsum dolor sit amet,
|
|
consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt
|
|
ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi
|
|
ut aliquip ex ea commodo consequat.
|
|
<br>
|
|
Duis aute irure dolor in reprehenderit
|
|
in voluptate velit
|
|
esse cillum dolore eu fugiat nulla pariatur.
|
|
</section>
|
|
|
|
<section class=ref>
|
|
<div>
|
|
Lorem ipsum dolor sit amet,
|
|
consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt
|
|
ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi
|
|
ut aliquip ex ea commodo consequat.
|
|
</div>
|
|
<div>
|
|
Duis aute irure dolor in reprehenderit
|
|
in voluptate velit
|
|
esse cillum dolore eu fugiat nulla pariatur.
|
|
</div>
|
|
</section>
|
|
|
|
<section class=mis>
|
|
Lorem ipsum dolor sit amet,
|
|
consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt
|
|
ut labore et dolore magna aliqua.
|
|
Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi
|
|
ut aliquip ex ea commodo consequat.
|
|
<br>
|
|
Duis aute irure dolor in reprehenderit
|
|
in voluptate velit
|
|
esse cillum dolore eu fugiat nulla pariatur.
|
|
</section>
|