<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[196095] branches/safari-601-branch</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/196095">196095</a></dd>
<dt>Author</dt> <dd>matthew_hanson@apple.com</dd>
<dt>Date</dt> <dd>2016-02-03 16:26:57 -0800 (Wed, 03 Feb 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Merge <a href="http://trac.webkit.org/projects/webkit/changeset/195912">r195912</a>. rdar://problem/24417428</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#branchessafari601branchLayoutTestsChangeLog">branches/safari-601-branch/LayoutTests/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebCoreChangeLog">branches/safari-601-branch/Source/WebCore/ChangeLog</a></li>
<li><a href="#branchessafari601branchSourceWebCoreModulesmediacontrolsmediaControlsApplecss">branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css</a></li>
<li><a href="#branchessafari601branchSourceWebCoreModulesmediacontrolsmediaControlsApplejs">branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>branches/safari-601-branch/LayoutTests/media/controls/</li>
<li><a href="#branchessafari601branchLayoutTestsmediacontrolscontrolstesthelpersjs">branches/safari-601-branch/LayoutTests/media/controls/controls-test-helpers.js</a></li>
<li><a href="#branchessafari601branchLayoutTestsmediacontrolstrackmenuexpectedtxt">branches/safari-601-branch/LayoutTests/media/controls/track-menu-expected.txt</a></li>
<li><a href="#branchessafari601branchLayoutTestsmediacontrolstrackmenuhtml">branches/safari-601-branch/LayoutTests/media/controls/track-menu.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="branchessafari601branchLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/LayoutTests/ChangeLog (196094 => 196095)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/ChangeLog        2016-02-04 00:26:51 UTC (rev 196094)
+++ branches/safari-601-branch/LayoutTests/ChangeLog        2016-02-04 00:26:57 UTC (rev 196095)
</span><span class="lines">@@ -1,5 +1,29 @@
</span><span class="cx"> 2016-02-03 Matthew Hanson <matthew_hanson@apple.com>
</span><span class="cx">
</span><ins>+ Merge r195912. rdar://problem/24417428
+
+ 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-02-03 Matthew Hanson <matthew_hanson@apple.com>
+
</ins><span class="cx"> Merge r192570. rdar://problem/24417428
</span><span class="cx">
</span><span class="cx"> 2015-11-18 Aaron Chu <arona.chu@gmail.com>
</span></span></pre></div>
<a id="branchessafari601branchLayoutTestsmediacontrolscontrolstesthelpersjs"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/LayoutTests/media/controls/controls-test-helpers.js (0 => 196095)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/media/controls/controls-test-helpers.js         (rev 0)
+++ branches/safari-601-branch/LayoutTests/media/controls/controls-test-helpers.js        2016-02-04 00:26:57 UTC (rev 196095)
</span><span class="lines">@@ -0,0 +1,231 @@
</span><ins>+ControlsTest = class ControlsTest {
+ constructor(mediaURL, eventTrigger)
+ {
+ if (window.testRunner) {
+ testRunner.dumpAsText();
+ testRunner.waitUntilDone();
+ }
+
+ this.callback = null;
+ this.mediaURL = mediaURL || "../content/test";
+ this.eventTrigger = eventTrigger || "canplaythrough";
+ this.currentMessage = "";
+ this.currentValue = null;
+ this.cachedCurrentState = null;
+ }
+
+ whenReady(callback)
+ {
+ if (typeof callback == "function")
+ this.callback = callback;
+ return this;
+ }
+
+ get currentState()
+ {
+ if (!this.media)
+ return null;
+
+ if (window.internals) {
+ this.cachedCurrentState = JSON.parse(internals.getCurrentMediaControlsStatusForElement(this.media));
+ return this.cachedCurrentState;
+ }
+
+ // This is only for fallback testing. Even then it is pretty useless.
+ return { idiom: "apple", status: "fail" };
+ }
+
+ get video()
+ {
+ return this.media;
+ }
+
+ stateForControlsElement(elementName, flushCachedState)
+ {
+ if (flushCachedState)
+ this.cachedCurrentState = null;
+
+ var state = this.cachedCurrentState || this.currentState;
+ if (state.elements && state.elements.length) {
+ for (var i = 0; i < state.elements.length; i++) {
+ if (state.elements[i].name == elementName)
+ return state.elements[i];
+ }
+ }
+ return null;
+ }
+
+ handleEvent(event)
+ {
+ this.logMessage(`EVENT: ${event.type}`);
+ if (event.type == this.eventTrigger && this.callback && window.testRunner)
+ this.callback();
+ }
+
+ logSuccess(msg)
+ {
+ this.logMessage(`PASS: ${msg}`);
+ }
+
+ logFailure(msg)
+ {
+ this.logMessage(`FAIL: ${msg}`);
+ }
+
+ logMessage(msg)
+ {
+ this.console.appendChild(document.createTextNode(msg));
+ this.logBlankLine();
+ }
+
+ logBlankLine()
+ {
+ this.console.appendChild(document.createElement("br"));
+ }
+
+ startNewSection(msg)
+ {
+ this.logBlankLine();
+ this.logMessage(msg);
+ this.logBlankLine();
+ }
+
+ setup()
+ {
+ this.console = document.createElement("div");
+ this.console.className = "console";
+ document.body.appendChild(this.console);
+
+ this.media = document.querySelector("video");
+
+ if (!this.media) {
+ this.logFailure("Unable to find media element");
+ this.end();
+ return false;
+ }
+
+ 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 () {
+ if (!this.setup())
+ return;
+
+ if (msg)
+ this.startNewSection(msg);
+ }.bind(this), false);
+ return this;
+ }
+
+ end()
+ {
+ this.logMessage("");
+ this.logMessage("Testing finished.");
+ if (window.testRunner)
+ testRunner.notifyDone();
+ return this;
+ }
+
+ test(message)
+ {
+ this.currentMessage = message;
+ return this;
+ }
+
+ value(newValue)
+ {
+ this.currentValue = newValue;
+ return this;
+ }
+
+ isEqualTo(value)
+ {
+ if (this.currentValue == value)
+ this.logSuccess(this.currentMessage);
+ else
+ 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)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Expected to contain "${value}". Actual: "${this.currentValue}"`);
+ }
+
+ doesNotContain(value)
+ {
+ if (this.currentValue.indexOf(value) < 0)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Expected to not contain "${value}". Actual: "${this.currentValue}"`);
+ }
+
+ isEmptyString()
+ {
+ if (!this.currentValue && typeof this.currentValue == "string")
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Expected an empty string. Actual: "${this.currentValue}"`);
+ }
+
+ isTrue()
+ {
+ if (this.currentValue)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Expected a true value. Actual: "${this.currentValue}"`);
+ }
+
+ isFalse()
+ {
+ if (!this.currentValue)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Expected a false value. Actual: "${this.currentValue}"`);
+ }
+
+ isNotZero()
+ {
+ if (this.currentValue)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Expected a non-zero value`);
+ }
+
+ isLessThan(value)
+ {
+ if (this.currentValue < value)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Actual: "${this.currentValue}" is not less than Expected: "${value}"`);
+ }
+
+ isGreaterThan(value)
+ {
+ if (this.currentValue > value)
+ this.logSuccess(this.currentMessage);
+ else
+ this.logFailure(`${this.currentMessage} Actual: "${this.currentValue}" is not greater than Expected: "${value}"`);
+ }
+
+}
</ins></span></pre></div>
<a id="branchessafari601branchLayoutTestsmediacontrolstrackmenuexpectedtxt"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/LayoutTests/media/controls/track-menu-expected.txt (0 => 196095)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/media/controls/track-menu-expected.txt         (rev 0)
+++ branches/safari-601-branch/LayoutTests/media/controls/track-menu-expected.txt        2016-02-04 00:26:57 UTC (rev 196095)
</span><span class="lines">@@ -0,0 +1,28 @@
</span><ins>+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.
+
</ins></span></pre></div>
<a id="branchessafari601branchLayoutTestsmediacontrolstrackmenuhtml"></a>
<div class="addfile"><h4>Added: branches/safari-601-branch/LayoutTests/media/controls/track-menu.html (0 => 196095)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/LayoutTests/media/controls/track-menu.html         (rev 0)
+++ branches/safari-601-branch/LayoutTests/media/controls/track-menu.html        2016-02-04 00:26:57 UTC (rev 196095)
</span><span class="lines">@@ -0,0 +1,104 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="branchessafari601branchSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebCore/ChangeLog (196094 => 196095)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebCore/ChangeLog        2016-02-04 00:26:51 UTC (rev 196094)
+++ branches/safari-601-branch/Source/WebCore/ChangeLog        2016-02-04 00:26:57 UTC (rev 196095)
</span><span class="lines">@@ -1,5 +1,33 @@
</span><span class="cx"> 2016-02-03 Matthew Hanson <matthew_hanson@apple.com>
</span><span class="cx">
</span><ins>+ Merge r195912. rdar://problem/24417428
+
+ 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-02-03 Matthew Hanson <matthew_hanson@apple.com>
+
</ins><span class="cx"> Merge r192570. rdar://problem/24417428
</span><span class="cx">
</span><span class="cx"> 2015-11-18 Aaron Chu <arona.chu@gmail.com>
</span></span></pre></div>
<a id="branchessafari601branchSourceWebCoreModulesmediacontrolsmediaControlsApplecss"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css (196094 => 196095)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css        2016-02-04 00:26:51 UTC (rev 196094)
+++ branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css        2016-02-04 00:26:57 UTC (rev 196095)
</span><span class="lines">@@ -450,24 +450,27 @@
</span><span class="cx"> background-color: rgba(26, 68, 243, 0.6);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-video::-webkit-media-controls-closed-captions-container li.selected::before,
-audio::-webkit-media-controls-closed-captions-container li.selected::before {
- display: block;
- content: "";
</del><ins>+video::-webkit-media-controls-closed-captions-container li .checkmark-container,
+audio::-webkit-media-controls-closed-captions-container li .checkmark-container {
+ display: none;
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 0.25em;
</span><ins>+ left: 1em;
</ins><span class="cx"> width: 1.1em;
</span><span class="cx"> height: 1.1em;
</span><del>- -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;
</del><span class="cx"> }
</span><span class="cx">
</span><del>-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>');
</del><ins>+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>');
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+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>');
+}
+
</ins><span class="cx"> video::-webkit-media-controls-fullscreen-button,
</span><span class="cx"> audio::-webkit-media-controls-fullscreen-button {
</span><span class="cx"> 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>');
</span></span></pre></div>
<a id="branchessafari601branchSourceWebCoreModulesmediacontrolsmediaControlsApplejs"></a>
<div class="modfile"><h4>Modified: branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js (196094 => 196095)</h4>
<pre class="diff"><span>
<span class="info">--- branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js        2016-02-04 00:26:51 UTC (rev 196094)
+++ branches/safari-601-branch/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js        2016-02-04 00:26:57 UTC (rev 196095)
</span><span class="lines">@@ -463,7 +463,7 @@
</span><span class="cx"> captionButton.setAttribute('pseudo', '-webkit-media-controls-toggle-closed-captions-button');
</span><span class="cx"> captionButton.setAttribute('aria-label', this.UIString('Captions'));
</span><span class="cx"> captionButton.setAttribute('aria-haspopup', 'true');
</span><del>- captionButton.setAttribute('aria-owns', 'audioTrackMenu');
</del><ins>+ captionButton.setAttribute('aria-owns', 'audioAndTextTrackMenu');
</ins><span class="cx"> this.listenFor(captionButton, 'click', this.handleCaptionButtonClicked);
</span><span class="cx">
</span><span class="cx"> var fullscreenButton = this.controls.fullscreenButton = document.createElement('button');
</span><span class="lines">@@ -1638,7 +1638,7 @@
</span><span class="cx">
</span><span class="cx"> this.captionMenu = document.createElement('div');
</span><span class="cx"> this.captionMenu.setAttribute('pseudo', '-webkit-media-controls-closed-captions-container');
</span><del>- this.captionMenu.setAttribute('id', 'audioTrackMenu');
</del><ins>+ this.captionMenu.setAttribute('id', 'audioAndTextTrackMenu');
</ins><span class="cx"> this.base.appendChild(this.captionMenu);
</span><span class="cx"> this.captionMenuItems = [];
</span><span class="cx">
</span><span class="lines">@@ -1674,6 +1674,10 @@
</span><span class="cx"> menuItem.innerText = this.host.displayNameForTrack(track);
</span><span class="cx"> menuItem.track = track;
</span><span class="cx">
</span><ins>+ var itemCheckmark = document.createElement("img");
+ itemCheckmark.classList.add("checkmark-container");
+ menuItem.insertBefore(itemCheckmark, menuItem.firstChild);
+
</ins><span class="cx"> if (track.enabled) {
</span><span class="cx"> menuItem.classList.add(this.ClassNames.selected);
</span><span class="cx"> menuItem.setAttribute('tabindex', '0');
</span><span class="lines">@@ -1706,6 +1710,10 @@
</span><span class="cx"> menuItem.innerText = this.host.displayNameForTrack(track);
</span><span class="cx"> menuItem.track = track;
</span><span class="cx">
</span><ins>+ var itemCheckmark = document.createElement("img");
+ itemCheckmark.classList.add("checkmark-container");
+ menuItem.insertBefore(itemCheckmark, menuItem.firstChild);
+
</ins><span class="cx"> if (track === offItem) {
</span><span class="cx"> var offMenu = menuItem;
</span><span class="cx"> continue;
</span><span class="lines">@@ -1731,8 +1739,8 @@
</span><span class="cx">
</span><span class="cx"> if (offMenu && displayMode === 'forced-only' && !trackMenuItemSelected) {
</span><span class="cx"> offMenu.classList.add(this.ClassNames.selected);
</span><del>- menuItem.setAttribute('tabindex', '0');
- menuItem.setAttribute('aria-checked', 'true');
</del><ins>+ offMenu.setAttribute('tabindex', '0');
+ offMenu.setAttribute('aria-checked', 'true');
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>