|
| 1 | +<!doctype html> |
| 2 | +<meta charset="utf-8"> |
| 3 | +<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-light-dismiss"> |
| 4 | +<script src="/resources/testharness.js"></script> |
| 5 | +<script src="/resources/testharnessreport.js"></script> |
| 6 | +<script src="/resources/testdriver.js"></script> |
| 7 | +<script src="/resources/testdriver-actions.js"></script> |
| 8 | +<script src="/resources/testdriver-vendor.js"></script> |
| 9 | +<script src="../../popovers/resources/popover-utils.js"></script> |
| 10 | + |
| 11 | +<button id="outside">Outside</button> |
| 12 | + |
| 13 | +<!-- test cases: --> |
| 14 | +<dialog closedby="any" data-behavior="any"></dialog> |
| 15 | +<dialog closedby="closerequest" data-behavior="closerequest"></dialog> |
| 16 | +<dialog closedby="none" data-behavior="none"></dialog> |
| 17 | + |
| 18 | +<dialog closedby data-behavior="closerequest"></dialog> |
| 19 | +<dialog closedby="invalid" data-behavior="closerequest"></dialog> |
| 20 | +<dialog data-behavior="closerequest"></dialog> |
| 21 | + |
| 22 | +<dialog closedby="AnY" data-behavior="any"></dialog> |
| 23 | +<dialog closedby="ClOsErEqUeSt" data-behavior="closerequest"></dialog> |
| 24 | +<dialog closedby="NoNe" data-behavior="none"></dialog> |
| 25 | + |
| 26 | +<script> |
| 27 | + function openDialog(dialog,modal) { |
| 28 | + assert_false(dialog.open); |
| 29 | + if (modal) { |
| 30 | + dialog.showModal(); |
| 31 | + } else { |
| 32 | + dialog.show(); |
| 33 | + } |
| 34 | + assert_true(dialog.open); |
| 35 | + assert_equals(dialog.matches(':modal'),modal); |
| 36 | + } |
| 37 | + function runTest(dialog) { |
| 38 | + for(modal of [false,true]) { |
| 39 | + promise_test(async (t) => { |
| 40 | + assert_false(dialog.open); |
| 41 | + t.add_cleanup(() => dialog.close()); |
| 42 | + // Try hitting ESC |
| 43 | + openDialog(dialog,modal); |
| 44 | + const ESC = '\uE00C'; |
| 45 | + await new test_driver.send_keys(document.documentElement,ESC); |
| 46 | + const respondsToEsc = !dialog.open; |
| 47 | + dialog.close(); |
| 48 | + // Try clicking outside |
| 49 | + openDialog(dialog,modal); |
| 50 | + await clickOn(outside); |
| 51 | + const respondsToLightDismiss = !dialog.open; |
| 52 | + dialog.close(); |
| 53 | + // See if expectations match |
| 54 | + switch (dialog.dataset.behavior) { |
| 55 | + case 'any': |
| 56 | + assert_true(respondsToEsc,'Dialog should respond to ESC'); |
| 57 | + assert_true(respondsToLightDismiss,'Dialog should respond to light dismiss'); |
| 58 | + break; |
| 59 | + case 'closerequest': |
| 60 | + assert_true(respondsToEsc,'Dialog should respond to ESC'); |
| 61 | + assert_false(respondsToLightDismiss,'Dialog should NOT respond to light dismiss'); |
| 62 | + break; |
| 63 | + case 'none': |
| 64 | + assert_false(respondsToEsc,'Dialog should NOT respond to ESC'); |
| 65 | + assert_false(respondsToLightDismiss,'Dialog should NOT respond to light dismiss'); |
| 66 | + break; |
| 67 | + default: |
| 68 | + assert_notreached('Invalid expectation'); |
| 69 | + } |
| 70 | + // Check reflection |
| 71 | + assert_equals(dialog.closedBy,dialog.dataset.behavior,'Reflection should be limited to known values'); |
| 72 | + }, `closedby=${dialog.getAttribute('closedby')}, ${modal ? 'Modal' : 'Non-modal'}`); |
| 73 | + } |
| 74 | + } |
| 75 | + |
| 76 | + // Add close button, in case of manual testing |
| 77 | + const testDialogs = document.querySelectorAll('dialog'); |
| 78 | + testDialogs.forEach(dialog => { |
| 79 | + const button = dialog.appendChild(document.createElement('button')); |
| 80 | + button.innerText = 'Close'; |
| 81 | + button.addEventListener('click',() => dialog.close()); |
| 82 | + }); |
| 83 | + |
| 84 | + // Run tests |
| 85 | + testDialogs.forEach(runTest); |
| 86 | +</script> |
0 commit comments