<!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>[207373] 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/207373">207373</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-10-15 02:15:41 -0700 (Sat, 15 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] macOS inline controls
https://bugs.webkit.org/show_bug.cgi?id=163444
<rdar://problem/27989473>
Patch by Antoine Quint <graouts@apple.com> on 2016-10-15
Reviewed by Dean Jackson.
Source/WebCore:
Introducing the new MacOSMediaControls and MacOSInlineMediaControls classes. MacOSMediaControls is a MediaControls subclass
that adds specific buttons to the macOS platform and sets the layout traits to be macOS. This class has a new subclass,
MacOSInlineMediaControls, which sets the layout traits to also include inline and implements custom layout to drop
controls as necessary as the width of the controls varies. It also shows the volume slider when the mute button is hovered.
Tests: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html
media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html
media/modern-media-controls/macos-media-controls/macos-media-controls.html
* Modules/modern-media-controls/controls/macos-inline-media-controls.css: Added.
(.media-controls.mac.inline > .controls-bar):
(.media-controls.mac.inline > .controls-bar > *):
(.media-controls.mac.inline button):
(.media-controls.mac.inline button:active):
(.media-controls.mac.inline > .controls-bar button):
(.media-controls.mac.inline > .controls-bar,):
(.media-controls.mac.inline button.play-pause):
(.media-controls.mac.inline button.skip-back):
(.media-controls.mac.inline .scrubber.slider):
(.media-controls.mac.inline button.mute):
(.media-controls.mac.inline button.airplay):
(.media-controls.mac.inline button.pip):
(.media-controls.mac.inline button.tracks):
(.media-controls.mac.inline button.fullscreen):
(.media-controls.mac.inline .time-label):
(.media-controls.mac.inline .volume-slider-container):
(.media-controls.mac.inline .volume-slider-container:before):
(.media-controls.mac.inline .volume.slider):
* Modules/modern-media-controls/controls/macos-inline-media-controls.js: Added.
(MacOSInlineMediaControls.prototype.layout):
(MacOSInlineMediaControls.prototype.handleEvent):
* Modules/modern-media-controls/controls/macos-media-controls.js: Added.
(MacOSMediaControls):
LayoutTests:
Testing the properties of the new MacOSMediaControls and MacOSInlineMediaControls classes.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt: Added.
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html: Added.
* media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt: Added.
* media/modern-media-controls/macos-media-controls/macos-media-controls.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorhtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscontrolsbarstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscontrolsbarstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolslayoutexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolslayouthtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstimecontrolstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstimecontrolstyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumeslidervisibilityexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumeslidervisibilityhtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumestylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumestyleshtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediadroppingcontrolsexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediadroppingcontrolshtml">trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/macos-media-controls/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosmediacontrolsmacosmediacontrolsexpectedtxt">trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsmacosmediacontrolsmacosmediacontrolshtml">trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolscss">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosmediacontrolsjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (207372 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-10-15 08:27:19 UTC (rev 207372)
+++ trunk/LayoutTests/ChangeLog 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -1,3 +1,32 @@
</span><ins>+2016-10-15 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] macOS inline controls
+ https://bugs.webkit.org/show_bug.cgi?id=163444
+ <rdar://problem/27989473>
+
+ Reviewed by Dean Jackson.
+
+ Testing the properties of the new MacOSMediaControls and MacOSInlineMediaControls classes.
+
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt: Added.
+ * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html: Added.
+ * media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt: Added.
+ * media/modern-media-controls/macos-media-controls/macos-media-controls.html: Added.
+
</ins><span class="cx"> 2016-10-14 Antti Koivisto <antti@apple.com>
</span><span class="cx">
</span><span class="cx"> 100% CPU on homedepot.com page
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,65 @@
</span><ins>+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PlayPauseButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "12px"
+
+SkipBackButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "10px"
+
+MuteButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "10px"
+
+AirplayButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "13px"
+
+PiPButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "13px"
+
+TracksButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "15px"
+
+FullscreenButton
+PASS rgba(style.backgroundColor).r is 255
+PASS rgba(style.backgroundColor).g is 255
+PASS rgba(style.backgroundColor).b is 255
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS style.height is "50px"
+PASS style.webkitMaskPositionY is "13px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsbuttonsstyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,85 @@
</span><ins>+
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css">
+
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+const buttonPositions = [
+ [mediaControls.playPauseButton, 12],
+ [mediaControls.skipBackButton, 10],
+ [mediaControls.muteButton, 10],
+ [mediaControls.airplayButton, 13],
+ [mediaControls.pipButton, 13],
+ [mediaControls.tracksButton, 15],
+ [mediaControls.fullscreenButton, 13]
+];
+
+let style;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ for (let [button, y] of buttonPositions) {
+ style = window.getComputedStyle(button.element);
+ debug(button.constructor.name);
+ shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(255, 255, 255, 0.572)");
+ shouldBeEqualToString("style.height", "50px");
+ shouldBeEqualToString("style.webkitMaskPositionY", `${y}px`);
+ debug("");
+ }
+
+ mediaControls.element.remove();
+
+ finishJSTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+Testing the MacOSInlineMediaControls constructor.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.localName is "div"
+PASS mediaControls.element.className is "media-controls mac inline"
+PASS mediaControls.layoutTraits is LayoutTraits.macOS
+
+Controls bar
+PASS mediaControls.controlsBar.children.length is 3
+PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[2] instanceof LayoutNode is true
+
+Left container
+PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
+PASS mediaControls.controlsBar.children[0].padding is 24
+PASS mediaControls.controlsBar.children[0].margin is 24
+
+Right container
+PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
+PASS mediaControls.controlsBar.children[1].element.className is "buttons-container right"
+PASS mediaControls.controlsBar.children[1].padding is 24
+PASS mediaControls.controlsBar.children[1].margin is 24
+
+Volume slider
+PASS mediaControls.controlsBar.children[2].element.className is "volume-slider-container"
+PASS mediaControls.controlsBar.children[2].children is [mediaControls.volumeSlider]
+PASS mediaControls.controlsBar.children[2].visible is false
+PASS mediaControls.volumeSlider.width is 60
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsconstructorhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,73 @@
</span><ins>+<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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> constructor.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls;
+
+shouldBeEqualToString("mediaControls.element.localName", "div");
+shouldBeEqualToString("mediaControls.element.className", "media-controls mac inline");
+shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS");
+
+debug("");
+debug("Controls bar");
+shouldBe("mediaControls.controlsBar.children.length", "3");
+shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
+shouldBeTrue("mediaControls.controlsBar.children[2] instanceof LayoutNode");
+
+debug("");
+debug("Left container");
+shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
+shouldBe("mediaControls.controlsBar.children[0].padding", "24");
+shouldBe("mediaControls.controlsBar.children[0].margin", "24");
+
+debug("");
+debug("Right container");
+shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container right");
+shouldBe("mediaControls.controlsBar.children[1].padding", "24");
+shouldBe("mediaControls.controlsBar.children[1].margin", "24");
+
+debug("");
+debug("Volume slider");
+shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "volume-slider-container");
+shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.volumeSlider]");
+shouldBeFalse("mediaControls.controlsBar.children[2].visible");
+shouldBe("mediaControls.volumeSlider.width", "60");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscontrolsbarstylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,23 @@
</span><ins>+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS style.left is "0px"
+PASS style.bottom is "0px"
+PASS style.width is "680px"
+PASS style.height is "50px"
+PASS bounds.left is 0
+PASS bounds.top is 250
+PASS bounds.width is 680
+PASS bounds.height is 50
+PASS rgba(style.backgroundColor).r is 30
+PASS rgba(style.backgroundColor).g is 30
+PASS rgba(style.backgroundColor).b is 30
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
+PASS style.webkitBackdropFilter is "saturate(1.8) blur(20px)"
+undefined
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolscontrolsbarstyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,92 @@
</span><ins>+
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css">
+
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+
+.media-controls {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+</style>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+let style, bounds;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ style = window.getComputedStyle(mediaControls.controlsBar.element);
+ bounds = mediaControls.controlsBar.element.getBoundingClientRect();
+
+ shouldBeEqualToString("style.left", "0px");
+ shouldBeEqualToString("style.bottom", "0px");
+ shouldBeEqualToString("style.width", "680px");
+ shouldBeEqualToString("style.height", "50px");
+
+ shouldBe("bounds.left", "0");
+ shouldBe("bounds.top", "250");
+ shouldBe("bounds.width", "680");
+ shouldBe("bounds.height", "50");
+
+ shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(30, 30, 30, 0.45)");
+ shouldBeEqualToString("style.webkitBackdropFilter", "saturate(1.8) blur(20px)");
+
+ mediaControls.element.remove();
+
+ debug();
+ finishJSTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolslayoutexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+Testing the MacOSInlineMediaControls layout.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[1] instanceof LayoutNode is true
+PASS mediaControls.controlsBar.children[2] instanceof ButtonsContainer is true
+PASS mediaControls.timeControl.x is 118
+PASS mediaControls.timeControl.width == expectedTimeControlWidth is true
+PASS mediaControls.controlsBar.children[0].children is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[2].children is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
+PASS mediaControls.volumeSlider.parent.x == expectedVolumeSliderContainerX is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolslayouthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,91 @@
</span><ins>+
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css">
+
+<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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> layout.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 50 });
+
+const iconButtons = [
+ mediaControls.playPauseButton,
+ mediaControls.skipBackButton,
+ mediaControls.airplayButton,
+ mediaControls.pipButton,
+ mediaControls.tracksButton,
+ mediaControls.muteButton,
+ mediaControls.fullscreenButton
+];
+
+// There is a 4-pixel difference in metrics between 1x and 2x due to the volume button having a different width.
+const is1x = window.devicePixelRatio == 1;
+const expectedTimeControlWidth = is1x ? 286 : 290;
+const expectedVolumeSliderContainerX = is1x ? 428 : 432;
+
+scheduler.frameDidFire = function()
+{
+ if (iconButtons.some(button => button.width == 0))
+ return;
+
+ shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+ shouldBeTrue("mediaControls.controlsBar.children[1] instanceof LayoutNode");
+ shouldBeTrue("mediaControls.controlsBar.children[2] instanceof ButtonsContainer");
+
+ shouldBe("mediaControls.timeControl.x", "118");
+
+ shouldBeTrue("mediaControls.timeControl.width == expectedTimeControlWidth");
+
+ shouldBe("mediaControls.controlsBar.children[0].children", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+ shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
+
+ shouldBeTrue("mediaControls.volumeSlider.parent.x == expectedVolumeSliderContainerX");
+
+ finishJSTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstimecontrolstylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,13 @@
</span><ins>+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "23px"
+PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top is "14.5px"
+PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top is "14.5px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolstimecontrolstyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css">
+
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "23px");
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top", "14.5px");
+ shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top", "14.5px");
+ debug("");
+
+ mediaControls.element.remove();
+
+ finishJSTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumeslidervisibilityexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,24 @@
</span><ins>+Testing the MacOSInlineMediaControls volume slider visibility.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Default state
+PASS volumeSliderContainer.visible is false
+
+Mouse enters the mute button
+PASS volumeSliderContainer.visible is true
+
+Mouse leaves the mute button
+PASS volumeSliderContainer.visible is false
+
+Mouse enters the mute button, then leaves it but enters the volume slider container
+PASS volumeSliderContainer.visible is true
+
+Mouse leaves the volume slider container
+PASS volumeSliderContainer.visible is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumeslidervisibilityhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+<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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> volume slider visibility.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls;
+const volumeSliderContainer = mediaControls.volumeSlider.parent;
+
+debug("Default state")
+shouldBeFalse("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse enters the mute button");
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseenter"));
+shouldBeTrue("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse leaves the mute button");
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseleave"));
+shouldBeFalse("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse enters the mute button, then leaves it but enters the volume slider container");
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseenter"));
+mediaControls.muteButton.element.dispatchEvent(new MouseEvent("mouseleave", { relatedTarget: volumeSliderContainer.element }));
+shouldBeTrue("volumeSliderContainer.visible");
+
+debug("");
+debug("Mouse leaves the volume slider container");
+volumeSliderContainer.element.dispatchEvent(new MouseEvent("mouseleave"));
+shouldBeFalse("volumeSliderContainer.visible");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumestylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,18 @@
</span><ins>+Testing the MacOSInlineMediaControls computed styles.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS volumeSliderContainerStyle.position is "absolute"
+PASS volumeSliderContainerStyle.top is "0px"
+PASS volumeSliderContainerStyle.width is "31px"
+PASS volumeSliderContainerStyle.height is "81px"
+PASS volumeSliderContainerStyle.transform is "matrix(1, 0, 0, 1, 0, -81)"
+PASS volumeSliderStyle.transform is "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)"
+PASS volumeSliderStyle.left is "-15px"
+PASS volumeSliderStyle.top is "40px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediacontrolsvolumestyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,80 @@
</span><ins>+
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/start-button.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css">
+
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSInlineMediaControls</code> computed styles.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
+mediaControls.volumeSlider.parent.visible = true;
+
+let volumeSliderContainerStyle, volumeSliderStyle;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(mediaControls.element);
+
+ volumeSliderContainerStyle = window.getComputedStyle(mediaControls.volumeSlider.parent.element);
+ shouldBeEqualToString("volumeSliderContainerStyle.position", "absolute");
+ shouldBeEqualToString("volumeSliderContainerStyle.top", "0px");
+ shouldBeEqualToString("volumeSliderContainerStyle.width", "31px");
+ shouldBeEqualToString("volumeSliderContainerStyle.height", "81px");
+ shouldBeEqualToString("volumeSliderContainerStyle.transform", "matrix(1, 0, 0, 1, 0, -81)");
+
+ volumeSliderStyle = window.getComputedStyle(mediaControls.volumeSlider.element);
+ shouldBeEqualToString("volumeSliderStyle.transform", "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)");
+ shouldBeEqualToString("volumeSliderStyle.left", "-15px");
+ shouldBeEqualToString("volumeSliderStyle.top", "40px");
+
+ mediaControls.element.remove();
+
+ debug("");
+ finishJSTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediadroppingcontrolsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+Testing MacOSInlineMediaControls and dropping controls.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+TimeControl is visible
+TimeControl is not visible
+
+AirplayButton is visible
+AirplayButton is not visible
+
+PiPButton is visible
+PiPButton is not visible
+
+TracksButton is visible
+TracksButton is not visible
+
+MuteButton is visible
+MuteButton is not visible
+
+SkipBackButton is visible
+SkipBackButton is not visible
+
+FullscreenButton is visible
+FullscreenButton is not visible
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosinlinemediacontrolsmacosinlinemediadroppingcontrolshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,93 @@
</span><ins>+
+<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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/buttons-container.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing <code>MacOSInlineMediaControls</code> and dropping controls.");
+
+window.jsTestIsAsync = true;
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSInlineMediaControls;
+
+// There is a 4-pixel difference in metrics between 1x and 2x due to the volume button having a different width.
+const is1x = window.devicePixelRatio == 1;
+const expectedWidthsForDrop = [
+ [mediaControls.timeControl, is1x ? 655 : 651],
+ [mediaControls.airplayButton, is1x ? 394 : 390],
+ [mediaControls.pipButton, is1x ? 345 : 341],
+ [mediaControls.tracksButton, is1x ? 294 : 290],
+ [mediaControls.muteButton, is1x ? 245 : 241],
+ [mediaControls.skipBackButton, 187],
+ [mediaControls.fullscreenButton, 139]
+];
+
+function dumpControlVisibility(control)
+{
+ let visibilityString = "visible";
+ if (!control.parent)
+ visibilityString = "not " + visibilityString;
+ debug(`${control.constructor.name} is ${visibilityString}`);
+}
+
+const iconButtons = [
+ mediaControls.playPauseButton,
+ mediaControls.skipBackButton,
+ mediaControls.airplayButton,
+ mediaControls.pipButton,
+ mediaControls.tracksButton,
+ mediaControls.muteButton,
+ mediaControls.fullscreenButton
+];
+
+scheduler.frameDidFire = function()
+{
+ if (iconButtons.some(button => button.width == 0))
+ return;
+
+ for (let [control, width] of expectedWidthsForDrop) {
+ mediaControls.width = width + 1;
+ mediaControls.layout();
+ dumpControlVisibility(control);
+
+ mediaControls.width = width;
+ mediaControls.layout();
+ dumpControlVisibility(control);
+
+ debug("");
+ }
+
+ scheduler.frameDidFire = new Function;
+ finishJSTest();
+};
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosmediacontrolsmacosmediacontrolsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls-expected.txt 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+Testing the MacOSMediaControls constructor.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.element.localName is "div"
+PASS mediaControls.element.className is "media-controls mac"
+PASS mediaControls.layoutTraits is LayoutTraits.macOS
+PASS mediaControls.muteButton instanceof MuteButton is true
+PASS mediaControls.tracksButton instanceof TracksButton is true
+PASS mediaControls.volumeSlider instanceof VolumeSlider is true
+
+PASS mediaControlsWithArguments.width is 600
+PASS mediaControlsWithArguments.height is 300
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsmacosmediacontrolsmacosmediacontrolshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls.html (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/macos-media-controls/macos-media-controls.html 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<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/start-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/icon-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/play-pause-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/skip-back-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/fullscreen-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/mute-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/tracks-button.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-control.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/airplay-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/pip-placard.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/media-controls.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>MacOSMediaControls</code> constructor.");
+
+iconService.directoryPath = "../../../../Source/WebCore/Modules/modern-media-controls/images";
+
+const mediaControls = new MacOSMediaControls;
+
+shouldBeEqualToString("mediaControls.element.localName", "div");
+shouldBeEqualToString("mediaControls.element.className", "media-controls mac");
+shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS");
+shouldBeTrue("mediaControls.muteButton instanceof MuteButton");
+shouldBeTrue("mediaControls.tracksButton instanceof TracksButton");
+shouldBeTrue("mediaControls.volumeSlider instanceof VolumeSlider");
+
+debug("");
+const mediaControlsWithArguments = new MacOSMediaControls({ width: 600, height: 300 });
+shouldBe("mediaControlsWithArguments.width", "600");
+shouldBe("mediaControlsWithArguments.height", "300");
+
+debug("");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (207372 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-10-15 08:27:19 UTC (rev 207372)
+++ trunk/Source/WebCore/ChangeLog 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -1,3 +1,51 @@
</span><ins>+2016-10-15 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] macOS inline controls
+ https://bugs.webkit.org/show_bug.cgi?id=163444
+ <rdar://problem/27989473>
+
+ Reviewed by Dean Jackson.
+
+ Introducing the new MacOSMediaControls and MacOSInlineMediaControls classes. MacOSMediaControls is a MediaControls subclass
+ that adds specific buttons to the macOS platform and sets the layout traits to be macOS. This class has a new subclass,
+ MacOSInlineMediaControls, which sets the layout traits to also include inline and implements custom layout to drop
+ controls as necessary as the width of the controls varies. It also shows the volume slider when the mute button is hovered.
+
+ Tests: media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-slider-visibility.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html
+ media/modern-media-controls/macos-inline-media-controls/macos-inline-media-dropping-controls.html
+ media/modern-media-controls/macos-media-controls/macos-media-controls.html
+
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.css: Added.
+ (.media-controls.mac.inline > .controls-bar):
+ (.media-controls.mac.inline > .controls-bar > *):
+ (.media-controls.mac.inline button):
+ (.media-controls.mac.inline button:active):
+ (.media-controls.mac.inline > .controls-bar button):
+ (.media-controls.mac.inline > .controls-bar,):
+ (.media-controls.mac.inline button.play-pause):
+ (.media-controls.mac.inline button.skip-back):
+ (.media-controls.mac.inline .scrubber.slider):
+ (.media-controls.mac.inline button.mute):
+ (.media-controls.mac.inline button.airplay):
+ (.media-controls.mac.inline button.pip):
+ (.media-controls.mac.inline button.tracks):
+ (.media-controls.mac.inline button.fullscreen):
+ (.media-controls.mac.inline .time-label):
+ (.media-controls.mac.inline .volume-slider-container):
+ (.media-controls.mac.inline .volume-slider-container:before):
+ (.media-controls.mac.inline .volume.slider):
+ * Modules/modern-media-controls/controls/macos-inline-media-controls.js: Added.
+ (MacOSInlineMediaControls.prototype.layout):
+ (MacOSInlineMediaControls.prototype.handleEvent):
+ * Modules/modern-media-controls/controls/macos-media-controls.js: Added.
+ (MacOSMediaControls):
+
</ins><span class="cx"> 2016-10-14 Antti Koivisto <antti@apple.com>
</span><span class="cx">
</span><span class="cx"> 100% CPU on homedepot.com page
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolscss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,127 @@
</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.
+ */
+
+/* Controls bar */
+
+.media-controls.mac.inline > .controls-bar {
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 50px;
+}
+
+.media-controls.mac.inline > .controls-bar > * {
+ position: absolute;
+}
+
+.media-controls.mac.inline button {
+ background-color: rgba(255, 255, 255, 0.572);
+}
+
+.media-controls.mac.inline button:active {
+ background-color: white;
+}
+
+.media-controls.mac.inline > .controls-bar button {
+ height: 100% !important;
+}
+
+/* Blurred backgrounds */
+
+.media-controls.mac.inline > .controls-bar,
+.media-controls.mac.inline .volume-slider-container:before {
+ /* FIXME: we want to use the real System Dark treatment here, see <rdar://problem/19993961> */
+ background-color: rgba(30, 30, 30, 0.45);
+ -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+/* Controls placement */
+
+.media-controls.mac.inline button.play-pause {
+ -webkit-mask-position-y: 12px;
+}
+
+.media-controls.mac.inline button.skip-back {
+ -webkit-mask-position-y: 10px;
+}
+
+.media-controls.mac.inline .scrubber.slider {
+ top: 23px;
+}
+
+.media-controls.mac.inline button.mute {
+ -webkit-mask-position-y: 10px;
+}
+
+.media-controls.mac.inline button.airplay {
+ -webkit-mask-position-y: 13px;
+}
+
+.media-controls.mac.inline button.pip {
+ -webkit-mask-position-y: 13px;
+}
+
+.media-controls.mac.inline button.tracks {
+ -webkit-mask-position-y: 15px;
+}
+
+.media-controls.mac.inline button.fullscreen {
+ -webkit-mask-position-y: 13px;
+}
+
+/* Time labels */
+
+.media-controls.mac.inline .time-label {
+ top: 14.5px;
+}
+
+/* Volume slider */
+
+.media-controls.mac.inline .volume-slider-container {
+ position: absolute;
+
+ top: 0px;
+ width: 31px;
+ height: 81px;
+ transform: translateY(-100%);
+}
+
+.media-controls.mac.inline .volume-slider-container:before {
+ content: "";
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 1px;
+
+ border-radius: 4px 4px 0 0;
+}
+
+.media-controls.mac.inline .volume.slider {
+ transform: rotate(-90deg);
+ left: -15px;
+ top: 40px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosinlinemediacontrolsjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,114 @@
</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 MacOSInlineMediaControls extends MacOSMediaControls
+{
+
+ constructor(options)
+ {
+ super(options);
+
+ this.element.classList.add("inline");
+
+ this._leftContainer = new ButtonsContainer({
+ buttons: [this.playPauseButton, this.skipBackButton],
+ cssClassName: "left",
+ padding: 24,
+ margin: 24
+ });
+
+ this._rightContainer = new ButtonsContainer({
+ buttons: [this.muteButton, this.airplayButton, this.pipButton, this.tracksButton, this.fullscreenButton],
+ cssClassName: "right",
+ padding: 24,
+ margin: 24
+ });
+
+ this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container">`);
+ this._volumeSliderContainer.children = [this.volumeSlider];
+ this._volumeSliderContainer.visible = false;
+ this.volumeSlider.width = 60;
+
+ // Wire up events to display the volume slider.
+ this.muteButton.element.addEventListener("mouseenter", this);
+ this.muteButton.element.addEventListener("mouseleave", this);
+ this._volumeSliderContainer.element.addEventListener("mouseleave", this);
+
+ this.controlsBar.children = [this._leftContainer, this._rightContainer, this._volumeSliderContainer];
+ }
+
+ // Public
+
+ layout()
+ {
+ super.layout();
+
+ if (!this.controlsBar.visible)
+ return;
+
+ // Reset dropped buttons.
+ this._rightContainer.buttons.concat(this._leftContainer.buttons).forEach(button => delete button.dropped);
+
+ this._leftContainer.layout();
+ this._rightContainer.layout();
+
+ this.timeControl.width = this.width - this._leftContainer.width - this._rightContainer.width;
+
+ if (this.timeControl.isSufficientlyWide) {
+ this.controlsBar.insertBefore(this.timeControl, this._rightContainer);
+ this.timeControl.x = this._leftContainer.width;
+ } else {
+ this.timeControl.remove();
+ // Since we don't have enough space to display the scrubber, we may also not have
+ // enough space to display all buttons in the left and right containers, so gradually drop them.
+ for (let button of [this.airplayButton, this.pipButton, this.tracksButton, this.muteButton, this.skipBackButton, this.fullscreenButton]) {
+ // Nothing left to do if the combined container widths is shorter than the available width.
+ if (this._leftContainer.width + this._rightContainer.width < this.width)
+ break;
+
+ // If the button was already not participating in layout, we can skip it.
+ if (!button.visible)
+ continue;
+
+ // This button must now be dropped.
+ button.dropped = true;
+
+ this._leftContainer.layout();
+ this._rightContainer.layout();
+ }
+ }
+
+ this._rightContainer.x = this.width - this._rightContainer.width;
+ this._volumeSliderContainer.x = this._rightContainer.x + this.muteButton.x;
+ }
+
+ // Protected
+
+ handleEvent(event)
+ {
+ this._volumeSliderContainer.visible = event.type === "mouseenter" || event.relatedTarget === this._volumeSliderContainer.element;
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsmacosmediacontrolsjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js (0 => 207373)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.js 2016-10-15 09:15:41 UTC (rev 207373)
</span><span class="lines">@@ -0,0 +1,44 @@
</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 MacOSMediaControls extends MediaControls
+{
+
+ constructor(options = {})
+ {
+ super({
+ width: options.width,
+ height: options.height,
+ layoutTraits: LayoutTraits.macOS
+ });
+
+ this.element.classList.add("mac");
+
+ this.muteButton = new MuteButton(this);
+ this.tracksButton = new TracksButton(this);
+ this.volumeSlider = new VolumeSlider;
+ }
+
+}
</ins></span></pre>
</div>
</div>
</body>
</html>