dom/tests/mochitest/webcomponents/test_shadowroot_style.html@b8a032363ba2 (annotated)
dom/tests/mochitest/webcomponents/test_shadowroot_style.html
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
| michael@0 | 1 | <!DOCTYPE HTML> |
| michael@0 | 2 | <html> |
| michael@0 | 3 | <!-- |
| michael@0 | 4 | https://bugzilla.mozilla.org/show_bug.cgi?id=806506 |
| michael@0 | 5 | --> |
| michael@0 | 6 | <head> |
| michael@0 | 7 | <title>Test for ShadowRoot styling</title> |
| michael@0 | 8 | <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
| michael@0 | 9 | <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
| michael@0 | 10 | </head> |
| michael@0 | 11 | <body> |
| michael@0 | 12 | <div class="tall" id="bodydiv"></div> |
| michael@0 | 13 | <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> |
| michael@0 | 14 | <script> |
| michael@0 | 15 | // Create ShadowRoot. |
| michael@0 | 16 | var elem = document.createElement("div"); |
| michael@0 | 17 | var root = elem.createShadowRoot(); |
| michael@0 | 18 | |
| michael@0 | 19 | // A style element that will be appended into the ShadowRoot. |
| michael@0 | 20 | var shadowStyle = document.createElement("style"); |
| michael@0 | 21 | shadowStyle.innerHTML = ".tall { height: 100px; } .fat { padding-left: inherit; }"; |
| michael@0 | 22 | |
| michael@0 | 23 | root.innerHTML = '<div id="divtostyle" class="tall fat"></div>'; |
| michael@0 | 24 | var divToStyle = root.getElementById("divtostyle"); |
| michael@0 | 25 | |
| michael@0 | 26 | // Make sure styleSheet counts are correct after appending a style to the ShadowRoot. |
| michael@0 | 27 | is(document.styleSheets.length, 1, "There should only be one style sheet on the document from the test style sheet."); |
| michael@0 | 28 | is(root.styleSheets.length, 0, "The ShadowRoot should have no style sheets."); |
| michael@0 | 29 | root.appendChild(shadowStyle); |
| michael@0 | 30 | is(document.styleSheets.length, 1, "Styles in the ShadowRoot element should not be accessible from the document."); |
| michael@0 | 31 | is(root.styleSheets.length, 1, "ShadowRoot should have one style sheet from the appened style."); |
| michael@0 | 32 | is(root.styleSheets[0].ownerNode, shadowStyle, "First style in ShadowRoot should match the style that was just appended."); |
| michael@0 | 33 | |
| michael@0 | 34 | var dummyStyle = document.createElement("style"); |
| michael@0 | 35 | root.appendChild(dummyStyle); |
| michael@0 | 36 | is(root.styleSheets.length, 2, "ShadowRoot should have an additional style from appending dummyStyle."); |
| michael@0 | 37 | is(root.styleSheets[1].ownerNode, dummyStyle, "Second style in ShadowRoot should be the dummyStyle."); |
| michael@0 | 38 | root.removeChild(dummyStyle); |
| michael@0 | 39 | is(root.styleSheets.length, 1, "Removing dummyStyle should remove it from the ShadowRoot style sheets."); |
| michael@0 | 40 | is(root.styleSheets[0].ownerNode, shadowStyle, "The style sheet remaining in the ShadowRoot should be shadowStyle."); |
| michael@0 | 41 | |
| michael@0 | 42 | // Make sure that elements outside of the ShadowRoot are not affected by the ShadowRoot style. |
| michael@0 | 43 | isnot(getComputedStyle(document.getElementById("bodydiv"), null).getPropertyValue("height"), "100px", "Style sheets in ShadowRoot should not apply to elements no in the ShadowRoot."); |
| michael@0 | 44 | |
| michael@0 | 45 | // Make sure that elements in the ShadowRoot are styled according to the ShadowRoot style. |
| michael@0 | 46 | is(getComputedStyle(divToStyle, null).getPropertyValue("height"), "100px", "ShadowRoot style sheets should apply to elements in ShadowRoot."); |
| michael@0 | 47 | |
| michael@0 | 48 | // Tests for applyAuthorStyles. |
| michael@0 | 49 | var authorStyle = document.createElement("style"); |
| michael@0 | 50 | authorStyle.innerHTML = ".fat { padding-right: 20px; padding-left: 30px; }"; |
| michael@0 | 51 | document.body.appendChild(authorStyle); |
| michael@0 | 52 | |
| michael@0 | 53 | is(root.applyAuthorStyles, false, "applyAuthorStyles defaults to false."); |
| michael@0 | 54 | isnot(getComputedStyle(divToStyle, null).getPropertyValue("padding-right"), "20px", "Author styles should not apply to ShadowRoot when ShadowRoot.applyAuthorStyles is false."); |
| michael@0 | 55 | root.applyAuthorStyles = true; |
| michael@0 | 56 | is(root.applyAuthorStyles, true, "applyAuthorStyles was set to true."); |
| michael@0 | 57 | is(getComputedStyle(divToStyle, null).getPropertyValue("padding-right"), "20px", "Author styles should apply to ShadowRoot when ShadowRoot.applyAuthorStyles is true."); |
| michael@0 | 58 | root.applyAuthorStyles = false; |
| michael@0 | 59 | is(root.applyAuthorStyles, false, "applyAuthorStyles was set to false."); |
| michael@0 | 60 | isnot(getComputedStyle(divToStyle, null).getPropertyValue("padding-right"), "20px", "Author styles should not apply to ShadowRoot when ShadowRoot.applyAuthorStyles is false."); |
| michael@0 | 61 | |
| michael@0 | 62 | // Test dynamic changes to style in ShadowRoot. |
| michael@0 | 63 | root.innerHTML = '<div id="divtostyle" class="dummy"></div>'; |
| michael@0 | 64 | divToStyle = root.getElementById("divtostyle"); |
| michael@0 | 65 | var dummyShadowStyle = document.createElement("style"); |
| michael@0 | 66 | dummyShadowStyle.innerHTML = ".dummy { height: 300px; }"; |
| michael@0 | 67 | root.appendChild(dummyShadowStyle); |
| michael@0 | 68 | is(getComputedStyle(divToStyle, null).getPropertyValue("height"), "300px", "Dummy element in ShadowRoot should be styled by style in ShadowRoot."); |
| michael@0 | 69 | dummyShadowStyle.innerHTML = ".dummy { height: 200px; }"; |
| michael@0 | 70 | is(getComputedStyle(divToStyle, null).getPropertyValue("height"), "200px", "Dynamic changes to styles in ShadowRoot should change style of affected elements."); |
| michael@0 | 71 | |
| michael@0 | 72 | // Test id selector in ShadowRoot style. |
| michael@0 | 73 | root.innerHTML = '<style>#divtostyle { padding-top: 10px; }</style><div id="divtostyle"></div>'; |
| michael@0 | 74 | divToStyle = root.getElementById("divtostyle"); |
| michael@0 | 75 | is(getComputedStyle(divToStyle, null).getPropertyValue("padding-top"), "10px", "ID selector in style selector should match element."); |
| michael@0 | 76 | |
| michael@0 | 77 | </script> |
| michael@0 | 78 | </body> |
| michael@0 | 79 | </html> |
| michael@0 | 80 |
