css-style-declaration-modifications.html (3066B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: CSSStyleDeclaration Interface</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/#the-cssstyledeclaration-interface"> 7 <meta name="flags" content="dom"> 8 <meta name="assert" content="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 <style id="styleElement"> 12 #test { color: green; } 13 </style> 14 </head> 15 <body> 16 <div id="log"></div> 17 <div id="test"></div> 18 <script type="text/javascript"> 19 var declaration; 20 setup(function() { 21 var styleElement = document.getElementById("styleElement"); 22 declaration = styleElement.sheet.cssRules.item(0).style; 23 }); 24 25 test(function() { 26 assert_equals(declaration.cssText, "color: green;"); 27 assert_equals(declaration.getPropertyValue("color"), "green"); 28 }, "Reading CSSStyleDeclaration initialized from a style element"); 29 30 test(function() { 31 declaration.cssText = "margin-left:10px; padding-left:10px"; 32 assert_equals(declaration.cssText, "margin-left: 10px; padding-left: 10px;"); 33 assert_equals(declaration.length, 2); 34 assert_equals(declaration.item(0), "margin-left"); 35 assert_equals(declaration.item(1), "padding-left"); 36 assert_equals(declaration.getPropertyValue("margin-left"), "10px"); 37 assert_equals(declaration.getPropertyValue("padding-left"), "10px"); 38 39 var computedStyle = window.getComputedStyle(document.getElementById("test")); 40 assert_equals(computedStyle.getPropertyValue("margin-left"), "10px"); 41 assert_equals(computedStyle.getPropertyValue("padding-left"), "10px"); 42 }, "Setting CSSStyleDeclaration#cssText"); 43 44 test(function() { 45 while (declaration.length > 0) { 46 declaration.removeProperty(declaration.item(0)); 47 } 48 declaration.setProperty("margin-left", "15px"); 49 declaration.setProperty("padding-left", "15px"); 50 51 52 assert_equals(declaration.length, 2); 53 assert_equals(declaration.item(0), "margin-left"); 54 assert_equals(declaration.item(1), "padding-left"); 55 assert_equals(declaration.getPropertyValue("margin-left"), "15px"); 56 assert_equals(declaration.getPropertyValue("padding-left"), "15px"); 57 58 var computedStyle = window.getComputedStyle(document.getElementById("test")); 59 assert_equals(computedStyle.getPropertyValue("margin-left"), "15px"); 60 assert_equals(computedStyle.getPropertyValue("padding-left"), "15px"); 61 62 }, "Calling CSSStyleDeclaration#setProperty"); 63 64 test(function() { 65 declaration.setProperty("background-color", "red", "ImPoRtAnt"); 66 assert_equals(declaration.getPropertyPriority("background-color"), "important"); 67 }, "setProperty priority should be case-insensitive"); 68 69 </script> 70 </body> 71 </html>