Diff
Modified: trunk/LayoutTests/ChangeLog (207394 => 207395)
--- trunk/LayoutTests/ChangeLog 2016-10-16 18:59:31 UTC (rev 207394)
+++ trunk/LayoutTests/ChangeLog 2016-10-16 22:11:41 UTC (rev 207395)
@@ -1,3 +1,16 @@
+2016-10-16 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Styles for StartButton are missing
+ https://bugs.webkit.org/show_bug.cgi?id=163499
+ <rdar://problem/28792009>
+
+ Reviewed by Darin Adler.
+
+ New test checking StartButton instances have the right CSS styles applied to their DOM structure.
+
+ * media/modern-media-controls/start-button/start-button-styles-expected.txt: Added.
+ * media/modern-media-controls/start-button/start-button-styles.html: Added.
+
2016-10-16 Gyuyoung Kim <gyuyoung....@webkit.org>
[EFL] Meter tests have been failed since r207280
Added: trunk/LayoutTests/media/modern-media-controls/start-button/start-button-styles-expected.txt (0 => 207395)
--- trunk/LayoutTests/media/modern-media-controls/start-button/start-button-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/start-button/start-button-styles-expected.txt 2016-10-16 22:11:41 UTC (rev 207395)
@@ -0,0 +1,34 @@
+Testing the StartButton class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS startButtonStyle.position is "absolute"
+PASS startButtonStyle.left is "50%"
+PASS startButtonStyle.top is "50%"
+PASS startButtonStyle.width is "70px"
+PASS startButtonStyle.height is "70px"
+PASS startButtonStyle.transform is "matrix(1, 0, 0, 1, -35, -35)"
+PASS startButtonBounds.left is 115
+PASS startButtonBounds.top is 65
+
+PASS startButtonBackgroundStyle.position is "absolute"
+PASS startButtonBackgroundStyle.left is "0px"
+PASS startButtonBackgroundStyle.top is "0px"
+PASS startButtonBackgroundStyle.width is "70px"
+PASS startButtonBackgroundStyle.height is "70px"
+PASS startButtonBackgroundStyle.webkitAppearance is "media-controls-light-bar-background"
+PASS startButtonBackgroundStyle.webkitClipPath is "circle(50% at 50% 50%)"
+PASS startButtonBackgroundStyle.willChange is "transform"
+
+PASS startButtonImageStyle.position is "absolute"
+PASS startButtonImageStyle.left is "0px"
+PASS startButtonImageStyle.top is "0px"
+PASS startButtonImageStyle.width is "70px"
+PASS startButtonImageStyle.height is "70px"
+PASS 0.6000000238418579 is within 0.001 of 0.6
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/start-button/start-button-styles.html (0 => 207395)
--- trunk/LayoutTests/media/modern-media-controls/start-button/start-button-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/start-button/start-button-styles.html 2016-10-16 22:11:41 UTC (rev 207395)
@@ -0,0 +1,69 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<style type="text/css" media="screen">
+
+#container {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 300px;
+ height: 200px;
+}
+
+</style>
+<body>
+<div id="container"></div>
+<script type="text/_javascript_">
+
+description("Testing the <code>StartButton</code> class.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const startButton = new StartButton({ layoutTraits: LayoutTraits.macOS });
+document.getElementById("container").appendChild(startButton.element);
+
+const startButtonStyle = window.getComputedStyle(startButton.element);
+const startButtonBounds = startButton.element.getBoundingClientRect();
+shouldBeEqualToString("startButtonStyle.position", "absolute");
+shouldBeEqualToString("startButtonStyle.left", "50%");
+shouldBeEqualToString("startButtonStyle.top", "50%");
+shouldBeEqualToString("startButtonStyle.width", "70px");
+shouldBeEqualToString("startButtonStyle.height", "70px");
+shouldBeEqualToString("startButtonStyle.transform", "matrix(1, 0, 0, 1, -35, -35)");
+shouldBe("startButtonBounds.left", "115");
+shouldBe("startButtonBounds.top", "65");
+
+debug("");
+const startButtonBackgroundStyle = window.getComputedStyle(startButton.element.firstElementChild);
+shouldBeEqualToString("startButtonBackgroundStyle.position", "absolute");
+shouldBeEqualToString("startButtonBackgroundStyle.left", "0px");
+shouldBeEqualToString("startButtonBackgroundStyle.top", "0px");
+shouldBeEqualToString("startButtonBackgroundStyle.width", "70px");
+shouldBeEqualToString("startButtonBackgroundStyle.height", "70px");
+shouldBeEqualToString("startButtonBackgroundStyle.webkitAppearance", "media-controls-light-bar-background");
+shouldBeEqualToString("startButtonBackgroundStyle.webkitClipPath", "circle(50% at 50% 50%)");
+shouldBeEqualToString("startButtonBackgroundStyle.willChange", "transform");
+
+debug("");
+const startButtonImageStyle = window.getComputedStyle(startButton.element.lastElementChild);
+shouldBeEqualToString("startButtonImageStyle.position", "absolute");
+shouldBeEqualToString("startButtonImageStyle.left", "0px");
+shouldBeEqualToString("startButtonImageStyle.top", "0px");
+shouldBeEqualToString("startButtonImageStyle.width", "70px");
+shouldBeEqualToString("startButtonImageStyle.height", "70px");
+shouldBeCloseTo(startButtonImageStyle.opacity, 0.6, 0.001);
+
+startButton.element.remove();
+debug("");
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (207394 => 207395)
--- trunk/Source/WebCore/ChangeLog 2016-10-16 18:59:31 UTC (rev 207394)
+++ trunk/Source/WebCore/ChangeLog 2016-10-16 22:11:41 UTC (rev 207395)
@@ -1,3 +1,22 @@
+2016-10-16 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] Styles for StartButton are missing
+ https://bugs.webkit.org/show_bug.cgi?id=163499
+ <rdar://problem/28792009>
+
+ Reviewed by Darin Adler.
+
+ Add styling for StartButton so that instances are always displayed in the center of their container.
+
+ Test: media/modern-media-controls/start-button/start-button-styles.html
+
+ * Modules/modern-media-controls/controls/start-button.css: Added.
+ (button.start):
+ (button.start > *):
+ (button.start > div):
+ (button.start > img):
+ (button.start:active > img):
+
2016-10-16 Simon Fraser <simon.fra...@apple.com>
Implement serializer = { attribute }
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/start-button.css (0 => 207395)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/start-button.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/start-button.css 2016-10-16 22:11:41 UTC (rev 207395)
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+button.start {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 70px;
+ height: 70px;
+
+ background: transparent !important;
+
+ transform: translate3d(-50%, -50%, 0);
+}
+
+button.start > * {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
+
+button.start > div {
+ -webkit-appearance: media-controls-light-bar-background;
+ -webkit-clip-path: circle(50%);
+ will-change: transform;
+}
+
+button.start > img {
+ opacity: 0.6;
+}
+
+button.start:active > img {
+ opacity: 1;
+}
