| <!DOCTYPE html> |
| <script src='../../resources/testharness.js'></script> |
| <script src='../../resources/testharnessreport.js'></script> |
| <style> |
| input { background-color: black; } |
| input:active { background-color: red; } |
| </style> |
| <div id="sandbox"> |
| <input id="i1" type="button"><input id="i2" type="button"> |
| </div> |
| <script> |
| if (window.eventSender) { |
| test(() => { |
| var i1 = document.querySelector('#i1'); |
| var x = i1.offsetLeft + i1.offsetWidth / 2; |
| var y = i1.offsetTop + i1.offsetHeight / 2; |
| eventSender.mouseMoveTo(x, y); |
| |
| var i2 = document.querySelector('#i2'); |
| |
| assert_equals(getComputedStyle(i1).backgroundColor, 'rgb(0, 0, 0)'); |
| assert_equals(getComputedStyle(i2).backgroundColor, 'rgb(0, 0, 0)'); |
| |
| // Press mouse button |
| eventSender.mouseDown(); |
| assert_equals(document.activeElement.id, 'i1'); |
| assert_equals(getComputedStyle(i1).backgroundColor, 'rgb(255, 0, 0)'); |
| assert_equals(getComputedStyle(i2).backgroundColor, 'rgb(0, 0, 0)'); |
| |
| // Moving focus via TAB |
| eventSender.keyDown('\t'); |
| assert_equals(document.activeElement.id, 'i2'); |
| assert_equals(getComputedStyle(i1).backgroundColor, 'rgb(255, 0, 0)'); |
| assert_equals(getComputedStyle(i2).backgroundColor, 'rgb(0, 0, 0)'); |
| |
| // Release mouse button |
| eventSender.mouseUp(); |
| assert_equals(getComputedStyle(i1).backgroundColor, 'rgb(0, 0, 0)'); |
| assert_equals(getComputedStyle(i2).backgroundColor, 'rgb(0, 0, 0)'); |
| |
| sandbox.remove(); |
| }, ":active state should stick while mouse button is pressed regardless of focus state."); |
| } |
| </script> |
