diff options
Diffstat (limited to 'devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js')
-rw-r--r-- | devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js new file mode 100644 index 0000000000..9e23d68166 --- /dev/null +++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-color-picker-on-RETURN.js @@ -0,0 +1,94 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Tests that the grid item's color change in the colorpicker is committed when RETURN is +// pressed. + +const TEST_URI = ` + <style type='text/css'> + #grid { + display: grid; + } + </style> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + </div> +`; + +add_task(async function () { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, gridInspector, layoutView } = await openLayoutView(); + const { document: doc } = gridInspector; + const { highlighters, store } = inspector; + const cPicker = layoutView.swatchColorPickerTooltip; + const spectrum = cPicker.spectrum; + const swatch = doc.querySelector( + "#layout-grid-container .layout-color-swatch" + ); + + info("Checking the initial state of the Grid Inspector."); + is( + swatch.style.backgroundColor, + "rgb(148, 0, 255)", + "The color swatch's background is correct." + ); + is( + store.getState().grids[0].color, + "#9400FF", + "The grid color state is correct." + ); + + info("Scrolling into view of the #grid color swatch."); + swatch.scrollIntoView(); + + info("Opening the color picker by clicking on the #grid color swatch."); + const onColorPickerReady = cPicker.once("ready"); + swatch.click(); + await onColorPickerReady; + + await simulateColorPickerChange(cPicker, [0, 255, 0, 0.5]); + + is( + swatch.style.backgroundColor, + "rgba(0, 255, 0, 0.5)", + "The color swatch's background was updated." + ); + + info("Pressing RETURN to commit the color change."); + const EXPECTED_HEX_COLOR = "#00FF0080"; + const onGridColorUpdate = waitUntilState( + store, + state => state.grids[0].color === EXPECTED_HEX_COLOR + ); + const onColorPickerHidden = cPicker.tooltip.once("hidden"); + const onHighlighterShown = highlighters.once("highlighter-shown"); + focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN"); + await onColorPickerHidden; + await onGridColorUpdate; + + is( + swatch.style.backgroundColor, + "rgba(0, 255, 0, 0.5)", + "The color swatch's background was kept after RETURN." + ); + + info("Wait for a bit to ensure the highlighter wasn't shown"); + const raceResult = await Promise.race([ + onHighlighterShown.then(() => "HIGHLIGHTED"), + wait(1000).then(() => "TIMEOUT"), + ]); + is(raceResult, "TIMEOUT", "Highlighter wasn't shown"); + + info("Check that highlighter does show with the expected color"); + doc.querySelector("#grid-list input[type=checkbox]").click(); + const { options } = await onHighlighterShown; + + is( + options.color, + EXPECTED_HEX_COLOR, + "Highlighter was displayed with the right color" + ); +}); |