38 lines
40 KiB
HTML
38 lines
40 KiB
HTML
|
<style>
|
||
|
p {
|
||
|
position: fixed;
|
||
|
right: 20px;
|
||
|
bottom: 20px;
|
||
|
margin: 0;
|
||
|
}
|
||
|
.expected {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 300px;
|
||
|
height: 300px;
|
||
|
}
|
||
|
.actual {
|
||
|
position: absolute;
|
||
|
top: 100px;
|
||
|
left: 100px;
|
||
|
width: 100px;
|
||
|
height: 100px;
|
||
|
outline: 1px solid black;
|
||
|
}
|
||
|
</style>
|
||
|
<body>
|
||
|
<img class="expected" hidden src="data:image/png;base64,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
|
||
|
<div class="actual"></div>
|
||
|
|
||
|
<p>Inspect this page and hover each test area in the Elements tab. Click <button>Show Expected</button> to compare with the expected result.</p>
|
||
|
<script>
|
||
|
let showingExpected = false;
|
||
|
document.querySelector("button").addEventListener("click", (event) => {
|
||
|
showingExpected = !showingExpected;
|
||
|
for (let node of document.querySelectorAll(".expected"))
|
||
|
node.hidden = !showingExpected;
|
||
|
});
|
||
|
</script>
|
||
|
</body>
|