[iOS] Play button on video is too dark

https://bugs.webkit.org/show_bug.cgi?id=156383
<rdar://problem/23540816>

Reviewed by Simon Fraser.

.:

Add a manual test for iOS that shows the expected appearance
of a video element. Unfortunately, due to the way we take
snapshots on iOS within our test runner, we don't get the
platform blurring effect, which means an automated test
won't work.

* ManualTests/ios/start-playback-button-appearance-expected.html: Added.
* ManualTests/ios/start-playback-button-appearance.html: Added.

Source/WebKit2:

Elements that are backed by a layer with either LightBackdropAppearance
or DarkBackdropAppearance are actually a combination of a
few layers (inside a special view). If we apply a mask to one
of those layers, it needs to be attached to the correct
child layer.

* Shared/mac/RemoteLayerTreePropertyApplier.mm:
(WebKit::RemoteLayerTreePropertyApplier::applyProperties): If we have
one of the special appearance flags, apply the mask layer to
a particular child, rather than the layer itself.

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

diff --git a/ChangeLog b/ChangeLog
index 84f1c09..e3669b0 100644 (file)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,20 @@
+2016-04-07  Dean Jackson  <dino@apple.com>
+
+        [iOS] Play button on video is too dark
+        https://bugs.webkit.org/show_bug.cgi?id=156383
+        <rdar://problem/23540816>
+
+        Reviewed by Simon Fraser.
+
+        Add a manual test for iOS that shows the expected appearance
+        of a video element. Unfortunately, due to the way we take
+        snapshots on iOS within our test runner, we don't get the
+        platform blurring effect, which means an automated test
+        won't work.
+
+        * ManualTests/ios/start-playback-button-appearance-expected.html: Added.
+        * ManualTests/ios/start-playback-button-appearance.html: Added.
+
 2016-04-06  Alex Christensen  <achristensen@webkit.org>
 
         Fix CMake DumpRenderTree

diff --git a/ManualTests/ios/start-playback-button-appearance-expected.html b/ManualTests/ios/start-playback-button-appearance-expected.html
new file mode 100644 (file)
index 0000000..c94b31f
--- /dev/null
+++ b/ManualTests/ios/start-playback-button-appearance-expected.html
@@ -0,0 +1,67 @@
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+div {
+    width: 250px;
+    height: 200px;
+    position: relative;
+}
+
+.a {
+    background-color: #895;
+}
+
+.b {
+    background-color: #55f;
+}
+
+.button {
+    position: absolute;
+    width: 72px;
+    height: 72px;
+    left: calc(50% - 36px);
+    top: calc(50% - 36px);
+}
+
+.background {
+    position: absolute;
+    width: 72px;
+    height: 72px;
+    -webkit-clip-path: circle(36px);
+}
+
+.a .background {
+    background-color: rgb(159, 181, 85);
+}
+
+.b .background {
+    background-color: rgb(113, 113, 255);
+}
+
+.glyph {
+    -webkit-appearance: none;
+    position: absolute;
+    width: 72px;
+    height: 72px;
+    opacity: 0.6;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAYAAACuwEE+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABKFJREFUeNrsnV9ojWEcx5+jhdUulF0YNS6IpDRJuNDhyi5cjBvkglGKCxtKIlxILkwi+VPsRnbDphTuLEXzJ8u/0UhstJupKRojx+/X85xIztlztrNznve8n099W9lZ3vd9Pr3P8z7P7zxvIpVKGQBfxnEJAGEAYQBhAGEAYQAQBhAGEAYQBhAGEAYAYQBhAGEAYQBhAGEAEAYQBhAGEAYQBgBhAGEAYQBhAGEAYQAQBhAGEAaCpCyKB51IJPTHRMkVyQpJr+Sa5IzkXZwasOAbQul/GLU4GvTw/8kPSZNkUpyEKWSi3CWtynDH3Cl5Kamny2UM8zezs/xuiuSC5JEkSTMjjDLV4zM1ktuSFkk1zR1fYSbo2DeHz6+VvJIcllTQ7PET5vsI/qZcss+Jsy5H4SDG8zDTJJcl9ySLUQBhfFnspGmWVKECwvig3dJGSbfrrspRAmF8qHAD4i5JHZcDYXyZIWl1j+I1XA6E8SVp7KTfWUkllwNhfK/NVslryS7JeC4JwvigC5nHJM8lKxEGfJkluekyF2HAF73LPJGcMDEqo0CY0aFlFDvc+GabiWghGsIUHn2COu3uOEmEAV90TKNzNzqHMxNhwBedJX4hOWpKtIwCYfKPztfsMXZ9quTKRBFm7NAV8HSZ6BKEAV90TequsTU41QgDPmgZhVb5abXfIRPhMgqEKSwqykET4TJRhCkO1eZPmegChAFftEz0oRscVyEM+LZBvXsM32sCL6NAmHDQib4jxk781SEM+KJLC+ky0XkIA74kJZ3GLm5WIgz4oGUTWj6hZRSNJoAyCoSJBlqodVzyTLIGYcCXOcbuunXD2C1NEAa8qJXcl0xHGPBFZ4svIgzkwlKEgVy4ijDgy2PJdoSB4dDtZXWxcpnkM8JANh4YOwO8RfKVx2rIRJ9kk7HlEHeKeSBltEXQDBo7w6tfW/kSwgEhTLi0SXZL3oZ0UAgTHrpCrdvft4d4cIxhwqHfPSYvClUW7jBhoG9gOWnspowDoR8swhSXW8Zuh9YVlQNGmOKg30tqdMJECsYwhWXAPfnMj6Is3GEKxy/JOckBN7iNLAgz9rS7x+TOUjgZhBk73rtxSlspnRTC5B+dwtepfJ3SHyy1k0OY/KFlB5eM3X2qr1RPEmHyQ4frfjpK/UR5rB4deifZYGxtbUccTpg7zMgIruwAYcKl1XU/PXE8ebokf3QeZbmxX1XtietFQJjh0ZlZfW/SQhNw2QFdUvEZkpwyESk7QJjioguD+raSbi4FXVI2tC6l1gVZECYj2uVoIVNkyw7okgrDT8l5Yzdb7kcHhMmGPvE0GPtyLKBLysgbyWpj51SQhTtMRtJlB02SbzR9/IT5JJns8TktO2iW7DclXHZAlzQ8Po2vK8i6krwZWRDmaZbffZCsNzEqO0CY4bn+n38bcmMUfctri+uOII8kUqnoXdNEIpEef6kUOiv70dhia91mvTdODVjo9oukMECXBAgDCAMIwyUAhAGEAYQBhAGEAUAYQBhAGEAYQBhAGACEAYQBhAGEAYQBhAFAGEAYQBhAGEAYAIQBhAGEAYQBhIEY8FuAAQBHs44NYWX3+AAAAABJRU5ErkJggg==');
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: 100% 100%;
+}
+
+
+</style>
+
+<div class="a">
+    <div class="button">
+        <div class="background"></div>
+        <div class="glyph"></div>
+    </div>
+</div>
+
+<div class="b">
+    <div class="button">
+        <div class="background"></div>
+        <div class="glyph"></div>
+    </div>
+</div>

