forked from mykmelez/gecko
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1868200 [wpt PR 43501] - Split out anchor-attribute related stuff…
… from popover test, a=testonly Automatic update from web-platform-tests Split out anchor-attribute related stuff from popover test Per the [1] comment, this test contained things about the anchor attribute which aren't (yet) standardized. So this CL splits those parts out into a separate tentative test. [1] web-platform-tests/interop#423 (comment) Bug: 1309178 Change-Id: I46969c0336a6260b4551ae9111fb0002231464fd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5082149 Commit-Queue: Joey Arhar <jarhar@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1234212} -- wpt-commits: e905d6af9e32b9cfa514f8950c6ec82e3d59e4ad wpt-pr: 43501
- Loading branch information
1 parent
6a54185
commit a693d5e
Showing
2 changed files
with
115 additions
and
53 deletions.
There are no files selected for viewing
104 changes: 104 additions & 0 deletions
104
...b-platform/tests/html/semantics/popovers/popover-stacking-anchor-attribute.tentative.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,104 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <link rel="author" href="mailto:masonf@chromium.org"> | ||
| <link rel=help href="https://www.w3.org/TR/css-anchor-position-1/#implicit"> | ||
| <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
|
|
||
| <!-- Once this test is made non-tentative, it can be folded back into popover-stacking.html --> | ||
|
|
||
| <div class="example"> | ||
| <p>anchor attribute relationship</p> | ||
| <div id=anchor1 popover class=ancestor><p>Ancestor popover</p></div> | ||
| <div anchor=anchor1 popover class=child><p>Child popover</p></div> | ||
| </div> | ||
|
|
||
| <div class="example"> | ||
| <p>indirect anchor attribute relationship</p> | ||
| <div popover class=ancestor> | ||
| <p>Ancestor popover</p> | ||
| <div> | ||
| <div> | ||
| <span id=anchor2>Anchor</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div anchor=anchor2 popover class=child><p>Child popover</p></div> | ||
| </div> | ||
|
|
||
| <!-- Other examples --> | ||
|
|
||
| <div popover id=p1 anchor=b1><p>This is popover #1</p> | ||
| <button id=b2 onclick='p2.showPopover()'>Popover 2</button> | ||
| <button id=b4 onclick='p4.showPopover()'>Popover 4</button> | ||
| </div> | ||
| <div popover id=p2 anchor=b2><p>This is popover #2</p> | ||
| <button id=b3 onclick='p3.showPopover()'>Popover 3</button> | ||
| </div> | ||
| <div popover id=p3 anchor=b3><p>This is popover #3</p></div> | ||
| <div popover id=p4 anchor=b4><p>This is popover #4</p></div> | ||
| <button id=b1 onclick='p1.showPopover()'>Popover 1</button> | ||
|
|
||
| <dialog id=d1>This is a dialog<button onclick='this.parentElement.close()'>Close</button></dialog> | ||
| <button id=b5 onclick='d1.showPopover()'>Dialog</button> | ||
|
|
||
| <script> | ||
| // Test basic ancestor relationships | ||
| for(let example of document.querySelectorAll('.example')) { | ||
| const descr = example.querySelector('p').textContent; | ||
| const ancestor = example.querySelector('[popover].ancestor'); | ||
| const child = example.querySelector('[popover].child'); | ||
| const clickToActivate = example.querySelector('.clickme'); | ||
| test(function() { | ||
| assert_true(!!descr && !!ancestor && !!child); | ||
| assert_false(ancestor.matches(':popover-open')); | ||
| assert_false(child.matches(':popover-open')); | ||
| ancestor.showPopover(); | ||
| if (clickToActivate) | ||
| clickToActivate.click(); | ||
| else | ||
| child.showPopover(); | ||
| assert_true(child.matches(':popover-open')); | ||
| assert_true(ancestor.matches(':popover-open')); | ||
| ancestor.hidePopover(); | ||
| assert_false(ancestor.matches(':popover-open')); | ||
| assert_false(child.matches(':popover-open')); | ||
| },descr); | ||
| } | ||
|
|
||
| const popovers = [p1, p2, p3, p4]; | ||
|
|
||
| function assertState(...states) { | ||
| assert_equals(popovers.length,states.length); | ||
| for(let i=0;i<popovers.length;++i) { | ||
| assert_equals(popovers[i].matches(':popover-open'),states[i],`Popover #${i+1} incorrect state`); | ||
| } | ||
| } | ||
| test(function() { | ||
| assertState(false,false,false,false); | ||
| p1.showPopover(); | ||
| assertState(true,false,false,false); | ||
| p2.showPopover(); | ||
| assertState(true,true,false,false); | ||
| p3.showPopover(); | ||
| assertState(true,true,true,false); | ||
| // P4 is a sibling of P2, so showing it should | ||
| // close P2 and P3. | ||
| p4.showPopover(); | ||
| assertState(true,false,false,true); | ||
| // P2 should close P4 now. | ||
| p2.showPopover(); | ||
| assertState(true,true,false,false); | ||
| // Hiding P1 should hide all. | ||
| p1.hidePopover(); | ||
| assertState(false,false,false,false); | ||
| }, "more complex nesting, all using anchor ancestry") | ||
| </script> | ||
|
|
||
| <style> | ||
| #p1 { top:350px; } | ||
| #p2 { top:350px; left:200px; } | ||
| #p3 { top:500px; } | ||
| #p4 { top:500px;left:200px; } | ||
| </style> |
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