wrap-flow-001.html (1931B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Exclusions Test: wrap-flow property set to clear</title> 5 <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"> 7 <meta name="flags" content="ahem dom"> 8 <meta name="assert" content="The text should flow above and below the exclusion, and not on either side"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="resources/helper.js"></script> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style> 14 * { 15 margin: 0px; 16 padding: 0px; 17 } 18 .exclusion { 19 wrap-flow: clear; 20 position: absolute; 21 top: 40px; 22 left: 50px; 23 width: 110px; 24 height: 110px; 25 background: blue; 26 } 27 #content { 28 width: 400px; 29 height: 200px; 30 line-height: 12px; 31 font: 12px Ahem; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="exclusion"></div> 37 38 <div id="content"><span id="linesAbove">A<BR>B<BR>C<BR></span><span id="linesBelow">D<BR>E</span> 39 </div> 40 41 <div id="log"></div> 42 43 <script type="text/javascript"> 44 setup(() => { 45 assert_implements(CSS.supports('wrap-flow', 'clear'), "'wrap-flow: clear'"); 46 }, {explicit_done: true}); 47 document.fonts.ready.then(() => { 48 test(function() {assert_equals(checkLinePos("linesBelow",150,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly"); 49 done(); 50 }); 51 </script> 52 </body> 53 </html>