More than one audio and/or text track sometimes selected in media controls menu
authoreric.carlson@apple.com <eric.carlson@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jan 2016 22:19:08 +0000 (22:19 +0000)
committereric.carlson@apple.com <eric.carlson@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jan 2016 22:19:08 +0000 (22:19 +0000)
https://bugs.webkit.org/show_bug.cgi?id=153664

Source/WebCore:

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):

LayoutTests:

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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@195912 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/media/controls/controls-test-helpers.js
LayoutTests/media/controls/track-menu-expected.txt [new file with mode: 0644]
LayoutTests/media/controls/track-menu.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

index 6c1cd3a..352b8a5 100644 (file)
@@ -1,3 +1,23 @@
+2016-01-30  Eric Carlson  <eric.carlson@apple.com>
+
+        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  <cdumez@apple.com>
 
         [JS Bindings] prototype.constructor should be writable
index bb1a174..5942d91 100644 (file)
@@ -35,6 +35,11 @@ ControlsTest = class ControlsTest {
         return { idiom: "apple", status: "fail" };
     }
 
+    get video()
+    {
+        return this.media;
+    }
+
     stateForControlsElement(elementName, flushCachedState)
     {
         if (flushCachedState)
@@ -53,7 +58,7 @@ ControlsTest = class ControlsTest {
     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 @@ ControlsTest = class ControlsTest {
 
     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 @@ ControlsTest = class ControlsTest {
         this.media.addEventListener(this.eventTrigger, this, false);
         this.media.src = findMediaFile("video", 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 @@ ControlsTest = class ControlsTest {
             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)
diff --git a/LayoutTests/media/controls/track-menu-expected.txt b/LayoutTests/media/controls/track-menu-expected.txt
new file mode 100644 (file)
index 0000000..538d3ce
--- /dev/null
@@ -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.
+
diff --git a/LayoutTests/media/controls/track-menu.html b/LayoutTests/media/controls/track-menu.html
new file mode 100644 (file)
index 0000000..7c85e6c
--- /dev/null
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="../video-test.js"></script>
+        <script src="../media-file.js"></script>
+        <script src="../trackmenu-test.js"></script>
+        <script src="../media-controls.js"></script>
+        <script src="controls-test-helpers.js"></script>
+        <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="../track/captions-webvtt/captions-fast.vtt" srclang="en">
+        </video>
+    </body>
+</html>
index 8ecfc22..8ac94c7 100644 (file)
@@ -1,3 +1,27 @@
+2016-01-30  Eric Carlson  <eric.carlson@apple.com>
+
+        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  <darin@apple.com>
 
         Replace CaseFoldingHash with ASCIICaseInsensitiveHash
index b68d96a..d8eb786 100644 (file)
@@ -458,22 +458,25 @@ audio::-webkit-media-controls-closed-captions-container li:hover {
     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,
index 6f5710f..95122a9 100644 (file)
@@ -475,7 +475,7 @@ Controller.prototype = {
         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 @@ Controller.prototype = {
 
         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 @@ Controller.prototype = {
                 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 @@ Controller.prototype = {
                 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 @@ Controller.prototype = {
 
             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 @@ Controller.prototype = {
                 name: "Picture-in-picture Button",
                 object: this.controls.pictureInPictureButton
             },
+            {
+                name: "Track Menu",
+                object: this.captionMenu
+            },
         ];
 
         elements.forEach(function (element) {
@@ -2249,7 +2261,7 @@ Controller.prototype = {
             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 @@ Controller.prototype = {
                 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;