| <!DOCTYPE html> |
| <link rel=author href="mailto:jarhar@chromium.org"> |
| <link rel=help href="https://github.com/whatwg/html/issues/9111"> |
| <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="../../popovers/resources/toggle-event-source-test.js"></script> |
| |
| <button id=commandsource commandfor=details command=toggle>command source</button> |
| <details id=details> |
| <summary>summary</summary> |
| details |
| </details> |
| |
| <details id=detailsWithoutSummary> |
| details without summary |
| </details> |
| |
| <script> |
| const details = document.getElementById('details'); |
| const detailsWithoutSummary = document.getElementById('detailsWithoutSummary'); |
| const summary = details.querySelector('summary'); |
| const commandsource = document.getElementById('commandsource'); |
| |
| async function click(element) { |
| // Click halfway up the element to click the activatable summary instead of |
| // the details. |
| const height = element.getBoundingClientRect().height; |
| return (new test_driver.Actions() |
| .pointerMove(0, -height / 2, {origin: element}) |
| .pointerDown() |
| .pointerUp()) |
| .send(); |
| } |
| |
| createToggleEventSourceTest({ |
| description: 'ToggleEvent.source on <details> elements: details.open.', |
| target: details, |
| openFunc: async () => details.open = true, |
| closeFunc: async () => details.open = false, |
| openSource: null, |
| closeSource: null, |
| skipBeforetoggle: true |
| }); |
| |
| createToggleEventSourceTest({ |
| description: 'ToggleEvent.source on <details> elements: click summary.', |
| target: details, |
| openFunc: async () => summary.click(), |
| closeFunc: async () => summary.click(), |
| openSource: null, |
| closeSource: null, |
| skipBeforetoggle: true |
| }); |
| |
| createToggleEventSourceTest({ |
| description: 'ToggleEvent.source on <details> elements: click details.', |
| target: detailsWithoutSummary, |
| openFunc: async () => await click(detailsWithoutSummary), |
| closeFunc: async () => await click(detailsWithoutSummary), |
| openSource: null, |
| closeSource: null, |
| skipBeforetoggle: true |
| }); |
| |
| createToggleEventSourceTest({ |
| description: 'ToggleEvent.source on <details> elements: command invokers.', |
| target: details, |
| openFunc: async () => commandsource.click(), |
| closeFunc: async () => commandsource.click(), |
| openSource: commandsource, |
| closeSource: commandsource, |
| skipBeforetoggle: true |
| }); |
| </script> |
