[ContentChangeObserver] Add support for observing opacity.
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 23 Mar 2019 20:58:37 +0000 (20:58 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 23 Mar 2019 20:58:37 +0000 (20:58 +0000)
https://bugs.webkit.org/show_bug.cgi?id=196172

Reviewed by Simon Fraser.

Source/WebCore:

This patch adds support for observing opacity changes. At this point we only track one transition at a time.
if the page registers transition on both left and opacity, the first is getting observed only.

Tests: fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html
       fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html
       fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html
       fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html
       fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html

* page/ios/ContentChangeObserver.cpp:
(WebCore::isConsideredHidden):
(WebCore::ContentChangeObserver::didAddTransition):
* page/ios/ContentChangeObserver.h:
(WebCore::ContentChangeObserver::isObservedPropertyForTransition const):

LayoutTests:

* fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html: Added.
* fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html: Added.

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

14 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html [new file with mode: 0644]
LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/page/ios/ContentChangeObserver.cpp
Source/WebCore/page/ios/ContentChangeObserver.h

index 09f67a9..db6dd4e 100644 (file)
@@ -1,5 +1,23 @@
 2019-03-23  Zalan Bujtas  <zalan@apple.com>
 
+        [ContentChangeObserver] Add support for observing opacity.
+        https://bugs.webkit.org/show_bug.cgi?id=196172
+
+        Reviewed by Simon Fraser.
+
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html: Added.
+        * fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html: Added.
+
+2019-03-23  Zalan Bujtas  <zalan@apple.com>
+
         [ContentChangeObserver] Check if the transitioned content is visible at onAnimationEnd
         https://bugs.webkit.org/show_bug.cgi?id=196171
 
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt
new file mode 100644 (file)
index 0000000..66db4c9
--- /dev/null
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt
new file mode 100644 (file)
index 0000000..66db4c9
--- /dev/null
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html
new file mode 100644 (file)
index 0000000..1e3f3f6
--- /dev/null
@@ -0,0 +1,62 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on mousemove with transition.</title>
+<script src="../../../../../resources/basic-gestures.js"></script>
+<style>
+#tapthis {
+    width: 400px;
+    height: 400px;
+    border: 1px solid green;
+}
+
+#becomesVisible {
+    position: absolute;
+    opacity: 0;
+    left: -200px;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+       transition-property: opacity, left;
+       transition-duration: 100ms, 200ms;
+}
+</style>
+<script>
+async function test() {
+    if (!window.testRunner || !testRunner.runUIScript)
+        return;
+    if (window.internals)
+        internals.settings.setContentChangeObserverEnabled(true);
+
+    testRunner.waitUntilDone();
+    testRunner.dumpAsText();
+
+    let rect = tapthis.getBoundingClientRect();
+    let x = rect.left + rect.width / 2;
+    let y = rect.top + rect.height / 2;
+
+    await tapAtPoint(x, y);
+}
+</script>
+</head>
+<body onload="test()">
+<div id=tapthis>PASS if 'clicked' text is not shown below.</div>
+<div id=becomesVisible></div>
+<pre id=result></pre>
+<script>
+tapthis.addEventListener("mousemove", function( event ) {
+    becomesVisible.style.opacity = "1";
+    becomesVisible.style.left = "100px";
+    if (window.testRunner)
+        setTimeout("testRunner.notifyDone()", 250);
+}, false);
+
+becomesVisible.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked hidden";
+}, false);
+
+tapthis.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked";
+}, false);
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt
new file mode 100644 (file)
index 0000000..66db4c9
--- /dev/null
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html
new file mode 100644 (file)
index 0000000..a33344a
--- /dev/null
@@ -0,0 +1,58 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on mousemove with transition.</title>
+<script src="../../../../../resources/basic-gestures.js"></script>
+<style>
+#tapthis {
+    width: 400px;
+    height: 400px;
+    border: 1px solid green;
+}
+
+#becomesVisible {
+    opacity: 0;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    transition: opacity 200ms ease-out 10ms;
+}
+</style>
+<script>
+async function test() {
+    if (!window.testRunner || !testRunner.runUIScript)
+        return;
+    if (window.internals)
+        internals.settings.setContentChangeObserverEnabled(true);
+
+    testRunner.waitUntilDone();
+    testRunner.dumpAsText();
+
+    let rect = tapthis.getBoundingClientRect();
+    let x = rect.left + rect.width / 2;
+    let y = rect.top + rect.height / 2;
+
+    await tapAtPoint(x, y);
+}
+</script>
+</head>
+<body onload="test()">
+<div id=tapthis>PASS if 'clicked' text is not shown below.</div>
+<div id=becomesVisible></div>
+<pre id=result></pre>
+<script>
+tapthis.addEventListener("mousemove", function( event ) {
+    becomesVisible.style.opacity = "1";
+    if (window.testRunner)
+        setTimeout("testRunner.notifyDone()", 250);
+}, false);
+
+becomesVisible.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked hidden";
+}, false);
+
+tapthis.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked";
+}, false);
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html
new file mode 100644 (file)
index 0000000..bc70126
--- /dev/null
@@ -0,0 +1,57 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on mousemove.</title>
+<script src="../../../../../resources/basic-gestures.js"></script>
+<style>
+#tapthis {
+    width: 400px;
+    height: 400px;
+    border: 1px solid green;
+}
+
+#becomesVisible {
+    opacity: 0;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<script>
+async function test() {
+    if (!window.testRunner || !testRunner.runUIScript)
+        return;
+    if (window.internals)
+        internals.settings.setContentChangeObserverEnabled(true);
+
+    testRunner.waitUntilDone();
+    testRunner.dumpAsText();
+
+    let rect = tapthis.getBoundingClientRect();
+    let x = rect.left + rect.width / 2;
+    let y = rect.top + rect.height / 2;
+
+    await tapAtPoint(x, y);
+}
+</script>
+</head>
+<body onload="test()">
+<div id=tapthis>PASS if 'clicked' text is not shown below.</div>
+<div id=becomesVisible></div>
+<pre id=result></pre>
+<script>
+tapthis.addEventListener("mousemove", function( event ) {
+    becomesVisible.style.opacity = "1";
+    if (window.testRunner)
+        setTimeout("testRunner.notifyDone()", 50);
+}, false);
+
+becomesVisible.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked hidden";
+}, false);
+
+tapthis.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked";
+}, false);
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt
new file mode 100644 (file)
index 0000000..66db4c9
--- /dev/null
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt
new file mode 100644 (file)
index 0000000..66db4c9
--- /dev/null
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html
new file mode 100644 (file)
index 0000000..03dc8e2
--- /dev/null
@@ -0,0 +1,58 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on touchstart with transition.</title>
+<script src="../../../../../resources/basic-gestures.js"></script>
+<style>
+#tapthis {
+    width: 400px;
+    height: 400px;
+    border: 1px solid green;
+}
+
+#becomesVisible {
+    opacity: 0;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    transition: opacity 200ms ease-out 10ms;
+}
+</style>
+<script>
+async function test() {
+    if (!window.testRunner || !testRunner.runUIScript)
+        return;
+    if (window.internals)
+        internals.settings.setContentChangeObserverEnabled(true);
+
+    testRunner.waitUntilDone();
+    testRunner.dumpAsText();
+
+    let rect = tapthis.getBoundingClientRect();
+    let x = rect.left + rect.width / 2;
+    let y = rect.top + rect.height / 2;
+
+    await tapAtPoint(x, y);
+}
+</script>
+</head>
+<body onload="test()">
+<div id=tapthis>PASS if 'clicked' text is not shown below.</div>
+<div id=becomesVisible></div>
+<pre id=result></pre>
+<script>
+tapthis.addEventListener("touchstart", function( event ) {
+    becomesVisible.style.opacity = "1";
+    if (window.testRunner)
+        setTimeout("testRunner.notifyDone()", 250);
+}, false);
+
+becomesVisible.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked hidden";
+}, false);
+
+tapthis.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked";
+}, false);
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html b/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html
new file mode 100644 (file)
index 0000000..9b4bebf
--- /dev/null
@@ -0,0 +1,57 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on touchstart.</title>
+<script src="../../../../../resources/basic-gestures.js"></script>
+<style>
+#tapthis {
+    width: 400px;
+    height: 400px;
+    border: 1px solid green;
+}
+
+#becomesVisible {
+    opacity: 0;
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<script>
+async function test() {
+    if (!window.testRunner || !testRunner.runUIScript)
+        return;
+    if (window.internals)
+        internals.settings.setContentChangeObserverEnabled(true);
+
+    testRunner.waitUntilDone();
+    testRunner.dumpAsText();
+
+    let rect = tapthis.getBoundingClientRect();
+    let x = rect.left + rect.width / 2;
+    let y = rect.top + rect.height / 2;
+
+    await tapAtPoint(x, y);
+}
+</script>
+</head>
+<body onload="test()">
+<div id=tapthis>PASS if 'clicked' text is not shown below.</div>
+<div id=becomesVisible></div>
+<pre id=result></pre>
+<script>
+tapthis.addEventListener("touchstart", function( event ) {
+    becomesVisible.style.opacity = "1";
+    if (window.testRunner)
+        setTimeout("testRunner.notifyDone()", 50);
+}, false);
+
+becomesVisible.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked hidden";
+}, false);
+
+tapthis.addEventListener("click", function( event ) {   
+    result.innerHTML = "clicked";
+}, false);
+</script>
+</body>
+</html>
index e3debc4..67344b0 100644 (file)
@@ -1,5 +1,27 @@
 2019-03-23  Zalan Bujtas  <zalan@apple.com>
 
