clear-on-replaced-element.html (1213B)
1 <!DOCTYPE html> 2 <title>Clear on block-level replaced element</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> 5 <link rel="help" href="https://www.w3.org/TR/CSS22/conform.html#replaced-element"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-1500"> 8 <style> 9 #wrapper { 10 width: 90px; 11 border: 5px solid green; 12 background-image: linear-gradient( 13 to bottom, 14 red 30px, green 30px, 15 green 50px, red 50px, 16 red 60px, green 60px, 17 green 70px, red 70px, 18 red 80px, green 80px 19 ) 20 } 21 #wrapper > * { 22 display: block; 23 width: 100%; 24 background: green content-box; 25 } 26 </style> 27 28 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 29 <div id="wrapper"> 30 <div style="float: left; height: 20px"></div> 31 <canvas style="clear: both; height: 10px; margin: 10px 0"></canvas> 32 <canvas style="float: left; height: 10px; margin: 10px 0"></canvas> 33 <div style="clear: both; height: 10px; padding-bottom: 10px"></div> 34 </div>