wrap-through-001.html (3642B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Exclusions Test: wrap-through property set to none</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-through-property"> 7 <meta name="flags" content="ahem dom"> 8 <meta name="assert" content="The wrapping context should not be inheritted from the parent node when wrap-through is set to none"> 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: 36px; 25 background: blue; 26 } 27 #content1, #content2 { 28 width: 400px; 29 line-height: 12px; 30 font: 12px Ahem; 31 } 32 #content2 { 33 wrap-through: none; 34 } 35 </style> 36 </head> 37 <body> 38 <div id="myContainer"> 39 <div class="exclusion"></div> 40 41 <div id="content1"> 42 <span id="line1">ethical beer craft</span><BR> 43 <span id="line2Left">jean </span><span id="line2Right">vegan</span><BR> 44 <span id="line3Left">fund </span><span id="line3Right">selvage</span><BR> 45 </div> 46 <div id="content2"> 47 <span id="line4Left">swags </span><span id="line4Right">unami</span> 48 </div> 49 </div> 50 51 <div id="log"></div> 52 53 <script type="text/javascript"> 54 setup(() => { 55 assert_implements(CSS.supports('wrap-through', 'none'), "'wrap-through: none'"); 56 assert_implements(CSS.supports('wrap-flow', 'both'), "'wrap-flow: both'"); 57 }, {explicit_done: true}); 58 document.fonts.ready.then(() => { 59 /* Line 1 */ 60 test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the first line above the exclusion"); 61 test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the first line above the exclusion"); 62 /* Line 2 */ 63 test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the second line on the left of the exclusion"); 64 test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the second line on the right of the exclusion"); 65 /* Line 3 */ 66 test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the third line on the left of the exclusion"); 67 test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the third line on the right of the exclusion"); 68 /* Line 4 */ 69 test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the fourth line with no wrapping-through = none"); 70 test(function() {assert_equals(checkLinePos("line4Right",72,"left"), true)}, "Verify left of the fourth line with wrapping-through = none"); 71 done(); 72 }); 73 </script> 74 </body> 75 </html>