+        [ContentChangeObserver] Add support for observing opacity.
+        https://bugs.webkit.org/show_bug.cgi?id=196172
+
+        Reviewed by Simon Fraser.
+
+        This patch adds support for observing opacity changes. At this point we only track one transition at a time.
+        if the page registers transition on both left and opacity, the first is getting observed only.
+
+        Tests: fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html
+               fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html
+               fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html
+               fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html
+               fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html
+
+        * page/ios/ContentChangeObserver.cpp:
+        (WebCore::isConsideredHidden):
+        (WebCore::ContentChangeObserver::didAddTransition):
+        * page/ios/ContentChangeObserver.h:
+        (WebCore::ContentChangeObserver::isObservedPropertyForTransition const):
+
+2019-03-23  Zalan Bujtas  <zalan@apple.com>
+
         [ContentChangeObserver] Check if the transitioned content is visible at onAnimationEnd
         https://bugs.webkit.org/show_bug.cgi?id=196171
 
index 0c921b1..247f08d 100644 (file)
@@ -54,6 +54,9 @@ static bool isConsideredHidden(const Element& element)
     if (style.visibility() == Visibility::Hidden)
         return true;
 
+    if (!style.opacity())
+        return true;
+
     auto width = style.logicalWidth();
     auto height = style.logicalHeight();
     if ((width.isFixed() && !width.value()) || (height.isFixed() && !height.value()))
