<!doctype html> <html lang=en> <meta charset=utf-8> <title>CSS-contain test: layout containment and forced breaks</title> <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> <meta name=flags content=""> <meta name=assert content="layout containment allows forced breaks."> <link rel="match" href="reference/contain-style-breaks-004-ref.html"> <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout"> <link rel=help href="https://drafts.csswg.org/css-break-3/#forced-break"> <style> article { columns: 2 1ch; column-gap: 0; float: left; font-family: monospace; margin-right: 3em; line-height: 1; height: 4em; column-fill: auto; } div > div:last-of-type { break-before: column; } #test > div { contain: layout; } </style> <p>Test passes if there are two identical blocks “A” letters below. <article id=ref> <div> <div>A<br>A</div> <div>A<br>A</div> </div> </article> <article id=test> <div> <div>A<br>A</div> <div>A<br>A</div> </div> </article> <!-- Having two blocks to avoid making browsers that don't support forced break at all fail. Since containment is supposed to have no effect, failing such browsers would not be useful. -->