Diff
Modified: trunk/LayoutTests/ChangeLog (207294 => 207295)
--- trunk/LayoutTests/ChangeLog 2016-10-13 18:13:19 UTC (rev 207294)
+++ trunk/LayoutTests/ChangeLog 2016-10-13 18:45:10 UTC (rev 207295)
@@ -1,3 +1,18 @@
+2016-10-13 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] TimeControl and TimeLabel
+ https://bugs.webkit.org/show_bug.cgi?id=163356
+ <rdar://problem/28741376>
+
+ Reviewed by Dean Jackson.
+
+ Adding tests for the new TimeControl and TimeLabel classes.
+
+ * media/modern-media-controls/time-control/time-control-expected.txt: Added.
+ * media/modern-media-controls/time-control/time-control.html: Added.
+ * media/modern-media-controls/time-label/time-label-expected.txt: Added.
+ * media/modern-media-controls/time-label/time-label.html: Added.
+
2016-10-13 Jer Noble <jer.no...@apple.com>
CRASH at WebCore::SourceBuffer::removeCodedFrames + 37
Added: trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt (0 => 207295)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control-expected.txt 2016-10-13 18:45:10 UTC (rev 207295)
@@ -0,0 +1,31 @@
+Testing the TimeControl class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS timeControl.element.localName is "div"
+PASS timeControl.element.className is "time-control"
+
+PASS timeControl.elapsedTimeLabel instanceof TimeLabel is true
+PASS timeControl.scrubber instanceof Scrubber is true
+PASS timeControl.remainingTimeLabel instanceof TimeLabel is true
+
+PASS timeControl.children.length is 3
+PASS timeControl.children[0] is timeControl.elapsedTimeLabel
+PASS timeControl.children[1] is timeControl.scrubber
+PASS timeControl.children[2] is timeControl.remainingTimeLabel
+
+timeControl.width = 500;
+PASS timeControl.elapsedTimeLabel.x is -2
+PASS timeControl.scrubber.x is 43
+PASS timeControl.scrubber.width is 406
+PASS timeControl.remainingTimeLabel.x is 454
+PASS timeControl.isSufficientlyWide is true
+
+timeControl.width = 261;
+PASS timeControl.isSufficientlyWide is false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html (0 => 207295)
--- trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-control/time-control.html 2016-10-13 18:45:10 UTC (rev 207295)
@@ -0,0 +1,51 @@
+<link rel="stylesheet" href="" type="text/css" media="screen">
+<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>
+<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>TimeControl</code> class.");
+
+const timeControl = new TimeControl;
+
+shouldBeEqualToString("timeControl.element.localName", "div");
+shouldBeEqualToString("timeControl.element.className", "time-control");
+
+debug("");
+shouldBeTrue("timeControl.elapsedTimeLabel instanceof TimeLabel");
+shouldBeTrue("timeControl.scrubber instanceof Scrubber");
+shouldBeTrue("timeControl.remainingTimeLabel instanceof TimeLabel");
+
+debug("");
+shouldBe("timeControl.children.length", "3");
+shouldBe("timeControl.children[0]", "timeControl.elapsedTimeLabel");
+shouldBe("timeControl.children[1]", "timeControl.scrubber");
+shouldBe("timeControl.children[2]", "timeControl.remainingTimeLabel");
+
+debug("");
+debug("timeControl.width = 500;");
+timeControl.width = 500;
+shouldBe("timeControl.elapsedTimeLabel.x", "-2");
+shouldBe("timeControl.scrubber.x", "43");
+shouldBe("timeControl.scrubber.width", "406");
+shouldBe("timeControl.remainingTimeLabel.x", "454");
+shouldBeTrue("timeControl.isSufficientlyWide");
+
+debug("");
+debug("timeControl.width = 261;");
+timeControl.width = 261;
+shouldBeFalse("timeControl.isSufficientlyWide");
+
+debug("");
+
+</script>
+<script src=""
+</body>
Added: trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt (0 => 207295)
--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt 2016-10-13 18:45:10 UTC (rev 207295)
@@ -0,0 +1,22 @@
+Testing the TimeLabel class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS timeLabel.value is 0
+PASS timeLabel.element.localName is "div"
+PASS timeLabel.element.className is "time-label"
+PASS style.position is "absolute"
+PASS style.fontFamily is "-apple-system-monospaced-numbers"
+PASS style.fontSize is "14px"
+PASS rgba(style.color).r is 255
+PASS rgba(style.color).g is 255
+PASS rgba(style.color).b is 255
+PASS rgba(style.color).a is within 0.001 of 0.572
+PASS timeLabel.element.textContent is "00:01"
+PASS timeLabelWithNegativeValue.element.textContent is "-01:01"
+PASS timeLabelWithHours.element.textContent is "01:01:01"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html (0 => 207295)
--- trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/time-label/time-label.html 2016-10-13 18:45:10 UTC (rev 207295)
@@ -0,0 +1,51 @@
+<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>
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing the <code>TimeLabel</code> class.");
+
+const timeLabel = new TimeLabel;
+
+shouldBe("timeLabel.value", "0");
+shouldBeEqualToString("timeLabel.element.localName", "div");
+shouldBeEqualToString("timeLabel.element.className", "time-label");
+
+timeLabel.value = 1;
+
+const timeLabelWithNegativeValue = new TimeLabel;
+timeLabelWithNegativeValue.value = -61;
+
+const timeLabelWithHours = new TimeLabel;
+timeLabelWithHours.value = 3661;
+
+let style;
+scheduler.frameDidFire = function()
+{
+ document.body.appendChild(timeLabel.element);
+ style = window.getComputedStyle(timeLabel.element);
+
+ shouldBeEqualToString("style.position", "absolute");
+ shouldBeEqualToString("style.fontFamily", "-apple-system-monospaced-numbers");
+ shouldBeEqualToString("style.fontSize", "14px");
+ shouldBeEqualToRGBAColor("style.color", "rgba(255, 255, 255, 0.572)");
+
+ timeLabel.element.remove();
+
+ shouldBeEqualToString("timeLabel.element.textContent", "00:01");
+ shouldBeEqualToString("timeLabelWithNegativeValue.element.textContent", "-01:01");
+ shouldBeEqualToString("timeLabelWithHours.element.textContent", "01:01:01");
+
+ finishJSTest();
+};
+
+</script>
+<script src=""
+</body>
Modified: trunk/Source/WebCore/ChangeLog (207294 => 207295)
--- trunk/Source/WebCore/ChangeLog 2016-10-13 18:13:19 UTC (rev 207294)
+++ trunk/Source/WebCore/ChangeLog 2016-10-13 18:45:10 UTC (rev 207295)
@@ -1,3 +1,37 @@
+2016-10-13 Antoine Quint <grao...@apple.com>
+
+ [Modern Media Controls] TimeControl and TimeLabel
+ https://bugs.webkit.org/show_bug.cgi?id=163356
+ <rdar://problem/28741376>
+
+ Reviewed by Dean Jackson.
+
+ We introduce the TimeControl and TimeLabel classes. A TimeControl object
+ provides two TimeLabels, one for the elapsed time, one for the remaining
+ time, and a Scrubber in between them. Depending on a TimeControl's width,
+ it will adjust its layout such that the scrubber takes all the available
+ space between the labels, and can indicate whether it's large enough to
+ meet the minimal required width to show the scrubber, such that a container
+ node may decide not to show the TimeControl at all.
+
+ TimeLabel nodes simply show an integer time value in miliseconds in a
+ nicely formatted way.
+
+ Tests: media/modern-media-controls/time-control/time-control.html
+ media/modern-media-controls/time-label/time-label.html
+
+ * Modules/modern-media-controls/controls/time-control.js: Added.
+ (TimeControl.prototype.get width):
+ (TimeControl.prototype.set width):
+ (TimeControl.prototype.get isSufficientlyWide):
+ * Modules/modern-media-controls/controls/time-label.css: Added.
+ (.time-label):
+ * Modules/modern-media-controls/controls/time-label.js: Added.
+ (TimeLabel.prototype.get value):
+ (TimeLabel.prototype.set value):
+ (TimeLabel.prototype.commitProperty):
+ (TimeLabel.prototype._formattedTime):
+
2016-10-13 Jer Noble <jer.no...@apple.com>
CRASH at WebCore::SourceBuffer::removeCodedFrames + 37
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (0 => 207295)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-control.js 2016-10-13 18:45:10 UTC (rev 207295)
@@ -0,0 +1,70 @@
+/*
+ * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+const MinimumScrubberWidth = 168;
+const ElapsedTimeLabelLeftMargin = -2;
+const ElapsedTimeLabelWidth = 45;
+const RemainingTimeLabelWidth = 49;
+const RemainingTimeLabelLeftMargin = 5;
+
+class TimeControl extends LayoutItem
+{
+
+ constructor()
+ {
+ super({
+ element: `<div class="time-control">`
+ });
+
+ this.elapsedTimeLabel = new TimeLabel;
+ this.scrubber = new Scrubber;
+ this.remainingTimeLabel = new TimeLabel;
+
+ this.children = [this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
+ }
+
+ // Public
+
+ get width()
+ {
+ return super.width;
+ }
+
+ set width(width)
+ {
+ super.width = width;
+
+ this.elapsedTimeLabel.x = ElapsedTimeLabelLeftMargin;
+ this.scrubber.x = this.elapsedTimeLabel.x + ElapsedTimeLabelWidth;
+ this.scrubber.width = this._width - ElapsedTimeLabelWidth - RemainingTimeLabelWidth;
+ this.remainingTimeLabel.x = this.scrubber.x + this.scrubber.width + RemainingTimeLabelLeftMargin;
+ }
+
+ get isSufficientlyWide()
+ {
+ return this.scrubber.width >= MinimumScrubberWidth;
+ }
+
+}
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css (0 => 207295)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.css 2016-10-13 18:45:10 UTC (rev 207295)
@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+.time-label {
+ position: absolute;
+
+ font-family: -apple-system-monospaced-numbers;
+ font-size: 14px;
+
+ color: rgba(255, 255, 255, 0.572);
+}
Added: trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js (0 => 207295)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js (rev 0)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/time-label.js 2016-10-13 18:45:10 UTC (rev 207295)
@@ -0,0 +1,80 @@
+/*
+ * 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 TimeLabel extends LayoutNode
+{
+
+ constructor()
+ {
+ super(`<div class="time-label">`);
+
+ this.value = 0;
+ }
+
+ // Public
+
+ get value()
+ {
+ return this._value;
+ }
+
+ set value(value)
+ {
+ if (value === this._value)
+ return;
+
+ this._value = value;
+ this.markDirtyProperty("value");
+ }
+
+ // Protected
+
+ commitProperty(propertyName)
+ {
+ if (propertyName === "value")
+ this.element.textContent = this._formattedTime();
+ else
+ super.commitProperty(propertyName);
+ }
+
+ // Private
+
+ _formattedTime()
+ {
+ const time = this._value || 0;
+ const absTime = Math.abs(time);
+ const intSeconds = Math.floor(absTime % 60).toFixed(0);
+ const intMinutes = Math.floor((absTime / 60) % 60).toFixed(0);
+ const intHours = Math.floor(absTime / (60 * 60)).toFixed(0);
+
+ const timeStrings = [intMinutes, intSeconds];
+ if (intHours > 0)
+ timeStrings.unshift(intHours);
+
+ const sign = time < 0 ? "-" : "";
+ return sign + timeStrings.map(x => `00${x}`.slice(-2)).join(":");
+ }
+
+}
