| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| iframe { width: 10px; height: 100px } |
| </style> |
| <iframe id="frame" src=""></iframe> |
| <script> |
| var tParser = async_test("Check that @media inside @supports respond to width changes."); |
| var tCSSOM = async_test("Check that CSSOM-inserted @media inside @supports respond to width changes."); |
| |
| onload = () => { |
| frame.contentDocument.body.innerHTML = |
| "<style>@supports (color:red) { @media (min-width: 50px) { p { color:green } } }</style>" |
| + "<style>@supports (color:red) {}</style>" |
| + "<p>Should be green and italic.</p>"; |
| |
| frame.contentDocument.styleSheets[1].cssRules[0].insertRule("@media (min-width: 150px) { p { font-style: italic } }", 0); |
| |
| var frameP = frame.contentDocument.querySelector("p"); |
| var frameWindow = frame.contentDocument.defaultView; |
| |
| tParser.step(() => assert_equals(frameWindow.getComputedStyle(frameP).color, "rgb(0, 0, 0)", "The color of P was not black before the resize.")); |
| tParser.step(() => { |
| frame.style.width = "100px"; |
| assert_equals(frameWindow.getComputedStyle(frameP).color, "rgb(0, 128, 0)", "The color of P was not green after the resize."); |
| }); |
| tParser.done(); |
| |
| tCSSOM.step(() => assert_equals(frameWindow.getComputedStyle(frameP).fontStyle, "normal", "The font-style of P was not normal before the resize.")); |
| tCSSOM.step(() => { |
| frame.style.width = "200px"; |
| assert_equals(frameWindow.getComputedStyle(frameP).fontStyle, "italic", "The font-style of P was not italic after the resize."); |
| }); |
| tCSSOM.done(); |
| }; |
| </script> |
