| <!DOCTYPE html> |
| <script src="../../js/resources/js-test-pre.js"></script> |
| <style> |
| iframe { color: orange; } |
| .test { color: white; } |
| #one { color: yellow; } |
| #two { color: blue; } |
| </style> |
| <iframe id="iframe" seamless src="resources/css-cascade-child.html"></iframe> |
| <script> |
| debug("Test that seamless iframes inherit styles from their parent iframe, and dymanically update when their parent document's styles update.") |
| window.onload = function () { |
| window.iframe = document.getElementById("iframe"); |
| window.one = iframe.contentDocument.getElementById("one"); |
| window.two = iframe.contentDocument.getElementById("two"); |
| window.three = iframe.contentDocument.getElementById("three"); |
| |
| // Spec: In a CSS-supporting user agent: the user agent must add all the style |
| // sheets that apply to the iframe element to the cascade of the active document |
| // of the iframe element's nested browsing context, at the appropriate cascade |
| // levels, before any style sheets specified by the document itself. |
| shouldBeEqualToString("window.getComputedStyle(one).color", "rgb(255, 255, 0)"); // yellow, Specified directly by parent's selector. |
| shouldBeEqualToString("window.getComputedStyle(two).color", "rgb(128, 0, 128)"); // purple, Selector in child overrides parent. |
| shouldBeEqualToString("window.getComputedStyle(three).color", "rgb(255, 255, 255)"); // white, div selector in parent. |
| |
| // Spec: In a CSS-supporting user agent: the user agent must, for the purpose of |
| // CSS property inheritance only, treat the root element of the active document |
| // of the iframe element's nested browsing context as being a child of the |
| // iframe element. (Thus inherited properties on the root element of the |
| // document in the iframe will inherit the computed values of those properties |
| // on the iframe element instead of taking their initial values.) |
| window.rootElement = iframe.contentDocument.documentElement; |
| shouldBeEqualToString("window.getComputedStyle(rootElement).color", "rgb(255, 165, 0)"); // orange, inherited from parent iframe. |
| |
| // Inner styles should dynamically recalculate when the iframe's style changes. |
| window.iframe.style.color = "rgb(1, 2, 3)" |
| shouldBeEqualToString("window.getComputedStyle(rootElement).color", "rgb(1, 2, 3)"); // dynamically updated after parent iframe changed. |
| |
| // Similarly, changes/additions to the parent stylesheets should propgate to the child frame: |
| var styleSheet = document.createElement("style"); |
| styleSheet.textContent = "#one { color: rgb(3, 2, 1); }"; |
| document.head.appendChild(styleSheet); |
| // #one's style is only specified by this parent, so adding a later sheet should override the color and update the child frame. |
| shouldBeEqualToString("window.getComputedStyle(one).color", "rgb(3, 2, 1)"); |
| |
| // Test that removing the seamless attribute recalculates the child's style. |
| window.iframe.removeAttribute("seamless"); |
| shouldBeEqualToString("window.getComputedStyle(one).color", "rgb(0, 0, 0)"); // black, default. |
| shouldBeEqualToString("window.getComputedStyle(two).color", "rgb(128, 0, 128)"); // purple, selector in child. |
| shouldBeEqualToString("window.getComputedStyle(three).color", "rgb(0, 0, 0)"); // black, default. |
| } |
| </script> |
