OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 iframe { width: 10px; height: 100px } |
| 6 </style> |
| 7 <iframe id="frame" src=""></iframe> |
| 8 <script> |
| 9 var tParser = async_test("Check that @media inside @supports respond to widt
h changes."); |
| 10 var tCSSOM = async_test("Check that CSSOM-inserted @media inside @supports r
espond to width changes."); |
| 11 |
| 12 onload = () => { |
| 13 frame.contentDocument.body.innerHTML = |
| 14 "<style>@supports (color:red) { @media (min-width: 50px) { p { color
:green } } }</style>" |
| 15 + "<style>@supports (color:red) {}</style>" |
| 16 + "<p>Should be green and italic.</p>"; |
| 17 |
| 18 frame.contentDocument.styleSheets[1].cssRules[0].insertRule("@media (min
-width: 150px) { p { font-style: italic } }", 0); |
| 19 |
| 20 var frameP = frame.contentDocument.querySelector("p"); |
| 21 var frameWindow = frame.contentDocument.defaultView; |
| 22 |
| 23 tParser.step(() => assert_equals(frameWindow.getComputedStyle(frameP).co
lor, "rgb(0, 0, 0)", "The color of P was not black before the resize.")); |
| 24 tParser.step(() => { |
| 25 frame.style.width = "100px"; |
| 26 assert_equals(frameWindow.getComputedStyle(frameP).color, "rgb(0, 12
8, 0)", "The color of P was not green after the resize."); |
| 27 }); |
| 28 tParser.done(); |
| 29 |
| 30 tCSSOM.step(() => assert_equals(frameWindow.getComputedStyle(frameP).fon
tStyle, "normal", "The font-style of P was not normal before the resize.")); |
| 31 tCSSOM.step(() => { |
| 32 frame.style.width = "200px"; |
| 33 assert_equals(frameWindow.getComputedStyle(frameP).fontStyle, "itali
c", "The font-style of P was not italic after the resize."); |
| 34 }); |
| 35 tCSSOM.done(); |
| 36 }; |
| 37 </script> |
OLD | NEW |