[iOS] Add tests to ensure CSS :active and :hover are applied when processing touch...
authordbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 15 Jul 2014 00:14:03 +0000 (00:14 +0000)
committerdbates@webkit.org <dbates@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 15 Jul 2014 00:14:03 +0000 (00:14 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134905
<rdar://problem/16602779>

Reviewed by Simon Fraser.

.:
Add a manual test to ensure that styles for CSS pseudo-class :hover aren't temporarily cleared
on the tapped element when processing a touchend as a result of finger pressing and releasing
on the same element that is initially positioned outside the visible content area.

* ManualTests/ios/touchstart-touchend-on-same-element-should-not-clear-hover.html: Added.

LayoutTests:
Upstream tests by Andreas Kling for <rdar://problem/14324231>.

Add a DRT test to ensure that we apply the style for the CSS pseudo-class :active when
processing touch events.

* platform/iphone-simulator/fast/events/ontouchstart-active-selector-expected.txt: Added.
* platform/iphone-simulator/fast/events/ontouchstart-active-selector.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@171094 268f45cc-cd09-0410-ab3c-d52691b4dbfc

ChangeLog
LayoutTests/ChangeLog
LayoutTests/platform/iphone-simulator/fast/events/ontouchstart-active-selector-expected.txt [new file with mode: 0644]
LayoutTests/platform/iphone-simulator/fast/events/ontouchstart-active-selector.html [new file with mode: 0644]
ManualTests/ios/touchstart-touchend-on-same-element-should-not-clear-hover.html [new file with mode: 0644]

index 1f671b8..06fcd19 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,17 @@
+2014-07-14  Daniel Bates  <dabates@apple.com>
+
+        [iOS] Add tests to ensure CSS :active and :hover are applied when processing touch events
+        https://bugs.webkit.org/show_bug.cgi?id=134905
+        <rdar://problem/16602779> 
+
+        Reviewed by Simon Fraser.
+
+        Add a manual test to ensure that styles for CSS pseudo-class :hover aren't temporarily cleared
+        on the tapped element when processing a touchend as a result of finger pressing and releasing
+        on the same element that is initially positioned outside the visible content area.
+
+        * ManualTests/ios/touchstart-touchend-on-same-element-should-not-clear-hover.html: Added.
+
 2014-07-11  Carlos Garcia Campos  <cgarcia@igalia.com>
 
         [GTK] Enable VIDEO_TRACK by default
index 05251d3..676ec4a 100644 (file)
@@ -1,3 +1,19 @@
+2014-07-14  Daniel Bates  <dabates@apple.com>
+
+        [iOS] Add tests to ensure CSS :active and :hover are applied when processing touch events
+        https://bugs.webkit.org/show_bug.cgi?id=134905
+        <rdar://problem/16602779> 
+
+        Reviewed by Simon Fraser.
+
+        Upstream tests by Andreas Kling for <rdar://problem/14324231>.
+
+        Add a DRT test to ensure that we apply the style for the CSS pseudo-class :active when
+        processing touch events.
+
+        * platform/iphone-simulator/fast/events/ontouchstart-active-selector-expected.txt: Added.
+        * platform/iphone-simulator/fast/events/ontouchstart-active-selector.html: Added.
+
 2014-07-14  Manuel Rego Casasnovas  <rego@igalia.com>
 
         [CSS Grid Layout] Support sparse in auto-placement algorithm
diff --git a/LayoutTests/platform/iphone-simulator/fast/events/ontouchstart-active-selector-expected.txt b/LayoutTests/platform/iphone-simulator/fast/events/ontouchstart-active-selector-expected.txt
new file mode 100644 (file)
index 0000000..1aa8c5f
--- /dev/null
@@ -0,0 +1,12 @@
+This tests the :active selector on touchable elements
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS getComputedStyle(touchMe).backgroundColor is 'rgb(0, 0, 255)'
+PASS getComputedStyle(touchMe).backgroundColor is 'rgb(255, 255, 0)'
+PASS getComputedStyle(touchMe).backgroundColor is 'rgb(0, 0, 255)'
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/platform/iphone-simulator/fast/events/ontouchstart-active-selector.html b/LayoutTests/platform/iphone-simulator/fast/events/ontouchstart-active-selector.html
new file mode 100644 (file)
index 0000000..4aeae5d
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../../resources/js-test-pre.js"></script>
+
+<style>
+    #touchMe {
+        background-color: blue;
+        width: 200px;
+        height: 200px;
+        top: 0;
+        left: 0;
+    }
+    #touchMe:active {
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+<div id="touchMe" ontouchstart=""></div>
+<script>
+
+description("This tests the :active selector on touchable elements");
+
+if (!window.eventSender)
+    debug("This test will FAIL outside of DRT, but you can test it manually by touching the blue square below. If it turns yellow when touched, the test is a PASS.");
+
+touchMe = document.getElementById("touchMe");
+
+shouldBe("getComputedStyle(touchMe).backgroundColor", "'rgb(0, 0, 255)'");
+
+if (window.eventSender) {
+    eventSender.clearTouchPoints();
+    eventSender.addTouchPoint(touchMe.offsetLeft + 10, touchMe.offsetTop + 10);
+    eventSender.touchStart();
+}
+
+shouldBe("getComputedStyle(touchMe).backgroundColor", "'rgb(255, 255, 0)'");
+
+if (window.eventSender) {
+    eventSender.clearTouchPoints();
+    eventSender.touchEnd();
+}
+
+shouldBe("getComputedStyle(touchMe).backgroundColor", "'rgb(0, 0, 255)'");
+
+</script>    
+<script src="../../../../resources/js-test-post.js"></script>
+</body>
+</html>
diff --git a/ManualTests/ios/touchstart-touchend-on-same-element-should-not-clear-hover.html b/ManualTests/ios/touchstart-touchend-on-same-element-should-not-clear-hover.html
new file mode 100644 (file)
index 0000000..bf86ee8
--- /dev/null
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+.square {
+    -webkit-box-align: center;
+    -webkit-user-select: none;
+    background-color: blue;
+    color: red;
+    display: -webkit-box;
+    font-weight: bold;
+    height: 128px;
+    left: 700px;
+    position: absolute;
+    text-align: center;
+    top: 105%; /* Position the element such that we must scroll to it. */
+    width: 128px;
+}
+
+.square:hover {
+    background-color: yellow;
+}
+
+</style>
+</head>
+<body>
+<p>This test can be used to verify that we don't temporarily remove the CSS hover style between the touchend and click events when finger-pressing and -releasing on the same element that is positioned outside the visible content area initially. Perform the following:</p>
+<ol>
+    <li>Scroll the page until the blue square is visible.</li>
+    <li>Tap on the blue square.</li>
+</ol>
+<p>This test PASSED if there are three PASS messages followed by TEST COMPLETE below; otherwise, it FAILED.</p>
+<div id="square" class="square">Tap me then scroll up to see results</div>
+<pre id="console"></pre>
+<script>
+function addOrRemoveEventListeners(element, shouldAddListeners)
+{
+    var functionToCall = shouldAddListeners == undefined || shouldAddListeners ? "addEventListener" : "removeEventListener";
+    element[functionToCall]("touchstart", checkHoverState, true);
+    element[functionToCall]("touchend", checkHoverState, true);
+    element[functionToCall]("click", checkHoverState, true);
+}
+
+function log(message)
+{
+    document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
+}
+
+function testElementBackgroundColor(element, eventType, expectedResult)
+{
+    var actualResult = window.getComputedStyle(square, null).backgroundColor;
+    if (actualResult === expectedResult)
+        log("PASS, backgroundColor on " +  eventType + " is " + expectedResult + ".");
+    else
+        log("FAIL, backgroundColor on " + eventType + " should be " + expectedResult + ". Was " + actualResult + ".");
+}
+
+function checkHoverState(e)
+{
+    testElementBackgroundColor(square, e.type, "rgb(255, 255, 0)" /* Yellow */);
+    if (e.type === "click") {
+        addOrRemoveEventListeners(square, false /* Remove event listeners */);
+        log("TEST COMPLETE");
+    }
+}
+
+var square = document.getElementById("square");
+addOrRemoveEventListeners(square);
+</script>
+</body>
+</html>