diff options
Diffstat (limited to 'devtools/shared/commands/target-configuration/tests/target_configuration_test_doc.sjs')
-rw-r--r-- | devtools/shared/commands/target-configuration/tests/target_configuration_test_doc.sjs | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/devtools/shared/commands/target-configuration/tests/target_configuration_test_doc.sjs b/devtools/shared/commands/target-configuration/tests/target_configuration_test_doc.sjs new file mode 100644 index 0000000000..a10b67c2b9 --- /dev/null +++ b/devtools/shared/commands/target-configuration/tests/target_configuration_test_doc.sjs @@ -0,0 +1,101 @@ +"use strict"; + +function handleRequest(request, response) { + response.setHeader("Content-Type", "html", false); + + // Check the params and set the cross-origin-opener policy headers if needed + Cu.importGlobalProperties(["URLSearchParams"]); + const query = new URLSearchParams(request.queryString); + if (query.get("crossOriginIsolated") === "true") { + response.setHeader("Cross-Origin-Opener-Policy", "same-origin", false); + } + + // We always want the iframe to have a different host from the top-level document. + const iframeHost = + request.host === "example.com" ? "example.org" : "example.com"; + const iframeOrigin = `${request.scheme}://${iframeHost}`; + + const IFRAME_HTML = ` + <!doctype html> + <html> + <head> + <meta charset=utf8> + <script> + globalThis.initialMatchesPrefersDarkColorScheme = + window.matchMedia("(prefers-color-scheme: dark)").matches; + globalThis.initialMatchesCoarsePointer = + window.matchMedia("(pointer: coarse)").matches; + globalThis.initialDevicePixelRatio = window.devicePixelRatio; + globalThis.initialUserAgent = navigator.userAgent; + </script> + <style> + html { background: cyan;} + + button { + font-size: 2em; + padding-inline: 1em; + } + + @media (prefers-color-scheme: dark) { + html {background: darkred;} + } + + </style> + </head> + <body> + <h1>Iframe</h1> + <button>Target</button> + </body> + </html>`; + + const HTML = ` + <!doctype html> + <html> + <head> + <meta charset=utf8> + <title>test</title> + <script type="application/javascript"> + "use strict"; + + /* + * Store the result of dark color-scheme match very early in the document loading process + * so we can assert in tests that the simulation starts early enough. + */ + globalThis.initialMatchesPrefersDarkColorScheme = + window.matchMedia("(prefers-color-scheme: dark)").matches; + globalThis.initialMatchesCoarsePointer = + window.matchMedia("(pointer: coarse)").matches; + globalThis.initialDevicePixelRatio = window.devicePixelRatio + globalThis.initialUserAgent = navigator.userAgent; + + + </script> + <style> + iframe { + display: block; + margin-top: 1em; + } + + button { + font-size: 2em; + padding-inline: 1em; + } + + @media (prefers-color-scheme: dark) { + html { + background-color: darkblue; + } + } + </style> + </head> + <body> + <h1>Test color-scheme simulation</h1> + <button>Target</button> + <iframe src='${iframeOrigin}/document-builder.sjs?html=${encodeURI( + IFRAME_HTML + )}'></iframe> + </body> + </html>`; + + response.write(HTML); +} |