| /* |
| * Copyright (c) 2014, the Dart project authors. Please see the AUTHORS file |
| * for details. All rights reserved. Use of this source code is governed by a |
| * BSD-style license that can be found in the LICENSE file. |
| */ |
| /** |
| * @description |
| */ |
| import "dart:html"; |
| import "../../testcommon.dart"; |
| import "../../../Utils/async_utils.dart"; |
| |
| main() { |
| var style = new DocumentFragment.html(''' |
| <style id="style1"> |
| div.div1 { color:red } |
| </style> |
| |
| <style id="style2"> |
| div.div3 {color: yellow } |
| </style> |
| |
| <style id="style3"> |
| div.div5 {color: purple } |
| </style> |
| ''', treeSanitizer: new NullTreeSanitizer()); |
| document.head.append(style); |
| |
| document.body.setInnerHtml(''' |
| This tests that insertRule, deleteRule, and the IE extensions addRule and removeRule update the style when rules are added and removed. It also tests that disabling a stylesheet updates the style. |
| <div class="div1">This is div1. This text should not be red because that rule has been removed.</div> |
| <div class="div2">This is div2. This text should be blue because a matching rule with that property has been added.</div> |
| <div class="div3">This is div3. This text should not be yellow because that rule has been removed.</div> |
| <div class="div4">This is div4. This text should be green because a matching rule with that property has been added.</div> |
| <div class="div5">This is div3. This text should not be purple because the stylesheet with that rule has been disabled.</div> |
| ''', treeSanitizer: new NullTreeSanitizer()); |
| |
| var s1 = document.getElementById('style1').sheet; |
| |
| // First append a style rule |
| s1.insertRule('div.div2 {color: blue}', s1.cssRules.length); |
| |
| // Next, remove the first style rule |
| s1.deleteRule(0); |
| |
| s1 = document.getElementById('style2').sheet; |
| |
| // Append a rule using the IE method |
| s1.addRule('div.div4', 'color: green'); |
| |
| // Remove a rule using the IE method; |
| s1.removeRule(0); |
| |
| var s3 = document.getElementById('style3').sheet; |
| s3.disabled = true; |
| |
| color (klass) => document.querySelector('.$klass').getComputedStyle().color; |
| |
| shouldBe(color('div1'), 'rgb(0, 0, 0)'); |
| shouldBe(color('div2'), 'rgb(0, 0, 255)'); |
| shouldBe(color('div3'), 'rgb(0, 0, 0)'); |
| shouldBe(color('div4'), 'rgb(0, 128, 0)'); |
| shouldBe(color('div5'), 'rgb(0, 0, 0)'); |
| } |