Title: [207245] trunk
Revision
207245
Author
commit-qu...@webkit.org
Date
2016-10-12 14:50:03 -0700 (Wed, 12 Oct 2016)

Log Message

[Modern Media Controls] Sliders: scrubber and volume
https://bugs.webkit.org/show_bug.cgi?id=163328
<rdar://problem/28733838>

Patch by Antoine Quint <grao...@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:

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (207244 => 207245)


--- trunk/LayoutTests/ChangeLog	2016-10-12 21:49:10 UTC (rev 207244)
+++ trunk/LayoutTests/ChangeLog	2016-10-12 21:50:03 UTC (rev 207245)
@@ -1,3 +1,30 @@
+2016-10-12  Antoine Quint  <grao...@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:
+
 2016-10-12  Wenson Hsieh  <wenson_hs...@apple.com>
 
         Add experimental support for the "formatForeColor" inputType

Added: trunk/LayoutTests/media/modern-media-controls/resources/media-controls-utils.js (0 => 207245)


--- 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)
@@ -0,0 +1,49 @@
+/*
+ * 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);
+}
+
+

Added: trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber-expected.txt (0 => 207245)


--- 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)
@@ -0,0 +1,10 @@
+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
+

Added: trunk/LayoutTests/media/modern-media-controls/scrubber/scrubber.html (0 => 207245)


--- 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)
@@ -0,0 +1,19 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>

Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor-expected.txt (0 => 207245)


--- 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)
@@ -0,0 +1,20 @@
+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
+

Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-constructor.html (0 => 207245)


--- 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)
@@ -0,0 +1,29 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>

Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt (0 => 207245)


--- 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)
@@ -0,0 +1,10 @@
+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
+

Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-fill.html (0 => 207245)


--- 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)
@@ -0,0 +1,26 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>

Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-styles-expected.txt (0 => 207245)


--- 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)
@@ -0,0 +1,35 @@
+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
+

Added: trunk/LayoutTests/media/modern-media-controls/slider/slider-styles.html (0 => 207245)


--- 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)
@@ -0,0 +1,53 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>

Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-expected.txt (0 => 207245)


--- 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)
@@ -0,0 +1,10 @@
+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
+

Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value-expected.txt (0 => 207245)


--- 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)
@@ -0,0 +1,34 @@
+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
+

Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value.html (0 => 207245)


--- 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)
@@ -0,0 +1,70 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>

Added: trunk/LayoutTests/media/modern-media-controls/volume-slider/volume-slider.html (0 => 207245)


--- 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)
@@ -0,0 +1,19 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" type="text/_javascript_"></script>
+<script src="" 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=""
+</body>

Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (207244 => 207245)


--- 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)
@@ -2687,6 +2687,7 @@
 webkit.org/b/162739 fast/images/gif-loop-count.html [ Pass ImageOnlyFailure ]
 
 webkit.org/b/163009 media/modern-media-controls/icon-button/icon-button-active-state.html [ Failure ]
+webkit.org/b/163357 media/modern-media-controls/volume-slider/volume-slider-value.html [ Skip ]
 
 # This variation font test requires Skia which isn't available on iOS.
 webkit.org/b/163093 fast/text/variations/advances.html [ Failure ]

Modified: trunk/Source/WebCore/ChangeLog (207244 => 207245)


--- 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)
@@ -1,3 +1,49 @@
+2016-10-12  Antoine Quint  <grao...@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):
+
 2016-10-12  Wenson Hsieh  <wenson_hs...@apple.com>
 
         Add experimental support for the "formatForeColor" inputType

Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.css (0 => 207245)


--- 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)
@@ -0,0 +1,30 @@
+/*
+ * 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;
+}

Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/scrubber.js (0 => 207245)


--- 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)
@@ -0,0 +1,34 @@
+/*
+ * 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");
+    }
+
+}

Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css (0 => 207245)


--- 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)
@@ -0,0 +1,59 @@
+/*
+ * 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);
+}

Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.js (0 => 207245)


--- 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)
@@ -0,0 +1,124 @@
+/*
+ * 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);
+    }
+
+}

Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.css (0 => 207245)


--- 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)
@@ -0,0 +1,30 @@
+/*
+ * 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;
+}

Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js (0 => 207245)


--- 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)
@@ -0,0 +1,34 @@
+/*
+ * 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");
+    }
+
+}
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to