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 <[email protected]>
+
+ [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 <[email protected]>
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 <[email protected]>
+
+ [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 <[email protected]>
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");
+ }
+
+}
