| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <!-- |
| To test the new CSS property -webkit-tap-highlight-color which is only supported when building |
| WebKit with ENABLE(TOUCH_EVENTS), we create a new div element and add -webkit-tap-highlight-color |
| in the element, then see whether we can get the specified tap highlight color from DOM. |
| WebKit ports can use this css property to get the customized tap highlight color from the webpage |
| which is set by web developers to make sure that tap highlight color fits their websites instead |
| of using the hardcode value provided by browsers. |
| --> |
| </head> |
| <body> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| var div = document.createElement("div"); |
| div.id = "touchtarget"; |
| div.style.width = "100px"; |
| div.style.height = "100px"; |
| div.style.color = "blue"; |
| div.innerText = "Touch Me!"; |
| div.style.webkitTapHighlightColor = "rgba(11, 22, 33, 0)"; |
| |
| function onTouchStart() |
| { |
| debug("Event: touch start"); |
| shouldBeEqualToString("event.targetTouches[0].target.tagName", "DIV"); |
| shouldBeEqualToString("event.targetTouches[0].target.id", "touchtarget"); |
| shouldBeEqualToString("div.ownerDocument.defaultView.getComputedStyle(div, null).getPropertyValue('-webkit-tap-highlight-color')", "rgba(11, 22, 33, 0)"); |
| div.style.webkitTapHighlightColor = ""; // Clear the customized tap highlight color |
| } |
| |
| function onTouchEnd() |
| { |
| debug("Event: touch end"); |
| // Check the default value. |
| shouldBeFalse("div.ownerDocument.defaultView.getComputedStyle(div, null).getPropertyValue('-webkit-tap-highlight-color') == 'rgba(11, 22, 33, 0)'") |
| shouldBeNonNull("div.ownerDocument.defaultView.getComputedStyle(div, null).getPropertyValue('-webkit-tap-highlight-color')"); |
| // Notify the test done. |
| isSuccessfullyParsed(); |
| testRunner.notifyDone(); |
| } |
| |
| div.addEventListener("touchstart", onTouchStart, false); |
| div.addEventListener("touchend", onTouchEnd, false); |
| document.body.insertBefore(div, document.body.firstChild); |
| |
| function touchTargets() |
| { |
| eventSender.clearTouchPoints(); |
| eventSender.addTouchPoint(20, 20); |
| eventSender.touchStart(); |
| eventSender.updateTouchPoint(0, 50, 50); |
| eventSender.touchMove(); |
| eventSender.releaseTouchPoint(0); |
| eventSender.touchEnd(); |
| } |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| if (window.eventSender && eventSender.clearTouchPoints) { |
| description("Check tap highlight color in touch event"); |
| |
| touchTargets(); |
| } else { |
| debug("This test requires DumpRenderTree && WebKit built with ENABLE(TOUCH_EVENT).") |
| } |
| </script> |
| </body> |
| </html> |