@@ -138,6 +141,9 @@ void ContentChangeObserver::didAddTransition(const Element& element, const Anima
         return;
     if (!isConsideredHidden(element))
         return;
+    // In case of multiple transitions, the first tranistion wins (and it has to produce a visible content change in order to show up as hover).
+    if (m_elementsWithTransition.contains(&element))
+        return;
     LOG_WITH_STREAM(ContentObservation, stream << "didAddTransition: transition created on " << &element << " (" << transitionEnd.milliseconds() << "ms).");
 
     m_elementsWithTransition.add(&element);
index 4eb9390..e87db7a 100644 (file)
@@ -123,7 +123,7 @@ private:
     bool isObservingDOMTimerScheduling() const { return m_isObservingDOMTimerScheduling; }
     void setShouldObserveTransitions(bool observe) { m_isObservingTransitions = observe; }
     bool isObservingTransitions() const { return m_isObservingTransitions; }
-    bool isObservedPropertyForTransition(CSSPropertyID propertyId) const { return propertyId == CSSPropertyLeft; }
+    bool isObservedPropertyForTransition(CSSPropertyID propertyId) const { return propertyId == CSSPropertyLeft || propertyId == CSSPropertyOpacity; }
     void domTimerExecuteDidStart(const DOMTimer&);
     void domTimerExecuteDidFinish(const DOMTimer&);
     void registerDOMTimer(const DOMTimer& timer) { m_DOMTimerList.add(&timer); }