-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Move disabled check for popover*target attributes
Anne asked for this here: whatwg/html#8221 (comment) Change-Id: I129cf2768abc717292b86ea26f7522019ce36d33
- Loading branch information
1 parent
79afaaf
commit 2ac546e
Showing
1 changed file
with
90 additions
and
0 deletions.
There are no files selected for viewing
90 changes: 90 additions & 0 deletions
90
html/semantics/popovers/popover-target-element-disabled.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <!DOCTYPE html> | ||
| <link rel=author href="mailto:[email protected]"> | ||
| <link rel=help href="https://github.com/whatwg/html/pull/8221#discussion_r1049379113"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
|
|
||
| <div id=outerpopover popover=auto> | ||
| <button popovertoggletarget=innerpopover disabled>toggle popover</button> | ||
| </div> | ||
| <div id=innerpopover popover=auto>popover</div> | ||
| <script> | ||
| test(() => { | ||
| outerpopover.showPopover(); | ||
| innerpopover.showPopover(); | ||
| assert_true(innerpopover.matches(':open'), | ||
| 'The inner popover should be able to open successfully.'); | ||
| assert_false(outerpopover.matches(':open'), | ||
| 'The outer popover should be closed by opening the inner one.'); | ||
| }, 'Disabled popover*target buttons should not affect the popover heirarchy.'); | ||
| </script> | ||
|
|
||
| <div id=outerpopover2 popover=auto> | ||
| <button id=togglebutton2 popovertoggletarget=innerpopover2>toggle popover</button> | ||
| </div> | ||
| <div id=innerpopover2 popover=auto>popover</div> | ||
| <script> | ||
| test(() => { | ||
| outerpopover2.showPopover(); | ||
| innerpopover2.showPopover(); | ||
| assert_true(innerpopover2.matches(':open'), | ||
| 'The inner popover should be able to open successfully.'); | ||
| assert_true(outerpopover2.matches(':open'), | ||
| 'The outer popover should stay open when opening the inner one.'); | ||
|
|
||
| togglebutton2.disabled = true; | ||
| assert_false(innerpopover2.matches(':open'), | ||
| 'The inner popover should be closed when the hierarchy is broken.'); | ||
| assert_false(outerpopover2.matches(':open'), | ||
| 'The outer popover should be closed when the hierarchy is broken.'); | ||
| }, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly outer popover is closed.'); | ||
| </script> | ||
|
|
||
| <div id=outerpopover3 popover=auto> | ||
| <button id=togglebutton3 popovertoggletarget=innerpopover3>toggle popover</button> | ||
| </div> | ||
| <div id=innerpopover3 popover=auto>popover</div> | ||
| <script> | ||
| test(() => { | ||
| outerpopover3.showPopover(); | ||
| innerpopover3.showPopover(); | ||
| assert_true(innerpopover3.matches(':open'), | ||
| 'The inner popover should be able to open successfully.'); | ||
| assert_true(outerpopover3.matches(':open'), | ||
| 'The outer popover should stay open when opening the inner one.'); | ||
|
|
||
| togglebutton3.disabled = true; | ||
| assert_false(innerpopover3.matches(':open'), | ||
| 'The inner popover be closed open when the hierarchy is broken.'); | ||
| assert_false(outerpopover3.matches(':open'), | ||
| 'The outer popover be closed open when the hierarchy is broken.'); | ||
| }, 'Disabling popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly inner popover is closed.'); | ||
| </script> | ||
|
|
||
| <div id=outerpopover4 popover=auto> | ||
| <button id=togglebutton4 popovertoggletarget=innerpopover4>toggle popover</button> | ||
| </div> | ||
| <div id=innerpopover4 popover=auto>popover</div> | ||
| <form id=submitform>form</form> | ||
| <script> | ||
| test(() => { | ||
| outerpopover4.showPopover(); | ||
| innerpopover4.showPopover(); | ||
| assert_true(innerpopover4.matches(':open'), | ||
| 'The inner popover should be able to open successfully.'); | ||
| assert_true(outerpopover4.matches(':open'), | ||
| 'The outer popover should stay open when opening the inner one.'); | ||
|
|
||
| togglebutton4.form = 'submitform'; | ||
| assert_true(innerpopover4.matches(':open'), | ||
| 'The inner popover should stay open when the hierarchy is broken.'); | ||
| assert_true(outerpopover4.matches(':open'), | ||
| 'The outer popover should stay open when the hierarchy is broken.'); | ||
|
|
||
| innerpopover4.hidePopover(); | ||
| assert_false(innerpopover4.matches(':open'), | ||
| 'Because the relationship is broken, outerpopover4 and innerpopover4 are unrelated. So closing outerpopover4 closes all "unrelated" popovers including innerpopover4.'); | ||
| assert_false(outerpopover4.matches(':open'), | ||
| 'The outer popover should be closed by calling hidePopover on it.'); | ||
| }, 'Setting the form attribute on popover*target buttons when popovers are open should still cause all popovers to be closed when the formerly inner popover is closed.'); | ||
| </script> |