Diff
Modified: trunk/LayoutTests/ChangeLog (195911 => 195912)
--- trunk/LayoutTests/ChangeLog 2016-01-30 21:53:47 UTC (rev 195911)
+++ trunk/LayoutTests/ChangeLog 2016-01-30 22:19:08 UTC (rev 195912)
@@ -1,3 +1,23 @@
+2016-01-30 Eric Carlson <[email protected]>
+
+ More than one audio and/or text track sometimes selected in media controls menu
+ https://bugs.webkit.org/show_bug.cgi?id=153664
+
+ Reviewed by Jer Noble.
+
+ * media/controls/controls-test-helpers.js:
+ (ControlsTest.prototype.get currentState):
+ (ControlsTest.prototype.get video):
+ (ControlsTest.prototype.stateForControlsElement):
+ (ControlsTest.prototype.handleEvent):
+ (ControlsTest.prototype.setup):
+ (ControlsTest.prototype.start):
+ (ControlsTest.prototype.isEqualTo):
+ (ControlsTest.prototype.isNotEqualTo):
+ (ControlsTest.prototype.contains):
+ * media/controls/track-menu-expected.txt: Added.
+ * media/controls/track-menu.html: Added.
+
2016-01-30 Chris Dumez <[email protected]>
[JS Bindings] prototype.constructor should be writable
Modified: trunk/LayoutTests/media/controls/controls-test-helpers.js (195911 => 195912)
--- trunk/LayoutTests/media/controls/controls-test-helpers.js 2016-01-30 21:53:47 UTC (rev 195911)
+++ trunk/LayoutTests/media/controls/controls-test-helpers.js 2016-01-30 22:19:08 UTC (rev 195912)
@@ -35,6 +35,11 @@
return { idiom: "apple", status: "fail" };
}
+ get video()
+ {
+ return this.media;
+ }
+
stateForControlsElement(elementName, flushCachedState)
{
if (flushCachedState)
@@ -53,7 +58,7 @@
handleEvent(event)
{
this.logMessage(`EVENT: ${event.type}`);
- if (event.type == this.eventTrigger && this.callback)
+ if (event.type == this.eventTrigger && this.callback && window.testRunner)
this.callback();
}
@@ -87,11 +92,6 @@
setup()
{
- if (!window.testRunner) {
- this.logFailure("Test requires DRT.");
- return false;
- }
-
this.console = document.createElement("div");
this.console.className = "console";
document.body.appendChild(this.console);
@@ -107,13 +107,20 @@
this.media.addEventListener(this.eventTrigger, this, false);
this.media.src = "" this.mediaURL);
+ if (!window.testRunner) {
+ this.logFailure("Test requires DRT.");
+ return false;
+ }
+
return true;
}
start(msg)
{
window.addEventListener("load", function () {
- this.setup();
+ if (!this.setup())
+ return;
+
if (msg)
this.startNewSection(msg);
}.bind(this), false);
@@ -149,6 +156,14 @@
this.logFailure(`${this.currentMessage} Expected: "${value}". Actual: "${this.currentValue}"`);
}
+ isNotEqualTo(value)
+ {
+ if (this.currentValue != value)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Expected to not be equal to: "${value}". Actual: "${this.currentValue}"`);
+ }
+
contains(value)
{
if (this.currentValue.indexOf(value) >= 0)
Added: trunk/LayoutTests/media/controls/track-menu-expected.txt (0 => 195912)
--- trunk/LayoutTests/media/controls/track-menu-expected.txt (rev 0)
+++ trunk/LayoutTests/media/controls/track-menu-expected.txt 2016-01-30 22:19:08 UTC (rev 195912)
@@ -0,0 +1,28 @@
+This tests the track menu.
+
+This test only runs in DRT!
+
+
+EVENT: canplaythrough
+PASS: We are using the apple idiom
+
+Test when track menu is hidden
+
+PASS: Menu name is 'Track Menu'
+PASS: Menu does not exist
+PASS: Text track not visible
+
+Test with visible menu
+
+PASS: Menu name is 'Track Menu'
+PASS: Menu exists
+PASS: id is 'audioAndTextTrackMenu'
+PASS: Menu element contains <ul>
+PASS: First menu item is selected
+PASS: First menu item contains checkmark <img>
+PASS: First menu item checkmark image is visible
+PASS: Second menu item is not selected
+PASS: Second menu item checkmark is not visible
+
+Testing finished.
+
Added: trunk/LayoutTests/media/controls/track-menu.html (0 => 195912)
--- trunk/LayoutTests/media/controls/track-menu.html (rev 0)
+++ trunk/LayoutTests/media/controls/track-menu.html 2016-01-30 22:19:08 UTC (rev 195912)
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script src=""
+ <script>
+ var tester = new ControlsTest()
+ .whenReady(runTestsWithHiddenMenu)
+ .start();
+
+ function runTestsWithHiddenMenu()
+ {
+ findMediaElement();
+
+ var currentState = tester.currentState;
+ tester.test("We are using the apple idiom")
+ .value(currentState.idiom)
+ .isEqualTo("apple");
+
+ tester.startNewSection("Test when track menu is hidden");
+ var statusState = tester.stateForControlsElement("Track Menu");
+
+ tester.test("Menu name is 'Track Menu'")
+ .value(statusState.name)
+ .isEqualTo("Track Menu");
+
+ tester.test("Menu does not exist")
+ .value(statusState.element)
+ .isEqualTo(null);
+
+ tester.test("Text track not visible")
+ .value(tester.video.textTracks[0].mode)
+ .isEqualTo("disabled");
+
+ // Show the track menu.
+ internals.suspendAnimations();
+ hideTrackMenu();
+ showTrackMenu();
+ window.setTimeout(runTestsWithVisibleMenu, 100);
+ }
+
+ function runTestsWithVisibleMenu()
+ {
+ tester.startNewSection("Test with visible menu");
+ var statusState = tester.stateForControlsElement("Track Menu", true);
+
+ tester.test("Menu name is 'Track Menu'")
+ .value(statusState.name)
+ .isEqualTo("Track Menu");
+
+ var captionMenu = getTrackListElement();
+ tester.test("Menu exists")
+ .value(captionMenu)
+ .isNotEqualTo(null);
+
+ tester.test("id is 'audioAndTextTrackMenu'")
+ .value(captionMenu.id)
+ .isEqualTo("audioAndTextTrackMenu");
+
+ var menuList = captionMenu.firstChild.children[1];
+ tester.test("Menu element contains <ul>")
+ .value(menuList.tagName)
+ .isEqualTo("UL");
+
+ var menuItem = menuList.firstChild;
+ tester.test("First menu item is selected")
+ .value(menuItem.className)
+ .isEqualTo("selected");
+
+ var checkImage = menuItem.children[0];
+ tester.test("First menu item contains checkmark <img>")
+ .value(checkImage.tagName)
+ .isEqualTo("IMG");
+
+ tester.test("First menu item checkmark image is visible")
+ .value(getComputedStyle(checkImage).content)
+ .contains("url('data:image/svg+xml,<svg xmlns=");
+
+ var menuItem = menuList.children[1];
+ tester.test("Second menu item is not selected")
+ .value(menuItem.className)
+ .isNotEqualTo("selected");
+
+ var checkImage = menuItem.children[0];
+ tester.test("Second menu item checkmark is not visible")
+ .value(getComputedStyle(checkImage).content)
+ .isEmptyString();
+
+ tester.end();
+ }
+
+ </script>
+ </head>
+ <body>
+ <p>This tests the track menu.</p>
+ <p>This test only runs in DRT!</p>
+ <video width="500" height="300" controls>
+ <track kind="captions" label="English Captions" src="" srclang="en">
+ </video>
+ </body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (195911 => 195912)
--- trunk/Source/WebCore/ChangeLog 2016-01-30 21:53:47 UTC (rev 195911)
+++ trunk/Source/WebCore/ChangeLog 2016-01-30 22:19:08 UTC (rev 195912)
@@ -1,3 +1,27 @@
+2016-01-30 Eric Carlson <[email protected]>
+
+ More than one audio and/or text track sometimes selected in media controls menu
+ https://bugs.webkit.org/show_bug.cgi?id=153664
+
+ Use an <img> element for the track menu item checkmark instead of a background image and
+ the ::before selector.
+
+ Reviewed by Jer Noble.
+
+ Test: media/controls/track-menu.html
+
+ * Modules/mediacontrols/mediaControlsApple.css:
+ (audio::-webkit-media-controls-closed-captions-container li:hover):
+ (audio::-webkit-media-controls-closed-captions-container li .checkmark-container):
+ (audio::-webkit-media-controls-closed-captions-container li.selected .checkmark-container):
+ (audio::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container):
+ (audio::-webkit-media-controls-closed-captions-container li.selected::before): Deleted.
+ (audio::-webkit-media-controls-closed-captions-container li.selected:hover::before): Deleted.
+ * Modules/mediacontrols/mediaControlsApple.js:
+ (Controller.prototype.buildCaptionMenu):
+ (Controller.prototype.):
+ (Controller.prototype.getCurrentControlsStatus):
+
2016-01-30 Darin Adler <[email protected]>
Replace CaseFoldingHash with ASCIICaseInsensitiveHash
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (195911 => 195912)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2016-01-30 21:53:47 UTC (rev 195911)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css 2016-01-30 22:19:08 UTC (rev 195912)
@@ -458,24 +458,27 @@
background-color: rgba(26, 68, 243, 0.6);
}
-video::-webkit-media-controls-closed-captions-container li.selected::before,
-audio::-webkit-media-controls-closed-captions-container li.selected::before {
- display: block;
- content: "";
+video::-webkit-media-controls-closed-captions-container li .checkmark-container,
+audio::-webkit-media-controls-closed-captions-container li .checkmark-container {
+ display: none;
position: absolute;
top: 0.25em;
+ left: 1em;
width: 1.1em;
height: 1.1em;
- -webkit-margin-start: -20px;
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgb(163, 163, 163)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
- background-repeat: no-repeat;
}
-video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
-audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
- background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.45)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
+video::-webkit-media-controls-closed-captions-container li.selected .checkmark-container,
+audio::-webkit-media-controls-closed-captions-container li.selected .checkmark-container {
+ display: inline-block;
+ content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgb(163, 163, 163)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
}
+video::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container,
+audio::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container {
+ content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.45)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
+}
+
video::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-fullscreen-button {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" stroke="rgba(255,255,255,0.45)" fill="none"><path d="M 7,1.5 L 12.5,1.5 L 12.5,7"/><path d="M 0.5,8 L 0.5,13.5 L 6,13.5"/><path stroke-linecap="round" d="M 12.5,1.5 L 7.5,6.5"/><path stroke-linecap="round" d="M 0.5,13.5 L 5.5,8.5"/></svg>');
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (195911 => 195912)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2016-01-30 21:53:47 UTC (rev 195911)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js 2016-01-30 22:19:08 UTC (rev 195912)
@@ -475,7 +475,7 @@
captionButton.setAttribute('pseudo', '-webkit-media-controls-toggle-closed-captions-button');
captionButton.setAttribute('aria-label', this.UIString('Captions'));
captionButton.setAttribute('aria-haspopup', 'true');
- captionButton.setAttribute('aria-owns', 'audioTrackMenu');
+ captionButton.setAttribute('aria-owns', 'audioAndTextTrackMenu');
this.listenFor(captionButton, 'click', this.handleCaptionButtonClicked);
var fullscreenButton = this.controls.fullscreenButton = document.createElement('button');
@@ -1737,7 +1737,7 @@
this.captionMenu = document.createElement('div');
this.captionMenu.setAttribute('pseudo', '-webkit-media-controls-closed-captions-container');
- this.captionMenu.setAttribute('id', 'audioTrackMenu');
+ this.captionMenu.setAttribute('id', 'audioAndTextTrackMenu');
this.base.appendChild(this.captionMenu);
this.captionMenuItems = [];
@@ -1773,6 +1773,10 @@
menuItem.innerText = this.host.displayNameForTrack(track);
menuItem.track = track;
+ var itemCheckmark = document.createElement("img");
+ itemCheckmark.classList.add("checkmark-container");
+ menuItem.insertBefore(itemCheckmark, menuItem.firstChild);
+
if (track.enabled) {
menuItem.classList.add(this.ClassNames.selected);
menuItem.setAttribute('tabindex', '0');
@@ -1805,6 +1809,10 @@
menuItem.innerText = this.host.displayNameForTrack(track);
menuItem.track = track;
+ var itemCheckmark = document.createElement("img");
+ itemCheckmark.classList.add("checkmark-container");
+ menuItem.insertBefore(itemCheckmark, menuItem.firstChild);
+
if (track === offItem) {
var offMenu = menuItem;
continue;
@@ -1830,8 +1838,8 @@
if (offMenu && displayMode === 'forced-only' && !trackMenuItemSelected) {
offMenu.classList.add(this.ClassNames.selected);
- menuItem.setAttribute('tabindex', '0');
- menuItem.setAttribute('aria-checked', 'true');
+ offMenu.setAttribute('tabindex', '0');
+ offMenu.setAttribute('aria-checked', 'true');
}
}
@@ -2242,6 +2250,10 @@
name: "Picture-in-picture Button",
object: this.controls.pictureInPictureButton
},
+ {
+ name: "Track Menu",
+ object: this.captionMenu
+ },
];
elements.forEach(function (element) {
@@ -2249,7 +2261,7 @@
delete element.object;
element.computedStyle = {};
- if (element.styleValues) {
+ if (obj && element.styleValues) {
var computedStyle = window.getComputedStyle(obj);
element.styleValues.forEach(function (propertyName) {
element.computedStyle[propertyName] = computedStyle[propertyName];
@@ -2257,16 +2269,18 @@
delete element.styleValues;
}
- element.bounds = obj.getBoundingClientRect();
- element.className = obj.className;
- element.ariaLabel = obj.getAttribute('aria-label');
+ element.bounds = obj ? obj.getBoundingClientRect() : null;
+ element.className = obj ? obj.className : null;
+ element.ariaLabel = obj ? obj.getAttribute('aria-label') : null;
if (element.extraProperties) {
element.extraProperties.forEach(function (property) {
- element[property] = obj[property];
+ element[property] = obj ? obj[property] : null;
});
delete element.extraProperties;
}
+
+ element.element = obj;
});
result.elements = elements;
