inline-style-001.html (3663B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: Inline CSSStyleDeclaration</title> 5 <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/cssom-1/#elementcssinlinestyle"> 7 <meta name="flags" content="dom"> 8 <meta name="assert" content="Inline CSSStyleDeclaration is properly initialized and can be modified through its interface"> 9 <script src="/resources/testharness.js" type="text/javascript"></script> 10 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 11 </head> 12 <body> 13 <noscript>Test not run - javascript required.</noscript> 14 <div id="log"></div> 15 <div id="test" style="margin-left: 5px;"></div> 16 <script type="text/javascript"> 17 // Can access CSSStyleDeclaration through style property 18 test(function() { 19 var test = document.getElementById("test"); 20 assert_idl_attribute(test, "style"); 21 declaration = test.style; 22 }, "CSSStyleDeclaration_accessible"); 23 24 // initial property values are correct 25 test(function() { 26 assert_equals(declaration.cssText, "margin-left: 5px;"); 27 assert_equals(declaration.getPropertyValue("margin-left"), "5px"); 28 }, "read"); 29 30 // setting cssText adds new properties 31 // setting cssText removes existing properties 32 // properties set through cssText are reflected in the computed style 33 test(function() { 34 declaration.cssText = "margin-left: 10px; padding-left: 10px;"; 35 assert_equals(declaration.cssText, "margin-left: 10px; padding-left: 10px;"); 36 assert_equals(declaration.length, 2); 37 assert_equals(declaration.item(0), "margin-left"); 38 assert_equals(declaration.item(1), "padding-left"); 39 assert_equals(declaration.getPropertyValue("margin-left"), "10px"); 40 assert_equals(declaration.getPropertyValue("padding-left"), "10px"); 41 42 var computedStyle = window.getComputedStyle(document.getElementById("test")); 43 assert_equals(computedStyle.getPropertyValue("margin-left"), "10px"); 44 assert_equals(computedStyle.getPropertyValue("padding-left"), "10px"); 45 }, "csstext_write"); 46 47 // setProperty adds new properties 48 // properties set through setProperty are reflected in the computed style 49 test(function() { 50 while(declaration.length > 0) 51 declaration.removeProperty(declaration.item(0)); 52 declaration.setProperty("margin-left", "15px"); 53 declaration.setProperty("padding-left", "15px"); 54 55 assert_equals(declaration.length, 2); 56 assert_equals(declaration.item(0), "margin-left"); 57 assert_equals(declaration.item(1), "padding-left"); 58 assert_equals(declaration.getPropertyValue("margin-left"), "15px"); 59 assert_equals(declaration.getPropertyValue("padding-left"), "15px"); 60 61 var computedStyle = window.getComputedStyle(document.getElementById("test")); 62 assert_equals(computedStyle.getPropertyValue("margin-left"), "15px"); 63 assert_equals(computedStyle.getPropertyValue("padding-left"), "15px"); 64 }, "property_write"); 65 66 // shorthand property is expanded 67 test(function() { 68 while(declaration.length > 0) 69 declaration.removeProperty(declaration.item(0)); 70 declaration.cssText = "margin: 20px"; 71 assert_equals(declaration.getPropertyValue("margin-top"), "20px"); 72 assert_equals(declaration.getPropertyValue("margin-right"), "20px"); 73 assert_equals(declaration.getPropertyValue("margin-bottom"), "20px"); 74 assert_equals(declaration.getPropertyValue("margin-left"), "20px"); 75 }, "shorthand_properties"); 76 </script> 77 </body> 78 </html>