diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3a3dde3830..12e0830afc 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -146,13 +146,24 @@ jobs:
steps:
- downstream
- run:
- name: Run tests
- command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group unit --coverage
+ name: Run unit tests
+ command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group no-memory-ci --coverage
- store_test_results:
path: /root/project/results/
- store_artifacts:
path: coverage
+ test-chromium-memory:
+ executor: node
+
+ steps:
+ - downstream
+ - run:
+ name: Run memory tests
+ command: yarn test:ci --config web-test-runner.config.ci-chromium.js --group memory-ci
+ - store_test_results:
+ path: /root/project/results/
+
test-firefox:
executor: node
parallelism: 5
@@ -306,6 +317,7 @@ workflows:
build:
jobs:
- test-chromium
+ - test-chromium-memory
- test-firefox
- test-webkit
- lint
diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
index 91921ef4cd..eb000863c3 100644
--- a/packages/color-area/src/ColorArea.ts
+++ b/packages/color-area/src/ColorArea.ts
@@ -17,7 +17,10 @@ import {
SpectrumElement,
TemplateResult,
} from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import {
+ ifDefined,
+ styleMap,
+} from '@spectrum-web-components/base/src/directives.js';
import {
property,
query,
@@ -445,15 +448,15 @@ export class ColorArea extends SpectrumElement {
}
).format(this.y);
+ const style = {
+ background: `linear-gradient(to top, black 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%),linear-gradient(to right, white 0%, hsla(${this.hue}, 100%, 0.01%, 0) 100%), hsl(${this.hue}, 100%, 50%);`,
+ };
+
return html`
diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
index feac664ee2..3c96766041 100644
--- a/packages/color-slider/src/ColorSlider.ts
+++ b/packages/color-slider/src/ColorSlider.ts
@@ -16,7 +16,11 @@ import {
PropertyValues,
TemplateResult,
} from '@spectrum-web-components/base';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import {
+ ifDefined,
+ StyleInfo,
+ styleMap,
+} from '@spectrum-web-components/base/src/directives.js';
import {
property,
query,
@@ -301,6 +305,13 @@ export class ColorSlider extends Focusable {
}%`;
}
+ private get getColorSliderStyle(): StyleInfo {
+ const orientation = this.vertical ? 'top' : 'right';
+ return {
+ background: `linear-gradient(to ${orientation}, var(--sp-color-slider-gradient, var(--sp-color-slider-gradient-fallback)))`,
+ };
+ }
+
protected override render(): TemplateResult {
return html`
diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
index f998e47162..591234c911 100644
--- a/packages/swatch/src/Swatch.ts
+++ b/packages/swatch/src/Swatch.ts
@@ -17,7 +17,10 @@ import {
TemplateResult,
} from '@spectrum-web-components/base';
import { property } from '@spectrum-web-components/base/src/decorators.js';
-import { when } from '@spectrum-web-components/base/src/directives.js';
+import {
+ ifDefined,
+ when,
+} from '@spectrum-web-components/base/src/directives.js';
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
import opacityCheckerboardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
import '@spectrum-web-components/icons-ui/icons/sp-icon-dash75.js';
@@ -201,7 +204,11 @@ export class Swatch extends SizedMixin(Focusable, {
return html`
${when(this.disabled, this.renderDisabled)}
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
index 36c85e5da2..08f78770eb 100644
--- a/web-test-runner.config.js
+++ b/web-test-runner.config.js
@@ -18,6 +18,7 @@ import { sendMousePlugin } from './test/plugins/send-mouse-plugin.js';
import {
chromium,
chromiumWithMemoryTooling,
+ chromiumWithMemoryToolingCI,
configuredVisualRegressionPlugin,
firefox,
packages,
@@ -144,9 +145,26 @@ export default {
files: ['{packages,tools}/**/*-memory.test.js'],
browsers: [chromiumWithMemoryTooling],
},
+ {
+ name: 'memory-ci',
+ files: [
+ '{packages,tools}/**/*-memory.test.js',
+ '!packages/color-area/test/*-memory.test.js',
+ '!packages/color-wheel/test/*-memory.test.js',
+ '!packages/color-slider/test/*-memory.test.js',
+ ],
+ browsers: [chromiumWithMemoryToolingCI],
+ },
{
name: 'unit-ci',
},
+ {
+ name: 'no-memory-ci',
+ files: [
+ '{packages,tools}/**/*.test.js',
+ '!{packages,tools}/**/*-memory.test.js',
+ ],
+ },
],
group: 'unit',
browsers: [firefox, chromiumWithMemoryTooling, webkit],
diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js
index 35456f48cd..25a45ac164 100644
--- a/web-test-runner.utils.js
+++ b/web-test-runner.utils.js
@@ -17,7 +17,6 @@ import fg from 'fast-glob';
export const chromium = playwrightLauncher({
product: 'chromium',
- concurrency: 1,
createBrowserContext: ({ browser }) =>
browser.newContext({
ignoreHTTPSErrors: true,
@@ -47,6 +46,29 @@ export const chromiumWithMemoryTooling = playwrightLauncher({
},
});
+export const chromiumWithMemoryToolingCI = playwrightLauncher({
+ product: 'chromium',
+ concurrency: 2,
+ createBrowserContext: ({ browser }) =>
+ browser.newContext({
+ ignoreHTTPSErrors: true,
+ permissions: ['clipboard-read', 'clipboard-write'],
+ }),
+ launchOptions: {
+ headless: false,
+ args: [
+ '--js-flags=--expose-gc',
+ '--headless=new',
+ /**
+ * Cause `measureUserAgentSpecificMemory()` to GC immediately,
+ * instead of up to 20s later:
+ * https://web.dev/articles/monitor-total-page-memory-usage#local_testing
+ **/
+ '--enable-blink-features=ForceEagerMeasureMemory',
+ ],
+ },
+});
+
export const chromiumWithFlags = playwrightLauncher({
product: 'chromium',
launchOptions: {