contain-layout-breaks-001.html (1248B)
1 <!doctype html> 2 <html lang=en> 3 <meta charset=utf-8> 4 <title>CSS-contain test: layout containment and forced breaks</title> 5 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 6 <meta name=flags content=""> 7 <meta name=assert content="layout containment allows forced breaks."> 8 <link rel="match" href="reference/contain-style-breaks-004-ref.html"> 9 <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout"> 10 <link rel=help href="https://drafts.csswg.org/css-break-3/#forced-break"> 11 12 <style> 13 article { 14 columns: 2 1ch; 15 column-gap: 0; 16 float: left; 17 font-family: monospace; 18 margin-right: 3em; 19 line-height: 1; 20 height: 4em; 21 column-fill: auto; 22 } 23 div > div:last-of-type { 24 break-before: column; 25 } 26 #test > div { 27 contain: layout; 28 } 29 </style> 30 31 <p>Test passes if there are two identical blocks “A” letters below. 32 <article id=ref> 33 <div> 34 <div>A<br>A</div> 35 <div>A<br>A</div> 36 </div> 37 </article> 38 <article id=test> 39 <div> 40 <div>A<br>A</div> 41 <div>A<br>A</div> 42 </div> 43 </article> 44 <!-- 45 Having two blocks to avoid making browsers that don't support forced break at all fail. 46 Since containment is supposed to have no effect, failing such browsers would not be useful. 47 -->