<!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>[206864] trunk</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/206864">206864</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-10-06 06:30:51 -0700 (Thu, 06 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Icon service and the IconButton class
https://bugs.webkit.org/show_bug.cgi?id=162970
<rdar://problem/28631803>
Patch by Antoine Quint <graouts@apple.com> on 2016-10-06
Reviewed by Dean Jackson.
Source/WebCore:
We introduce the new IconButton class to display buttons that show an icon
in modern media controls. An IconButton uses a CSS mask-image to display the icon
such that we may set the actual button color to any value by setting the element's
background-color property.
Icons are obtained through the `iconService` singleton which knows how to load the
right icon for the current layout traits and resolution. Icons loaded through the
icon service are cached. In a later patch, we will be introducing functionality,
through the MediaControlsHost, to load the icon from the WebCore bundle.
Tests: media/modern-media-controls/icon-button/icon-button-active-state.html
media/modern-media-controls/icon-button/icon-button.html
media/modern-media-controls/icon-service/icon-service.html
* Modules/modern-media-controls/controls/button.css:
(button):
* Modules/modern-media-controls/controls/icon-button.css: Copied from Source/WebCore/Modules/modern-media-controls/controls/button.css.
(button.icon):
(button.icon:active):
* Modules/modern-media-controls/controls/icon-button.js: Added.
(IconButton):
(IconButton.prototype.get iconName):
(IconButton.prototype.set iconName):
(IconButton.prototype.handleEvent):
(IconButton.prototype.layout):
(IconButton.prototype._imageDidLoad):
(IconButton.prototype._updateImage):
* Modules/modern-media-controls/controls/icon-service.js: Copied from Source/WebCore/Modules/modern-media-controls/controls/layout-item.js.
(const.iconService.new.IconService):
(const.iconService.new.IconService.prototype.imageForIconNameAndLayoutTraits):
(const.iconService.new.IconService.prototype.urlForIconNameAndLayoutTraits):
* Modules/modern-media-controls/controls/layout-item.js:
* Modules/modern-media-controls/images/iOS/pause@2x.png: Added.
* Modules/modern-media-controls/images/iOS/pause@3x.png: Added.
* Modules/modern-media-controls/images/iOS/start@2x.png: Added.
* Modules/modern-media-controls/images/iOS/start@3x.png: Added.
* Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png: Added.
* Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png: Added.
* Modules/modern-media-controls/images/macOS/pause@1x.png: Added.
* Modules/modern-media-controls/images/macOS/pause@2x.png: Added.
* Modules/modern-media-controls/images/macOS/start@1x.png: Added.
* Modules/modern-media-controls/images/macOS/start@2x.png: Added.
LayoutTests:
Testing all public properties and methods of the iconService singleton and IconButton class.
* media/modern-media-controls/icon-button/icon-button-active-state-expected.txt: Added.
* media/modern-media-controls/icon-button/icon-button-active-state.html: Added.
* media/modern-media-controls/icon-button/icon-button-expected.txt: Added.
* media/modern-media-controls/icon-button/icon-button.html: Added.
* media/modern-media-controls/icon-service/icon-service-expected.txt: Added.
* media/modern-media-controls/icon-service/icon-service.html: Added.
* media/modern-media-controls/layout-item/layout-item-expected.txt:
* media/modern-media-controls/layout-item/layout-item.html:
* platform/ios-simulator/TestExpectations:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolslayoutitemlayoutitemexpectedtxt">trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolslayoutitemlayoutitemhtml">trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item.html</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsbuttoncss">trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/icon-button/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonactivestateexpectedtxt">trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonactivestatehtml">trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonexpectedtxt">trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonhtml">trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/icon-service/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiconserviceiconserviceexpectedtxt">trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsiconserviceiconservicehtml">trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconbuttoncss">trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconbuttonjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconservicejs">trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js</a></li>
<li>trunk/Source/WebCore/Modules/modern-media-controls/images/</li>
<li>trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/</li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpause2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpause3xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSstart2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSstart3xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png</a></li>
<li>trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/</li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausefullscreen1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausefullscreen2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpause1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpause2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSstart1xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSstart2xpng">trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (206863 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-10-06 13:07:56 UTC (rev 206863)
+++ trunk/LayoutTests/ChangeLog 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -1,3 +1,23 @@
</span><ins>+2016-10-06 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Icon service and the IconButton class
+ https://bugs.webkit.org/show_bug.cgi?id=162970
+ <rdar://problem/28631803>
+
+ Reviewed by Dean Jackson.
+
+ Testing all public properties and methods of the iconService singleton and IconButton class.
+
+ * media/modern-media-controls/icon-button/icon-button-active-state-expected.txt: Added.
+ * media/modern-media-controls/icon-button/icon-button-active-state.html: Added.
+ * media/modern-media-controls/icon-button/icon-button-expected.txt: Added.
+ * media/modern-media-controls/icon-button/icon-button.html: Added.
+ * media/modern-media-controls/icon-service/icon-service-expected.txt: Added.
+ * media/modern-media-controls/icon-service/icon-service.html: Added.
+ * media/modern-media-controls/layout-item/layout-item-expected.txt:
+ * media/modern-media-controls/layout-item/layout-item.html:
+ * platform/ios-simulator/TestExpectations:
+
</ins><span class="cx"> 2016-10-06 Youenn Fablet <youenn@apple.com>
</span><span class="cx">
</span><span class="cx"> Refresh WPT tests up to c875b42
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonactivestateexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state-expected.txt (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state-expected.txt 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Testing an IconButton has a white background-color when pressed.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.getComputedStyle(iconButton.element).backgroundColor is "rgb(255, 255, 255)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonactivestatehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state.html (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-active-state.html 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing an <code>IconButton</code> has a white background-color when pressed.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const iconButton = new IconButton({ layoutTraits: LayoutTraits.macOS });
+iconButton.iconName = Icons.Pause;
+document.body.appendChild(iconButton.element);
+
+function checkBackgroundColor()
+{
+ shouldBeEqualToString("window.getComputedStyle(iconButton.element).backgroundColor", "rgb(255, 255, 255)");
+ finishJSTest();
+}
+
+if ("testRunner" in window) {
+ const bounds = iconButton.element.getBoundingClientRect();
+ const x = bounds.left + 1;
+ const y = bounds.top + 1;
+ if ("createTouch" in document) {
+ testRunner.runUIScript(`
+ (function() {
+ uiController.touchDownAtPoint(${x}, ${y}, 1, function() {
+ uiController.uiScriptComplete("Done");
+ });
+ })();`, checkBackgroundColor);
+ } else {
+ eventSender.mouseMoveTo(x, y);
+ eventSender.mouseDown();
+ checkBackgroundColor();
+ }
+} else
+ debug("This test is designed to run in DRT.");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-expected.txt (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button-expected.txt 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+Testing the IconButton class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS iconButton.element.localName is "button"
+PASS iconButton.element.className is "icon"
+
+There should be no iconName by default
+PASS iconButton.iconName is ""
+
+Setting an iconName with invalid layout traits should throw
+PASS function () { iconButton.iconName = Icons.Pause } threw exception Could not identify icon's platform from layout traits..
+PASS iconButton.iconName is ""
+
+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 start icon
+PASS iconButton.element.style.webkitMaskImage.includes("macOS/start") is true
+PASS iconButton.element.style.width is "70px"
+PASS iconButton.element.style.height is "70px"
+PASS iconButton.element.style.webkitMaskSize is "70px 70px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiconbuttoniconbuttonhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button.html (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-button/icon-button.html 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,67 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>IconButton</code> class.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const layoutDelegate = {};
+
+const iconButton = new IconButton(layoutDelegate);
+
+shouldBeEqualToString("iconButton.element.localName", "button");
+shouldBeEqualToString("iconButton.element.className", "icon");
+
+debug("");
+debug("There should be no iconName by default");
+shouldBeEqualToString("iconButton.iconName", "");
+
+debug("");
+debug("Setting an iconName with invalid layout traits should throw");
+shouldThrow(function() { iconButton.iconName = Icons.Pause });
+shouldBeEqualToString("iconButton.iconName", "");
+
+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 start icon");
+ iconButton.iconName = Icons.Start;
+ } else if (numberOfFrames === 2) {
+ shouldBeTrue('iconButton.element.style.webkitMaskImage.includes("macOS/start")');
+ shouldBeEqualToString("iconButton.element.style.width", "70px");
+ shouldBeEqualToString("iconButton.element.style.height", "70px");
+ shouldBeEqualToString("iconButton.element.style.webkitMaskSize", "70px 70px");
+
+ finishJSTest();
+ }
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiconserviceiconserviceexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service-expected.txt 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,16 @@
</span><ins>+Testing the iconService singleton.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Checking path to images is computed according to traits
+PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).includes("macOS/pause") is true
+PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).includes("iOS/pause") is true
+PASS iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).includes("macOS/pause-fullscreen") is true
+
+Checking requested images are cached
+PASS iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) === iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsiconserviceiconservicehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service.html (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/icon-service/icon-service.html 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,23 @@
</span><ins>+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-service.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>iconService</code> singleton.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+debug("Checking path to images is computed according to traits");
+shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS).includes("macOS/pause")');
+shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.iOS).includes("iOS/pause")');
+shouldBeTrue('iconService.urlForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS | LayoutTraits.Fullscreen).includes("macOS/pause-fullscreen")');
+
+debug("");
+debug("Checking requested images are cached");
+shouldBeTrue('iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS) === iconService.imageForIconNameAndLayoutTraits(Icons.Pause, LayoutTraits.macOS)');
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolslayoutitemlayoutitemexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item-expected.txt (206863 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item-expected.txt 2016-10-06 13:07:56 UTC (rev 206863)
+++ trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item-expected.txt 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -5,11 +5,11 @@
</span><span class="cx">
</span><span class="cx"> Creating a LayoutItem and setting a layout delegate after construction.
</span><span class="cx"> PASS itemWithNoParameter.layoutTraits === LayoutTraits.Unknown is true
</span><del>-PASS !!(itemWithNoParameter.layoutTraits | LayoutTraits.Mac) is true
</del><ins>+PASS !!(itemWithNoParameter.layoutTraits | LayoutTraits.macOS) is true
</ins><span class="cx"> PASS !!(itemWithNoParameter.layoutTraits | LayoutTraits.Fullscreen) is true
</span><span class="cx">
</span><span class="cx"> Creating a LayoutItem with a layout delegate set at construction.
</span><del>-PASS !!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Mac) is true
</del><ins>+PASS !!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.macOS) is true
</ins><span class="cx"> PASS !!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Fullscreen) is true
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolslayoutitemlayoutitemhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item.html (206863 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item.html 2016-10-06 13:07:56 UTC (rev 206863)
+++ trunk/LayoutTests/media/modern-media-controls/layout-item/layout-item.html 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -10,7 +10,7 @@
</span><span class="cx"> {
</span><span class="cx"> get layoutTraits()
</span><span class="cx"> {
</span><del>- return LayoutTraits.Mac | LayoutTraits.Fullscreen;
</del><ins>+ return LayoutTraits.macOS | LayoutTraits.Fullscreen;
</ins><span class="cx"> }
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -19,13 +19,13 @@
</span><span class="cx"> shouldBeTrue("itemWithNoParameter.layoutTraits === LayoutTraits.Unknown");
</span><span class="cx">
</span><span class="cx"> itemWithNoParameter.layoutDelegate = layoutDelegate;
</span><del>-shouldBeTrue("!!(itemWithNoParameter.layoutTraits | LayoutTraits.Mac)");
</del><ins>+shouldBeTrue("!!(itemWithNoParameter.layoutTraits | LayoutTraits.macOS)");
</ins><span class="cx"> shouldBeTrue("!!(itemWithNoParameter.layoutTraits | LayoutTraits.Fullscreen)");
</span><span class="cx">
</span><span class="cx"> debug("");
</span><span class="cx"> debug("Creating a LayoutItem with a layout delegate set at construction.");
</span><span class="cx"> const itemWithLayoutDelegate = new LayoutItem({ layoutDelegate });
</span><del>-shouldBeTrue("!!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Mac)");
</del><ins>+shouldBeTrue("!!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.macOS)");
</ins><span class="cx"> shouldBeTrue("!!(itemWithLayoutDelegate.layoutTraits | LayoutTraits.Fullscreen)");
</span><span class="cx">
</span><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (206863 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-10-06 13:07:56 UTC (rev 206863)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -2670,3 +2670,5 @@
</span><span class="cx"> fast/text/letterpress-different.html [ Pass ]
</span><span class="cx">
</span><span class="cx"> webkit.org/b/162739 fast/images/gif-loop-count.html [ Pass ImageOnlyFailure ]
</span><ins>+
+webkit.org/b/163009 media/modern-media-controls/icon-button/icon-button-active-state.html [ Failure ]
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (206863 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-10-06 13:07:56 UTC (rev 206863)
+++ trunk/Source/WebCore/ChangeLog 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -1,3 +1,54 @@
</span><ins>+2016-10-06 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Icon service and the IconButton class
+ https://bugs.webkit.org/show_bug.cgi?id=162970
+ <rdar://problem/28631803>
+
+ Reviewed by Dean Jackson.
+
+ We introduce the new IconButton class to display buttons that show an icon
+ in modern media controls. An IconButton uses a CSS mask-image to display the icon
+ such that we may set the actual button color to any value by setting the element's
+ background-color property.
+
+ Icons are obtained through the `iconService` singleton which knows how to load the
+ right icon for the current layout traits and resolution. Icons loaded through the
+ icon service are cached. In a later patch, we will be introducing functionality,
+ through the MediaControlsHost, to load the icon from the WebCore bundle.
+
+ Tests: media/modern-media-controls/icon-button/icon-button-active-state.html
+ media/modern-media-controls/icon-button/icon-button.html
+ media/modern-media-controls/icon-service/icon-service.html
+
+ * Modules/modern-media-controls/controls/button.css:
+ (button):
+ * Modules/modern-media-controls/controls/icon-button.css: Copied from Source/WebCore/Modules/modern-media-controls/controls/button.css.
+ (button.icon):
+ (button.icon:active):
+ * Modules/modern-media-controls/controls/icon-button.js: Added.
+ (IconButton):
+ (IconButton.prototype.get iconName):
+ (IconButton.prototype.set iconName):
+ (IconButton.prototype.handleEvent):
+ (IconButton.prototype.layout):
+ (IconButton.prototype._imageDidLoad):
+ (IconButton.prototype._updateImage):
+ * Modules/modern-media-controls/controls/icon-service.js: Copied from Source/WebCore/Modules/modern-media-controls/controls/layout-item.js.
+ (const.iconService.new.IconService):
+ (const.iconService.new.IconService.prototype.imageForIconNameAndLayoutTraits):
+ (const.iconService.new.IconService.prototype.urlForIconNameAndLayoutTraits):
+ * Modules/modern-media-controls/controls/layout-item.js:
+ * Modules/modern-media-controls/images/iOS/pause@2x.png: Added.
+ * Modules/modern-media-controls/images/iOS/pause@3x.png: Added.
+ * Modules/modern-media-controls/images/iOS/start@2x.png: Added.
+ * Modules/modern-media-controls/images/iOS/start@3x.png: Added.
+ * Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png: Added.
+ * Modules/modern-media-controls/images/macOS/pause@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/pause@2x.png: Added.
+ * Modules/modern-media-controls/images/macOS/start@1x.png: Added.
+ * Modules/modern-media-controls/images/macOS/start@2x.png: Added.
+
</ins><span class="cx"> 2016-10-06 Miguel Gomez <magomez@igalia.com>
</span><span class="cx">
</span><span class="cx"> [GTK] Fix build with GSTREAMER_GL enabled and ACCELERATED_2D_CANVAS disabled
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsbuttoncss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css (206863 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css 2016-10-06 13:07:56 UTC (rev 206863)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -25,6 +25,8 @@
</span><span class="cx">
</span><span class="cx"> button {
</span><span class="cx"> position: absolute;
</span><ins>+ top: 0;
+ left: 0;
</ins><span class="cx"> border: 0;
</span><span class="cx"> -webkit-appearance: none;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconbuttoncssfromrev206863trunkSourceWebCoreModulesmodernmediacontrolscontrolsbuttoncss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.css (from rev 206863, trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css) (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.css 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+/*
+ * 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.
+ */
+
+button.icon {
+ -webkit-mask-repeat: no-repeat;
+}
+
+button.icon:active {
+ background-color: white;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconbuttonjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-button.js 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,100 @@
</span><ins>+/*
+ * 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 IconButton extends Button
+{
+
+ constructor(layoutDelegate)
+ {
+ super(layoutDelegate);
+
+ this.element.classList.add("icon");
+
+ this._image = null;
+ this._iconName = "";
+
+ this.size = { width: 0, height: 0 };
+ }
+
+ // Public
+
+ get iconName()
+ {
+ return this._iconName;
+ }
+
+ set iconName(iconName)
+ {
+ 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);
+ }
+
+ // Protected
+
+ handleEvent(event)
+ {
+ if (event.type === "load" && event.target === this._image)
+ this._imageDidLoad();
+ else
+ super.handleEvent(event);
+ }
+
+ layout()
+ {
+ super.layout();
+
+ this.element.style.webkitMaskImage = `url(${this._image.src})`;
+ this.element.style.webkitMaskSize = `${this.width}px ${this.height}px`;
+ }
+
+ // Private
+
+ _imageDidLoad()
+ {
+ this._image.removeEventListener("load", this);
+ this._updateImage();
+ }
+
+ _updateImage()
+ {
+ this.width = this._image.width / window.devicePixelRatio;
+ this.height = this._image.height / window.devicePixelRatio;
+
+ this.needsLayout = true;
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsiconservicejsfromrev206863trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js (from rev 206863, trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js) (0 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -0,0 +1,69 @@
</span><ins>+/*
+ * 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.
+ */
+
+const Icons = {
+ Pause : "pause",
+ Start : "start"
+};
+
+const IconsWithFullScreenVariants = [Icons.Pause];
+
+const iconService = new class IconService {
+
+ constructor()
+ {
+ this.images = {};
+ }
+
+ imageForIconNameAndLayoutTraits(iconName, layoutTraits)
+ {
+ const path = this.urlForIconNameAndLayoutTraits(iconName, layoutTraits);
+
+ let image = this.images[path];
+ if (image)
+ return image;
+
+ image = this.images[path] = new Image;
+ image.src = path;
+ return image;
+ }
+
+ urlForIconNameAndLayoutTraits(iconName, layoutTraits)
+ {
+ let platform;
+ if (layoutTraits & LayoutTraits.macOS)
+ platform = "macOS";
+ else if (layoutTraits & LayoutTraits.iOS)
+ platform = "iOS";
+ else
+ throw "Could not identify icon's platform from layout traits.";
+
+ if (layoutTraits & LayoutTraits.Fullscreen && IconsWithFullScreenVariants.includes(iconName))
+ iconName += "-fullscreen";
+
+ return `${this.directoryPath}/${platform}/${iconName}@${window.devicePixelRatio}x.png`;
+ }
+
+};
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolslayoutitemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js (206863 => 206864)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2016-10-06 13:07:56 UTC (rev 206863)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js 2016-10-06 13:30:51 UTC (rev 206864)
</span><span class="lines">@@ -25,7 +25,7 @@
</span><span class="cx">
</span><span class="cx"> const LayoutTraits = {
</span><span class="cx"> Unknown : 0,
</span><del>- Mac : 1 << 0,
</del><ins>+ macOS : 1 << 0,
</ins><span class="cx"> iOS : 1 << 1,
</span><span class="cx"> Fullscreen : 1 << 2
</span><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpause2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSpause3xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/pause@3x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSstart2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesiOSstart3xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/iOS/start@3x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausefullscreen1xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@1x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpausefullscreen2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause-fullscreen@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpause1xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@1x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSpause2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/pause@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSstart1xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@1x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkSourceWebCoreModulesmodernmediacontrolsimagesmacOSstart2xpng"></a>
<div class="binary"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Index: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png
</span><span class="cx">===================================================================
</span><del>--- trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png 2016-10-06 13:07:56 UTC (rev 206863)
</del><ins>+++ trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png 2016-10-06 13:30:51 UTC (rev 206864)
</ins><span class="cx">Property changes on: trunk/Source/WebCore/Modules/modern-media-controls/images/macOS/start@2x.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+image/png
</ins><span class="cx">\ No newline at end of property
</span></div>
</body>
</html>