Diff
Modified: trunk/LayoutTests/ChangeLog (211903 => 211904)
--- trunk/LayoutTests/ChangeLog 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/LayoutTests/ChangeLog 2017-02-08 22:57:38 UTC (rev 211904)
@@ -1,3 +1,44 @@
+2017-02-08 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Implement reduced and tight padding modes
+ https://bugs.webkit.org/show_bug.cgi?id=167933
+ <rdar://problem/30396994>
+
+ Reviewed by Dean Jackson.
+
+ We rewrite the previously-written tests for "compact" mode and add some new tests for
+ "reduced padding" and "tight padding" modes as well as new support in IconButton to
+ update the icon based on a change of layout traits.
+
+ * media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt: Added.
+ * media/modern-media-controls/icon-button/icon-button-change-layout-traits.html: Added.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles-expected.txt: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor-expected.txt: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-constructor.html: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles-expected.txt: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-controls-bar-styles.html: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout-expected.txt: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-layout.html: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles-expected.txt: Removed.
+ * media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-volume-styles.html: Removed.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-compact-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-compact.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-reduced-padding.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-tight-padding.html: Added.
+ * platform/ios-simulator/TestExpectations:
+
2017-02-08 Youenn Fablet <[email protected]>
RTCPeerConnection constructor can take null as input
Added: trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,21 @@
+Testing IconButton while changing layout traits.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Setting macOS inline layout traits and setting play icon
+PASS iconButton.element.style.webkitMaskImage.includes("macOS/pause") is true
+PASS iconButton.element.style.width is "22px"
+PASS iconButton.element.style.height is "24px"
+PASS iconButton.element.style.webkitMaskSize is "22px 24px"
+
+Setting macOS inline and compact layout traits and notifying of a layout traits change
+PASS iconButton.element.style.webkitMaskImage.includes("macOS/pause-compact") is true
+PASS iconButton.element.style.width is "11px"
+PASS iconButton.element.style.height is "13px"
+PASS iconButton.element.style.webkitMaskSize is "11px 13px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-change-layout-traits.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,48 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing <code>IconButton</code> while changing layout traits.");
+
+const layoutDelegate = {};
+
+const iconButton = new IconButton({ layoutDelegate });
+
+debug("");
+debug("Setting macOS inline layout traits and setting play icon");
+layoutDelegate.layoutTraits = LayoutTraits.macOS;
+iconButton.iconName = Icons.Pause;
+
+let numberOfFrames = 0;
+
+scheduler.frameDidFire = function()
+{
+ numberOfFrames++;
+
+ if (numberOfFrames === 1) {
+ shouldBeTrue('iconButton.element.style.webkitMaskImage.includes("macOS/pause")');
+ shouldBeEqualToString("iconButton.element.style.width", "22px");
+ shouldBeEqualToString("iconButton.element.style.height", "24px");
+ shouldBeEqualToString("iconButton.element.style.webkitMaskSize", "22px 24px");
+
+ debug("");
+ debug("Setting macOS inline and compact layout traits and notifying of a layout traits change");
+ layoutDelegate.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+ iconButton.layoutTraitsDidChange();
+ } else if (numberOfFrames === 2) {
+ shouldBeTrue('iconButton.element.style.webkitMaskImage.includes("macOS/pause-compact")');
+ shouldBeEqualToString("iconButton.element.style.width", "11px");
+ shouldBeEqualToString("iconButton.element.style.height", "13px");
+ shouldBeEqualToString("iconButton.element.style.webkitMaskSize", "11px 13px");
+
+ finishMediaControlsTest();
+ }
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,25 @@
+Testing the MacOSInlineMediaControls computed styles in compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PlayPauseButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+SkipBackButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+MuteButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6px"
+
+FullscreenButton
+PASS style.height is "25px"
+PASS style.webkitMaskPositionY is "6.5px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Copied: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html (from rev 211903, trunk/LayoutTests/media/modern-media-controls/macos-compact-inline-media-controls/macos-compact-inline-media-controls-buttons-styles.html) (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,43 @@
+<script src=""
+<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 in compact mode.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSInlineMediaControls({ width: 240 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+
+const buttonPositions = [
+ [mediaControls.playPauseButton, 6],
+ [mediaControls.skipBackButton, 6],
+ [mediaControls.muteButton, 6],
+ [mediaControls.fullscreenButton, 6.5]
+];
+
+let style;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ if (buttonPositions.some(buttonPosition => buttonPosition[0].width == 0))
+ return;
+
+ for (let [button, y] of buttonPositions) {
+ style = window.getComputedStyle(button.element);
+ debug(button.constructor.name);
+ shouldBeEqualToString("style.height", "25px");
+ shouldBeEqualToString("style.webkitMaskPositionY", `${y}px`);
+ debug("");
+ }
+
+ mediaControls.element.remove();
+ finishMediaControlsTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,11 @@
+Testing the MacOSInlineMediaControls computed styles in compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.controlsBar.element.getBoundingClientRect().height is 25
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,38 @@
+<script src=""
+<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 in compact mode.");
+
+window.jsTestIsAsync = true;
+
+const mediaControls = new MacOSInlineMediaControls({ width: 240 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+
+let bounds;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ shouldBe("mediaControls.controlsBar.element.getBoundingClientRect().height", "25");
+
+ mediaControls.element.remove();
+
+ debug("");
+ finishMediaControlsTest();
+};
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,18 @@
+Testing MacOSInlineMediaControls in compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.classList.contains('compact') is true
+PASS mediaControls.rightContainer.buttons is [mediaControls.muteButton, mediaControls.fullscreenButton]
+PASS mediaControls.leftContainer.leftMargin is 8
+PASS mediaControls.leftContainer.rightMargin is 12
+PASS mediaControls.leftContainer.buttonMargin is 12
+PASS mediaControls.rightContainer.leftMargin is 12
+PASS mediaControls.rightContainer.rightMargin is 8
+PASS mediaControls.rightContainer.buttonMargin is 12
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,24 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing <code>MacOSInlineMediaControls</code> in compact mode.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 240 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
+
+shouldBeTrue("mediaControls.element.classList.contains('compact')");
+shouldBe("mediaControls.rightContainer.buttons", "[mediaControls.muteButton, mediaControls.fullscreenButton]");
+shouldBe("mediaControls.leftContainer.leftMargin", "8");
+shouldBe("mediaControls.leftContainer.rightMargin", "12");
+shouldBe("mediaControls.leftContainer.buttonMargin", "12");
+shouldBe("mediaControls.rightContainer.leftMargin", "12");
+shouldBe("mediaControls.rightContainer.rightMargin", "8");
+shouldBe("mediaControls.rightContainer.buttonMargin", "12");
+debug("");
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,16 @@
+Testing MacOSInlineMediaControls with reduced padding.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.leftContainer.leftMargin is 12
+PASS mediaControls.leftContainer.rightMargin is 16
+PASS mediaControls.leftContainer.buttonMargin is 16
+PASS mediaControls.rightContainer.leftMargin is 0
+PASS mediaControls.rightContainer.rightMargin is 12
+PASS mediaControls.rightContainer.buttonMargin is 16
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,22 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing <code>MacOSInlineMediaControls</code> with reduced padding.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 300 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.ReducedPadding;
+
+shouldBe("mediaControls.leftContainer.leftMargin", "12");
+shouldBe("mediaControls.leftContainer.rightMargin ", "16");
+shouldBe("mediaControls.leftContainer.buttonMargin", "16");
+shouldBe("mediaControls.rightContainer.leftMargin ", "0");
+shouldBe("mediaControls.rightContainer.rightMargin", "12");
+shouldBe("mediaControls.rightContainer.buttonMargin ", "16");
+debug("");
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,16 @@
+Testing MacOSInlineMediaControls with tight padding.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.leftContainer.leftMargin is 12
+PASS mediaControls.leftContainer.rightMargin is 12
+PASS mediaControls.leftContainer.buttonMargin is 12
+PASS mediaControls.rightContainer.leftMargin is 12
+PASS mediaControls.rightContainer.rightMargin is 12
+PASS mediaControls.rightContainer.buttonMargin is 12
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,22 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing <code>MacOSInlineMediaControls</code> with tight padding.");
+
+const mediaControls = new MacOSInlineMediaControls({ width: 400 });
+mediaControls.layoutTraits = LayoutTraits.macOS | LayoutTraits.TightPadding;
+
+shouldBe("mediaControls.leftContainer.leftMargin", "12");
+shouldBe("mediaControls.leftContainer.rightMargin ", "12");
+shouldBe("mediaControls.leftContainer.buttonMargin", "12");
+shouldBe("mediaControls.rightContainer.leftMargin ", "12");
+shouldBe("mediaControls.rightContainer.rightMargin", "12");
+shouldBe("mediaControls.rightContainer.buttonMargin ", "12");
+debug("");
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,11 @@
+Testing the MediaController sizing behavior with compact mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS !!(mediaController.controls.layoutTraits & LayoutTraits.Compact) became true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,20 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<video src="" style="width: 240px;" controls autoplay></video>
+<div id="shadow"></div>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> sizing behavior with compact mode.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBecomeEqual("!!(mediaController.controls.layoutTraits & LayoutTraits.Compact)", "true", finishJSTest);
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,11 @@
+Testing the MediaController sizing behavior with reduced padding mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS !!(mediaController.controls.layoutTraits & LayoutTraits.ReducedPadding) became true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,20 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<video src="" style="width: 300px;" controls autoplay></video>
+<div id="shadow"></div>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> sizing behavior with reduced padding mode.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("video");
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBecomeEqual("!!(mediaController.controls.layoutTraits & LayoutTraits.ReducedPadding)", "true", finishJSTest);
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,11 @@
+Testing the MediaController sizing behavior with tight padding mode.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS !!(mediaController.controls.layoutTraits & LayoutTraits.TightPadding) became true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html (0 => 211904)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html 2017-02-08 22:57:38 UTC (rev 211904)
@@ -0,0 +1,20 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<audio src="" style="width: 400px;" controls autoplay></audio>
+<div id="shadow"></div>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>MediaController</code> sizing behavior with tight padding mode.");
+
+const shadowRoot = document.querySelector("div#shadow").attachShadow({ mode: "open" });
+const media = document.querySelector("audio");
+const mediaController = createControls(shadowRoot, media, null);
+
+shouldBecomeEqual("!!(mediaController.controls.layoutTraits & LayoutTraits.TightPadding)", "true", finishJSTest);
+
+</script>
+<script src=""
+</body>
Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (211903 => 211904)
--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-02-08 22:57:38 UTC (rev 211904)
@@ -2835,7 +2835,16 @@
webkit.org/b/166062 media/modern-media-controls/placard-support/placard-support-airplay.html [ Skip ]
webkit.org/b/166062 media/modern-media-controls/audio/audio-controls-buttons.html [ Skip ]
-# There is no compact mode on iOS
+# There is no compact, reduced padding or tight padding mode on iOS.
+media/modern-media-controls/icon-button/icon-button-change-layout-traits.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html [ Skip ]
+media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-compact.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-reduced-padding.html [ Skip ]
+media/modern-media-controls/media-controller/media-controller-tight-padding.html [ Skip ]
media/modern-media-controls/media-controller/media-controller-toggle-compact-mode.html [ Skip ]
# New Encrypted Media API not enabled on iOS
Modified: trunk/Source/WebCore/ChangeLog (211903 => 211904)
--- trunk/Source/WebCore/ChangeLog 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/ChangeLog 2017-02-08 22:57:38 UTC (rev 211904)
@@ -1,3 +1,74 @@
+2017-02-08 Antoine Quint <[email protected]>
+
+ [Modern Media Controls] Implement reduced and tight padding modes
+ https://bugs.webkit.org/show_bug.cgi?id=167933
+ <rdar://problem/30396994>
+
+ Reviewed by Dean Jackson.
+
+ The design specs for modern media controls mandate the following for inline media controls:
+
+ - controls at or below 300pt width use a 12pt left margin for the left buttons container,
+ and a 12pt right margin for the right buttons container, and 16pth button margin inside
+ both containers ("reduced padding mode").
+
+ - when dropping at or below 120pt width, controls use an 8pt left margin for
+ the left buttons container, and an 8pt right margin for the right buttons container, and
+ 12pt button margin inside both containers and a shorter bar (25pt) ("compact mode").
+
+ - in the case of audio controls, at 400pt or less, controls switch to 12pt margins and
+ button margins for both buttons containers ("tight padding mode").
+
+ The "compact" mode was already implemented as a dedicated MacOSInlineMediaControls subclass.
+ Since we now have a more generic need to vary the metrics used for inline media controls on
+ macOS, we add new features to MacOSInlineMediaControls to support varying metrics based on
+ the controls' "layoutTraits" property.
+
+ So MediaController is changed such that it knows to use the new TightPadding and ReducedPadding
+ layout traits based on the conditions defined above, and _updateControlsIfNeeded() is changed
+ to set the "layoutTraits" property on the controls whenever called, which in our case is most
+ relevantly a "resize" event on the shadow root or a TrackEvent on the video tracks (to determine
+ when we're possibly changing between a video and audio file).
+
+ As a result, the "layoutTraits" setter is called on MacOSInlineMediaControls, which updates
+ the metrics for the various buttons containers, but also notifies the buttons contained
+ within that layout traits may have changed, since some buttons support a "compact" appearance
+ that is shorter and require a different image file. To that end, IconButton has been updated
+ so that it may be notified of a layout traits change through a new layoutTraitsDidChange()
+ method, that checks whether the current layout traits differ from those last used when loading
+ the icon.
+
+ Tests: media/modern-media-controls/icon-button/icon-button-change-layout-traits.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-buttons-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact-controls-bar-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-compact.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-reduced-padding.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-tight-padding.html
+ media/modern-media-controls/media-controller/media-controller-compact.html
+ media/modern-media-controls/media-controller/media-controller-reduced-padding.html
+ media/modern-media-controls/media-controller/media-controller-tight-padding.html
+
+ * Modules/modern-media-controls/controls/icon-button.js:
+ (IconButton.prototype.set iconName):
+ (IconButton.prototype.layoutTraitsDidChange):
+ (IconButton.prototype._loadImage):
+ * Modules/modern-media-controls/controls/layout-item.js:
+ * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js: Removed.
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+ (MacOSInlineMediaControls.prototype.get layoutTraits):
+ (MacOSInlineMediaControls.prototype.set layoutTraits):
+ (MacOSInlineMediaControls.prototype._matchLayoutTraits):
+ * Modules/modern-media-controls/js-files:
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController):
+ (MediaController.prototype.get layoutTraits):
+ (MediaController.prototype.handleEvent):
+ (MediaController.prototype._updateControlsIfNeeded):
+ (MediaController.prototype._controlsClassForLayoutTraits):
+ (MediaController.prototype._shouldFadeBetweenControls): Deleted.
+ (MediaController.prototype._controlsClass): Deleted.
+ * WebCore.xcodeproj/project.pbxproj:
+
2017-02-08 Aakash Jain <[email protected]>
Move private methods from WKGraphics.h to a separate header file
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js (211903 => 211904)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js 2017-02-08 22:57:38 UTC (rev 211904)
@@ -36,6 +36,7 @@
this._image = null;
this._iconName = "";
+ this._iconLayoutTraits = LayoutTraits.Unknown;
if (!!iconName)
this.iconName = iconName;
@@ -53,17 +54,7 @@
if (this._iconName === iconName)
return;
- if (this._image)
- this._image.removeEventListener("load", this);
-
- this._image = iconService.imageForIconNameAndLayoutTraits(iconName, this.layoutTraits);
-
- this._iconName = iconName;
-
- if (this._image.complete)
- this._updateImage();
- else
- this._image.addEventListener("load", this);
+ this._loadImage(iconName);
}
get on()
@@ -75,6 +66,12 @@
this.element.classList.toggle("on", flag);
}
+ layoutTraitsDidChange()
+ {
+ if (this._iconLayoutTraits !== this.layoutTraits)
+ this._loadImage(this._iconName);
+ }
+
// Protected
handleEvent(event)
@@ -95,6 +92,22 @@
// Private
+ _loadImage(iconName)
+ {
+ if (this._image)
+ this._image.removeEventListener("load", this);
+
+ this._iconLayoutTraits = this.layoutTraits;
+ this._image = iconService.imageForIconNameAndLayoutTraits(iconName, this._iconLayoutTraits);
+
+ this._iconName = iconName;
+
+ if (this._image.complete)
+ this._updateImage();
+ else
+ this._image.addEventListener("load", this);
+ }
+
_imageDidLoad()
{
this._image.removeEventListener("load", this);
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js (211903 => 211904)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2017-02-08 22:57:38 UTC (rev 211904)
@@ -24,11 +24,13 @@
*/
const LayoutTraits = {
- Unknown : 0,
- macOS : 1 << 0,
- iOS : 1 << 1,
- Fullscreen : 1 << 2,
- Compact : 1 << 3
+ Unknown : 0,
+ macOS : 1 << 0,
+ iOS : 1 << 1,
+ Fullscreen : 1 << 2,
+ Compact : 1 << 3,
+ ReducedPadding : 1 << 4,
+ TightPadding : 1 << 5
};
class LayoutItem extends LayoutNode
Deleted: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js (211903 => 211904)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.js 2017-02-08 22:57:38 UTC (rev 211904)
@@ -1,47 +0,0 @@
-/*
- * 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 MacOSCompactInlineMediaControls extends MacOSInlineMediaControls
-{
-
- constructor(options = {})
- {
- options.layoutTraits = LayoutTraits.macOS | LayoutTraits.Compact;
-
- super(options);
-
- this.element.classList.add("compact");
-
- this.leftContainer.leftMargin = 8;
- this.leftContainer.rightMargin = 12;
- this.leftContainer.buttonMargin = 12;
-
- this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
- this.rightContainer.leftMargin = 12;
- this.rightContainer.rightMargin = 8;
- this.rightContainer.buttonMargin = 12;
- }
-
-}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (211903 => 211904)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2017-02-08 22:57:38 UTC (rev 211904)
@@ -38,10 +38,11 @@
});
this.rightContainer = new ButtonsContainer({
- buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
cssClassName: "right"
});
+ this._matchLayoutTraits();
+
this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container">`);
this._volumeSliderContainer.children = [this.volumeSlider];
this._volumeSliderContainer.visible = false;
@@ -57,6 +58,20 @@
// Public
+ get layoutTraits()
+ {
+ return this._layoutTraits;
+ }
+
+ set layoutTraits(layoutTraits)
+ {
+ if (this._layoutTraits === layoutTraits)
+ return;
+
+ this._layoutTraits = layoutTraits;
+ this._matchLayoutTraits();
+ }
+
layout()
{
super.layout();
@@ -133,4 +148,52 @@
this.layout();
}
+ // Private
+
+ _matchLayoutTraits()
+ {
+ if (!this.leftContainer || !this.rightContainer)
+ return;
+
+ const layoutTraits = this.layoutTraits;
+ if (layoutTraits & LayoutTraits.Compact) {
+ this.leftContainer.leftMargin = 8;
+ this.leftContainer.rightMargin = 12;
+ this.leftContainer.buttonMargin = 12;
+ this.rightContainer.leftMargin = 12;
+ this.rightContainer.rightMargin = 8;
+ this.rightContainer.buttonMargin = 12;
+ } else if (layoutTraits & LayoutTraits.TightPadding) {
+ this.leftContainer.leftMargin = 12;
+ this.leftContainer.rightMargin = 12;
+ this.leftContainer.buttonMargin = 12;
+ this.rightContainer.leftMargin = 12;
+ this.rightContainer.rightMargin = 12;
+ this.rightContainer.buttonMargin = 12;
+ } else if (layoutTraits & LayoutTraits.ReducedPadding) {
+ this.leftContainer.leftMargin = 12;
+ this.leftContainer.rightMargin = 16;
+ this.leftContainer.buttonMargin = 16;
+ this.rightContainer.leftMargin = 0;
+ this.rightContainer.rightMargin = 12;
+ this.rightContainer.buttonMargin = 16;
+ } else {
+ this.leftContainer.leftMargin = 24;
+ this.leftContainer.rightMargin = 24;
+ this.leftContainer.buttonMargin = 24;
+ this.rightContainer.leftMargin = 24;
+ this.rightContainer.rightMargin = 24;
+ this.rightContainer.buttonMargin = 24;
+ }
+
+ if (layoutTraits & LayoutTraits.Compact)
+ this.rightContainer.buttons = [this.muteButton, this.fullscreenButton];
+ else
+ this.rightContainer.buttons = [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton];
+
+ this.leftContainer.buttons.forEach(button => button.layoutTraitsDidChange());
+ this.rightContainer.buttons.forEach(button => button.layoutTraitsDidChange());
+
+ this.element.classList.toggle("compact", layoutTraits & LayoutTraits.Compact);
+ }
}
Modified: trunk/Source/WebCore/Modules/modern-media-controls/js-files (211903 => 211904)
--- trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/Modules/modern-media-controls/js-files 2017-02-08 22:57:38 UTC (rev 211904)
@@ -33,7 +33,6 @@
controls/ios-inline-media-controls.js
controls/macos-media-controls.js
controls/macos-inline-media-controls.js
-controls/macos-compact-inline-media-controls.js
controls/macos-fullscreen-media-controls.js
controls/placard.js
controls/airplay-placard.js
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (211903 => 211904)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-08 22:57:38 UTC (rev 211904)
@@ -24,6 +24,8 @@
*/
const CompactModeMaxWidth = 241;
+const ReducedPaddingMaxWidth = 300;
+const AudioTightPaddingMaxWidth = 400;
class MediaController
{
@@ -47,6 +49,9 @@
shadowRoot.addEventListener("resize", this);
+ media.videoTracks.addEventListener("addtrack", this);
+ media.videoTracks.addEventListener("removetrack", this);
+
if (media.webkitSupportsPresentationMode)
media.addEventListener("webkitpresentationmodechanged", this);
else
@@ -62,9 +67,17 @@
} else if (this.media.webkitDisplayingFullscreen)
return traits | LayoutTraits.Fullscreen;
- if (this._controlsWidth() <= CompactModeMaxWidth)
+ const controlsWidth = this._controlsWidth();
+ if (controlsWidth <= CompactModeMaxWidth)
return traits | LayoutTraits.Compact;
+ const isAudio = this.media instanceof HTMLAudioElement || this.media.videoTracks.length === 0;
+ if (isAudio && controlsWidth <= AudioTightPaddingMaxWidth)
+ return traits | LayoutTraits.TightPadding;
+
+ if (!isAudio && controlsWidth <= ReducedPaddingMaxWidth)
+ return traits | LayoutTraits.ReducedPadding;
+
return traits;
}
@@ -83,10 +96,11 @@
handleEvent(event)
{
- if (event.type === "resize" && event.currentTarget === this.shadowRoot) {
- this._updateControlsSize();
+ if (event instanceof TrackEvent && event.currentTarget === this.media.videoTracks)
this._updateControlsIfNeeded();
- } else if (event.type === "click" && event.currentTarget === this.container)
+ else if (event.type === "resize" && event.currentTarget === this.shadowRoot)
+ this._updateControlsIfNeeded();
+ else if (event.type === "click" && event.currentTarget === this.container)
this._containerWasClicked(event);
else if (event.currentTarget === this.media) {
this._updateControlsIfNeeded();
@@ -106,10 +120,14 @@
_updateControlsIfNeeded()
{
+ const layoutTraits = this.layoutTraits;
const previousControls = this.controls;
- const ControlsClass = this._controlsClass();
- if (previousControls && previousControls.constructor === ControlsClass)
+ const ControlsClass = this._controlsClassForLayoutTraits(layoutTraits);
+ if (previousControls && previousControls.constructor === ControlsClass) {
+ this.controls.layoutTraits = layoutTraits;
+ this._updateControlsSize();
return;
+ }
// Before we reset the .controls property, we need to destroy the previous
// supporting objects so we don't leak.
@@ -124,13 +142,13 @@
this.controls.controlsBar.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
if (previousControls) {
- if (this._shouldFadeBetweenControls(previousControls, this.controls))
- this.controls.fadeIn();
+ this.controls.fadeIn();
this.container.replaceChild(this.controls.element, previousControls.element);
this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection;
} else
this.container.appendChild(this.controls.element);
+ this.controls.layoutTraits = layoutTraits;
this._updateControlsSize();
this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, StartSupport, StatusSupport, TimeLabelsSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
@@ -138,14 +156,6 @@
}, this);
}
- _shouldFadeBetweenControls(previousControls, newControls)
- {
- // We don't fade when toggling between the various macOS inline modes.
- if (previousControls instanceof MacOSInlineMediaControls && newControls instanceof MacOSInlineMediaControls)
- return false;
- return true;
- }
-
_updateControlsSize()
{
this.controls.width = this._controlsWidth();
@@ -163,15 +173,12 @@
window.requestAnimationFrame(() => this.host.setPreparedToReturnVideoLayerToInline(this.media.webkitPresentationMode !== PiPMode));
}
- _controlsClass()
+ _controlsClassForLayoutTraits(layoutTraits)
{
- const layoutTraits = this.layoutTraits;
if (layoutTraits & LayoutTraits.iOS)
return IOSInlineMediaControls;
if (layoutTraits & LayoutTraits.Fullscreen)
return MacOSFullscreenMediaControls;
- if (layoutTraits & LayoutTraits.Compact)
- return MacOSCompactInlineMediaControls;
return MacOSInlineMediaControls;
}
Modified: trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj (211903 => 211904)
--- trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2017-02-08 22:50:18 UTC (rev 211903)
+++ trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj 2017-02-08 22:57:38 UTC (rev 211904)
@@ -10195,7 +10195,6 @@
7177E2481DB80D2F00919A0B /* start-support.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode._javascript_; path = "start-support.js"; sourceTree = "<group>"; };
717F618B1E43D61A00F37024 /* controls-bar.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "controls-bar.css"; sourceTree = "<group>"; };
717F618C1E43D61A00F37024 /* macos-compact-inline-media-controls.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "macos-compact-inline-media-controls.css"; sourceTree = "<group>"; };
- 717F618D1E43D61A00F37024 /* macos-compact-inline-media-controls.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode._javascript_; path = "macos-compact-inline-media-controls.js"; sourceTree = "<group>"; };
717F618E1E43D61A00F37024 /* text-tracks.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = "text-tracks.css"; sourceTree = "<group>"; };
717F618F1E43D66500F37024 /* [email protected] */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "[email protected]"; sourceTree = "<group>"; };
717F61901E43D66500F37024 /* [email protected] */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "[email protected]"; sourceTree = "<group>"; };
@@ -18446,7 +18445,6 @@
716FA0E51DB26591007323CC /* layout-item.js */,
716FA0E61DB26591007323CC /* layout-node.js */,
717F618C1E43D61A00F37024 /* macos-compact-inline-media-controls.css */,
- 717F618D1E43D61A00F37024 /* macos-compact-inline-media-controls.js */,
712157C01DCCCA0700AA7A92 /* macos-fullscreen-media-controls.css */,
712157C11DCCCA0700AA7A92 /* macos-fullscreen-media-controls.js */,
716FA0E71DB26591007323CC /* macos-inline-media-controls.css */,
