forked from mirrors/gecko-dev
4e978b56b5
Gijs for front-end bits, layout for the new CSS properties and the removal of nsDeckFrame / nsStackLayout, Jamie and Morgan for the a11y changes. As discussed in the bug, the main tricky part here is handling a11y correctly. For <deck>, that's trivial (just use `visibility: hidden` to hide the panels visually, while removing the unselected panels from the a11y tree). For <tabpanels> however we need to do something special. We do want to hide stuff visually, but we want to preserve the contents in the a11y tree. For that, the easiest fix is introducing a new privileged CSS property (-moz-subtree-hidden-only-visually), which takes care of not painting the frame, but marks stuff offscreen in the accessibility tree. This is not intended to be a property used widely. Other than that, the changes are relatively straight-forward, though some of the accessible/mac changes I could get a sanity-check on. Differential Revision: https://phabricator.services.mozilla.com/D157875
133 lines
4.9 KiB
HTML
133 lines
4.9 KiB
HTML
<?xml version="1.0"?>
|
|
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
|
|
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
|
|
<!--
|
|
XUL Widget Test for deck
|
|
-->
|
|
<window title="Deck Test"
|
|
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
|
|
|
|
<deck id="deck1" style="padding-top: 5px; padding-bottom: 12px;">
|
|
<button id="d1b1" label="Button One"/>
|
|
<button id="d1b2" label="Button Two is larger" style="height: 80px; margin: 1px;"/>
|
|
</deck>
|
|
<deck id="deck2" selectedIndex="1">
|
|
<button id="d2b1" label="Button One"/>
|
|
<button id="d2b2" label="Button Two"/>
|
|
</deck>
|
|
<deck id="deck3" selectedIndex="1">
|
|
<button id="d3b1" label="Remove me"/>
|
|
<button id="d3b2" label="Keep me selected"/>
|
|
</deck>
|
|
<deck id="deck4" selectedIndex="5">
|
|
<button id="d4b1" label="Remove me"/>
|
|
<button id="d4b2" label="Remove me"/>
|
|
<button id="d4b3" label="Remove me"/>
|
|
<button id="d4b4" label="Button 4"/>
|
|
<button id="d4b5" label="Button 5"/>
|
|
<button id="d4b6" label="Keep me selected"/>
|
|
<button id="d4b7" label="Button 7"/>
|
|
</deck>
|
|
<deck id="deck5" selectedIndex="2">
|
|
<button id="d5b1" label="Button 1"/>
|
|
<button id="d5b2" label="Button 2"/>
|
|
<button id="d5b3" label="Keep me selected"/>
|
|
<button id="d5b4" label="Remove me"/>
|
|
<button id="d5b5" label="Remove me"/>
|
|
<button id="d5b6" label="Remove me"/>
|
|
</deck>
|
|
<!-- test results are displayed in the html:body -->
|
|
<body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
|
|
|
|
<!-- test code goes here -->
|
|
<script type="application/javascript"><![CDATA[
|
|
add_task(async function run_tests() {
|
|
test_deck();
|
|
await test_deck_child_removal();
|
|
});
|
|
|
|
function test_deck()
|
|
{
|
|
var deck = $("deck1");
|
|
is(deck.selectedIndex, 0, "deck one selectedIndex");
|
|
// this size is the button height, 80, plus the button padding of 1px on each side,
|
|
// plus the deck's 5px top padding and the 12px bottom padding.
|
|
var rect = deck.getBoundingClientRect();
|
|
is(Math.round(rect.bottom) - Math.round(rect.top), 99, "deck size of largest child");
|
|
synthesizeMouseExpectEvent(deck, 12, 12, { }, $("d1b1"), "click", "mouse on deck one");
|
|
|
|
// change the selected page of the deck and ensure that the mouse click goes
|
|
// to the button on that page
|
|
deck.selectedIndex = 1;
|
|
is(deck.selectedIndex, 1, "deck one selectedIndex after change");
|
|
synthesizeMouseExpectEvent(deck, 9, 9, { }, $("d1b2"), "click", "mouse on deck one after change");
|
|
|
|
deck = $("deck2");
|
|
is(deck.selectedIndex, 1, "deck two selectedIndex");
|
|
synthesizeMouseExpectEvent(deck, 9, 9, { }, $("d2b2"), "click", "mouse on deck two");
|
|
}
|
|
|
|
async function test_deck_child_removal()
|
|
{
|
|
// Start with a simple case where we have two child nodes in a deck, with
|
|
// the second child (index 1) selected. Removing the first node should
|
|
// automatically set the selectedIndex at 0.
|
|
let deck = $("deck3");
|
|
let child = $("d3b1");
|
|
is(deck.selectedIndex, 1, "Should have the deck element at index 1 selected");
|
|
|
|
// Remove the child at the 0th index. The deck should automatically
|
|
// set the selectedIndex to "0".
|
|
child.remove();
|
|
|
|
await Promise.resolve();
|
|
|
|
is(deck.selectedIndex, 0, "Should have the deck element at index 0 selected");
|
|
|
|
// Now scale it up by using a deck with 7 child nodes, and remove the
|
|
// first three, making sure that the selectedIndex is decremented
|
|
// each time.
|
|
deck = $("deck4");
|
|
let expectedIndex = 5;
|
|
is(deck.selectedIndex, expectedIndex,
|
|
"Should have the deck element at index " + expectedIndex + " selected");
|
|
|
|
for (let i = 0; i < 3; ++i) {
|
|
deck.firstChild.remove();
|
|
expectedIndex--;
|
|
await Promise.resolve();
|
|
is(deck.selectedIndex, expectedIndex,
|
|
"Should have the deck element at index " + expectedIndex + " selected");
|
|
}
|
|
|
|
// Check that removing the currently selected node doesn't change
|
|
// behaviour.
|
|
deck.childNodes[expectedIndex].remove();
|
|
await Promise.resolve();
|
|
is(deck.selectedIndex, expectedIndex,
|
|
"The selectedIndex should not change when removing the node " +
|
|
"at the selected index.");
|
|
|
|
// Finally, make sure we haven't changed the behaviour when removing
|
|
// nodes at indexes greater than the selected node.
|
|
deck = $("deck5");
|
|
expectedIndex = 2;
|
|
await Promise.resolve();
|
|
is(deck.selectedIndex, expectedIndex,
|
|
"Should have the deck element at index " + expectedIndex + " selected");
|
|
|
|
// And then remove all of the nodes, starting from last to first, making
|
|
// sure that the selectedIndex does not change.
|
|
while (deck.lastChild) {
|
|
deck.lastChild.remove();
|
|
await Promise.resolve();
|
|
is(deck.selectedIndex, expectedIndex,
|
|
"Should have the deck element at index " + expectedIndex + " selected");
|
|
}
|
|
}
|
|
]]>
|
|
</script>
|
|
|
|
</window>
|