cross-origin-ancestor-activeelement-after-child-lose-focus.sub.html (2533B)
1 <!doctype html> 2 <head> 3 <meta charset=utf-8> 4 <title>Ancestor's activeElement should be cleared when child loses focus</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 </head> 10 <body> 11 <input placeholder="input in top level"/> 12 <iframe></iframe> 13 <script> 14 const outerIFrame = document.querySelector('iframe'); 15 setup({ explicit_done: true }); 16 function runTest() { 17 test(() => { 18 assert_equals(outerIFrame.contentDocument.activeElement, outerIFrame.contentDocument.body, 19 "Initially, the activeElement of the outer iframe should be <body>"); 20 21 const innerIFrame = outerIFrame.contentDocument.createElement("iframe"); 22 23 window.onmessage = function(event) { 24 if (event.data != "ready") { 25 return; 26 } 27 28 // We receive an message when the innerIFrame is ready and its input is focused. 29 // outerIframe is the ancestor of inner iframe, so the activeElement of 30 // it should be the inner iframe. 31 assert_equals(outerIFrame.contentDocument.activeElement, innerIFrame, 32 "The activeElement of the outer iframe should be the inner iframe"); 33 34 // Now we focus the input in the top level 35 document.querySelector("input").focus(); 36 37 // Wait for a bit to let whatever the code that might change the focus to run 38 window.requestAnimationFrame(function() { 39 window.requestAnimationFrame(function() { 40 window.requestAnimationFrame(function() { 41 // Since inner iframe lost its focus, the activeElement of outer iframe 42 // should be cleared as well, hence <body> should be focused. 43 assert_equals(outerIFrame.contentDocument.activeElement, outerIFrame.contentDocument.body, 44 "The activeElement of the outer iframe should be reverted back to <body>"); 45 assert_equals(document.activeElement, document.querySelector("input"), 46 "The activeElement of the top-level document should the input"); 47 done(); 48 }) 49 }); 50 }); 51 } 52 53 // Opens the cross-origin inner iframe with a page that contains an input element. 54 innerIFrame.src = "http://{{domains[www1]}}:{{ports[http][0]}}/focus/support/cross-origin-ancestor-activeelement-after-child-lose-focus-helper.html"; 55 outerIFrame.contentDocument.body.appendChild(innerIFrame); 56 }); 57 } 58 59 window.onload = function() { 60 runTest(); 61 } 62 </script> 63 </body>