Title: [213099] trunk
- Revision
- 213099
- Author
- [email protected]
- Date
- 2017-02-27 16:01:28 -0800 (Mon, 27 Feb 2017)
Log Message
[Modern Media Controls] Use a solid background for <audio> controls on macOS
https://bugs.webkit.org/show_bug.cgi?id=168941
<rdar://problem/30744316>
Patch by Antoine Quint <[email protected]> on 2017-02-27
Reviewed by Dean Jackson.
Source/WebCore:
Use a solid background for <audio> elements on macOS, the same way we do on iOS.
Test: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background.html
* Modules/modern-media-controls/controls/macos-media-controls.css:
(:host(audio) .media-controls.mac.inline > .controls-bar):
(:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint):
LayoutTests:
Add a new test that checks that we use a solid background fill for <audio> on macOS.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (213098 => 213099)
--- trunk/LayoutTests/ChangeLog 2017-02-27 23:33:45 UTC (rev 213098)
+++ trunk/LayoutTests/ChangeLog 2017-02-28 00:01:28 UTC (rev 213099)
@@ -1,5 +1,18 @@
2017-02-27 Antoine Quint <[email protected]>
+ [Modern Media Controls] Use a solid background for <audio> controls on macOS
+ https://bugs.webkit.org/show_bug.cgi?id=168941
+ <rdar://problem/30744316>
+
+ Reviewed by Dean Jackson.
+
+ Add a new test that checks that we use a solid background fill for <audio> on macOS.
+
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background.html: Added.
+
+2017-02-27 Antoine Quint <[email protected]>
+
[Modern Media Controls] StatusLabel should use similar properties to TimeLabel
https://bugs.webkit.org/show_bug.cgi?id=168938
<rdar://problem/30743185>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background-expected.txt (0 => 213099)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background-expected.txt 2017-02-28 00:01:28 UTC (rev 213099)
@@ -0,0 +1,12 @@
+Testing that we show a gray background for macOS audio elements.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.querySelector('.controls-bar') instanceof HTMLDivElement became true
+PASS getComputedStyle(mediaControls.querySelector('.controls-bar')).backgroundColor is "rgb(41, 41, 41)"
+PASS getComputedStyle(mediaControls.querySelector('.controls-bar > .background-tint')).display is "none"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background.html (0 => 213099)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background.html 2017-02-28 00:01:28 UTC (rev 213099)
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<script src=""
+<body>
+<audio src="" style="width: 300px;" controls></audio>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing that we show a gray background for macOS audio elements.");
+
+const mediaControls = window.internals.shadowRoot(document.querySelector('audio')).lastElementChild;
+
+shouldBecomeEqual("mediaControls.querySelector('.controls-bar') instanceof HTMLDivElement", "true", () => {
+ shouldBeEqualToString("getComputedStyle(mediaControls.querySelector('.controls-bar')).backgroundColor", "rgb(41, 41, 41)");
+ shouldBeEqualToString("getComputedStyle(mediaControls.querySelector('.controls-bar > .background-tint')).display", "none");
+ finishJSTest();
+});
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (213098 => 213099)
--- trunk/Source/WebCore/ChangeLog 2017-02-27 23:33:45 UTC (rev 213098)
+++ trunk/Source/WebCore/ChangeLog 2017-02-28 00:01:28 UTC (rev 213099)
@@ -1,5 +1,21 @@
2017-02-27 Antoine Quint <[email protected]>
+ [Modern Media Controls] Use a solid background for <audio> controls on macOS
+ https://bugs.webkit.org/show_bug.cgi?id=168941
+ <rdar://problem/30744316>
+
+ Reviewed by Dean Jackson.
+
+ Use a solid background for <audio> elements on macOS, the same way we do on iOS.
+
+ Test: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-audio-background.html
+
+ * Modules/modern-media-controls/controls/macos-media-controls.css:
+ (:host(audio) .media-controls.mac.inline > .controls-bar):
+ (:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint):
+
+2017-02-27 Antoine Quint <[email protected]>
+
[Modern Media Controls] StatusLabel should use similar properties to TimeLabel
https://bugs.webkit.org/show_bug.cgi?id=168938
<rdar://problem/30743185>
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css (213098 => 213099)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css 2017-02-27 23:33:45 UTC (rev 213098)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css 2017-02-28 00:01:28 UTC (rev 213099)
@@ -50,3 +50,11 @@
height: 100% !important;
-webkit-appearance: none !important;
}
+
+:host(audio) .media-controls.mac.inline > .controls-bar {
+ background-color: rgb(41, 41, 41);
+}
+
+:host(audio) .media-controls.mac.inline > .controls-bar > .background-tint {
+ display: none;
+}
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
