getComputedStyle-dynamic-subdoc.html (1166B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSSOM: getComputedStyle cross-doc properly reflects media query changes</title> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle"> 5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 6 <script src=/resources/testharness.js></script> 7 <script src=/resources/testharnessreport.js></script> 8 <iframe id="frm" style="width: 100px; height: 100px"></iframe> 9 <script> 10 test(function() { 11 let frm = document.getElementById('frm'); 12 let frmDoc = frm.contentWindow.document; 13 frmDoc.open(); 14 frmDoc.write('<style>body { color: red } @media all and (min-width: 101px) { body { color: green } }</style><body>Should be green</body>'); 15 frmDoc.close(); 16 17 document.body.offsetTop; 18 19 assert_equals( 20 getComputedStyle(frmDoc.body).color, 21 "rgb(255, 0, 0)", 22 "Initial color should be red" 23 ); 24 25 frm.style.width = "200px"; 26 27 assert_equals( 28 getComputedStyle(frmDoc.body).color, 29 "rgb(0, 128, 0)", 30 "style should have been updated to account for media query changes" 31 ); 32 }, "getComputedStyle cross-doc properly reflects media query changes"); 33 </script>