116 lines
3.7 KiB
HTML
116 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>MozBoxGroup Tests</title>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://mochikit/content/tests/SimpleTest/test.css"
|
|
/>
|
|
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-box-group.mjs"
|
|
></script>
|
|
<script src="lit-test-helpers.js"></script>
|
|
<script>
|
|
let testHelpers = new LitTestHelpers();
|
|
|
|
add_setup(async function setup() {
|
|
let { html } = await testHelpers.setupLit();
|
|
let templateFn = () => html`
|
|
<moz-box-group>
|
|
<moz-box-item label="item"></moz-box-item>
|
|
<moz-box-button label="button"></moz-box-button>
|
|
</moz-box-group>
|
|
`;
|
|
testHelpers.setupTests({ templateFn });
|
|
});
|
|
|
|
add_task(async function testMozBoxGroupStyles() {
|
|
let {
|
|
children: [boxGroup],
|
|
} = await testHelpers.renderTemplate();
|
|
let [boxItem, boxButton] = boxGroup.shadowRoot
|
|
.querySelector("slot")
|
|
.assignedElements();
|
|
|
|
const normalizePx = pxVal => Math.round(parseFloat(pxVal));
|
|
|
|
function verifyStyles(el, expectedStyles) {
|
|
let styles = getComputedStyle(el);
|
|
Object.entries(expectedStyles).forEach(([property, value]) => {
|
|
is(
|
|
normalizePx(styles[property]),
|
|
normalizePx(value),
|
|
`${property} is ${value}.`
|
|
);
|
|
});
|
|
}
|
|
|
|
const FIRST_ITEM_STYLES = {
|
|
borderStartEndRadius: "8px",
|
|
borderStartStartRadius: "8px",
|
|
borderEndEndRadius: "0px",
|
|
borderEndStartRadius: "0px",
|
|
borderBottomWidth: "0px",
|
|
};
|
|
|
|
const MIDDLE_ITEM_STYLES = {
|
|
borderStartEndRadius: "0px",
|
|
borderStartStartRadius: "0px",
|
|
borderEndEndRadius: "0px",
|
|
borderEndStartRadius: "0px",
|
|
borderBottomWidth: "0px",
|
|
};
|
|
|
|
const LAST_ITEM_STYLES = {
|
|
borderStartEndRadius: "0px",
|
|
borderStartStartRadius: "0px",
|
|
borderEndEndRadius: "8px",
|
|
borderEndStartRadius: "8px",
|
|
borderBottomWidth: "1px",
|
|
};
|
|
|
|
// Verify that two items use the first and last item styles.
|
|
verifyStyles(boxItem, FIRST_ITEM_STYLES);
|
|
verifyStyles(boxButton, LAST_ITEM_STYLES);
|
|
|
|
// Change the last item and check that styles change accordingly.
|
|
let slotChanged = BrowserTestUtils.waitForEvent(
|
|
boxGroup.shadowRoot,
|
|
"slotchange"
|
|
);
|
|
let secondButton = document.createElement("moz-box-button");
|
|
secondButton.label = "second button";
|
|
boxGroup.append(secondButton);
|
|
await slotChanged;
|
|
|
|
verifyStyles(boxItem, FIRST_ITEM_STYLES);
|
|
verifyStyles(boxButton, MIDDLE_ITEM_STYLES);
|
|
verifyStyles(secondButton, LAST_ITEM_STYLES);
|
|
|
|
// Change the first item and verify that styles change accordingly.
|
|
slotChanged = BrowserTestUtils.waitForEvent(
|
|
boxGroup.shadowRoot,
|
|
"slotchange"
|
|
);
|
|
let secondItem = document.createElement("moz-box-item");
|
|
secondButton.label = "second item";
|
|
boxGroup.prepend(secondItem);
|
|
await slotChanged;
|
|
|
|
verifyStyles(secondItem, FIRST_ITEM_STYLES);
|
|
verifyStyles(boxItem, MIDDLE_ITEM_STYLES);
|
|
verifyStyles(boxButton, MIDDLE_ITEM_STYLES);
|
|
verifyStyles(secondButton, LAST_ITEM_STYLES);
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test"></pre>
|
|
</body>
|
|
</html>
|