Diff
Modified: trunk/LayoutTests/ChangeLog (243413 => 243414)
--- trunk/LayoutTests/ChangeLog 2019-03-23 20:47:47 UTC (rev 243413)
+++ trunk/LayoutTests/ChangeLog 2019-03-23 20:58:37 UTC (rev 243414)
@@ -1,5 +1,23 @@
2019-03-23 Zalan Bujtas <[email protected]>
+ [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 <[email protected]>
+
[ContentChangeObserver] Check if the transitioned content is visible at onAnimationEnd
https://bugs.webkit.org/show_bug.cgi?id=196171
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-expected.txt 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left-expected.txt 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-opacity-and-left.html 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,62 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on mousemove with transition.</title>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition-expected.txt 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove-with-transition.html 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,58 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on mousemove with transition.</title>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-mousemove.html 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,57 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on mousemove.</title>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-expected.txt 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition-expected.txt 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,2 @@
+PASS if 'clicked' text is not shown below.
+
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart-with-transition.html 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,58 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on touchstart with transition.</title>
+<script src=""
+<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>
Added: trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html (0 => 243414)
--- trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html (rev 0)
+++ trunk/LayoutTests/fast/events/touch/ios/content-observation/opacity-change-happens-on-touchstart.html 2019-03-23 20:58:37 UTC (rev 243414)
@@ -0,0 +1,57 @@
+<html>
+<head>
+<title>This tests the case when visible content change happens on touchstart.</title>
+<script src=""
+<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>
Modified: trunk/Source/WebCore/ChangeLog (243413 => 243414)
--- trunk/Source/WebCore/ChangeLog 2019-03-23 20:47:47 UTC (rev 243413)
+++ trunk/Source/WebCore/ChangeLog 2019-03-23 20:58:37 UTC (rev 243414)
@@ -1,5 +1,27 @@
2019-03-23 Zalan Bujtas <[email protected]>
+ [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 <[email protected]>
+
[ContentChangeObserver] Check if the transitioned content is visible at onAnimationEnd
https://bugs.webkit.org/show_bug.cgi?id=196171
Modified: trunk/Source/WebCore/page/ios/ContentChangeObserver.cpp (243413 => 243414)
--- trunk/Source/WebCore/page/ios/ContentChangeObserver.cpp 2019-03-23 20:47:47 UTC (rev 243413)
+++ trunk/Source/WebCore/page/ios/ContentChangeObserver.cpp 2019-03-23 20:58:37 UTC (rev 243414)
@@ -54,6 +54,9 @@
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 @@
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);
Modified: trunk/Source/WebCore/page/ios/ContentChangeObserver.h (243413 => 243414)
--- trunk/Source/WebCore/page/ios/ContentChangeObserver.h 2019-03-23 20:47:47 UTC (rev 243413)
+++ trunk/Source/WebCore/page/ios/ContentChangeObserver.h 2019-03-23 20:58:37 UTC (rev 243414)
@@ -123,7 +123,7 @@
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); }
