testing/web-platform/tests/portals/portals-focus.sub.html

   1 <!DOCTYPE html>
   2 <meta name="timeout" content="long">
   3 <script src="/resources/testharness.js"></script>
   4 <script src="/resources/testharnessreport.js"></script>
   5 <script src="/resources/testdriver.js"></script>
   6 <script src="/resources/testdriver-vendor.js"></script>
   7 <script src="resources/open-blank-host.js"></script>
   8 <body>
   9 <script>
  10   async function createPortal(doc, url) {
  11     assert_implements("HTMLPortalElement" in self);
  12     let portal = doc.createElement("portal");
  13     portal.src = url;
  14     doc.body.appendChild(portal);
  15     await new Promise(r => portal.onload = r);
  16     return portal;
  17   }
  18
  19   promise_test(async t => {
  20     let portal = await createPortal(document, new URL("resources/focus-page-with-button.html", location.href));
  21     try {
  22       portal.onmessage = t.step_func(e => {
  23         assert_unreached("button inside portal should not be focused");
  24       });
  25       portal.postMessage("focus", "*");
  26       await new Promise(r => t.step_timeout(r, 500));
  27     } finally {
  28       document.body.removeChild(portal);
  29     }
  30   }, "test that an element inside a portal cannot steal focus");
  31
  32   promise_test(async t => {
  33     let portal = await createPortal(document, new URL("resources/focus-page-with-x-origin-iframe.sub.html", location.href));
  34     try {
  35       portal.onmessage = t.step_func(e => {
  36         assert_unreached("button inside portal should not be focused");
  37       });
  38       portal.postMessage("focus", "*");
  39       await new Promise(r => t.step_timeout(r, 500));
  40     } finally {
  41       document.body.removeChild(portal);
  42     }
  43   }, "test that an element inside a portal's x-origin subframe cannot steal focus");
  44
  45   promise_test(async t => {
  46     let win = await openBlankPortalHost();
  47     let doc = win.document;
  48     try {
  49       let portal = await createPortal(doc, new URL("resources/simple-portal-adopts-predecessor.html", location.href));
  50       let button = doc.createElement("button");
  51       doc.body.appendChild(button);
  52
  53       await portal.activate();
  54       doc.body.removeChild(portal);
  55
  56       button.onfocus = t.step_func(() => {
  57         assert_unreached("button inside adopted portal should not be focused");
  58       });
  59       button.focus();
  60       await new Promise(r => t.step_timeout(r, 500));
  61     } finally {
  62       win.close();
  63     }
  64   }, "test that an element inside an adopted portal cannot steal focus");
  65
  66   promise_test(async t => {
  67     let win = await openBlankPortalHost();
  68     let doc = win.document;
  69     try {
  70       let portal = await createPortal(doc, new URL("resources/simple-portal-adopts-predecessor.html", location.href));
  71       let iframe = doc.createElement("iframe");
  72       iframe.src = new URL("resources/focus-page-with-button.html",
  73                            "http://{{hosts[alt][www]}}:{{ports[http][0]}}/portals/");
  74       doc.body.appendChild(iframe);
  75       await new Promise(r => iframe.onload = r);
  76
  77       await portal.activate();
  78       doc.body.removeChild(portal);
  79
  80       iframe.contentWindow.postMessage("focus", "*");
  81       window.onmessage = t.step_func(() => {
  82         assert_unreached("button inside x-origin iframe inside a portal should not be focused");
  83       });
  84       await new Promise(r => t.step_timeout(r, 500));
  85     } finally {
  86       win.close();
  87     }
  88   }, "test that a x-origin iframe inside an adopted portal cannot steal focus");
  89
  90   const TAB = "\ue004"; // https://w3c.github.io/webdriver/#keyboard-actions
  91   const SPACE = " "
  92   const RETURN = "\r";
  93
  94   promise_test(async t => {
  95     let portal = await createPortal(document, "resources/focus-page-with-button.html");
  96     try {
  97       await test_driver.send_keys(document.body, TAB);
  98       portal.onmessage = t.unreached_func("button inside portal should not be focused");
  99       await new Promise(r => t.step_timeout(r, 500));
 100     } finally {
 101       document.body.removeChild(portal);
 102     }
 103   }, "test that a portal is keyboard focusable");
 104
 105   promise_test(async t => {
 106     let portal = await createPortal(document, "resources/focus-page-with-button.html");
 107     try {
 108       let portalFocusPromise = new Promise(r => portal.onfocus = r);
 109       portal.onmessage = t.unreached_func("button inside portal should not be focused");
 110       await test_driver.send_keys(document.body, TAB);
 111       await portalFocusPromise;
 112       await test_driver.send_keys(document.body, TAB);
 113       await new Promise(r => t.step_timeout(r, 500));
 114     } finally {
 115       document.body.removeChild(portal);
 116     }
 117   }, "test that we cannot tab into a portal's contents");
 118
 119   promise_test(async t => {
 120     let portal = await createPortal(document, "resources/simple-portal.html");
 121     try {
 122       portal.focus();
 123       for (let key of [SPACE, RETURN]) {
 124         let clickPromise = new Promise((resolve) => {
 125           portal.onclick = e => { e.preventDefault(); resolve(); };
 126         });
 127         await test_driver.send_keys(document.body, key);
 128         await clickPromise;
 129       }
 130     } finally {
 131       document.body.removeChild(portal);
 132     }
 133   }, "test that a portal is keyboard activatable");
 134
 135 </script>
 136 </body>