nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1571650: Add test for z-index of grids. r=pbro

Browse source 
Differential Revision: https://phabricator.services.mozilla.com/D41931

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Daisuke Akatsuka 2019-08-14 09:40:27 +00:00
parent f9c1392ef6
commit 83f2b87e91
2 changed files with 82 additions and 0 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

1
devtools/client/inspector/grids/test/browser.ini
View file

@ -28,6 +28,7 @@ skip-if = (verify && (os == 'win' || os == 'linux'))
skip-if = true #Bug 1557326
[browser_grids_grid-list-on-mutation-element-removed.js]
[browser_grids_grid-list-subgrids.js]
[browser_grids_grid-list-subgrids-z-order.js]
[browser_grids_grid-list-toggle-grids_01.js]
[browser_grids_grid-list-toggle-grids_02.js]
[browser_grids_grid-list-toggle-multiple-grids.js]

81
devtools/client/inspector/grids/test/browser_grids_grid-list-subgrids-z-order.js Normal file
View file

@ -0,0 +1,81 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test the z order of grids.
const TEST_URI = URL_ROOT + "doc_subgrid.html";
add_task(async () => {
await addTab(TEST_URI);
const { gridInspector, inspector } = await openLayoutView();
const { document: doc } = gridInspector;
const { highlighters, store } = inspector;
await selectNode("#grid", inspector);
const parentEl = doc.getElementById("grid-list");
// Input for .container
const parentInput = parentEl.children[0].querySelector("input");
const subgridEl = parentEl.children[1];
// Input for <main>
const subgridInput = subgridEl.children[1].querySelector("input");
const grandSubgridEl = subgridEl.children[2];
// Input for .aside1
const grandSubgridInput = grandSubgridEl.children[0].querySelector("input");
info(
"Toggling ON the CSS grid highlighters for .container, <main> and .aside1"
);
const grandSubgridFront = await toggle(grandSubgridInput, highlighters);
const subgridFront = await toggle(subgridInput, highlighters);
let parentFront = await toggle(parentInput, highlighters);
await waitUntilState(
store,
state => state.grids.filter(g => g.highlighted).length === 3
);
info("Check z-index of grid highlighting");
is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0");
is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
info("Toggling OFF the CSS grid highlighters for .container");
await toggle(parentInput, highlighters);
await waitUntilState(
store,
state => state.grids.filter(g => g.highlighted).length === 2
);
info("Check z-index keeps even if the parent grid is hidden");
is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
info("Toggling ON again the CSS grid highlighters for .container");
parentFront = await toggle(parentInput, highlighters);
await waitUntilState(
store,
state => state.grids.filter(g => g.highlighted).length === 3
);
info("Check z-index of all of grids highlighting keeps");
is(getZIndex(store, parentFront), 0, "z-index of parent grid is 0");
is(getZIndex(store, subgridFront), 1, "z-index of subgrid is 1");
is(getZIndex(store, grandSubgridFront), 2, "z-index of subgrid is 2");
});
function getZIndex(store, nodeFront) {
const grids = store.getState().grids;
const gridData = grids.find(g => g.nodeFront === nodeFront);
return gridData.zIndex;
}
async function toggle(input, highlighters) {
const eventName = input.checked
? "grid-highlighter-hidden"
: "grid-highlighter-shown";
const onHighlighterEvent = highlighters.once(eventName);
input.click();
const nodeFront = await onHighlighterEvent;
return nodeFront;
}