<!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>[207245] 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/207245">207245</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-10-12 14:50:03 -0700 (Wed, 12 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>[Modern Media Controls] Sliders: scrubber and volume
https://bugs.webkit.org/show_bug.cgi?id=163328
<rdar://problem/28733838>
Patch by Antoine Quint <graouts@apple.com> on 2016-10-12
Reviewed by Dean Jackson.
Source/WebCore:
We add a new Slider class that provides a custom slider backed by an
invisible <input type="range"> element and a fill underlay to provide
a custom color between the left edge of the slider and the slider thumb.
As the slider's value changes, a UI delegate receives messages to track
such changes.
Tests: media/modern-media-controls/scrubber/scrubber.html
media/modern-media-controls/slider/slider-constructor.html
media/modern-media-controls/slider/slider-fill.html
media/modern-media-controls/slider/slider-styles.html
media/modern-media-controls/volume-slider/volume-slider-value.html
media/modern-media-controls/volume-slider/volume-slider.html
* Modules/modern-media-controls/controls/scrubber.css: Added.
(.scrubber.slider > input::-webkit-slider-thumb):
* Modules/modern-media-controls/controls/scrubber.js: Added.
(Scrubber):
* Modules/modern-media-controls/controls/slider.css: Added.
(.slider):
(.slider > input,):
(.slider > .fill):
(.slider > input):
(.slider > input::-webkit-slider-thumb):
* Modules/modern-media-controls/controls/slider.js: Added.
(Slider.prototype.get value):
(Slider.prototype.set value):
(Slider.prototype.get width):
(Slider.prototype.set width):
(Slider.prototype.handleEvent):
(Slider.prototype.commitProperty):
(Slider.prototype._handleInputEvent):
(Slider.prototype._handleChangeEvent):
(Slider.prototype._updateFill):
* Modules/modern-media-controls/controls/volume-slider.css: Added.
(.volume.slider > input::-webkit-slider-thumb):
* Modules/modern-media-controls/controls/volume-slider.js: Added.
(VolumeSlider):
LayoutTests:
Testing the properties of the new Slider class and its subclasses.
* media/modern-media-controls/resources/media-controls-utils.js: Added.
(rgba):
(shouldBeEqualToRGBAColor):
* media/modern-media-controls/scrubber/scrubber-expected.txt: Added.
* media/modern-media-controls/scrubber/scrubber.html: Added.
* media/modern-media-controls/slider/slider-constructor-expected.txt: Added.
* media/modern-media-controls/slider/slider-constructor.html: Added.
* media/modern-media-controls/slider/slider-fill-expected.txt: Added.
* media/modern-media-controls/slider/slider-fill.html: Added.
* media/modern-media-controls/slider/slider-styles-expected.txt: Added.
* media/modern-media-controls/slider/slider-styles.html: Added.
* media/modern-media-controls/volume-slider/volume-slider-expected.txt: Added.
* media/modern-media-controls/volume-slider/volume-slider-value-expected.txt: Added.
* media/modern-media-controls/volume-slider/volume-slider-value.html: Added.
* media/modern-media-controls/volume-slider/volume-slider.html: Added.
* platform/ios-simulator/TestExpectations:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</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/resources/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsresourcesmediacontrolsutilsjs">trunk/LayoutTests/media/modern-media-controls/resources/media-controls-utils.js</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/scrubber/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsscrubberscrubberexpectedtxt">trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsscrubberscrubberhtml">trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/slider/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsslidersliderconstructorexpectedtxt">trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsslidersliderconstructorhtml">trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsslidersliderfillexpectedtxt">trunk/LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsslidersliderfillhtml">trunk/LayoutTests/media/modern-media-controls/slider/slider-fill.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsslidersliderstylesexpectedtxt">trunk/LayoutTests/media/modern-media-controls/slider/slider-styles-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsslidersliderstyleshtml">trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html</a></li>
<li>trunk/LayoutTests/media/modern-media-controls/volume-slider/</li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumesliderexpectedtxt">trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumeslidervalueexpectedtxt">trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value-expected.txt</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumeslidervaluehtml">trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value.html</a></li>
<li><a href="#trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumesliderhtml">trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider.html</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsscrubbercss">trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsscrubberjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsslidercss">trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolssliderjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsvolumeslidercss">trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css</a></li>
<li><a href="#trunkSourceWebCoreModulesmodernmediacontrolscontrolsvolumesliderjs">trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (207244 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-10-12 21:49:10 UTC (rev 207244)
+++ trunk/LayoutTests/ChangeLog 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -1,3 +1,30 @@
</span><ins>+2016-10-12 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Sliders: scrubber and volume
+ https://bugs.webkit.org/show_bug.cgi?id=163328
+ <rdar://problem/28733838>
+
+ Reviewed by Dean Jackson.
+
+ Testing the properties of the new Slider class and its subclasses.
+
+ * media/modern-media-controls/resources/media-controls-utils.js: Added.
+ (rgba):
+ (shouldBeEqualToRGBAColor):
+ * media/modern-media-controls/scrubber/scrubber-expected.txt: Added.
+ * media/modern-media-controls/scrubber/scrubber.html: Added.
+ * media/modern-media-controls/slider/slider-constructor-expected.txt: Added.
+ * media/modern-media-controls/slider/slider-constructor.html: Added.
+ * media/modern-media-controls/slider/slider-fill-expected.txt: Added.
+ * media/modern-media-controls/slider/slider-fill.html: Added.
+ * media/modern-media-controls/slider/slider-styles-expected.txt: Added.
+ * media/modern-media-controls/slider/slider-styles.html: Added.
+ * media/modern-media-controls/volume-slider/volume-slider-expected.txt: Added.
+ * media/modern-media-controls/volume-slider/volume-slider-value-expected.txt: Added.
+ * media/modern-media-controls/volume-slider/volume-slider-value.html: Added.
+ * media/modern-media-controls/volume-slider/volume-slider.html: Added.
+ * platform/ios-simulator/TestExpectations:
+
</ins><span class="cx"> 2016-10-12 Wenson Hsieh <wenson_hsieh@apple.com>
</span><span class="cx">
</span><span class="cx"> Add experimental support for the "formatForeColor" inputType
</span></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsresourcesmediacontrolsutilsjs"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/resources/media-controls-utils.js (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/resources/media-controls-utils.js (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/resources/media-controls-utils.js 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,49 @@
</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.
+ */
+
+function rgba(colorString)
+{
+ let [r, g, b, a] = [0, 0, 0, 0];
+ const match = colorString.match(/^(?:rgba\(([^)]+)\))$/i);
+ if (match && match[1]) {
+ const rgba = match[1].split(/\s*,\s*/).map(parseFloat);
+ if (rgba.length == 4) {
+ [r, g, b] = rgba;
+ a = Math.max(0, Math.min(rgba[3], 1));
+ }
+ }
+ return { r, g, b, a };
+}
+
+function shouldBeEqualToRGBAColor(expr, expectedColor)
+{
+ const expectedRGBA = rgba(expectedColor);
+ shouldBe(`rgba(${expr}).r`, `${expectedRGBA.r}`);
+ shouldBe(`rgba(${expr}).g`, `${expectedRGBA.g}`);
+ shouldBe(`rgba(${expr}).b`, `${expectedRGBA.b}`);
+ shouldBeCloseTo(`rgba(${expr}).a`, expectedRGBA.a, 0.001);
+}
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsscrubberscrubberexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber-expected.txt (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber-expected.txt 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Testing the Scrubber class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS scrubber.element.classList.contains("scrubber") is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsscrubberscrubberhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber.html (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber.html 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scrubber.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>Scrubber</code> class.");
+
+const scrubber = new Scrubber;
+
+shouldBeTrue('scrubber.element.classList.contains("scrubber")');
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsslidersliderconstructorexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor-expected.txt (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor-expected.txt 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,20 @@
</span><ins>+Testing the Slider constructor.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS slider.element.localName is "div"
+PASS slider.element.className.trim() is "slider"
+PASS slider.children.length is 2
+PASS slider.children[0].element.localName is "div"
+PASS slider.children[0].element.className is "fill"
+PASS slider.children[1].element.localName is "input"
+PASS slider.children[1].element.type is "range"
+PASS slider.children[1].element.min is "0"
+PASS slider.children[1].element.max is "1"
+PASS slider.children[1].element.step is "0.001"
+PASS sliderWithCSSClassName.element.className is "slider foo"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsslidersliderconstructorhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,29 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>Slider</code> constructor.");
+
+const slider = new Slider;
+
+shouldBeEqualToString("slider.element.localName", "div");
+shouldBeEqualToString("slider.element.className.trim()", "slider");
+shouldBe("slider.children.length", "2");
+shouldBeEqualToString("slider.children[0].element.localName", "div");
+shouldBeEqualToString("slider.children[0].element.className", "fill");
+shouldBeEqualToString("slider.children[1].element.localName", "input");
+shouldBeEqualToString("slider.children[1].element.type", "range");
+shouldBeEqualToString("slider.children[1].element.min", "0");
+shouldBeEqualToString("slider.children[1].element.max", "1");
+shouldBeEqualToString("slider.children[1].element.step", "0.001");
+
+const sliderWithCSSClassName = new Slider("foo");
+shouldBeEqualToString("sliderWithCSSClassName.element.className", "slider foo");
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsslidersliderfillexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Testing the Slider fill property.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS slider.children[0].element.style.width is "100px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsslidersliderfillhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-fill.html (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/slider/slider-fill.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-fill.html 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,26 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css" type="text/css" media="screen">
+<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/slider.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>Slider</code> fill property.");
+
+window.jsTestIsAsync = true;
+
+const slider = new Slider;
+slider.width = 200;
+slider.value = 0.5;
+
+scheduler.frameDidFire = function()
+{
+ shouldBeEqualToString("slider.children[0].element.style.width", "100px");
+ finishJSTest();
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsslidersliderstylesexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-styles-expected.txt (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/slider/slider-styles-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-styles-expected.txt 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+Testing the Slider computed style.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS containerStyle.position is "absolute"
+PASS containerStyle.height is "3px"
+PASS rgba(containerStyle.backgroundColor).r is 255
+PASS rgba(containerStyle.backgroundColor).g is 255
+PASS rgba(containerStyle.backgroundColor).b is 255
+PASS rgba(containerStyle.backgroundColor).a is within 0.001 of 0.185
+PASS containerStyle.borderRadius is "1.5px"
+PASS fillStyle.position is "absolute"
+PASS fillStyle.top is "0px"
+PASS fillStyle.left is "0px"
+PASS fillStyle.height is "3px"
+PASS fillStyle.borderRadius is "1.5px 0px 0px 1.5px"
+PASS rgba(fillStyle.backgroundColor).r is 255
+PASS rgba(fillStyle.backgroundColor).g is 255
+PASS rgba(fillStyle.backgroundColor).b is 255
+PASS rgba(fillStyle.backgroundColor).a is within 0.001 of 0.255
+PASS fillStyle.pointerEvents is "none"
+PASS inputStyle.position is "absolute"
+PASS inputStyle.top is "0px"
+PASS inputStyle.left is "0px"
+PASS inputStyle.height is "3px"
+PASS inputStyle.webkitAppearance is "none"
+PASS inputStyle.backgroundColor is "rgba(0, 0, 0, 0)"
+PASS inputStyle.width is "200px"
+PASS inputStyle.borderRadius is "1.5px"
+PASS inputStyle.margin is "0px"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsslidersliderstyleshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,53 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css" type="text/css" media="screen">
+<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/slider.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>Slider</code> computed style.");
+
+window.jsTestIsAsync = true;
+
+const slider = new Slider;
+slider.width = 200;
+
+let containerStyle, fillStyle, inputStyle;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(slider.element);
+
+ containerStyle = window.getComputedStyle(slider.element);
+ shouldBeEqualToString("containerStyle.position", "absolute");
+ shouldBeEqualToString("containerStyle.height", "3px");
+ shouldBeEqualToRGBAColor("containerStyle.backgroundColor", "rgba(255, 255, 255, 0.185)");
+ shouldBeEqualToString("containerStyle.borderRadius", "1.5px");
+
+ fillStyle = window.getComputedStyle(slider.children[0].element);
+ shouldBeEqualToString("fillStyle.position", "absolute");
+ shouldBeEqualToString("fillStyle.top", "0px");
+ shouldBeEqualToString("fillStyle.left", "0px");
+ shouldBeEqualToString("fillStyle.height", "3px");
+ shouldBeEqualToString("fillStyle.borderRadius", "1.5px 0px 0px 1.5px");
+ shouldBeEqualToRGBAColor("fillStyle.backgroundColor", "rgba(255, 255, 255, 0.255)");
+ shouldBeEqualToString("fillStyle.pointerEvents", "none");
+
+ inputStyle = window.getComputedStyle(slider.children[1].element);
+ shouldBeEqualToString("inputStyle.position", "absolute");
+ shouldBeEqualToString("inputStyle.top", "0px");
+ shouldBeEqualToString("inputStyle.left", "0px");
+ shouldBeEqualToString("inputStyle.height", "3px");
+ shouldBeEqualToString("inputStyle.webkitAppearance", "none");
+ shouldBeEqualToString("inputStyle.backgroundColor", "rgba(0, 0, 0, 0)");
+ shouldBeEqualToString("inputStyle.width", "200px");
+ shouldBeEqualToString("inputStyle.borderRadius", "1.5px");
+ shouldBeEqualToString("inputStyle.margin", "0px");
+
+ finishJSTest();
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumesliderexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-expected.txt (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-expected.txt 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Testing the VolumeSlider class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS volumeSlider.element.classList.contains("volume") is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumeslidervalueexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value-expected.txt (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value-expected.txt 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+Testing the VolumeSlider value property.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS slider.value is 0
+
+Now we'll drag to the slider thumb from 10px to 30px within the slider's bounds
+controlValueWillStartChanging
+controlValueDidChange, value = 0.029
+controlValueDidChange, value = 0.034
+controlValueDidChange, value = 0.04
+controlValueDidChange, value = 0.045
+controlValueDidChange, value = 0.05
+controlValueDidChange, value = 0.056
+controlValueDidChange, value = 0.061
+controlValueDidChange, value = 0.066
+controlValueDidChange, value = 0.071
+controlValueDidChange, value = 0.077
+controlValueDidChange, value = 0.082
+controlValueDidChange, value = 0.087
+controlValueDidChange, value = 0.093
+controlValueDidChange, value = 0.098
+controlValueDidChange, value = 0.103
+controlValueDidChange, value = 0.108
+controlValueDidChange, value = 0.114
+controlValueDidChange, value = 0.119
+controlValueDidChange, value = 0.124
+controlValueDidChange, value = 0.13
+controlValueDidStopChanging
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumeslidervaluehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value.html (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value.html 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>VolumeSlider</code> value property.");
+
+window.jsTestIsAsync = true;
+
+const slider = new VolumeSlider;
+slider.x = 10;
+slider.y = 32;
+slider.width = 200;
+
+slider.uiDelegate = {
+
+ controlValueWillStartChanging: function()
+ {
+ debug(`controlValueWillStartChanging`);
+ },
+
+ controlValueDidChange: function()
+ {
+ debug(`controlValueDidChange, value = ${slider.value}`);
+ },
+
+ controlValueDidStopChanging: function()
+ {
+ debug(`controlValueDidStopChanging`);
+ finishJSTest();
+ }
+
+};
+
+const input = slider.children[1].element;
+
+function dragSlider(fromPx, toPx) {
+ const bounds = input.getBoundingClientRect();
+ const minX = bounds.left;
+ const centerY = bounds.top + bounds.height / 2;
+
+ eventSender.mouseMoveTo(minX + fromPx, centerY);
+ eventSender.mouseDown();
+
+ const delta = toPx - fromPx;
+ const iterations = Math.abs(delta);
+ for (let i = 1; i <= iterations; ++i)
+ eventSender.mouseMoveTo(minX + fromPx + i * Math.sign(delta), centerY);
+
+ eventSender.mouseUp();
+}
+
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(slider.element);
+
+ shouldBe("slider.value", "0");
+ debug("");
+ debug("Now we'll drag to the slider thumb from 10px to 30px within the slider's bounds");
+ dragSlider(10, 30);
+}
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsmediamodernmediacontrolsvolumeslidervolumesliderhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider.html (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider.html 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,19 @@
</span><ins>+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.css" type="text/css" media="screen">
+<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css" type="text/css" media="screen">
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/slider.js" type="text/javascript"></script>
+<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js" type="text/javascript"></script>
+<body>
+<script type="text/javascript">
+
+description("Testing the <code>VolumeSlider</code> class.");
+
+const volumeSlider = new VolumeSlider;
+
+shouldBeTrue('volumeSlider.element.classList.contains("volume")');
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (207244 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-10-12 21:49:10 UTC (rev 207244)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -2687,6 +2687,7 @@
</span><span class="cx"> webkit.org/b/162739 fast/images/gif-loop-count.html [ Pass ImageOnlyFailure ]
</span><span class="cx">
</span><span class="cx"> webkit.org/b/163009 media/modern-media-controls/icon-button/icon-button-active-state.html [ Failure ]
</span><ins>+webkit.org/b/163357 media/modern-media-controls/volume-slider/volume-slider-value.html [ Skip ]
</ins><span class="cx">
</span><span class="cx"> # This variation font test requires Skia which isn't available on iOS.
</span><span class="cx"> webkit.org/b/163093 fast/text/variations/advances.html [ Failure ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (207244 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-10-12 21:49:10 UTC (rev 207244)
+++ trunk/Source/WebCore/ChangeLog 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -1,3 +1,49 @@
</span><ins>+2016-10-12 Antoine Quint <graouts@apple.com>
+
+ [Modern Media Controls] Sliders: scrubber and volume
+ https://bugs.webkit.org/show_bug.cgi?id=163328
+ <rdar://problem/28733838>
+
+ Reviewed by Dean Jackson.
+
+ We add a new Slider class that provides a custom slider backed by an
+ invisible <input type="range"> element and a fill underlay to provide
+ a custom color between the left edge of the slider and the slider thumb.
+ As the slider's value changes, a UI delegate receives messages to track
+ such changes.
+
+ Tests: media/modern-media-controls/scrubber/scrubber.html
+ media/modern-media-controls/slider/slider-constructor.html
+ media/modern-media-controls/slider/slider-fill.html
+ media/modern-media-controls/slider/slider-styles.html
+ media/modern-media-controls/volume-slider/volume-slider-value.html
+ media/modern-media-controls/volume-slider/volume-slider.html
+
+ * Modules/modern-media-controls/controls/scrubber.css: Added.
+ (.scrubber.slider > input::-webkit-slider-thumb):
+ * Modules/modern-media-controls/controls/scrubber.js: Added.
+ (Scrubber):
+ * Modules/modern-media-controls/controls/slider.css: Added.
+ (.slider):
+ (.slider > input,):
+ (.slider > .fill):
+ (.slider > input):
+ (.slider > input::-webkit-slider-thumb):
+ * Modules/modern-media-controls/controls/slider.js: Added.
+ (Slider.prototype.get value):
+ (Slider.prototype.set value):
+ (Slider.prototype.get width):
+ (Slider.prototype.set width):
+ (Slider.prototype.handleEvent):
+ (Slider.prototype.commitProperty):
+ (Slider.prototype._handleInputEvent):
+ (Slider.prototype._handleChangeEvent):
+ (Slider.prototype._updateFill):
+ * Modules/modern-media-controls/controls/volume-slider.css: Added.
+ (.volume.slider > input::-webkit-slider-thumb):
+ * Modules/modern-media-controls/controls/volume-slider.js: Added.
+ (VolumeSlider):
+
</ins><span class="cx"> 2016-10-12 Wenson Hsieh <wenson_hsieh@apple.com>
</span><span class="cx">
</span><span class="cx"> Add experimental support for the "formatForeColor" inputType
</span></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsscrubbercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.css (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.css 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,30 @@
</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.
+ */
+
+.scrubber.slider > input::-webkit-slider-thumb {
+ width: 4px;
+ height: 23px;
+ border-radius: 2px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsscrubberjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,34 @@
</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 Scrubber extends Slider
+{
+
+ constructor()
+ {
+ super("scrubber");
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsslidercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,59 @@
</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.
+ */
+
+.slider {
+ position: absolute;
+ height: 3px;
+ background-color: rgba(255, 255, 255, 0.185);
+ border-radius: 1.5px;
+}
+
+.slider > input,
+.slider > .fill {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+}
+
+.slider > .fill {
+ border-radius: 1.5px 0 0 1.5px;
+ background-color: rgba(255, 255, 255, 0.255);
+ pointer-events: none;
+}
+
+.slider > input {
+ -webkit-appearance: none !important;
+ background-color: transparent;
+ width: 100%;
+ border-radius: 1.5px;
+ margin: 0;
+}
+
+.slider > input::-webkit-slider-thumb {
+ -webkit-appearance: none !important;
+ background-color: rgb(179, 179, 179);
+ box-shadow: 0px 0px 0px 1px rgb(40, 40, 40);
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolssliderjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,124 @@
</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 Slider extends LayoutNode
+{
+
+ constructor(cssClassName = "")
+ {
+ super(`<div class="slider ${cssClassName}">`);
+
+ this._fill = new LayoutNode(`<div class="fill">`);
+
+ this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001">`);
+ this._input.element.addEventListener("change", this);
+ this._input.element.addEventListener("input", this);
+
+ this.value = 0;
+
+ this.children = [this._fill, this._input];
+ }
+
+ // Public
+
+ get value()
+ {
+ if (this._value !== undefined)
+ return this._value;
+ return parseFloat(this._input.element.value);
+ }
+
+ set value(value)
+ {
+ if (this._valueIsChanging)
+ return;
+
+ this._value = value;
+ this.markDirtyProperty("value");
+ this._updateFill();
+ }
+
+ get width()
+ {
+ return super.width;
+ }
+
+ set width(width)
+ {
+ super.width = width;
+ this._updateFill();
+ }
+
+ // Protected
+
+ handleEvent(event)
+ {
+ switch (event.type) {
+ case "input":
+ this._handleInputEvent();
+ break;
+ case "change":
+ this._handleChangeEvent();
+ break;
+ }
+ }
+
+ commitProperty(propertyName)
+ {
+ if (propertyName === "value") {
+ this._input.element.value = this._value;
+ delete this._value;
+ } else
+ super.commitProperty(propertyName);
+ }
+
+ // Private
+
+ _handleInputEvent()
+ {
+ if (!this._valueIsChanging && this.uiDelegate && typeof this.uiDelegate.controlValueWillStartChanging === "function")
+ this.uiDelegate.controlValueWillStartChanging(this);
+ this._valueIsChanging = true;
+ if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")
+ this.uiDelegate.controlValueDidChange(this);
+
+ this._updateFill();
+ }
+
+ _handleChangeEvent()
+ {
+ delete this._valueIsChanging;
+ if (this.uiDelegate && typeof this.uiDelegate.controlValueDidStopChanging === "function")
+ this.uiDelegate.controlValueDidStopChanging(this);
+
+ this._updateFill();
+ }
+
+ _updateFill()
+ {
+ this._fill.width = Math.ceil(this.value * this.width);
+ }
+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsvolumeslidercss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,30 @@
</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.
+ */
+
+.volume.slider > input::-webkit-slider-thumb {
+ width: 11px;
+ height: 11px;
+ border-radius: 5.5px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebCoreModulesmodernmediacontrolscontrolsvolumesliderjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js (0 => 207245)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js 2016-10-12 21:50:03 UTC (rev 207245)
</span><span class="lines">@@ -0,0 +1,34 @@
</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 VolumeSlider extends Slider
+{
+
+ constructor()
+ {
+ super("volume");
+ }
+
+}
</ins></span></pre>
</div>
</div>
</body>
</html>