computed-style-004.html (1384B)
1 <!DOCTYPE html> 2 <title>CSS Test: getComputedStyle - resolved width in nested iframes dynamic width</title> 3 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" /> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <iframe id="outer" width="100" scrolling="no" frameborder="0"></iframe> 8 <script> 9 const outerDoc = outer.contentWindow.document; 10 outerDoc.open(); 11 outerDoc.write('<body style="margin:0"><iframe id="inner" scrolling="no" frameborder="0" style="width:100%"></iframe>'); 12 outerDoc.close(); 13 14 const innerWindow = outerDoc.querySelector("#inner").contentWindow; 15 const innerDoc = innerWindow.document; 16 innerDoc.open(); 17 innerDoc.write('<body style="margin:0"><div style="width:100%"></div>'); 18 innerDoc.close(); 19 innerDoc.body.offsetWidth; // Make sure we layout the top document. 20 21 test(() => { 22 assert_equals(innerWindow.getComputedStyle(innerDoc.querySelector("div")).width, "100px"); 23 }, "Check that the initial width is 100px."); 24 25 test(() => { 26 outer.setAttribute("width", "200"); 27 assert_equals(innerWindow.getComputedStyle(innerDoc.querySelector("div")).width, "200px"); 28 }, "Check that the resolved width of the inner div is affected by changing the width of outer iframe."); 29 </script>