ancestor-activeelement-after-child-lose-focus.html (1857B)
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 srcdoc="<iframe srcdoc='<input>'></iframe>"></iframe> 13 <script> 14 const outerIFrame = document.querySelector('iframe'); 15 function runTest() { 16 test(() => { 17 assert_true(outerIFrame.contentDocument.activeElement === outerIFrame.contentDocument.body, 18 "Initially, the activeElement of the outer iframe should be <body>"); 19 20 const innerIFrame = outerIFrame.contentDocument.querySelector("iframe"); 21 const inputInInner = innerIFrame.contentDocument.querySelector('input'); 22 23 // Now we focus the input in the inner iframe 24 inputInInner.focus(); 25 // outerIframe is the ancestor of inner iframe, so the activeElement of 26 // it should be the inner iframe. 27 assert_true(outerIFrame.contentDocument.activeElement === innerIFrame, 28 "The activeElement of the outer iframe should be the inner iframe"); 29 30 // Now we focus the input in the top level 31 document.querySelector("input").focus(); 32 // Since inner iframe lost its focus, the activeElement of outer iframe 33 // should be cleared as well, hence <body> should be focused. 34 assert_true(outerIFrame.contentDocument.activeElement === outerIFrame.contentDocument.body, 35 "The activeElement of the outer iframe should be reverted back to <body>"); 36 37 assert_true(document.activeElement === document.querySelector("input"), 38 "The activeElement of the top-level document should be the input"); 39 }); 40 } 41 42 window.onload = function() { 43 runTest(); 44 } 45 </script> 46 </body>