shape-margin-005.html (2503B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Shape Margin - inherit</title> 5 <link rel="author" title="Adobe" href="http://html.adobe.com/"> 6 <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"> 8 <meta name="assert" content="The shape-margin value is not inherited and can be assigned the 'inherit' value."> 9 <meta name="flags" content="ahem dom"> 10 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="support/parsing-utils.js"></script> 14 </head> 15 <body> 16 <div id="log"></div> 17 <script type="text/javascript"> 18 19 function setUpTest(parentValue, childValue) { 20 var outer = document.createElement("div"); 21 var inner = document.createElement("div"); 22 outer.appendChild(inner); 23 24 outer.style.setProperty("shape-outside", "content-box"); 25 outer.style.setProperty("shape-margin", parentValue); 26 inner.style.setProperty("shape-outside", "circle()"); 27 inner.style.setProperty("shape-margin", childValue); 28 29 document.body.appendChild(outer); 30 31 var inline = inner.style.getPropertyValue("shape-margin"); 32 var style = getComputedStyle(inner); 33 var computed = style.getPropertyValue("shape-margin"); 34 document.body.removeChild(outer); 35 36 return [inline, computed]; 37 } 38 39 test(function() { 40 var results = setUpTest("10px", "inherit"); 41 assert_equals(results[0], "inherit"); 42 assert_equals(results[1], "10px"); 43 }, "shape-margin can be assigned 'inherit' value"); 44 45 test(function() { 46 var results = setUpTest("5px", null); 47 assert_equals(results[0], ""); 48 assert_equals(results[1], "0px"); 49 }, "shape-margin is not inherited and defaults to 0px"); 50 51 test(function() { 52 var results = setUpTest("15px", "10px"); 53 assert_equals(results[0], "10px"); 54 assert_equals(results[1], "10px"); 55 }, "shape-margin is not inherited"); 56 57 </script> 58 </body> 59 </html>