Commit 0f38ffc8 authored by Joey Arhar's avatar Joey Arhar Committed by moz-wptsync-bot
Browse files

Bug 1806570 [wpt PR 37594] - Check popover stack when buttons are modified, a=testonly 

Automatic update from web-platform-tests
Check popover stack when buttons are modified

The popover stack is constructed by attributes set on buttons.  When
those buttons are modified, it can break connections in the stack. This
patch adds checks to spots where buttons can be modified in order to fix
up the list by closing all popovers when a connection has been broken.

This patch also moves the disabled check for popover*target attributes
which Anne asked for here:
https://github.com/whatwg/html/pull/8221#discussion_r1049379113

Bug: 1307772, 1408546
Change-Id: I129cf2768abc717292b86ea26f7522019ce36d33
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4115790


Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: default avatarMason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1096920}

--

wpt-commits: 355b774d54fd4a6fff8165533d731616ac09dc6e
wpt-pr: 37594
parent a5894a82

testing/web-platform/tests/html/semantics/popovers/popover-target-element-disabled.tentative.html

0 → 100644
+126 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<link rel=author href="mailto:jarhar@chromium.org">

<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 should be closed when the hierarchy is broken.');

  assert_false(outerpopover3.matches(':open'),

    'The outer popover be 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 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.setAttribute('form', 'submitform');

  assert_false(innerpopover4.matches(':open'),

    'The inner popover be should be closed when the hierarchy is broken.');

  assert_false(outerpopover4.matches(':open'),

    'The outer popover be should be closed when the hierarchy is broken.');

}, 'Setting the form attribute on popover*target buttons when popovers are open should close all popovers.');

</script>



<div id=outerpopover5 popover=auto>

  <input type=button id=togglebutton5 popovertoggletarget=innerpopover5>toggle popover</button>

</div>

<div id=innerpopover5 popover=auto>popover</div>

<script>

test(() => {

  outerpopover5.showPopover();

  innerpopover5.showPopover();

  assert_true(innerpopover5.matches(':open'),

    'The inner popover should be able to open successfully.');

  assert_true(outerpopover5.matches(':open'),

    'The outer popover should stay open when opening the inner one.');



  togglebutton5.setAttribute('type', 'text');

  assert_false(innerpopover5.matches(':open'),

    'The inner popover be should be closed when the hierarchy is broken.');

  assert_false(outerpopover5.matches(':open'),

    'The outer popover be should be closed when the hierarchy is broken.');

}, 'Changing the input type on a popover*target button when popovers are open should close all popovers.');

</script>



<div id=outerpopover6 popover=auto>

  <button id=togglebutton6 popovertoggletarget=innerpopover6>toggle popover</button>

</div>

<div id=innerpopover6 popover=auto>popover</div>

<script>

test(() => {

  outerpopover6.showPopover();

  innerpopover6.showPopover();

  assert_true(innerpopover6.matches(':open'),

    'The inner popover should be able to open successfully.');

  assert_true(outerpopover6.matches(':open'),

    'The outer popover should stay open when opening the inner one.');



  togglebutton6.remove();

  assert_false(innerpopover6.matches(':open'),

    'The inner popover be should be closed when the hierarchy is broken.');

  assert_false(outerpopover6.matches(':open'),

    'The outer popover be should be closed when the hierarchy is broken.');

}, 'Disconnecting popover*target buttons when popovers are open should close all popovers.');

</script>