Google Git
Sign in
chromium / external / w3c / web-platform-tests / 55a44121247a4c94e9af8e08640617312cce625d / . / cssom-1 / css-style-declaration-modifications.html
blob: 5841943241f00bae4b3a92e488fbd52ce4fc6963 [file] [log] [blame]
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]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/#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>
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]14 </head>
15 <body>
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]16 <div id="log"></div>
17 <div id="test"></div>
18 <script type="text/javascript">
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]19 var declaration;
20 setup(function() {
21 var styleElement = document.getElementById("styleElement");
22 declaration = styleElement.sheet.cssRules.item(0).style;
23 });
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]24
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]25 test(function() {
26 assert_equals(declaration.cssText, "color: green;");
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]27 assert_equals(declaration.getPropertyValue("color"), "green");
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]28 }, "Reading CSSStyleDeclaration initialized from a style element");
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]29
30 test(function() {
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]31 declaration.cssText = "margin-left:10px; padding-left:10px";
32 assert_equals(declaration.cssText, "margin-left: 10px; padding-left: 10px;");
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]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");
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]38
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]39 var computedStyle = window.getComputedStyle(document.getElementById("test"));
40 assert_equals(computedStyle.getPropertyValue("margin-left"), "10px");
41 assert_equals(computedStyle.getPropertyValue("padding-left"), "10px");
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]42 }, "Setting CSSStyleDeclaration#cssText");
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]43
44 test(function() {
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]45 while (declaration.length > 0) {
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]46 declaration.removeProperty(declaration.item(0));
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]47 }
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]48 declaration.setProperty("margin-left", "15px");
49 declaration.setProperty("padding-left", "15px");
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]50
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]51 assert_equals(declaration.length, 2);
52 assert_equals(declaration.item(0), "margin-left");
53 assert_equals(declaration.item(1), "padding-left");
54 assert_equals(declaration.getPropertyValue("margin-left"), "15px");
55 assert_equals(declaration.getPropertyValue("padding-left"), "15px");
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]56
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]57 var computedStyle = window.getComputedStyle(document.getElementById("test"));
58 assert_equals(computedStyle.getPropertyValue("margin-left"), "15px");
59 assert_equals(computedStyle.getPropertyValue("padding-left"), "15px");
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]60 }, "Calling CSSStyleDeclaration#setProperty");
Bear Travisd71d0f02012-06-16 22:45:30[diff] [blame]61 </script>
62 </body>
Ms2ger6b220692015-11-29 12:21:57[diff] [blame]63</html>