| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../../resources/js-test.js"></script> | |
| 3 <style> | |
| 4 iframe { color: orange; } | |
| 5 .test { color: white; } | |
| 6 #one { color: yellow; } | |
| 7 #two { color: blue; } | |
| 8 </style> | |
| 9 <iframe id="iframe" seamless src="resources/css-cascade-child.html"></iframe> | |
| 10 <script> | |
| 11 debug("Test that seamless iframes inherit styles from their parent iframe, and d
ymanically update when their parent document's styles update.") | |
| 12 window.onload = function () { | |
| 13 window.iframe = document.getElementById("iframe"); | |
| 14 window.one = iframe.contentDocument.getElementById("one"); | |
| 15 window.two = iframe.contentDocument.getElementById("two"); | |
| 16 window.three = iframe.contentDocument.getElementById("three"); | |
| 17 | |
| 18 // Spec: In a CSS-supporting user agent: the user agent must add all the sty
le | |
| 19 // sheets that apply to the iframe element to the cascade of the active docu
ment | |
| 20 // of the iframe element's nested browsing context, at the appropriate casca
de | |
| 21 // levels, before any style sheets specified by the document itself. | |
| 22 shouldBeEqualToString("window.getComputedStyle(one).color", "rgb(255, 255, 0
)"); // yellow, Specified directly by parent's selector. | |
| 23 shouldBeEqualToString("window.getComputedStyle(two).color", "rgb(128, 0, 128
)"); // purple, Selector in child overrides parent. | |
| 24 shouldBeEqualToString("window.getComputedStyle(three).color", "rgb(255, 255,
255)"); // white, div selector in parent. | |
| 25 | |
| 26 // Spec: In a CSS-supporting user agent: the user agent must, for the purpos
e of | |
| 27 // CSS property inheritance only, treat the root element of the active docum
ent | |
| 28 // of the iframe element's nested browsing context as being a child of the | |
| 29 // iframe element. (Thus inherited properties on the root element of the | |
| 30 // document in the iframe will inherit the computed values of those properti
es | |
| 31 // on the iframe element instead of taking their initial values.) | |
| 32 window.rootElement = iframe.contentDocument.documentElement; | |
| 33 shouldBeEqualToString("window.getComputedStyle(rootElement).color", "rgb(255
, 165, 0)"); // orange, inherited from parent iframe. | |
| 34 | |
| 35 // Inner styles should dynamically recalculate when the iframe's style chang
es. | |
| 36 window.iframe.style.color = "rgb(1, 2, 3)" | |
| 37 shouldBeEqualToString("window.getComputedStyle(rootElement).color", "rgb(1,
2, 3)"); // dynamically updated after parent iframe changed. | |
| 38 | |
| 39 // Similarly, changes/additions to the parent stylesheets should propgate to
the child frame: | |
| 40 var styleSheet = document.createElement("style"); | |
| 41 styleSheet.textContent = "#one { color: rgb(3, 2, 1); }"; | |
| 42 document.head.appendChild(styleSheet); | |
| 43 // #one's style is only specified by this parent, so adding a later sheet sh
ould override the color and update the child frame. | |
| 44 shouldBeEqualToString("window.getComputedStyle(one).color", "rgb(3, 2, 1)"); | |
| 45 | |
| 46 // Test that removing the seamless attribute recalculates the child's style. | |
| 47 window.iframe.removeAttribute("seamless"); | |
| 48 shouldBeEqualToString("window.getComputedStyle(one).color", "rgb(0, 0, 0)");
// black, default. | |
| 49 shouldBeEqualToString("window.getComputedStyle(two).color", "rgb(128, 0, 128
)"); // purple, selector in child. | |
| 50 shouldBeEqualToString("window.getComputedStyle(three).color", "rgb(0, 0, 0)"
); // black, default. | |
| 51 } | |
| 52 </script> | |
| OLD | NEW |