diff --git a/src/browser/reset.js b/src/browser/reset.js
index 3566feb0..83d0d9f3 100644
--- a/src/browser/reset.js
+++ b/src/browser/reset.js
@@ -7,6 +7,7 @@ const DEFAULT_LANG = 'en',
let currentLang = undefined,
currentRtl = false,
+ currentTheme = undefined,
currentViewportHeight = 0,
currentViewportWidth = 0,
shouldResetMouse = false;
@@ -54,6 +55,16 @@ export async function reset(opts) {
awaitNextFrame = true;
}
+ if (opts.theme !== currentTheme) {
+ if (opts.theme === 'dark') {
+ document.body.setAttribute('data-theme', 'dark');
+ } else {
+ document.body.removeAttribute('data-theme');
+ }
+ currentTheme = opts.theme;
+ awaitNextFrame = true;
+ }
+
if (opts.viewport.height !== currentViewportHeight || opts.viewport.width !== currentViewportWidth) {
await setViewport(opts.viewport).catch(() => {});
awaitNextFrame = true;
diff --git a/src/server/report/app.js b/src/server/report/app.js
index 8abb6896..1c5dc4b9 100644
--- a/src/server/report/app.js
+++ b/src/server/report/app.js
@@ -49,6 +49,7 @@ class App extends LitElement {
border: 1px solid #cdd5dc;
padding: 10px;
text-align: center;
+ white-space: nowrap;
}
thead th {
background-color: #f5f5f5;
@@ -56,6 +57,8 @@ class App extends LitElement {
tbody th {
font-weight: normal;
text-align: left;
+ width: 100%;
+ white-space: normal;
}
td.passed {
background-color: #efffd9;
diff --git a/src/server/wtr-config.js b/src/server/wtr-config.js
index 1ae9bc17..4d926a7f 100644
--- a/src/server/wtr-config.js
+++ b/src/server/wtr-config.js
@@ -95,6 +95,9 @@ export class WTRConfig {
line-height: 1.4rem;
padding: 30px;
}
+ body[data-theme="dark"] {
+ background-color: #000000;
+ }
diff --git a/test/browser/fixture.test.js b/test/browser/fixture.test.js
index a305f5b2..e31e5e38 100644
--- a/test/browser/fixture.test.js
+++ b/test/browser/fixture.test.js
@@ -157,6 +157,19 @@ describe('fixture', () => {
expect(window.innerWidth).to.equal(800);
});
+ it('should use no theme by default', async() => {
+ await fixture(html`hello
`);
+ expect(document.body.hasAttribute('data-theme')).to.be.false;
+ });
+
+ it('should reset theme', async() => {
+ const elem = html`hello
`;
+ await fixture(elem, { theme: 'dark' });
+ expect(document.body.getAttribute('data-theme')).to.equal('dark');
+ await fixture(elem);
+ expect(document.body.hasAttribute('data-theme')).to.be.false;
+ });
+
});
describe('waitForElem', () => {
diff --git a/test/browser/theme.vdiff.js b/test/browser/theme.vdiff.js
new file mode 100644
index 00000000..69cc462f
--- /dev/null
+++ b/test/browser/theme.vdiff.js
@@ -0,0 +1,44 @@
+import { css, html, LitElement } from 'lit';
+import { defineCE, expect, fixture } from '../../src/browser/index.js';
+
+const themeTag = defineCE(
+ class extends LitElement {
+ static get properties() {
+ return {
+ theme: { reflect: true, type: String }
+ };
+ }
+ static get styles() {
+ return css`
+ :host {
+ border: 1px solid black;
+ display: inline-block;
+ text-align: center;
+ padding: 20px;
+ }
+ :host([theme="dark"]) {
+ border-color: white;
+ color: white;
+ }
+ `;
+ }
+ render() {
+ return html`Theme: ${this.theme}`;
+ }
+ }
+);
+
+describe('theme', () => {
+ [
+ 'normal',
+ 'dark'
+ ].forEach(name => {
+ it(name, async() => {
+ const elem = await fixture(
+ `<${themeTag} theme="${name}">`,
+ { theme: name === 'normal' ? undefined : name }
+ );
+ await expect(elem).to.be.golden();
+ });
+ });
+});