Skip to content

Commit

Permalink
Fix headed Chrome screenshot
Browse files Browse the repository at this point in the history
  • Loading branch information
bearfriend committed Jul 24, 2023
1 parent dffc983 commit 7df44f8
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/browser/commands.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export async function focusElem(elem) {

export async function hoverAt(x, y) {
await sendMouse({ type: 'move', position: [x, y] });
if (window.d2lTest) window.d2lTest.hovering = true;
}

export async function hoverElem(elem) {
Expand Down
45 changes: 45 additions & 0 deletions src/browser/vdiff.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ mocha.setup({
/* eslint-enable */

async function ScreenshotAndCompare(opts) {

if (window.d2lTest) {
document.documentElement.classList.add('screenshot');
inlineStyles(this.elem);
}

const name = this.test.fullTitle();
const rect = this.elem.getBoundingClientRect();
const slowDuration = this.test.slow();
Expand All @@ -25,7 +31,46 @@ async function ScreenshotAndCompare(opts) {
this.test.timeout(0);
result = await executeServerCommand('brightspace-visual-diff-compare-resize', { name });
}

if (window.d2lTest) document.documentElement.classList.remove('screenshot');

if (!result.pass) {
expect.fail(result.message);
}
}

const disallowedProps = ['width', 'inline-size'];
let count = 0;

function inlineStyles(elem) {
// headed chrome takes screenshots by first moving the element and locking it down,
// which breaks the hover state. So, copy current styles inline before screenshot
if (window.d2lTest.hovering && window.chrome) {
count += 1;
document.documentElement.classList.add('screenshot');
elem.classList.add(`__d2lTestHovering-${count}`);

[...elem.children, ...elem.shadowRoot?.children ?? []].forEach(child => inlineStyles(child));

const computedStyle = getComputedStyle(elem);
[...computedStyle].forEach(prop => {
if (!disallowedProps.includes(prop)) {
elem.style[prop] = computedStyle.getPropertyValue(prop);
}
});

['before', 'after'].forEach(pseudoEl => {
const computedStyle = getComputedStyle(elem, `::${pseudoEl}`);
if (computedStyle.content !== 'none') {
const sheet = new CSSStyleSheet();
[...computedStyle].forEach(prop => {
if (!disallowedProps.includes(prop)) {
const value = computedStyle.getPropertyValue(prop);
sheet.insertRule(`.__d2lTestHovering-${count}::${pseudoEl} { ${prop}: ${value} !important; }`);
}
});
elem.getRootNode().adoptedStyleSheets.push(sheet);
}
});
}
}
14 changes: 13 additions & 1 deletion src/server/pause.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ test.pause = new Promise(r => test.start = r);

const controls = `
<style>
.screenshot ::-webkit-scrollbar {
display: none;
}
#d2l-test-controls [hidden] {
display: none !important;
}
Expand All @@ -11,6 +15,10 @@ const controls = `
margin-top: 70px;
}
.screenshot body {
margin: 8px;
}
#d2l-test-controls {
position: fixed;
top: 0;
Expand All @@ -24,6 +32,10 @@ const controls = `
color: #222;
}
.screenshot #d2l-test-controls {
display: none;
}
#d2l-test-controls #start,
#d2l-test-controls #run {
display: flex;
Expand Down Expand Up @@ -142,7 +154,7 @@ const testName = document.querySelector('#test-name');
let currentTest, focusEl = runBtn;
beforeEach(async function() {
const fixture = new Promise(r => test.update = r);

test.hovering = false;
currentTest = this.currentTest;

if (test.skipAll) this.test.parent.ctx.skip();
Expand Down

0 comments on commit 7df44f8

Please sign in to comment.