forked from mirrors/gecko-dev
5dd649daec
This patch modified the existing test for :screenshot ${filename} to actually
check some pixels of the resulting file.
The test document is modified to include 2 iframes, one remote and the other one
on the same origin, with different background colors so we can check in the test
that the content of the iframes are rendered in the screenshot.
We add a `fail-if=fission` annotation to the test since our screenshot support
does not support rendering remote iframe when fission is enabled. This should
be fixed with the work on Bug 1678483, and the fail-if would highlight that.
Differential Revision: https://phabricator.services.mozilla.com/D102596
87 lines
2.4 KiB
HTML
87 lines
2.4 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf8">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
--fixed-header-height: 50px;
|
|
margin-top: var(--fixed-header-height);
|
|
}
|
|
|
|
header {
|
|
height: var(--fixed-header-height);
|
|
background: rgb(255, 0, 0);
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
/* Since we may check the background-color, put the text in the center so we don't pick a pixel from the text */
|
|
text-align: center;
|
|
}
|
|
|
|
img {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
iframe {
|
|
display: block;
|
|
height: 50px;
|
|
border: none;
|
|
}
|
|
|
|
.overflow {
|
|
overflow: scroll;
|
|
height: 200vh;
|
|
width: 200vw;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>Fixed header</header>
|
|
<iframe id="same-origin-iframe" data-bg-color="rgb(255, 255, 0)"></iframe>
|
|
<iframe id="remote-iframe" data-bg-color="rgb(0, 255, 255)"></iframe>
|
|
<img id="testImage"></img>
|
|
<script>
|
|
"use strict";
|
|
|
|
async function loadIframe(iframeEl, origin) {
|
|
const onIframeLoaded = new Promise(resolve => {
|
|
iframeEl.addEventListener("load", resolve, {once: true})
|
|
});
|
|
const bgColor = iframeEl.getAttribute("data-bg-color");
|
|
iframeEl.src =
|
|
`${origin}/document-builder.sjs?html=
|
|
<style>
|
|
html {
|
|
background:${bgColor};
|
|
text-align: center;
|
|
}
|
|
|
|
span {
|
|
background-color: rgb(0, 100, 0);
|
|
/* move the text to right so we can check the span background color from test */
|
|
padding-left: 10px;
|
|
}
|
|
</style>
|
|
<span>${origin}</span>`;
|
|
await onIframeLoaded;
|
|
iframeEl.classList.add("loaded-iframe");
|
|
}
|
|
|
|
const origin = document.location.origin;
|
|
// Since we can't know on which origin the document is loaded, we check it so we
|
|
// can pick another one for the remote iframe.
|
|
const remoteOrigin = origin.endsWith(".com")
|
|
? origin.replace(".com", ".org")
|
|
: origin.replace(".org", ".com");
|
|
|
|
loadIframe(document.getElementById("same-origin-iframe"), origin);
|
|
loadIframe(document.getElementById("remote-iframe"), remoteOrigin);
|
|
</script>
|
|
</body>
|
|
</html>
|