<!DOCTYPE HTML> <html> <head> <title>CSS Exclusions Test: wrap-flow property set to clear</title> <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> <meta name="flags" content="ahem dom"> <meta name="assert" content="The text should flow above and below the exclusion, and not on either side"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="resources/helper.js"></script> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <style> * { margin: 0px; padding: 0px; } .exclusion { wrap-flow: clear; position: absolute; top: 40px; left: 50px; width: 110px; height: 110px; background: blue; } #content { width: 400px; height: 200px; line-height: 12px; font: 12px Ahem; } </style> </head> <body> <div class="exclusion"></div> <div id="content"><span id="linesAbove">A<BR>B<BR>C<BR></span><span id="linesBelow">D<BR>E</span> </div> <div id="log"></div> <script type="text/javascript"> setup({ explicit_done: true }); document.fonts.ready.then(() => { test(function() {assert_equals(checkLinePos("linesBelow",150,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly"); done(); }); </script> </body> </html>