wrap-flow-004.html (3698B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Exclusions Test: wrap-flow property set to both</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="Text should flow on both the left and right side of the exclusion, in addition to above and below"> 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: both; 20 position: absolute; 21 top: 15px; 22 left: 70px; 23 width: 60px; 24 height: 25px; 25 background: blue; 26 } 27 #content { 28 width: 400px; 29 line-height: 12px; 30 font: 12px Ahem; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="exclusion"></div> 36 37 <div id="content"> 38 <span id="line1">ethical beer craft</span><BR> 39 <span id="line2Left">jean </span><span id="line2Right">vegan</span><BR> 40 <span id="line3Left">fund </span><span id="line3Right">selvage</span><BR> 41 <span id="line4Left">swags </span><span id="line4Right">unami</span><BR> 42 <span id="line5">american apparel squid</span> 43 </div> 44 45 <div id="log"></div> 46 47 <script type="text/javascript"> 48 setup(() => { 49 assert_implements(CSS.supports('wrap-flow', 'both'), "'wrap-flow: both'"); 50 }, {explicit_done: true}); 51 document.fonts.ready.then(() => { 52 /* Line 1 */ 53 test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly"); 54 test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify right of the 'line1' span is positioned correctly"); 55 /* Line 2 */ 56 test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly"); 57 test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly"); 58 /* Line 3 */ 59 test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly"); 60 test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly"); 61 /* Line 4 */ 62 test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly"); 63 test(function() {assert_equals(checkLinePos("line4Right",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly"); 64 /* Line 5 */ 65 test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly"); 66 test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify right of the 'line5' span is positioned correctly"); 67 done(); 68 }); 69 </script> 70 </body> 71 </html>