Bug 1691579 - [devtools] Enable browser_spectrum.js on Fission. r=jdescottes.

The test failure doesn't seem to have anything to do with Fission,
but this might have introduce some changes in timings that would
trigger a race condition somehow.
The test was failing because in one of the test we were moving a slider
to change a color, while the slider element had a height of 0, which
would interfere with the computations that are done later.
This patch adds a helper function to create the Spectrum widget, wait for the
slider to have a non-zero height and then calling `show` (where some dimensions
are being cached).

Differential Revision: https://phabricator.services.mozilla.com/D109876
This commit is contained in:
Nicolas Chevobbe 2021-03-26 12:42:29 +00:00
parent 97478c3d2b
commit 092b9b3e4d
2 changed files with 32 additions and 36 deletions

View file

@ -198,9 +198,6 @@ skip-if = verify
[browser_prefs-02.js]
[browser_require_raw.js]
[browser_spectrum.js]
skip-if =
verify # Bug 1478156 test verify fails on master
fission && debug # Fails intermittently.
[browser_theme.js]
[browser_tableWidget_basic.js]
[browser_tableWidget_keyboard_interaction.js]

View file

@ -34,7 +34,6 @@ add_task(async function() {
const { host, doc } = await createHost("bottom", TEST_URI);
const container = doc.getElementById("spectrum-container");
await testCreateAndDestroyShouldAppendAndRemoveElements(container);
await testPassingAColorAtInitShouldSetThatColor(container);
await testSettingAndGettingANewColor(container);
@ -104,23 +103,21 @@ function testColorPreviewDisplay(
);
}
function testCreateAndDestroyShouldAppendAndRemoveElements(container) {
async function testCreateAndDestroyShouldAppendAndRemoveElements(container) {
ok(container, "We have the root node to append spectrum to");
is(container.childElementCount, 0, "Root node is empty");
const s = new Spectrum(container, cssColors.white);
s.show();
const s = await createSpectrum(container, cssColors.white);
ok(container.childElementCount > 0, "Spectrum has appended elements");
s.destroy();
is(container.childElementCount, 0, "Destroying spectrum removed all nodes");
}
function testPassingAColorAtInitShouldSetThatColor(container) {
async function testPassingAColorAtInitShouldSetThatColor(container) {
const initRgba = cssColors.white;
const s = new Spectrum(container, initRgba);
s.show();
const s = await createSpectrum(container, initRgba);
const setRgba = s.rgb;
@ -132,9 +129,8 @@ function testPassingAColorAtInitShouldSetThatColor(container) {
s.destroy();
}
function testSettingAndGettingANewColor(container) {
const s = new Spectrum(container, cssColors.black);
s.show();
async function testSettingAndGettingANewColor(container) {
const s = await createSpectrum(container, cssColors.black);
const colorToSet = cssColors.white;
s.rgb = colorToSet;
@ -166,9 +162,8 @@ async function testChangingColorShouldEmitEventsHelper(
ok(true, "Changed event was emitted on color change");
}
function testChangingColorShouldEmitEvents(container, doc) {
const s = new Spectrum(container, cssColors.white);
s.show();
async function testChangingColorShouldEmitEvents(container, doc) {
const s = await createSpectrum(container, cssColors.white);
const sendUpKey = () => EventUtils.sendKey("Up");
const sendDownKey = () => EventUtils.sendKey("Down");
@ -273,9 +268,8 @@ function testAriaAttributesOnSpectrumElements(
);
}
function testSettingColorShoudUpdateTheUI(container) {
const s = new Spectrum(container, cssColors.white);
s.show();
async function testSettingColorShoudUpdateTheUI(container) {
const s = await createSpectrum(container, cssColors.white);
const dragHelperOriginalPos = [
s.dragHelper.style.top,
s.dragHelper.style.left,
@ -315,9 +309,8 @@ function testSettingColorShoudUpdateTheUI(container) {
s.destroy();
}
function testChangingColorShouldUpdateColorPreview(container) {
const s = new Spectrum(container, [0, 0, 1, 1]);
s.show();
async function testChangingColorShouldUpdateColorPreview(container) {
const s = await createSpectrum(container, [0, 0, 1, 1]);
info("Test that color preview is black.");
testColorPreviewDisplay(s, "rgb(0, 0, 1)", "transparent");
@ -337,9 +330,8 @@ function testChangingColorShouldUpdateColorPreview(container) {
s.destroy();
}
function testNotSettingTextPropsShouldNotShowContrastSection(container) {
const s = new Spectrum(container, cssColors.white);
s.show();
async function testNotSettingTextPropsShouldNotShowContrastSection(container) {
const s = await createSpectrum(container, cssColors.white);
setSpectrumProps(s, { rgb: cssColors.black });
ok(
@ -379,9 +371,10 @@ function testSpectrumContrast(
);
}
function testSettingTextPropsAndColorShouldUpdateContrastValue(container) {
const s = new Spectrum(container, cssColors.white);
s.show();
async function testSettingTextPropsAndColorShouldUpdateContrastValue(
container
) {
const s = await createSpectrum(container, cssColors.white);
ok(
!s.spectrumContrast.classList.contains("visible"),
@ -412,11 +405,10 @@ function testSettingTextPropsAndColorShouldUpdateContrastValue(container) {
s.destroy();
}
function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator(
async function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator(
container
) {
let s = new Spectrum(container, cssColors.white);
s.show();
let s = await createSpectrum(container, cssColors.white);
ok(
s.contrastLabel.childNodes.length !== 3,
@ -452,8 +444,7 @@ function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator(
// Spectrum should be closed and opened again to reflect changes in text size
s.destroy();
s = new Spectrum(container, cssColors.white);
s.show();
s = await createSpectrum(container, cssColors.white);
info("Test that selecting regular text does not show large text indicator.");
setSpectrumProps(
@ -466,9 +457,10 @@ function testOnlySelectingLargeTextWithNonZeroAlphaShouldShowIndicator(
s.destroy();
}
function testSettingMultiColoredBackgroundShouldShowContrastRange(container) {
const s = new Spectrum(container, cssColors.white);
s.show();
async function testSettingMultiColoredBackgroundShouldShowContrastRange(
container
) {
const s = await createSpectrum(container, cssColors.white);
info(
"Test setting text with non-zero alpha and multi-colored bg shows contrast range and empty single contrast."
@ -502,3 +494,10 @@ function testSettingMultiColoredBackgroundShouldShowContrastRange(container) {
s.destroy();
}
async function createSpectrum(...spectrumConstructorParams) {
const s = new Spectrum(...spectrumConstructorParams);
await waitFor(() => s.dragger.offsetHeight > 0);
s.show();
return s;
}