Skip to content

Commit

Permalink
Add showpopup and hidepopup invoking attributes for popup
Browse files Browse the repository at this point in the history 
This CL adds 'showpopup' and 'hidepopup' as two more invoking
attributes for the Popup API. Details of the expected behavior
are discussed here:

  openui/open-ui#523 (comment)

Bug: 1307772
Change-Id: Ie6c0d72b36cedd827e0b484b5635fcc6b99fb8f6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3609067
Reviewed-by: Joey Arhar <[email protected]>
Auto-Submit: Mason Freed <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#997841}
  • Loading branch information
@mfreed7 @chromium-wpt-export-bot
mfreed7 authored and chromium-wpt-export-bot committed Apr 29, 2022
1 parent 4ae557c commit 4c555eb
Showing 1 changed file with 111 additions and 39 deletions.
150 changes: 111 additions & 39 deletions html/semantics/popups/popup-invoking-attribute.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,47 +21,119 @@
</style>

<script>
function clickOn(element) {
const actions = new test_driver.Actions();
return actions.pointerMove(0, 0, {origin: element})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
}
function clickOn(element) {
const actions = new test_driver.Actions();
return actions.pointerMove(0, 0, {origin: element})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
}

const popup = document.querySelector('[popup]');
const button = document.querySelector('button');
let showCount = 0;
let hideCount = 0;
popup.addEventListener('show',() => ++showCount);
popup.addEventListener('hide',() => ++hideCount);
const popup = document.querySelector('[popup]');
const button = document.querySelector('button');
let showCount = 0;
let hideCount = 0;
popup.addEventListener('show',() => ++showCount);
popup.addEventListener('hide',() => ++hideCount);

async function assertState(expectOpen,expectShow,expectHide) {
assert_equals(popup.matches(':popup-open'),expectOpen,'Popup open state is incorrect');
await new Promise(resolve => requestAnimationFrame(resolve));
assert_equals(showCount,expectShow,'Show count is incorrect');
assert_equals(hideCount,expectHide,'Hide count is incorrect');
}
async function assertState(expectOpen,expectShow,expectHide) {
assert_equals(popup.matches(':popup-open'),expectOpen,'Popup open state is incorrect');
await new Promise(resolve => requestAnimationFrame(resolve));
assert_equals(showCount,expectShow,'Show count is incorrect');
assert_equals(hideCount,expectHide,'Hide count is incorrect');
}

promise_test(async () => {
showCount = hideCount = 0;
await assertState(false,0,0);
await clickOn(button);
await assertState(true,1,0);
popup.hidePopup();
await assertState(false,1,1);
button.click();
await assertState(true,2,1);
popup.hidePopup();
await assertState(false,2,2);
}, "Clicking a togglepopup button opens a closed popup");

promise_test(async () => {
showCount = hideCount = 0;
await assertState(false,0,0);
await clickOn(button);
await assertState(true,1,0);
popup.hidePopup();
await assertState(false,1,1);
button.click();
await assertState(true,2,1);
popup.hidePopup();
await assertState(false,2,2);
}, "Clicking a togglepopup button opens a closed popup");
promise_test(async () => {
showCount = hideCount = 0;
await assertState(false,0,0);
await clickOn(button);
await assertState(true,1,0);
await clickOn(button);
await assertState(false,1,1);
}, "Clicking a togglepopup button closes an open popup");

promise_test(async () => {
showCount = hideCount = 0;
await assertState(false,0,0);
await clickOn(button);
await assertState(true,1,0);
await clickOn(button);
await assertState(false,1,1);
}, "Clicking a togglepopup button closes an open popup");
["popup","hint","async"].forEach(type => {
[0,1,2].forEach(t => {
[0,1,2].forEach(s => {
[0,1,2].forEach(h => {
const popup1 = Object.assign(document.createElement('div'),{popup: type, id: 'popup-1'});
const popup2 = Object.assign(document.createElement('div'),{popup: type, id: 'popup-2'});
assert_not_equals(popup1.id,popup2.id);
assert_true(!document.getElementById(popup1.id));
assert_true(!document.getElementById(popup2.id));
const button = document.createElement('button');
document.body.appendChild(popup1);
document.body.appendChild(popup2);
document.body.appendChild(button);
if (t) button.setAttribute('togglepopup',t===1 ? popup1.id : popup2.id);
if (s) button.setAttribute('showpopup',s===1 ? popup1.id : popup2.id);
if (h) button.setAttribute('hidepopup',h===1 ? popup1.id : popup2.id);
test(() => {
// This mimics the expected logic:
let expectedBehavior = t ? "toggle" : (s ? "show" : (h ? "hide" : "none"));
let expectedId = t || s || h || 1;
if (!t && s && h) {
// Special case - only use toggle if the show/hide idrefs match.
expectedBehavior = (s === h) ? "toggle" : "show";
}
const otherId = expectedId !== 1 ? 1 : 2;
function assert_popup(num,state,message) {
assert_true(num>0);
assert_equals((num===1 ? popup1 : popup2).matches(':popup-open'),state,message || "");
}
assert_popup(expectedId,false);
assert_popup(otherId,false);
button.click();
assert_popup(otherId,false,'The other popup should never change');
switch (expectedBehavior) {
case "toggle":
case "show":
assert_popup(expectedId,true,'Toggle or show should show the popup');
(expectedId===1 ? popup1 : popup2).hidePopup(); // Hide the popup
break;
case "hide":
case "none":
assert_popup(expectedId,false,'Hide or none should leave the popup hidden');
break;
default:
assert_unreached();
}
(expectedId===1 ? popup1 : popup2).showPopup(); // Show the popup
assert_popup(expectedId,true);
assert_popup(otherId,false);
button.click();
assert_popup(otherId,false,'The other popup should never change');
switch (expectedBehavior) {
case "toggle":
case "hide":
assert_popup(expectedId,false,'Toggle or hide should hide the popup');
break;
case "show":
case "none":
assert_popup(expectedId,true,'Show or none should leave the popup showing');
break;
default:
assert_unreached();
}
},`Test ${button.outerHTML} with popup=${type}`);
button.remove();
popup1.remove();
popup2.remove();
});
});
});
});
</script>

0 comments on commit 4c555eb

Please sign in to comment.