| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test: getComputedStyle</title> |
| <link rel="author" title="Bear Travis" href="mailto:betravis@adobe.com"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-1/#extensions-to-the-window-interface"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssstyledeclaration-interface"> |
| <link rel="help" href="http://www.w3.org/TR/cssom-1/#resolved-values"> |
| <meta name="flags" content="dom"> |
| <meta name="assert" content="getComputedStyle returns a readonly CSSStyleDeclaration with resolved values"> |
| <script src="/resources/testharness.js" type="text/javascript"></script> |
| <script src="/resources/testharnessreport.js" type="text/javascript"></script> |
| <style> |
| #outside { |
| width: 200px; |
| height: 200px; |
| } |
| #outside div { |
| font-size: 100px; |
| } |
| #inside { |
| width: 50%; |
| height: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <noscript>Test not run - javascript required.</noscript> |
| <div id="log"></div> |
| <div id="outside"><div id="inside"></div></div> |
| <script type="text/javascript"> |
| var outer = document.getElementById("outside"); |
| var inner = document.getElementById("inside"); |
| var innerStyle; |
| |
| // do not allow modifications to a computed CSSStyleDeclaration |
| test(function() { |
| innerStyle = window.getComputedStyle(inner); |
| assert_throws_dom( "NO_MODIFICATION_ALLOWED_ERR", |
| function() { innerStyle.cssText = "color: blue;"; }, |
| "do not allow setting cssText on a readonly CSSStyleDeclaration"); |
| assert_throws_dom( "NO_MODIFICATION_ALLOWED_ERR", |
| function() { innerStyle.setProperty("color", "blue"); }, |
| "do not allow calling setProperty on a readonly CSSStyleDeclaration"); |
| assert_throws_dom( "NO_MODIFICATION_ALLOWED_ERR", |
| function() { innerStyle.color = "blue"; }, |
| "do not allow setting a property on a readonly CSSStyleDeclaration"); |
| }, "read_only"); |
| |
| // Directly set properties are resolved |
| test(function() { |
| assert_equals(innerStyle.getPropertyValue("height"), "100px"); |
| }, "property_values"); |
| |
| // Inherited properties are resolved |
| test(function() { |
| assert_equals(innerStyle.getPropertyValue("font-size"), "100px"); |
| }, "inherited_property_values"); |
| |
| // Relative properties are resolved |
| test(function() { |
| assert_equals(innerStyle.getPropertyValue("width"), "100px"); |
| }, "relative_property_values"); |
| </script> |
| </body> |
| </html> |
