-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement support for referencetarget with interesttarget
Bug: 326681249 Change-Id: I81c2e06ec0cbabfe5856950f6b5c331751843f28 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6239654 Reviewed-by: Mason Freed <[email protected]> Commit-Queue: Luke <[email protected]> Cr-Commit-Position: refs/heads/main@{#1417414}
- Loading branch information
1 parent
25d1c63
commit ddbe997
Showing
1 changed file
with
67 additions
and
0 deletions.
There are no files selected for viewing
67 changes: 67 additions & 0 deletions
67
shadow-dom/reference-target/tentative/interesttarget.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,67 @@ | ||
<!DOCTYPE HTML> | ||
<html> | ||
|
||
<head> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="/resources/testdriver.js"></script> | ||
<script src="/resources/testdriver-vendor.js"></script> | ||
<script src="/resources/testdriver-actions.js"></script> | ||
<script src="/wai-aria/scripts/aria-utils.js"></script> | ||
<script src="/html/semantics/the-button-element/interest-target/resources/invoker-utils.js"></script> | ||
</head> | ||
|
||
<body> | ||
<style> | ||
[interesttarget] { | ||
interest-target-delay: 0s; | ||
} | ||
</style> | ||
<button id="toggle-button-1" interesttarget="x-popover-1">Toggle the popover</button> | ||
<x-popover-1 id="x-popover-1"> | ||
<template shadowrootmode="open" shadowrootreferencetarget="popover"> | ||
<div id="popover" popover>Popover content inside shadow root</div> | ||
</template> | ||
</x-popover-1> | ||
|
||
<button id="toggle-button-2" interesttarget="x-popover-2">Toggle the popover</button> | ||
<x-popover-2 id="x-popover-2"></x-popover-2> | ||
<script> | ||
const customPopover2 = document.querySelector('x-popover-2'); | ||
customPopover2.attachShadow({ mode: 'open', referenceTarget: 'popover' }); | ||
customPopover2.shadowRoot.innerHTML = '<div id="popover" popover>Popover content inside shadow root</div>'; | ||
</script> | ||
|
||
<button id="toggle-button-3">Toggle the popover</button> | ||
<x-popover-3 id="x-popover-3"> | ||
<template shadowrootmode="open" shadowrootreferencetarget="popover"> | ||
<div id="popover" popover>Popover content inside shadow root</div> | ||
</template> | ||
</x-popover-3> | ||
|
||
<script> | ||
function testInterestTarget(popoverId, buttonId, name) { | ||
promise_test(async function () { | ||
const xPopover = document.getElementById(popoverId); | ||
const popover = xPopover.shadowRoot.getElementById("popover"); | ||
|
||
let showCount = 0; | ||
popover.addEventListener('beforetoggle', (e) => { | ||
if (e.newState === "open") | ||
++showCount; | ||
}); | ||
|
||
const toggleButton = document.getElementById(buttonId); | ||
await hoverOver(toggleButton); | ||
|
||
assert_equals(showCount, 1, "showCount"); | ||
}, name); | ||
} | ||
testInterestTarget('x-popover-1', 'toggle-button-1', "Shadow root reference target works with interesttarget attribute."); | ||
testInterestTarget('x-popover-2', 'toggle-button-2', "Shadow root reference target works with interesttarget attribute via options."); | ||
document.getElementById('toggle-button-3').interestTargetElement = document.getElementById('x-popover-3'); | ||
testInterestTarget('x-popover-3', 'toggle-button-3', "Shadow root reference target works with .interestTargetElement property."); | ||
</script> | ||
</body> | ||
|
||
</html> |