| <!DOCTYPE html> |
| <!-- TODO(rakina): move to WPT once spec is finalized --> |
| <script src = '../../resources/testharness.js'></script> |
| <script src = '../../resources/testharnessreport.js'></script> |
| <script> |
| 'use strict'; |
| const redStyleTexts = [".red { color: red; }", ".red + span + span { color: red; }"]; |
| const yellowStyleText = ".yellow { color: yellow; }"; |
| const greenStyleText = ".green { color: green; }"; |
| const blueStyleTexts = [".blue { color: blue; }", ".blue + span + span { color: blue; }"]; |
| |
| test(() => { |
| // Style sheets can be created |
| const redStyleSheet = new CSSStyleSheet(redStyleTexts[0] + redStyleTexts[1], {media: "screen, print"}); |
| const yellowStyleSheet = new CSSStyleSheet(yellowStyleText, {title: "Yellow", disabled: false}); |
| const greenStyleSheet = new CSSStyleSheet(greenStyleText); |
| const blueStyleSheet = new CSSStyleSheet(blueStyleTexts[0] + blueStyleTexts[1], {title: "Blue", disabled: true}); |
| |
| assert_equals(redStyleSheet.title, ""); |
| assert_equals(yellowStyleSheet.title, "Yellow"); |
| assert_equals(greenStyleSheet.title, ""); |
| assert_equals(blueStyleSheet.title, "Blue"); |
| |
| assert_equals(redStyleSheet.ownerNode, null); |
| assert_equals(yellowStyleSheet.ownerNode, null); |
| assert_equals(greenStyleSheet.ownerNode, null); |
| assert_equals(blueStyleSheet.ownerNode, null); |
| |
| assert_equals(redStyleSheet.ownerRule, null); |
| assert_equals(yellowStyleSheet.ownerRule, null); |
| assert_equals(greenStyleSheet.ownerRule, null); |
| assert_equals(blueStyleSheet.ownerRule, null); |
| |
| assert_equals(redStyleSheet.media.length, 2); |
| assert_equals(redStyleSheet.media.item(0), "screen"); |
| assert_equals(redStyleSheet.media.item(1), "print"); |
| assert_equals(yellowStyleSheet.media.length, 0); |
| assert_equals(greenStyleSheet.media.length, 0); |
| assert_equals(blueStyleSheet.media.length, 0); |
| |
| assert_false(redStyleSheet.disabled); |
| assert_false(yellowStyleSheet.disabled); |
| assert_false(greenStyleSheet.disabled); |
| assert_true(blueStyleSheet.disabled); |
| |
| assert_equals(redStyleSheet.cssRules.length, 2); |
| assert_equals(yellowStyleSheet.cssRules.length, 1); |
| assert_equals(greenStyleSheet.cssRules.length, 1); |
| assert_equals(blueStyleSheet.cssRules.length, 2); |
| |
| assert_equals(redStyleSheet.cssRules[0].cssText, redStyleTexts[0]); |
| assert_equals(redStyleSheet.cssRules[1].cssText, redStyleTexts[1]); |
| assert_equals(yellowStyleSheet.cssRules[0].cssText, yellowStyleText); |
| assert_equals(greenStyleSheet.cssRules[0].cssText, greenStyleText); |
| assert_equals(blueStyleSheet.cssRules[0].cssText, blueStyleTexts[0]); |
| assert_equals(blueStyleSheet.cssRules[1].cssText, blueStyleTexts[1]); |
| |
| // TODO(rakina): add test for alternate flag once constructed style can be applied to node |
| }, 'Style sheets can be constructed using script'); |
| </script> |
| |
