Diff
Modified: trunk/LayoutTests/ChangeLog (207372 => 207373)
--- trunk/LayoutTests/ChangeLog 2016-10-15 08:27:19 UTC (rev 207372)
+++ trunk/LayoutTests/ChangeLog 2016-10-15 09:15:41 UTC (rev 207373)
@@ -1,3 +1,32 @@
+2016-10-15 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] macOS inline controls
+ https://bugs.webkit.org/show_bug.cgi?id=163444
+ <rdar://problem/27989473>
+
+ Reviewed by Dean Jackson.
+
+ Testing the properties of the new MacOSMediaControls and MacOSInlineMediaControls classes.
+
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html: Added.
+ * media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt: Added.
+ * media/modern-media-controls/macos-media-controls/macos-media-controls.html: Added.
+
2016-10-14 Antti Koivisto <an...@apple.com>
100% CPU on homedepot.com page
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,65 @@
+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PlayPauseButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "12px"
+
+SkipBackButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "10px"
+
+MuteButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "10px"
+
+AirplayButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "13px"
+
+PiPButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "13px"
+
+TracksButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "15px"
+
+FullscreenButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "13px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,85 @@
+
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+
+<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>
+<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>
+<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>
+<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>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+const buttonPositions = [
+ [mediaControls.playPauseButton, 12],
+ [mediaControls.skipBackButton, 10],
+ [mediaControls.muteButton, 10],
+ [mediaControls.airplayButton, 13],
+ [mediaControls.pipButton, 13],
+ [mediaControls.tracksButton, 15],
+ [mediaControls.fullscreenButton, 13]
+];
+
+let style;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ for (let [button, y] of buttonPositions) {
+ style = window.getComputedStyle(button.element);
+ debug(button.constructor.name);
+ shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(255, 255, 255, 0.572)");
+ shouldBeEqualToString("style.height", "50px");
+ shouldBeEqualToString("style.webkitMaskPositionY", `${y}px`);
+ debug("");
+ }
+
+ mediaControls.element.remove();
+
+ finishJSTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,37 @@
+Testing the MacOSInlineMediaControls constructor.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.localName is "div"
+PASS mediaControls.element.className is "media-controls mac inline"
+PASS mediaControls.layoutTraits is LayoutTraits.macOS
+
+Controls bar
+PASS mediaControls.controlsBar.children.length is 3
+PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[2] instanceof LayoutNode is true
+
+Left container
+PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
+PASS mediaControls.controlsBar.children[0].padding is 24
+PASS mediaControls.controlsBar.children[0].margin is 24
+
+Right container
+PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
+PASS mediaControls.controlsBar.children[1].element.className is "buttons-container right"
+PASS mediaControls.controlsBar.children[1].padding is 24
+PASS mediaControls.controlsBar.children[1].margin is 24
+
+Volume slider
+PASS mediaControls.controlsBar.children[2].element.className is "volume-slider-container"
+PASS mediaControls.controlsBar.children[2].children is [mediaControls.volumeSlider]
+PASS mediaControls.controlsBar.children[2].visible is false
+PASS mediaControls.volumeSlider.width is 60
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,73 @@
+<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>
+<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>
+<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>
+<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>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSInlineMediaControls</code> constructor.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls;
+
+shouldBeEqualToString("mediaControls.element.localName", "div");
+shouldBeEqualToString("mediaControls.element.className", "media-controls mac inline");
+shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS");
+
+debug("");
+debug("Controls bar");
+shouldBe("mediaControls.controlsBar.children.length", "3");
+shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
+shouldBeTrue("mediaControls.controlsBar.children[2] instanceof LayoutNode");
+
+debug("");
+debug("Left container");
+shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
+shouldBe("mediaControls.controlsBar.children[0].padding", "24");
+shouldBe("mediaControls.controlsBar.children[0].margin", "24");
+
+debug("");
+debug("Right container");
+shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container right");
+shouldBe("mediaControls.controlsBar.children[1].padding", "24");
+shouldBe("mediaControls.controlsBar.children[1].margin", "24");
+
+debug("");
+debug("Volume slider");
+shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "volume-slider-container");
+shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.volumeSlider]");
+shouldBeFalse("mediaControls.controlsBar.children[2].visible");
+shouldBe("mediaControls.volumeSlider.width", "60");
+
+debug("");
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,23 @@
+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS style.left is "0px"
+PASS style.bottom is "0px"
+PASS style.width is "680px"
+PASS style.height is "50px"
+PASS bounds.left is 0
+PASS bounds.top is 250
+PASS bounds.width is 680
+PASS bounds.height is 50
+PASS rgba(style.backgroundColor).r is 30
+PASS rgba(style.backgroundColor).g is 30
+PASS rgba(style.backgroundColor).b is 30
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
+PASS style.webkitBackdropFilter is "saturate(1.8) blur(20px)"
+undefined
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,92 @@
+
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+
+<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>
+<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>
+<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>
+<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>
+<body>
+<style type="text/css" media="screen">
+
+.media-controls {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+</style>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+let style, bounds;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ style = window.getComputedStyle(mediaControls.controlsBar.element);
+ bounds = mediaControls.controlsBar.element.getBoundingClientRect();
+
+ shouldBeEqualToString("style.left", "0px");
+ shouldBeEqualToString("style.bottom", "0px");
+ shouldBeEqualToString("style.width", "680px");
+ shouldBeEqualToString("style.height", "50px");
+
+ shouldBe("bounds.left", "0");
+ shouldBe("bounds.top", "250");
+ shouldBe("bounds.width", "680");
+ shouldBe("bounds.height", "50");
+
+ shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(30, 30, 30, 0.45)");
+ shouldBeEqualToString("style.webkitBackdropFilter", "saturate(1.8) blur(20px)");
+
+ mediaControls.element.remove();
+
+ debug();
+ finishJSTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,17 @@
+Testing the MacOSInlineMediaControls layout.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[1] instanceof LayoutNode is true
+PASS mediaControls.controlsBar.children[2] instanceof ButtonsContainer is true
+PASS mediaControls.timeControl.x is 118
+PASS mediaControls.timeControl.width == expectedTimeControlWidth is true
+PASS mediaControls.controlsBar.children[0].children is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[2].children is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
+PASS mediaControls.volumeSlider.parent.x == expectedVolumeSliderContainerX is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,91 @@
+
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+
+<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>
+<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>
+<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>
+<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>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSInlineMediaControls</code> layout.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 50 });
+
+const iconButtons = [
+ mediaControls.playPauseButton,
+ mediaControls.skipBackButton,
+ mediaControls.airplayButton,
+ mediaControls.pipButton,
+ mediaControls.tracksButton,
+ mediaControls.muteButton,
+ mediaControls.fullscreenButton
+];
+
+// There is a 4-pixel difference in metrics between 1x and 2x due to the volume button having a different width.
+const is1x = window.devicePixelRatio == 1;
+const expectedTimeControlWidth = is1x ? 286 : 290;
+const expectedVolumeSliderContainerX = is1x ? 428 : 432;
+
+scheduler.frameDidFire = function()
+{
+ if (iconButtons.some(button => button.width == 0))
+ return;
+
+ shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+ shouldBeTrue("mediaControls.controlsBar.children[1] instanceof LayoutNode");
+ shouldBeTrue("mediaControls.controlsBar.children[2] instanceof ButtonsContainer");
+
+ shouldBe("mediaControls.timeControl.x", "118");
+
+ shouldBeTrue("mediaControls.timeControl.width == expectedTimeControlWidth");
+
+ shouldBe("mediaControls.controlsBar.children[0].children", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+ shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
+
+ shouldBeTrue("mediaControls.volumeSlider.parent.x == expectedVolumeSliderContainerX");
+
+ finishJSTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,13 @@
+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "23px"
+PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top is "14.5px"
+PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top is "14.5px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,70 @@
+
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+
+<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>
+<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>
+<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>
+<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>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "23px");
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top", "14.5px");
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top", "14.5px");
+ debug("");
+
+ mediaControls.element.remove();
+
+ finishJSTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,24 @@
+Testing the MacOSInlineMediaControls volume slider visibility.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Default state
+PASS volumeSliderContainer.visible is false
+
+Mouse enters the mute button
+PASS volumeSliderContainer.visible is true
+
+Mouse leaves the mute button
+PASS volumeSliderContainer.visible is false
+
+Mouse enters the mute button, then leaves it but enters the volume slider container
+PASS volumeSliderContainer.visible is true
+
+Mouse leaves the volume slider container
+PASS volumeSliderContainer.visible is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,66 @@
+<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>
+<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>
+<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>
+<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>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSInlineMediaControls</code> volume slider visibility.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls;
+const volumeSliderContainer = mediaControls.volumeSlider.parent;
+
+debug("Default state")
+shouldBeFalse("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse enters the mute button");
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseenter"));
+shouldBeTrue("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse leaves the mute button");
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseleave"));
+shouldBeFalse("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse enters the mute button, then leaves it but enters the volume slider container");
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseenter"));
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseleave", { relatedTarget: volumeSliderContainer.element }));
+shouldBeTrue("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse leaves the volume slider container");
+volumeSliderContainer.element.dispatchEvent(new MouseEvent("mouseleave"));
+shouldBeFalse("volumeSliderContainer.visible");
+
+debug("");
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,18 @@
+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS volumeSliderContainerStyle.position is "absolute"
+PASS volumeSliderContainerStyle.top is "0px"
+PASS volumeSliderContainerStyle.width is "31px"
+PASS volumeSliderContainerStyle.height is "81px"
+PASS volumeSliderContainerStyle.transform is "matrix(1, 0, 0, 1, 0, -81)"
+PASS volumeSliderStyle.transform is "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)"
+PASS volumeSliderStyle.left is "-15px"
+PASS volumeSliderStyle.top is "40px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,80 @@
+
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+<link rel="stylesheet" href=""
+
+<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>
+<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>
+<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>
+<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>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+mediaControls.volumeSlider.parent.visible = true;
+
+let volumeSliderContainerStyle, volumeSliderStyle;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ volumeSliderContainerStyle = window.getComputedStyle(mediaControls.volumeSlider.parent.element);
+ shouldBeEqualToString("volumeSliderContainerStyle.position", "absolute");
+ shouldBeEqualToString("volumeSliderContainerStyle.top", "0px");
+ shouldBeEqualToString("volumeSliderContainerStyle.width", "31px");
+ shouldBeEqualToString("volumeSliderContainerStyle.height", "81px");
+ shouldBeEqualToString("volumeSliderContainerStyle.transform", "matrix(1, 0, 0, 1, 0, -81)");
+
+ volumeSliderStyle = window.getComputedStyle(mediaControls.volumeSlider.element);
+ shouldBeEqualToString("volumeSliderStyle.transform", "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)");
+ shouldBeEqualToString("volumeSliderStyle.left", "-15px");
+ shouldBeEqualToString("volumeSliderStyle.top", "40px");
+
+ mediaControls.element.remove();
+
+ debug("");
+ finishJSTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,30 @@
+Testing MacOSInlineMediaControls and dropping controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+TimeControl is visible
+TimeControl is not visible
+
+AirplayButton is visible
+AirplayButton is not visible
+
+PiPButton is visible
+PiPButton is not visible
+
+TracksButton is visible
+TracksButton is not visible
+
+MuteButton is visible
+MuteButton is not visible
+
+SkipBackButton is visible
+SkipBackButton is not visible
+
+FullscreenButton is visible
+FullscreenButton is not visible
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,93 @@
+
+<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>
+<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>
+<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>
+<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>
+<body>
+<script type="text/_javascript_">
+
+description("Testing <code>MacOSInlineMediaControls</code> and dropping controls.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls;
+
+// There is a 4-pixel difference in metrics between 1x and 2x due to the volume button having a different width.
+const is1x = window.devicePixelRatio == 1;
+const expectedWidthsForDrop = [
+ [mediaControls.timeControl, is1x ? 655 : 651],
+ [mediaControls.airplayButton, is1x ? 394 : 390],
+ [mediaControls.pipButton, is1x ? 345 : 341],
+ [mediaControls.tracksButton, is1x ? 294 : 290],
+ [mediaControls.muteButton, is1x ? 245 : 241],
+ [mediaControls.skipBackButton, 187],
+ [mediaControls.fullscreenButton, 139]
+];
+
+function dumpControlVisibility(control)
+{
+ let visibilityString = "visible";
+ if (!control.parent)
+ visibilityString = "not " + visibilityString;
+ debug(`${control.constructor.name} is ${visibilityString}`);
+}
+
+const iconButtons = [
+ mediaControls.playPauseButton,
+ mediaControls.skipBackButton,
+ mediaControls.airplayButton,
+ mediaControls.pipButton,
+ mediaControls.tracksButton,
+ mediaControls.muteButton,
+ mediaControls.fullscreenButton
+];
+
+scheduler.frameDidFire = function()
+{
+ if (iconButtons.some(button => button.width == 0))
+ return;
+
+ for (let [control, width] of expectedWidthsForDrop) {
+ mediaControls.width = width + 1;
+ mediaControls.layout();
+ dumpControlVisibility(control);
+
+ mediaControls.width = width;
+ mediaControls.layout();
+ dumpControlVisibility(control);
+
+ debug("");
+ }
+
+ scheduler.frameDidFire = new Function;
+ finishJSTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,19 @@
+Testing the MacOSMediaControls constructor.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.localName is "div"
+PASS mediaControls.element.className is "media-controls mac"
+PASS mediaControls.layoutTraits is LayoutTraits.macOS
+PASS mediaControls.muteButton instanceof MuteButton is true
+PASS mediaControls.tracksButton instanceof TracksButton is true
+PASS mediaControls.volumeSlider instanceof VolumeSlider is true
+
+PASS mediaControlsWithArguments.width is 600
+PASS mediaControlsWithArguments.height is 300
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls.html (0 => 207373)
--- trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls.html 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,51 @@
+<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>
+<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>
+<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>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing the <code>MacOSMediaControls</code> constructor.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSMediaControls;
+
+shouldBeEqualToString("mediaControls.element.localName", "div");
+shouldBeEqualToString("mediaControls.element.className", "media-controls mac");
+shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS");
+shouldBeTrue("mediaControls.muteButton instanceof MuteButton");
+shouldBeTrue("mediaControls.tracksButton instanceof TracksButton");
+shouldBeTrue("mediaControls.volumeSlider instanceof VolumeSlider");
+
+debug("");
+const mediaControlsWithArguments = new MacOSMediaControls({ width: 600, height: 300 });
+shouldBe("mediaControlsWithArguments.width", "600");
+shouldBe("mediaControlsWithArguments.height", "300");
+
+debug("");
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (207372 => 207373)
--- trunk/Source/WebCore/ChangeLog 2016-10-15 08:27:19 UTC (rev 207372)
+++ trunk/Source/WebCore/ChangeLog 2016-10-15 09:15:41 UTC (rev 207373)
@@ -1,3 +1,51 @@
+2016-10-15 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] macOS inline controls
+ https://bugs.webkit.org/show_bug.cgi?id=163444
+ <rdar://problem/27989473>
+
+ Reviewed by Dean Jackson.
+
+ Introducing the new MacOSMediaControls and MacOSInlineMediaControls classes. MacOSMediaControls is a MediaControls subclass
+ that adds specific buttons to the macOS platform and sets the layout traits to be macOS. This class has a new subclass,
+ MacOSInlineMediaControls, which sets the layout traits to also include inline and implements custom layout to drop
+ controls as necessary as the width of the controls varies. It also shows the volume slider when the mute button is hovered.
+
+ Tests: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html
+ media/modern-media-controls/macos-media-controls/macos-media-controls.html
+
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.css: Added.
+ (.media-controls.mac.inline > .controls-bar):
+ (.media-controls.mac.inline > .controls-bar > *):
+ (.media-controls.mac.inline button):
+ (.media-controls.mac.inline button:active):
+ (.media-controls.mac.inline > .controls-bar button):
+ (.media-controls.mac.inline > .controls-bar,):
+ (.media-controls.mac.inline button.play-pause):
+ (.media-controls.mac.inline button.skip-back):
+ (.media-controls.mac.inline .scrubber.slider):
+ (.media-controls.mac.inline button.mute):
+ (.media-controls.mac.inline button.airplay):
+ (.media-controls.mac.inline button.pip):
+ (.media-controls.mac.inline button.tracks):
+ (.media-controls.mac.inline button.fullscreen):
+ (.media-controls.mac.inline .time-label):
+ (.media-controls.mac.inline .volume-slider-container):
+ (.media-controls.mac.inline .volume-slider-container:before):
+ (.media-controls.mac.inline .volume.slider):
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js: Added.
+ (MacOSInlineMediaControls.prototype.layout):
+ (MacOSInlineMediaControls.prototype.handleEvent):
+ * Modules/modern-media-controls/controls/macos-media-controls.js: Added.
+ (MacOSMediaControls):
+
2016-10-14 Antti Koivisto <an...@apple.com>
100% CPU on homedepot.com page
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css (0 => 207373)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,127 @@
+/*
+ * 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.
+ */
+
+/* Controls bar */
+
+.media-controls.mac.inline > .controls-bar {
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 50px;
+}
+
+.media-controls.mac.inline > .controls-bar > * {
+ position: absolute;
+}
+
+.media-controls.mac.inline button {
+ background-color: rgba(255, 255, 255, 0.572);
+}
+
+.media-controls.mac.inline button:active {
+ background-color: white;
+}
+
+.media-controls.mac.inline > .controls-bar button {
+ height: 100% !important;
+}
+
+/* Blurred backgrounds */
+
+.media-controls.mac.inline > .controls-bar,
+.media-controls.mac.inline .volume-slider-container:before {
+ /* FIXME: we want to use the real System Dark treatment here, see <rdar://problem/19993961> */
+ background-color: rgba(30, 30, 30, 0.45);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+/* Controls placement */
+
+.media-controls.mac.inline button.play-pause {
+ -webkit-mask-position-y: 12px;
+}
+
+.media-controls.mac.inline button.skip-back {
+ -webkit-mask-position-y: 10px;
+}
+
+.media-controls.mac.inline .scrubber.slider {
+ top: 23px;
+}
+
+.media-controls.mac.inline button.mute {
+ -webkit-mask-position-y: 10px;
+}
+
+.media-controls.mac.inline button.airplay {
+ -webkit-mask-position-y: 13px;
+}
+
+.media-controls.mac.inline button.pip {
+ -webkit-mask-position-y: 13px;
+}
+
+.media-controls.mac.inline button.tracks {
+ -webkit-mask-position-y: 15px;
+}
+
+.media-controls.mac.inline button.fullscreen {
+ -webkit-mask-position-y: 13px;
+}
+
+/* Time labels */
+
+.media-controls.mac.inline .time-label {
+ top: 14.5px;
+}
+
+/* Volume slider */
+
+.media-controls.mac.inline .volume-slider-container {
+ position: absolute;
+
+ top: 0px;
+ width: 31px;
+ height: 81px;
+ transform: translateY(-100%);
+}
+
+.media-controls.mac.inline .volume-slider-container:before {
+ content: "";
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 1px;
+
+ border-radius: 4px 4px 0 0;
+}
+
+.media-controls.mac.inline .volume.slider {
+ transform: rotate(-90deg);
+ left: -15px;
+ top: 40px;
+}
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (0 => 207373)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,114 @@
+/*
+ * 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.
+ */
+
+class MacOSInlineMediaControls extends MacOSMediaControls
+{
+
+ constructor(options)
+ {
+ super(options);
+
+ this.element.classList.add("inline");
+
+ this._leftContainer = new ButtonsContainer({
+ buttons: [this.playPauseButton, this.skipBackButton],
+ cssClassName: "left",
+ padding: 24,
+ margin: 24
+ });
+
+ this._rightContainer = new ButtonsContainer({
+ buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
+ cssClassName: "right",
+ padding: 24,
+ margin: 24
+ });
+
+ this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container">`);
+ this._volumeSliderContainer.children = [this.volumeSlider];
+ this._volumeSliderContainer.visible = false;
+ this.volumeSlider.width = 60;
+
+ // Wire up events to display the volume slider.
+ this.muteButton.element.addEventListener("mouseenter", this);
+ this.muteButton.element.addEventListener("mouseleave", this);
+ this._volumeSliderContainer.element.addEventListener("mouseleave", this);
+
+ this.controlsBar.children = [this._leftContainer, this._rightContainer, this._volumeSliderContainer];
+ }
+
+ // Public
+
+ layout()
+ {
+ super.layout();
+
+ if (!this.controlsBar.visible)
+ return;
+
+ // Reset dropped buttons.
+ this._rightContainer.buttons.concat(this._leftContainer.buttons).forEach(button => delete button.dropped);
+
+ this._leftContainer.layout();
+ this._rightContainer.layout();
+
+ this.timeControl.width = this.width - this._leftContainer.width - this._rightContainer.width;
+
+ if (this.timeControl.isSufficientlyWide) {
+ this.controlsBar.insertBefore(this.timeControl, this._rightContainer);
+ this.timeControl.x = this._leftContainer.width;
+ } else {
+ this.timeControl.remove();
+ // Since we don't have enough space to display the scrubber, we may also not have
+ // enough space to display all buttons in the left and right containers, so gradually drop them.
+ for (let button of [this.airplayButton, this.pipButton, this.tracksButton, this.muteButton, this.skipBackButton, this.fullscreenButton]) {
+ // Nothing left to do if the combined container widths is shorter than the available width.
+ if (this._leftContainer.width + this._rightContainer.width < this.width)
+ break;
+
+ // If the button was already not participating in layout, we can skip it.
+ if (!button.visible)
+ continue;
+
+ // This button must now be dropped.
+ button.dropped = true;
+
+ this._leftContainer.layout();
+ this._rightContainer.layout();
+ }
+ }
+
+ this._rightContainer.x = this.width - this._rightContainer.width;
+ this._volumeSliderContainer.x = this._rightContainer.x + this.muteButton.x;
+ }
+
+ // Protected
+
+ handleEvent(event)
+ {
+ this._volumeSliderContainer.visible = event.type === "mouseenter" || event.relatedTarget === this._volumeSliderContainer.element;
+ }
+
+}
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js (0 => 207373)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js 2016-10-15 09:15:41 UTC (rev 207373)
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+
+class MacOSMediaControls extends MediaControls
+{
+
+ constructor(options = {})
+ {
+ super({
+ width: options.width,
+ height: options.height,
+ layoutTraits: LayoutTraits.macOS
+ });
+
+ this.element.classList.add("mac");
+
+ this.muteButton = new MuteButton(this);
+ this.tracksButton = new TracksButton(this);
+ this.volumeSlider = new VolumeSlider;
+ }
+
+}