diff --git a/ManualTests/ios/start-playback-button-appearance.html b/ManualTests/ios/start-playback-button-appearance.html
new file mode 100644 (file)
index 0000000..84323ec
--- /dev/null
+++ b/ManualTests/ios/start-playback-button-appearance.html
@@ -0,0 +1,28 @@
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+video {
+    width: 250px;
+    height: 200px;
+    background-color: rgb(136, 153, 85);
+    display: block;
+}
+
+video:nth-of-type(2) {
+    background-color: rgb(85, 85, 255);
+}
+</style>
+<script>
+if (window.testRunner) {
+    window.testRunner.waitUntilDone();
+
+    window.addEventListener("load", function () {
+        setTimeout(function () {
+            window.testRunner.notifyDone();
+        }, 3000);
+    }, false);
+}
+
+</script>
+
+<video controls src="content/counting.mp4"></video>
+<video controls src="content/counting.mp4"></video>

diff --git a/Source/WebKit2/ChangeLog b/Source/WebKit2/ChangeLog
index 3b44b83..784ef5d 100644 (file)
--- a/Source/WebKit2/ChangeLog
+++ b/Source/WebKit2/ChangeLog
@@ -1,3 +1,22 @@
+2016-04-07  Dean Jackson  <dino@apple.com>
+
+        [iOS] Play button on video is too dark
+        https://bugs.webkit.org/show_bug.cgi?id=156383
+        <rdar://problem/23540816>
+
+        Reviewed by Simon Fraser.
+
+        Elements that are backed by a layer with either LightBackdropAppearance
+        or DarkBackdropAppearance are actually a combination of a
+        few layers (inside a special view). If we apply a mask to one
+        of those layers, it needs to be attached to the correct
+        child layer.
+
+        * Shared/mac/RemoteLayerTreePropertyApplier.mm:
+        (WebKit::RemoteLayerTreePropertyApplier::applyProperties): If we have
+        one of the special appearance flags, apply the mask layer to
+        a particular child, rather than the layer itself.
+
 2016-04-07  Jeremy Jones  <jeremyj@apple.com>
 
         Clearing the application cache doesn't work.

diff --git a/Source/WebKit2/Shared/mac/RemoteLayerTreePropertyApplier.mm b/Source/WebKit2/Shared/mac/RemoteLayerTreePropertyApplier.mm
index 2d3cb45..44c725c 100644 (file)
--- a/Source/WebKit2/Shared/mac/RemoteLayerTreePropertyApplier.mm
+++ b/Source/WebKit2/Shared/mac/RemoteLayerTreePropertyApplier.mm
@@ -312,14 +312,24 @@ void RemoteLayerTreePropertyApplier::applyProperties(UIView *view, RemoteLayerTr
     }
 
     if (properties.changedProperties & RemoteLayerTreeTransaction::MaskLayerChanged) {
+
+        CALayer *maskOwnerLayer = view.layer;
+
+        if (properties.customAppearance == GraphicsLayer::LightBackdropAppearance || properties.customAppearance == GraphicsLayer::DarkBackdropAppearance) {
+            // This is a UIBackdropView, which means any mask must be applied to the CABackdropLayer rather
+            // that the view's layer. The backdrop is the first layer child.
+            if (view.layer.sublayers.count && [view.layer.sublayers[0] isKindOfClass:[CABackdropLayer class]])
+                maskOwnerLayer = view.layer.sublayers[0];
+        }
+
         if (!properties.maskLayerID)
-            view.layer.mask = nullptr;
+            maskOwnerLayer.mask = nullptr;
         else {
             UIView *maskView = relatedLayers.get(properties.maskLayerID);
             // FIXME: need to check that the mask view is kept alive.
             ASSERT(!maskView.layer.superlayer);
             if (!maskView.layer.superlayer)
-                view.layer.mask = maskView.layer;
+                maskOwnerLayer.mask = maskView.layer;
         }
     }
     END_BLOCK_OBJC_EXCEPTIONS;