computed-style-001.html (2595B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: getComputedStyle</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/#extensions-to-the-window-interface"> 7 <link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface"> 8 <link rel="help" href="http://www.w3.org/TR/cssom-1/#resolved-values"> 9 <meta name="flags" content="dom"> 10 <meta name="assert" content="getComputedStyle returns a readonly CSSStyleDeclaration with resolved values"> 11 <script src="/resources/testharness.js" type="text/javascript"></script> 12 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 13 <style> 14 #outside { 15 width: 200px; 16 height: 200px; 17 } 18 #outside div { 19 font-size: 100px; 20 } 21 #inside { 22 width: 50%; 23 height: 100px; 24 } 25 </style> 26 </head> 27 <body> 28 <noscript>Test not run - javascript required.</noscript> 29 <div id="log"></div> 30 <div id="outside"><div id="inside"></div></div> 31 <script type="text/javascript"> 32 var outer = document.getElementById("outside"); 33 var inner = document.getElementById("inside"); 34 var innerStyle; 35 36 // do not allow modifications to a computed CSSStyleDeclaration 37 test(function() { 38 innerStyle = window.getComputedStyle(inner); 39 assert_throws_dom( "NO_MODIFICATION_ALLOWED_ERR", 40 function() { innerStyle.cssText = "color: blue;"; }, 41 "do not allow setting cssText on a readonly CSSStyleDeclaration"); 42 assert_throws_dom( "NO_MODIFICATION_ALLOWED_ERR", 43 function() { innerStyle.setProperty("color", "blue"); }, 44 "do not allow calling setProperty on a readonly CSSStyleDeclaration"); 45 assert_throws_dom( "NO_MODIFICATION_ALLOWED_ERR", 46 function() { innerStyle.color = "blue"; }, 47 "do not allow setting a property on a readonly CSSStyleDeclaration"); 48 }, "read_only"); 49 50 // Directly set properties are resolved 51 test(function() { 52 assert_equals(innerStyle.getPropertyValue("height"), "100px"); 53 }, "property_values"); 54 55 // Inherited properties are resolved 56 test(function() { 57 assert_equals(innerStyle.getPropertyValue("font-size"), "100px"); 58 }, "inherited_property_values"); 59 60 // Relative properties are resolved 61 test(function() { 62 assert_equals(innerStyle.getPropertyValue("width"), "100px"); 63 }, "relative_property_values"); 64 </script> 65 </body> 66 </html>