cssstyledeclaration-mutability.html (2264B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSSOM: CSSStyleDeclaration is mutable and immutable in various settings</title> 5 <link rel="author" title="Paul Irish" href="mailto:paul.irish@gmail.com"> 6 <link rel="reviewer" title="Ms2ger" href="mailto:ms2ger@gmail.com"> <!-- 2012-06-17 --> 7 <link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface"> 8 9 <meta name="flags" content="dom"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 </head> 14 15 <body> 16 <div id="log"></div> 17 <div id="box"></box> 18 <div id="box2"></box> 19 <style id="teststyles"> 20 #box2 { width: 15px; } 21 </style> 22 <script> 23 24 test(function(){ 25 var elem = document.getElementById('box'); 26 27 elem.style.width = '10px'; 28 assert_equals(elem.style.width, '10px', 'setting via style property'); 29 elem.style.width = ''; 30 31 elem.style.cssText = 'width: 10px'; 32 assert_equals(elem.style.width, '10px', 'setting via cssText'); 33 elem.style.width = ''; 34 35 }, 'HTMLElement\'s CSSStyleDeclaration is mutable') 36 37 38 test(function(){ 39 var elem = document.getElementById('box'); 40 var style = getComputedStyle(elem); 41 42 assert_throws_dom('NO_MODIFICATION_ALLOWED_ERR', function(){ 43 style.width = '10px'; 44 }); 45 46 }, 'getComputedStyle\'s CSSStyleDeclaration is not mutable') 47 48 49 test(function(){ 50 51 var style = document.getElementById('teststyles').sheet.cssRules[0].style; 52 53 assert_equals(style.width, '15px', 'width value is correct'); 54 55 style.width = '25px'; 56 57 assert_equals(style.width, '25px', 'width value is mutable'); 58 59 var gCSstyle = getComputedStyle(document.getElementById('box2')); 60 61 assert_equals(gCSstyle.width, '25px', 'styleSheet change is live and accesible via getComputedStyle'); 62 63 }, 'StyleSheet\'s CSSStyleDeclaration is mutable'); 64 65 66 </script> 67 68 </body> 69 </html>