Implement new behavior for invoking ("popup") elements
The previous code assumed all potential invoking elements formed part
of the ancestor chain. With recent clarifications, only the element
that actually invoked the popup should count as an invoking element.
Bug: 1168738
Change-Id: I246de43b69770793d848c714ebda4aa9b316aaa6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2795412
Commit-Queue: Mason Freed <masonf@chromium.org>
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Auto-Submit: Mason Freed <masonf@chromium.org>
Reviewed-by: Ionel Popescu <iopopesc@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#867845}
diff --git a/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html b/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html
index 613b659..30e0c90 100644
--- a/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html
+++ b/html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html
@@ -22,9 +22,18 @@
<span id=inside2>Inside popup 2</span>
</popup>
+<button id=b3 popup=p3>Popup 3 - button 1
+ <popup id=p4>Inside popup 4</popup>
+</button>
+<popup id=p3>Inside popup 3</popup>
+<button id=b4 popup=p3>Popup 3 - button 2
+ <popup id=p5>Inside popup 5</popup>
+</button>
+
<style>
#p1 { top:50px; }
#p2 { top:50px; left:250px; }
+ #p4 { top:150px;}
popup { border: 5px solid red; }
</style>
@@ -44,6 +53,11 @@
const outside = document.querySelector('#outside');
const inside1 = document.querySelector('#inside1');
const inside2 = document.querySelector('#inside2');
+ const button3 = document.querySelector('#b3');
+ const button4 = document.querySelector('#b4');
+ const popup3 = document.querySelector('#p3');
+ const popup4 = document.querySelector('#p4');
+ const popup5 = document.querySelector('#p5');
(async function() {
setup({ explicit_done: true });
@@ -107,6 +121,24 @@
assert_equals(popup1HideCount,p1HideCount);
},'Clicking on anchor element shouldn\'t close its popup');
+ await clickOn(button3);
+ assert_true(popup3.open,'invoking element should open popup');
+ popup4.show();
+ test(t => {
+ assert_true(popup4.open);
+ assert_true(popup3.open);
+ },'An invoking element should be part of the ancestor chain');
+
+ await clickOn(button3);
+ assert_true(popup3.open);
+ assert_false(popup4.open);
+ assert_false(popup5.open);
+ popup5.show();
+ test(t => {
+ assert_true(popup5.open);
+ assert_false(popup3.open);
+ },'An invoking that was not used to invoke the popup should NOT be part of the ancestor chain');
+
done();
})();
</script>
