checkable-active-onblur-with-click.html (5996B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <style> 11 * { 12 font-size: 20px; 13 } 14 </style> 15 </head> 16 <body> 17 18 <!-- This behavior is not explicitly specified. --> 19 20 <input type=checkbox id=cb1 checked> <label for=cb1>ghi</label> 21 <input type=radio id=r1 checked> <label for=r1>jkl</label> 22 <label id=lc>abc <input type=checkbox id=cb2 checked></label> 23 <label id=lr>def <input type=radio id=r2 checked></label> 24 25 <script> 26 promise_test(async () => { 27 await new Promise(resolve => { 28 addEventListener("load", resolve, { once: true }); 29 }); 30 }, "Wait for load"); 31 32 const tabKey = "\uE004"; 33 promise_test(async t => { 34 const checkbox = document.querySelector("input[type=checkbox]"); 35 // pointerdown on the checkbox 36 await (new test_driver.Actions() 37 .pointerMove(2, 2, { origin: checkbox }) 38 .pointerDown()) 39 .send(); 40 t.add_cleanup(async () => { 41 // Release the pointer 42 await (new test_driver.Actions().pointerUp()).send(); 43 }); 44 assert_equals(document.querySelector("input:active"), checkbox, 45 "Checkboxes should be :active while it is pressed"); 46 47 // Press tab 48 await (new test_driver.Actions().keyDown(tabKey).keyUp(tabKey)).send(); 49 assert_equals(document.querySelector(":active"), null, 50 "Checkboxes should not be :active after tab is used to change focus."); 51 }, "Checkboxes should clear :active when the user tabs away from them while pressing it with a pointing device"); 52 53 promise_test(async t => { 54 const radio = document.querySelector("input[type=radio]"); 55 // pointerdown on the radio 56 await (new test_driver.Actions() 57 .pointerMove(2, 2, { origin: radio }) 58 .pointerDown()) 59 .send(); 60 t.add_cleanup(async () => { 61 // Release the pointer 62 await (new test_driver.Actions().pointerUp()).send(); 63 }); 64 assert_equals(document.querySelector("input:active"), radio, 65 "Radios should be :active while it is pressed"); 66 67 // Press tab 68 await (new test_driver.Actions().keyDown(tabKey).keyUp(tabKey)).send(); 69 assert_equals(document.querySelector(":active"), null, 70 "Radios should not be :active after tab is used to change focus."); 71 }, "Radios should clear :active when the user tabs away from them while pressing it with a pointing device"); 72 73 promise_test(async t => { 74 const checkbox = document.querySelector("label > input[type=checkbox]"); 75 const label = checkbox.parentElement; 76 // pointerdown on the label 77 await (new test_driver.Actions() 78 .pointerMove(2, 2, { origin: label }) 79 .pointerDown()) 80 .send(); 81 t.add_cleanup(async () => { 82 // Release the pointer 83 await (new test_driver.Actions().pointerUp()).send(); 84 }); 85 assert_equals(document.querySelector("input:active"), checkbox, 86 "Checkboxes should be :active while the label is pressed"); 87 88 // Press tab 89 await (new test_driver.Actions().keyDown(tabKey).keyUp(tabKey)).send(); 90 assert_equals(document.querySelector(":active"), null, 91 "Checkboxes should not be :active after tab is used to change focus."); 92 }, "Checkboxes should clear :active when the user tabs away from them while pressing the parent label with a pointing device"); 93 94 promise_test(async t => { 95 const radio = document.querySelector("label > input[type=radio]"); 96 const label = radio.parentElement; 97 const radioRect = radio.getBoundingClientRect(); 98 const labelRect = label.getBoundingClientRect(); 99 // pointerdown on the label 100 await (new test_driver.Actions() 101 .pointerMove(2, 2, { origin: label }) 102 .pointerDown()) 103 .send(); 104 t.add_cleanup(async () => { 105 // Release the pointer 106 await (new test_driver.Actions().pointerUp()).send(); 107 }); 108 assert_equals(document.querySelector("input:active"), radio, 109 "Radios should be :active while the label is pressed"); 110 111 // Press tab 112 await (new test_driver.Actions().keyDown(tabKey).keyUp(tabKey)).send(); 113 assert_equals(document.querySelector(":active"), null, 114 "Radios should not be :active after tab is used to change focus."); 115 }, "Radios should clear :active when the user tabs away from them while pressing the parent label with a pointing device"); 116 117 promise_test(async t => { 118 const label = document.querySelector("label[for=cb1]"); 119 // pointerdown on the label 120 await (new test_driver.Actions() 121 .pointerMove(2, 2, { origin: label }) 122 .pointerDown()) 123 .send(); 124 t.add_cleanup(async () => { 125 // Release the pointer 126 await (new test_driver.Actions().pointerUp()).send(); 127 }); 128 assert_equals(document.querySelector("input:active"), label.control, 129 "Checkboxes should be :active while the label is pressed"); 130 131 // Press tab 132 await (new test_driver.Actions().keyDown(tabKey).keyUp(tabKey)).send(); 133 assert_equals(document.querySelector(":active"), null, 134 "Checkboxes should not be :active after tab is used to change focus."); 135 }, "Checkboxes should clear :active when the user tabs away from them while pressing the following label with a pointing device"); 136 137 promise_test(async t => { 138 const label = document.querySelector("label[for=r1]"); 139 // pointerdown on the label 140 await (new test_driver.Actions() 141 .pointerMove(2, 2, { origin: label }) 142 .pointerDown()) 143 .send(); 144 t.add_cleanup(async () => { 145 // Release the pointer 146 await (new test_driver.Actions().pointerUp()).send(); 147 }); 148 assert_equals(document.querySelector("input:active"), label.control, 149 "Radios should be :active while the label is pressed"); 150 151 // Press tab 152 await (new test_driver.Actions().keyDown(tabKey).keyUp(tabKey)).send(); 153 assert_equals(document.querySelector(":active"), null, 154 "Radios should not be :active after tab is used to change focus."); 155 }, "Radios should clear :active when the user tabs away from them while pressing the following label with a pointing device"); 156 </script> 157 </body> 158 </html>