<!DOCTYPE html >
<link rel="author" title ="Morten Stenshorne" href="mailto:mstensho@chromium.org" >
<link rel="help" href="https://www.w3.org/TR/css-break-3/#unforced-breaks " >
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats " >
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control " >
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" >
<p>Test passes if there is a filled green square and <strong >no red</strong >.</p>
<div style ="width:100px; height:100px; background:red;" >
<div style ="columns:4; column-fill:auto; column-gap:0; height:150px;" >
<div style ="height:100px; background:green;" ></div >
<div style ="float:right; break-inside:avoid; width:60%; height:400px;" >
<div style ="height:100px; background:green;" ></div >
<div style ="height:50px;" ></div >
<div style ="height:100px; background:green;" ></div >
<div style ="height:50px;" ></div >
<div style ="height:60px; background:green;" ></div >
</div >
<div style ="clear:left; float:left; width:40%; height:0;" >
<div style ="height:100px; background:green;" ></div >
<div style ="height:50px;" ></div >
<div style ="height:100px; background:green;" ></div >
<div style ="height:50px;" ></div >
<div style ="height:60px; background:green;" ></div >
</div >
<div style ="clear:both; display:flow-root; height:0;" >
<div style ="height:40px; margin-top:-40px; background:green;" ></div >
</div >
</div >
</div >
quality 98%
¤ Dauer der Verarbeitung: 0.4 Sekunden
¤
*© Formatika GbR, Deutschland