REGRESSION: Update volume and scrubbing slider to match HI designs
authorgraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Feb 2017 08:11:34 +0000 (08:11 +0000)
committergraouts@webkit.org <graouts@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 14 Feb 2017 08:11:34 +0000 (08:11 +0000)
https://bugs.webkit.org/show_bug.cgi?id=168170
<rdar://problem/28095266>

Reviewed by Dean Jackson.

Source/WebCore:

We bring the designs of the control's background materials, scrubber and
volume slider up to spec.

The first important set of changes is that, on macOS, the materials and colors
were incorrect. Buttons and time labels now set a mix-blend-mode to correctly
appear vibrant against the media, and the controls bar, volume container
and tracks menu now use a new BackgroundTint node to correctly apply both
a backdrop-filter and blended tint above it.

The second important set of changes is the rendering of the sliders. Up to now
we would simply style the <input type="range"> track and thumb, applying solid
fills and strokes. We now draw sliders in two ways depending on the platform.

On macOS, we draw the whole slider with a <canvas> element with "mix-blend-mode"
set to "plus-lighter". On iOS, we draw the track as a <div> with "mix-blend-mode"
set to "plus-darker" and draw the fill (up to the thumb) in the <canvas> with
no blend mode to obtain a pure white color, finally the thumb is rendered by the
<input> element. We couldn't draw the pure white color with the track in the
same <canvas> due to the "plus-darker" blend mode.

Test: media/modern-media-controls/background-tint/background-tint.html

* Modules/modern-media-controls/controls/airplay-button.css:
(button.airplay.on):
* Modules/modern-media-controls/controls/background-tint.css: Added.
(.background-tint):
(.background-tint,):
(.background-tint > .blur):
(.background-tint > .tint):
* Modules/modern-media-controls/controls/background-tint.js: Added.
(BackgroundTint):
* Modules/modern-media-controls/controls/ios-inline-media-controls.css:
(.media-controls.ios.inline .scrubber.slider):
(.media-controls.ios.inline .scrubber.slider > div):
(.media-controls.ios.inline .scrubber.slider > input::-webkit-slider-thumb):
(.media-controls.ios.inline .scrubber.slider > .fill): Deleted.
* Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
(.media-controls.mac.inline.compact .volume-slider-container):
(.media-controls.mac.inline.compact .volume.slider):
(.media-controls.mac.inline.compact .scrubber.slider > input::-webkit-slider-thumb): Deleted.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
(.media-controls.mac.fullscreen > .controls-bar):
(.media-controls.mac.fullscreen > .controls-bar > .background-tint > div):
(.media-controls.mac.fullscreen .volume.slider):
(.media-controls.mac.fullscreen button.volume-up):
(.media-controls.mac.fullscreen button.rewind):
(.media-controls.mac.fullscreen button.forward):
(.media-controls.mac.fullscreen .buttons-container.right button):
(.media-controls.mac.fullscreen .scrubber):
(.media-controls.mac.fullscreen > .controls-bar button): Deleted.
(.media-controls.mac.fullscreen button.airplay): Deleted.
(.media-controls.mac.fullscreen button.aspect-ratio): Deleted.
(.media-controls.mac.fullscreen button.pip): Deleted.
(.media-controls.mac.fullscreen button.tracks): Deleted.
(.media-controls.mac.fullscreen button.fullscreen): Deleted.
* Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
* Modules/modern-media-controls/controls/macos-inline-media-controls.css:
(.media-controls.mac.inline .scrubber.slider):
(.media-controls.mac.inline .volume-slider-container):
(.media-controls.mac.inline .volume-slider-container > .background-tint):
(.media-controls.mac.inline .volume-slider-container > .background-tint > div):
(.media-controls.mac.inline .volume.slider):
(.media-controls.mac.inline button): Deleted.
(.media-controls.mac.inline button:active): Deleted.
(.media-controls.mac.inline > .controls-bar button): Deleted.
(.media-controls.mac.inline > .controls-bar,): Deleted.
(.media-controls.mac.inline .volume-slider-container:before): Deleted.
* Modules/modern-media-controls/controls/macos-inline-media-controls.js:
(MacOSInlineMediaControls.prototype.layout):
* Modules/modern-media-controls/controls/macos-media-controls.css: Added.
(.media-controls.mac button:active):
(.media-controls.mac > .controls-bar button):
(.media-controls.mac > .controls-bar .time-label):
(.media-controls.mac > .controls-bar .slider > canvas):
(.media-controls.mac > .controls-bar .slider > input::-webkit-slider-thumb):
* Modules/modern-media-controls/controls/scrubber.css: Removed.
* Modules/modern-media-controls/controls/scrubber.js:
(Scrubber):
(Scrubber.prototype.get buffered):
(Scrubber.prototype.set buffered):
(Scrubber.prototype.draw):
(Scrubber.prototype._drawMacOS):
(Scrubber.prototype._drawiOS):
* Modules/modern-media-controls/controls/slider.css:
(.slider):
(.slider > canvas,):
(.slider > canvas):
(.slider > input):
(.slider > input,): Deleted.
(.slider > .fill): Deleted.
(.slider > input::-webkit-slider-thumb): Deleted.
* Modules/modern-media-controls/controls/slider.js:
(Slider.prototype.set value):
(Slider.prototype.set width):
(Slider.prototype.commitProperty):
(Slider.prototype.layout):
(Slider.prototype.draw):
(Slider.prototype._handleInputEvent):
(Slider.prototype._handleChangeEvent):
(addRoundedRect):
(Slider.prototype._updateFill): Deleted.
* Modules/modern-media-controls/controls/start-button.css:
(button.start):
* Modules/modern-media-controls/controls/time-control.js:
* Modules/modern-media-controls/controls/time-label.css:
(.time-label):
* Modules/modern-media-controls/controls/tracks-panel.css:
(.tracks-panel):
(.tracks-panel > .background-tint > div):
(.tracks-panel > section):
(.tracks-panel > section:first-of-type):
(.tracks-panel > section > h3):
(.tracks-panel > section > ul):
(.tracks-panel > section > ul > li):
(.tracks-panel > section > ul > li:focus):
(.tracks-panel > section > ul > li.selected:before):
(.tracks-panel > section > ul > li.animated):
(.tracks-panel-section): Deleted.
(.tracks-panel-section:first-of-type): Deleted.
(.tracks-panel-section > h3): Deleted.
(.tracks-panel-section > ul): Deleted.
(.tracks-panel-section > ul > li): Deleted.
(.tracks-panel-section > ul > li:focus): Deleted.
(.tracks-panel-section > ul > li.selected:before): Deleted.
(.tracks-panel-section > ul > li.animated): Deleted.
* Modules/modern-media-controls/controls/tracks-panel.js:
(TracksPanel.prototype._childrenFromDataSource):
(TracksPanel.prototype._childrenFromDataSource.): Deleted.
* Modules/modern-media-controls/controls/volume-slider.js:
(VolumeSlider):
(VolumeSlider.prototype.handleEvent):
(VolumeSlider.prototype.draw):
* Modules/modern-media-controls/js-files:
* Modules/modern-media-controls/media/scrubbing-support.js:
(ScrubbingSupport.prototype.get mediaEvents):
(ScrubbingSupport.prototype.syncControl):
(ScrubbingSupport):

LayoutTests:

Rebaselining a host of existing tests to account for new DOM structure, metrics,
colors, blend modes, etc. We're also adding a new test for the BackgroundTint
class and removing one for the slider fill which is no longer appopriate since
we're drawing the slider's fill with a <canvas> element rather than a DOM element.

* media/modern-media-controls/background-tint/background-tint-expected.txt: Added.
* media/modern-media-controls/background-tint/background-tint.html: Added.
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles-expected.txt:
* media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles-expected.txt:
* media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-resize-with-hidden-controls-bar.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt:
* media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html:
* media/modern-media-controls/resources/media-controls-loader.js:
* media/modern-media-controls/scrubber/scrubber.html:
* media/modern-media-controls/slider/slider-constructor-expected.txt:
* media/modern-media-controls/slider/slider-constructor.html:
* media/modern-media-controls/slider/slider-fill-expected.txt: Removed.
* media/modern-media-controls/slider/slider-fill.html: Removed.
* media/modern-media-controls/slider/slider-styles-expected.txt:
* media/modern-media-controls/slider/slider-styles.html:
* media/modern-media-controls/time-label/time-label-expected.txt:
* media/modern-media-controls/time-label/time-label.html:
* media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt:
* media/modern-media-controls/tracks-panel/tracks-panel-population.html:
* media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html:
* media/modern-media-controls/volume-slider/volume-slider-value-expected.txt:
* media/modern-media-controls/volume-slider/volume-slider-value.html:
* media/modern-media-controls/volume-slider/volume-slider.html:
* media/modern-media-controls/volume-support/volume-support-click-expected.txt:
* media/modern-media-controls/volume-support/volume-support-click.html:
* media/modern-media-controls/volume-support/volume-support-drag-expected.txt:
* media/modern-media-controls/volume-support/volume-support-drag.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@212280 268f45cc-cd09-0410-ab3c-d52691b4dbfc

72 files changed:
LayoutTests/ChangeLog
LayoutTests/media/modern-media-controls/background-tint/background-tint-expected.txt [new file with mode: 0644]
LayoutTests/media/modern-media-controls/background-tint/background-tint.html [new file with mode: 0644]
LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles-expected.txt
LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-resize-with-hidden-controls-bar.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt
LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html
LayoutTests/media/modern-media-controls/resources/media-controls-loader.js
LayoutTests/media/modern-media-controls/scrubber/scrubber.html
LayoutTests/media/modern-media-controls/slider/slider-constructor-expected.txt
LayoutTests/media/modern-media-controls/slider/slider-constructor.html
LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt [deleted file]
LayoutTests/media/modern-media-controls/slider/slider-fill.html [deleted file]
LayoutTests/media/modern-media-controls/slider/slider-styles-expected.txt
LayoutTests/media/modern-media-controls/slider/slider-styles.html
LayoutTests/media/modern-media-controls/time-label/time-label-expected.txt
LayoutTests/media/modern-media-controls/time-label/time-label.html
LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt
LayoutTests/media/modern-media-controls/tracks-panel/tracks-panel-population.html
LayoutTests/media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html
LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value-expected.txt
LayoutTests/media/modern-media-controls/volume-slider/volume-slider-value.html
LayoutTests/media/modern-media-controls/volume-slider/volume-slider.html
LayoutTests/media/modern-media-controls/volume-support/volume-support-click-expected.txt
LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html
LayoutTests/media/modern-media-controls/volume-support/volume-support-drag-expected.txt
LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html
Source/WebCore/ChangeLog
Source/WebCore/Modules/modern-media-controls/controls/airplay-button.css
Source/WebCore/Modules/modern-media-controls/controls/background-tint.css [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/background-tint.js [moved from Source/WebCore/Modules/modern-media-controls/controls/scrubber.css with 84% similarity]
Source/WebCore/Modules/modern-media-controls/controls/ios-inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.css
Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js
Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css [new file with mode: 0644]
Source/WebCore/Modules/modern-media-controls/controls/scrubber.js
Source/WebCore/Modules/modern-media-controls/controls/slider.css
Source/WebCore/Modules/modern-media-controls/controls/slider.js
Source/WebCore/Modules/modern-media-controls/controls/start-button.css
Source/WebCore/Modules/modern-media-controls/controls/time-control.js
Source/WebCore/Modules/modern-media-controls/controls/time-label.css
Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.css
Source/WebCore/Modules/modern-media-controls/controls/tracks-panel.js
Source/WebCore/Modules/modern-media-controls/controls/volume-slider.js
Source/WebCore/Modules/modern-media-controls/js-files
Source/WebCore/Modules/modern-media-controls/media/scrubbing-support.js

index 1d53d80..292a0dc 100644 (file)
@@ -1,3 +1,66 @@
+2017-02-13  Antoine Quint  <graouts@apple.com>
+
+        REGRESSION: Update volume and scrubbing slider to match HI designs
+        https://bugs.webkit.org/show_bug.cgi?id=168170
+        <rdar://problem/28095266>
+
+        Reviewed by Dean Jackson.
+
+        Rebaselining a host of existing tests to account for new DOM structure, metrics,
+        colors, blend modes, etc. We're also adding a new test for the BackgroundTint
+        class and removing one for the slider fill which is no longer appopriate since
+        we're drawing the slider's fill with a <canvas> element rather than a DOM element.
+
+        * media/modern-media-controls/background-tint/background-tint-expected.txt: Added.
+        * media/modern-media-controls/background-tint/background-tint.html: Added.
+        * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles-expected.txt:
+        * media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-time-control-styles.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-containers-styles.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles-expected.txt:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-buttons-styles.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor-expected.txt:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-constructor.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles-expected.txt:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-controls-bar-styles.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-right-container-margin.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles-expected.txt:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-time-control-styles.html:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles-expected.txt:
+        * media/modern-media-controls/macos-fullscreen-media-controls/macos-fullscreen-media-controls-volume-styles.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-buttons-styles.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-constructor.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-layout.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-resize-with-hidden-controls-bar.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-time-control-styles.html:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles-expected.txt:
+        * media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-volume-styles.html:
+        * media/modern-media-controls/resources/media-controls-loader.js:
+        * media/modern-media-controls/scrubber/scrubber.html:
+        * media/modern-media-controls/slider/slider-constructor-expected.txt:
+        * media/modern-media-controls/slider/slider-constructor.html:
+        * media/modern-media-controls/slider/slider-fill-expected.txt: Removed.
+        * media/modern-media-controls/slider/slider-fill.html: Removed.
+        * media/modern-media-controls/slider/slider-styles-expected.txt:
+        * media/modern-media-controls/slider/slider-styles.html:
+        * media/modern-media-controls/time-label/time-label-expected.txt:
+        * media/modern-media-controls/time-label/time-label.html:
+        * media/modern-media-controls/tracks-panel/tracks-panel-population-expected.txt:
+        * media/modern-media-controls/tracks-panel/tracks-panel-population.html:
+        * media/modern-media-controls/tracks-support/tracks-support-show-and-populate-panel.html:
+        * media/modern-media-controls/volume-slider/volume-slider-value-expected.txt:
+        * media/modern-media-controls/volume-slider/volume-slider-value.html:
+        * media/modern-media-controls/volume-slider/volume-slider.html:
+        * media/modern-media-controls/volume-support/volume-support-click-expected.txt:
+        * media/modern-media-controls/volume-support/volume-support-click.html:
+        * media/modern-media-controls/volume-support/volume-support-drag-expected.txt:
+        * media/modern-media-controls/volume-support/volume-support-drag.html:
+
 2017-02-13  Alex Christensen  <achristensen@webkit.org>
 
         URLs with an invalid IPv4 address should be invalid
diff --git a/LayoutTests/media/modern-media-controls/background-tint/background-tint-expected.txt b/LayoutTests/media/modern-media-controls/background-tint/background-tint-expected.txt
new file mode 100644 (file)
index 0000000..a475135
--- /dev/null
@@ -0,0 +1,35 @@
+Testing the BackgroundTint class.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Container
+PASS container.localName is "div"
+PASS container.className is "background-tint"
+PASS getComputedStyle(container).pointerEvents is "none"
+
+Blur
+PASS blur.localName is "div"
+PASS blur.className is "blur"
+PASS getComputedStyle(blur).position is "absolute"
+PASS getComputedStyle(blur).left is "0px"
+PASS getComputedStyle(blur).top is "0px"
+PASS getComputedStyle(blur).width is "100px"
+PASS getComputedStyle(blur).height is "100px"
+PASS getComputedStyle(blur).backgroundColor is "rgba(30, 30, 30, 0.45098)"
+PASS getComputedStyle(blur).webkitBackdropFilter is "saturate(1.8) blur(20px)"
+
+Tint
+PASS tint.localName is "div"
+PASS tint.className is "tint"
+PASS getComputedStyle(tint).position is "absolute"
+PASS getComputedStyle(tint).left is "0px"
+PASS getComputedStyle(tint).top is "0px"
+PASS getComputedStyle(tint).width is "100px"
+PASS getComputedStyle(tint).height is "100px"
+PASS getComputedStyle(tint).backgroundColor is "rgb(41, 41, 41)"
+PASS getComputedStyle(tint).mixBlendMode is "lighten"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/media/modern-media-controls/background-tint/background-tint.html b/LayoutTests/media/modern-media-controls/background-tint/background-tint.html
new file mode 100644 (file)
index 0000000..d5aac62
--- /dev/null
@@ -0,0 +1,55 @@
+<script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<body>
+<style type="text/css" media="screen">
+    
+.background-tint {
+    width: 100px;
+    height: 100px;
+}
+    
+</style>
+<script type="text/javascript">
+    
+description("Testing the <code>BackgroundTint</code> class.");
+
+const backgroundTint = new BackgroundTint;
+
+debug("Container");
+const container = document.body.appendChild(backgroundTint.element);
+shouldBeEqualToString("container.localName", "div");
+shouldBeEqualToString("container.className", "background-tint");
+shouldBeEqualToString("getComputedStyle(container).pointerEvents", "none");
+
+debug("");
+debug("Blur");
+const blur = container.firstElementChild;
+shouldBeEqualToString("blur.localName", "div");
+shouldBeEqualToString("blur.className", "blur");
+shouldBeEqualToString("getComputedStyle(blur).position", "absolute");
+shouldBeEqualToString("getComputedStyle(blur).left", "0px");
+shouldBeEqualToString("getComputedStyle(blur).top", "0px");
+shouldBeEqualToString("getComputedStyle(blur).width", "100px");
+shouldBeEqualToString("getComputedStyle(blur).height", "100px");
+shouldBeEqualToString("getComputedStyle(blur).backgroundColor", "rgba(30, 30, 30, 0.45098)");
+shouldBeEqualToString("getComputedStyle(blur).webkitBackdropFilter", "saturate(1.8) blur(20px)");
+
+debug("");
+debug("Tint");
+const tint = container.lastElementChild;
+shouldBeEqualToString("tint.localName", "div");
+shouldBeEqualToString("tint.className", "tint");
+shouldBeEqualToString("getComputedStyle(tint).position", "absolute");
+shouldBeEqualToString("getComputedStyle(tint).left", "0px");
+shouldBeEqualToString("getComputedStyle(tint).top", "0px");
+shouldBeEqualToString("getComputedStyle(tint).width", "100px");
+shouldBeEqualToString("getComputedStyle(tint).height", "100px");
+shouldBeEqualToString("getComputedStyle(tint).backgroundColor", "rgb(41, 41, 41)");
+shouldBeEqualToString("getComputedStyle(tint).mixBlendMode", "lighten");
+
+container.remove();
+
+</script>
+<script src="../../../resources/js-test-post.js"></script>
+</body>
index 4eba4c5..ee2c8ac 100644 (file)
@@ -3,7 +3,7 @@ Testing the IOSOSInlineMediaControls computed styles.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "23px"
+PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "13px"
 PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top is "14.5px"
 PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top is "14.5px"
 
index fa83c7f..3612175 100644 (file)
@@ -14,7 +14,7 @@ scheduler.frameDidFire = function()
 {
     document.body.appendChild(mediaControls.element);
 
-    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "23px");
+    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "13px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top", "14.5px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top", "14.5px");
     debug("");
index f54b5d1..5d63777 100644 (file)
@@ -20,8 +20,8 @@ description("Testing the <code>MacOSFullscreenMediaControls</code> computed styl
 window.jsTestIsAsync = true;
 
 const mediaControls = new MacOSFullscreenMediaControls;
-const centerContainer = mediaControls.controlsBar.children[1];
-const rightContainer = mediaControls.controlsBar.children[2];
+const centerContainer = mediaControls.controlsBar.children[2];
+const rightContainer = mediaControls.controlsBar.children[3];
 const buttons = centerContainer.buttons.concat(rightContainer.buttons);
 
 let centerContainerBounds, rightContainerBounds;
index 3c04384..dda9c94 100644 (file)
@@ -5,7 +5,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 RewindButton
 PASS style.left is "27px"
-PASS style.webkitMaskPositionY is "16px"
+PASS style.webkitMaskPositionY is "17px"
 PASS style.height is "44px"
 
 PlayPauseButton
@@ -15,27 +15,27 @@ PASS style.height is "44px"
 
 ForwardButton
 PASS style.left is "127px"
-PASS style.webkitMaskPositionY is "16px"
+PASS style.webkitMaskPositionY is "17px"
 PASS style.height is "44px"
 
 AirplayButton
 PASS style.left is "12px"
-PASS style.webkitMaskPositionY is "13px"
+PASS style.webkitMaskPositionY is "18px"
 PASS style.height is "44px"
 
 PiPButton
 PASS style.left is "44px"
-PASS style.webkitMaskPositionY is "13px"
+PASS style.webkitMaskPositionY is "18px"
 PASS style.height is "44px"
 
 TracksButton
 PASS style.left is "79px"
-PASS style.webkitMaskPositionY is "15px"
+PASS style.webkitMaskPositionY is "18px"
 PASS style.height is "44px"
 
 FullscreenButton
 PASS style.left is "111px"
-PASS style.webkitMaskPositionY is "13px"
+PASS style.webkitMaskPositionY is "18px"
 PASS style.height is "44px"
 
 PASS successfullyParsed is true
index bdfb399..71516c3 100644 (file)
@@ -11,13 +11,13 @@ window.jsTestIsAsync = true;
 const mediaControls = new MacOSFullscreenMediaControls;
 
 const buttonPositions = [
-    [mediaControls.rewindButton, 27, 16],
+    [mediaControls.rewindButton, 27, 17],
     [mediaControls.playPauseButton, 78, 12],
-    [mediaControls.forwardButton, 127, 16],
-    [mediaControls.airplayButton, 12, 13],
-    [mediaControls.pipButton, 44, 13],
-    [mediaControls.tracksButton, 79, 15],
-    [mediaControls.fullscreenButton, 111, 13]
+    [mediaControls.forwardButton, 127, 17],
+    [mediaControls.airplayButton, 12, 18],
+    [mediaControls.pipButton, 44, 18],
+    [mediaControls.tracksButton, 79, 18],
+    [mediaControls.fullscreenButton, 111, 18]
 ];
 
 let style;
index aedc398..0c456e4 100644 (file)
@@ -8,32 +8,32 @@ PASS mediaControls.element.className is "media-controls mac fullscreen"
 PASS mediaControls.layoutTraits is LayoutTraits.macOS | LayoutTraits.Fullscreen
 
 Controls bar
-PASS mediaControls.controlsBar.children.length is 4
-PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children.length is 5
 PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
 PASS mediaControls.controlsBar.children[2] instanceof ButtonsContainer is true
-PASS mediaControls.controlsBar.children[3] is mediaControls.timeControl
+PASS mediaControls.controlsBar.children[3] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[4] is mediaControls.timeControl
 
 Left container
-PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.volumeDownButton, mediaControls.volumeSlider, mediaControls.volumeUpButton]
-PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
-PASS mediaControls.controlsBar.children[0].leftMargin is 12
-PASS mediaControls.controlsBar.children[0].rightMargin is 0
-PASS mediaControls.controlsBar.children[0].buttonMargin is 6
+PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.volumeDownButton, mediaControls.volumeSlider, mediaControls.volumeUpButton]
+PASS mediaControls.controlsBar.children[1].element.className is "buttons-container left"
+PASS mediaControls.controlsBar.children[1].leftMargin is 12
+PASS mediaControls.controlsBar.children[1].rightMargin is 0
+PASS mediaControls.controlsBar.children[1].buttonMargin is 6
 
 Center container
-PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.rewindButton, mediaControls.playPauseButton, mediaControls.forwardButton]
-PASS mediaControls.controlsBar.children[1].element.className is "buttons-container center"
-PASS mediaControls.controlsBar.children[1].leftMargin is 27
-PASS mediaControls.controlsBar.children[1].rightMargin is 27
-PASS mediaControls.controlsBar.children[1].buttonMargin is 27
+PASS mediaControls.controlsBar.children[2].buttons is [mediaControls.rewindButton, mediaControls.playPauseButton, mediaControls.forwardButton]
+PASS mediaControls.controlsBar.children[2].element.className is "buttons-container center"
+PASS mediaControls.controlsBar.children[2].leftMargin is 27
+PASS mediaControls.controlsBar.children[2].rightMargin is 27
+PASS mediaControls.controlsBar.children[2].buttonMargin is 27
 
 Right container
-PASS mediaControls.controlsBar.children[2].buttons is [mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
-PASS mediaControls.controlsBar.children[2].element.className is "buttons-container right"
-PASS mediaControls.controlsBar.children[2].leftMargin is 12
-PASS mediaControls.controlsBar.children[2].rightMargin is 12
-PASS mediaControls.controlsBar.children[2].buttonMargin is 24
+PASS mediaControls.controlsBar.children[3].buttons is [mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
+PASS mediaControls.controlsBar.children[3].element.className is "buttons-container right"
+PASS mediaControls.controlsBar.children[3].leftMargin is 12
+PASS mediaControls.controlsBar.children[3].rightMargin is 12
+PASS mediaControls.controlsBar.children[3].buttonMargin is 24
 
 PASS successfullyParsed is true
 
index d57897e..bedcd6c 100644 (file)
@@ -13,35 +13,35 @@ shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS | LayoutTraits.Fullsc
 
 debug("");
 debug("Controls bar");
-shouldBe("mediaControls.controlsBar.children.length", "4");
-shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+shouldBe("mediaControls.controlsBar.children.length", "5");
 shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
 shouldBeTrue("mediaControls.controlsBar.children[2] instanceof ButtonsContainer");
-shouldBe("mediaControls.controlsBar.children[3]", "mediaControls.timeControl");
+shouldBeTrue("mediaControls.controlsBar.children[3] instanceof ButtonsContainer");
+shouldBe("mediaControls.controlsBar.children[4]", "mediaControls.timeControl");
 
 debug("");
 debug("Left container");
-shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.volumeDownButton, mediaControls.volumeSlider, mediaControls.volumeUpButton]");
-shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
-shouldBe("mediaControls.controlsBar.children[0].leftMargin", "12");
-shouldBe("mediaControls.controlsBar.children[0].rightMargin", "0");
-shouldBe("mediaControls.controlsBar.children[0].buttonMargin", "6");
+shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.volumeDownButton, mediaControls.volumeSlider, mediaControls.volumeUpButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container left");
+shouldBe("mediaControls.controlsBar.children[1].leftMargin", "12");
+shouldBe("mediaControls.controlsBar.children[1].rightMargin", "0");
+shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "6");
 
 debug("");
 debug("Center container");
-shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.rewindButton, mediaControls.playPauseButton, mediaControls.forwardButton]");
-shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container center");
-shouldBe("mediaControls.controlsBar.children[1].leftMargin", "27");
-shouldBe("mediaControls.controlsBar.children[1].rightMargin", "27");
-shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "27");
+shouldBe("mediaControls.controlsBar.children[2].buttons", "[mediaControls.rewindButton, mediaControls.playPauseButton, mediaControls.forwardButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "buttons-container center");
+shouldBe("mediaControls.controlsBar.children[2].leftMargin", "27");
+shouldBe("mediaControls.controlsBar.children[2].rightMargin", "27");
+shouldBe("mediaControls.controlsBar.children[2].buttonMargin", "27");
 
 debug("");
 debug("Right container");
-shouldBe("mediaControls.controlsBar.children[2].buttons", "[mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
-shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "buttons-container right");
-shouldBe("mediaControls.controlsBar.children[2].leftMargin", "12");
-shouldBe("mediaControls.controlsBar.children[2].rightMargin", "12");
-shouldBe("mediaControls.controlsBar.children[2].buttonMargin", "24");
+shouldBe("mediaControls.controlsBar.children[3].buttons", "[mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[3].element.className", "buttons-container right");
+shouldBe("mediaControls.controlsBar.children[3].leftMargin", "12");
+shouldBe("mediaControls.controlsBar.children[3].rightMargin", "12");
+shouldBe("mediaControls.controlsBar.children[3].buttonMargin", "24");
 
 debug("");
 
index 6ee54b3..f20b116 100644 (file)
@@ -6,16 +6,10 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 PASS style.bottom is "25px"
 PASS style.width is "468px"
 PASS style.height is "75px"
-PASS style.borderRadius is "8px"
 PASS bounds.left is 166
 PASS bounds.top is 500
 PASS bounds.width is 468
 PASS bounds.height is 75
-PASS rgba(style.backgroundColor).r is 30
-PASS rgba(style.backgroundColor).g is 30
-PASS rgba(style.backgroundColor).b is 30
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.webkitBackdropFilter is "saturate(1.8) blur(20px)"
 
 PASS successfullyParsed is true
 
index b8135f7..acaa3cd 100644 (file)
@@ -33,16 +33,12 @@ scheduler.frameDidFire = function()
     shouldBeEqualToString("style.bottom", "25px");
     shouldBeEqualToString("style.width", "468px");
     shouldBeEqualToString("style.height", "75px");
-    shouldBeEqualToString("style.borderRadius", "8px");
 
     shouldBe("bounds.left", "166");
     shouldBe("bounds.top", "500");
     shouldBe("bounds.width", "468");
     shouldBe("bounds.height", "75");
 
-    shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(30, 30, 30, 0.45)");
-    shouldBeEqualToString("style.webkitBackdropFilter", "saturate(1.8) blur(20px)");
-
     mediaControls.element.remove();
 
     debug("");
index acdde1f..1ca2c8f 100644 (file)
@@ -9,7 +9,7 @@ description("Testing the <code>MacOSFullscreenMediaControls</code> right contain
 window.jsTestIsAsync = true;
 
 const mediaControls = new MacOSFullscreenMediaControls;
-const rightContainer = mediaControls.controlsBar.children[2];
+const rightContainer = mediaControls.controlsBar.children[3];
 
 let numberOfFrames = 0;
 scheduler.frameDidFire = function()
index 05983f5..b0a4f2f 100644 (file)
@@ -6,7 +6,7 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 PASS window.getComputedStyle(mediaControls.timeControl.element).left is "10px"
 PASS window.getComputedStyle(mediaControls.timeControl.element).top is "48px"
 PASS window.getComputedStyle(mediaControls.timeControl.element).width is "457px"
-PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "7px"
+PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "-3px"
 PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).fontSize is "12px"
 PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).fontSize is "12px"
 
index 0b7e518..c29b039 100644 (file)
@@ -17,7 +17,7 @@ scheduler.frameDidFire = function()
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.element).left", "10px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.element).top", "48px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.element).width", "457px");
-    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "7px");
+    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "-3px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).fontSize", "12px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).fontSize", "12px");
     debug("");
index 6b49f27..e6aea4d 100644 (file)
@@ -3,8 +3,8 @@ Testing the MacOSFullscreenMediaControls computed styles.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS window.getComputedStyle(mediaControls.volumeSlider.element).left is "30px"
-PASS window.getComputedStyle(mediaControls.volumeSlider.element).top is "23px"
+PASS window.getComputedStyle(mediaControls.volumeSlider.element).left became "30px"
+PASS window.getComputedStyle(mediaControls.volumeSlider.element).top is "19px"
 
 PASS successfullyParsed is true
 
index 43aff06..e1d1a8a 100644 (file)
@@ -11,19 +11,13 @@ window.jsTestIsAsync = true;
 const mediaControls = new MacOSFullscreenMediaControls;
 document.body.appendChild(mediaControls.element);
 
-scheduler.frameDidFire = function()
-{
-    if (!document.body.contains(mediaControls.volumeSlider.element))
-        return;
-
-    shouldBeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).left", "30px");
-    shouldBeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).top", "23px");
-
+shouldBecomeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).left", "30px", () => {
+    shouldBeEqualToString("window.getComputedStyle(mediaControls.volumeSlider.element).top", "19px");
     mediaControls.element.remove();
 
     debug("");
     finishMediaControlsTest();
-};
+});
 
 </script>
 <script src="../../../resources/js-test-post.js"></script>
index e93e075..59ab959 100644 (file)
@@ -7,7 +7,7 @@ PlayPauseButton
 PASS rgba(style.backgroundColor).r is 255
 PASS rgba(style.backgroundColor).g is 255
 PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
 PASS style.height is "50px"
 PASS style.webkitMaskPositionY is "12px"
 
@@ -15,7 +15,7 @@ SkipBackButton
 PASS rgba(style.backgroundColor).r is 255
 PASS rgba(style.backgroundColor).g is 255
 PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
 PASS style.height is "50px"
 PASS style.webkitMaskPositionY is "10px"
 
@@ -23,7 +23,7 @@ MuteButton
 PASS rgba(style.backgroundColor).r is 255
 PASS rgba(style.backgroundColor).g is 255
 PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
 PASS style.height is "50px"
 PASS style.webkitMaskPositionY is "10px"
 
@@ -31,7 +31,7 @@ AirplayButton
 PASS rgba(style.backgroundColor).r is 255
 PASS rgba(style.backgroundColor).g is 255
 PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
 PASS style.height is "50px"
 PASS style.webkitMaskPositionY is "13px"
 
@@ -39,7 +39,7 @@ PiPButton
 PASS rgba(style.backgroundColor).r is 255
 PASS rgba(style.backgroundColor).g is 255
 PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
 PASS style.height is "50px"
 PASS style.webkitMaskPositionY is "13px"
 
@@ -47,7 +47,7 @@ TracksButton
 PASS rgba(style.backgroundColor).r is 255
 PASS rgba(style.backgroundColor).g is 255
 PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
 PASS style.height is "50px"
 PASS style.webkitMaskPositionY is "15px"
 
@@ -55,7 +55,7 @@ FullscreenButton
 PASS rgba(style.backgroundColor).r is 255
 PASS rgba(style.backgroundColor).g is 255
 PASS rgba(style.backgroundColor).b is 255
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.572
+PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
 PASS style.height is "50px"
 PASS style.webkitMaskPositionY is "13px"
 
index 468087e..f2f44df 100644 (file)
@@ -31,7 +31,7 @@ scheduler.frameDidFire = function()
     for (let [button, y] of buttonPositions) {
         style = window.getComputedStyle(button.element);
         debug(button.constructor.name);
-        shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(255, 255, 255, 0.572)");
+        shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(255, 255, 255, 0.45)");
         shouldBeEqualToString("style.height", "50px");
         shouldBeEqualToString("style.webkitMaskPositionY", `${y}px`);
         debug("");
index 47cf218..294530d 100644 (file)
@@ -8,29 +8,29 @@ PASS mediaControls.element.className is "media-controls mac inline"
 PASS mediaControls.layoutTraits is LayoutTraits.macOS
 
 Controls bar
-PASS mediaControls.controlsBar.children.length is 3
-PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children.length is 4
 PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
-PASS mediaControls.controlsBar.children[2] instanceof LayoutNode is true
+PASS mediaControls.controlsBar.children[2] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[3] instanceof LayoutNode is true
 
 Left container
-PASS mediaControls.controlsBar.children[0].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
-PASS mediaControls.controlsBar.children[0].element.className is "buttons-container left"
-PASS mediaControls.controlsBar.children[0].leftMargin is 24
-PASS mediaControls.controlsBar.children[0].rightMargin is 24
-PASS mediaControls.controlsBar.children[0].buttonMargin is 24
-
-Right container
-PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
-PASS mediaControls.controlsBar.children[1].element.className is "buttons-container right"
+PASS mediaControls.controlsBar.children[1].buttons is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[1].element.className is "buttons-container left"
 PASS mediaControls.controlsBar.children[1].leftMargin is 24
 PASS mediaControls.controlsBar.children[1].rightMargin is 24
 PASS mediaControls.controlsBar.children[1].buttonMargin is 24
 
+Right container
+PASS mediaControls.controlsBar.children[2].buttons is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
+PASS mediaControls.controlsBar.children[2].element.className is "buttons-container right"
+PASS mediaControls.controlsBar.children[2].leftMargin is 24
+PASS mediaControls.controlsBar.children[2].rightMargin is 24
+PASS mediaControls.controlsBar.children[2].buttonMargin is 24
+
 Volume slider
-PASS mediaControls.controlsBar.children[2].element.className is "volume-slider-container"
-PASS mediaControls.controlsBar.children[2].children is [mediaControls.volumeSlider]
-PASS mediaControls.controlsBar.children[2].visible is false
+PASS mediaControls.controlsBar.children[3].element.className is "volume-slider-container"
+PASS mediaControls.controlsBar.children[3].children.slice(-1) is [mediaControls.volumeSlider]
+PASS mediaControls.controlsBar.children[3].visible is false
 PASS mediaControls.volumeSlider.width is 60
 
 PASS successfullyParsed is true
index d57d95f..5586304 100644 (file)
@@ -13,32 +13,32 @@ shouldBe("mediaControls.layoutTraits", "LayoutTraits.macOS");
 
 debug("");
 debug("Controls bar");
-shouldBe("mediaControls.controlsBar.children.length", "3");
-shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
+shouldBe("mediaControls.controlsBar.children.length", "4");
 shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
-shouldBeTrue("mediaControls.controlsBar.children[2] instanceof LayoutNode");
+shouldBeTrue("mediaControls.controlsBar.children[2] instanceof ButtonsContainer");
+shouldBeTrue("mediaControls.controlsBar.children[3] instanceof LayoutNode");
 
 debug("");
 debug("Left container");
-shouldBe("mediaControls.controlsBar.children[0].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
-shouldBeEqualToString("mediaControls.controlsBar.children[0].element.className", "buttons-container left");
-shouldBe("mediaControls.controlsBar.children[0].leftMargin", "24");
-shouldBe("mediaControls.controlsBar.children[0].rightMargin", "24");
-shouldBe("mediaControls.controlsBar.children[0].buttonMargin", "24");
-
-debug("");
-debug("Right container");
-shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
-shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container right");
+shouldBe("mediaControls.controlsBar.children[1].buttons", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[1].element.className", "buttons-container left");
 shouldBe("mediaControls.controlsBar.children[1].leftMargin", "24");
 shouldBe("mediaControls.controlsBar.children[1].rightMargin", "24");
 shouldBe("mediaControls.controlsBar.children[1].buttonMargin", "24");
 
 debug("");
+debug("Right container");
+shouldBe("mediaControls.controlsBar.children[2].buttons", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
+shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "buttons-container right");
+shouldBe("mediaControls.controlsBar.children[2].leftMargin", "24");
+shouldBe("mediaControls.controlsBar.children[2].rightMargin", "24");
+shouldBe("mediaControls.controlsBar.children[2].buttonMargin", "24");
+
+debug("");
 debug("Volume slider");
-shouldBeEqualToString("mediaControls.controlsBar.children[2].element.className", "volume-slider-container");
-shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.volumeSlider]");
-shouldBeFalse("mediaControls.controlsBar.children[2].visible");
+shouldBeEqualToString("mediaControls.controlsBar.children[3].element.className", "volume-slider-container");
+shouldBe("mediaControls.controlsBar.children[3].children.slice(-1)", "[mediaControls.volumeSlider]");
+shouldBeFalse("mediaControls.controlsBar.children[3].visible");
 shouldBe("mediaControls.volumeSlider.width", "60");
 
 debug("");
index 9195a2b..298c338 100644 (file)
@@ -11,12 +11,7 @@ PASS bounds.left is 0
 PASS bounds.top is 250
 PASS bounds.width is 680
 PASS bounds.height is 50
-PASS rgba(style.backgroundColor).r is 30
-PASS rgba(style.backgroundColor).g is 30
-PASS rgba(style.backgroundColor).b is 30
-PASS rgba(style.backgroundColor).a is within 0.001 of 0.45
-PASS style.webkitBackdropFilter is "saturate(1.8) blur(20px)"
-undefined
+
 PASS successfullyParsed is true
 
 TEST COMPLETE
index e7e6793..104efaf 100644 (file)
@@ -37,12 +37,9 @@ scheduler.frameDidFire = function()
     shouldBe("bounds.width", "680");
     shouldBe("bounds.height", "50");
 
-    shouldBeEqualToRGBAColor("style.backgroundColor", "rgba(30, 30, 30, 0.45)");
-    shouldBeEqualToString("style.webkitBackdropFilter", "saturate(1.8) blur(20px)");
-
     mediaControls.element.remove();
 
-    debug();
+    debug("");
     finishMediaControlsTest();
 };
 
index 245378f..0c9cf82 100644 (file)
@@ -3,13 +3,14 @@ Testing the MacOSInlineMediaControls layout.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS mediaControls.controlsBar.children[0] instanceof ButtonsContainer is true
-PASS mediaControls.controlsBar.children[1] instanceof LayoutNode is true
-PASS mediaControls.controlsBar.children[2] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[0] instanceof BackgroundTint is true
+PASS mediaControls.controlsBar.children[1] instanceof ButtonsContainer is true
+PASS mediaControls.controlsBar.children[2] instanceof TimeControl is true
+PASS mediaControls.controlsBar.children[3] instanceof ButtonsContainer is true
 PASS mediaControls.timeControl.x is 118
 PASS mediaControls.timeControl.width == expectedTimeControlWidth is true
-PASS mediaControls.controlsBar.children[0].children is [mediaControls.playPauseButton, mediaControls.skipBackButton]
-PASS mediaControls.controlsBar.children[2].children is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
+PASS mediaControls.controlsBar.children[1].children is [mediaControls.playPauseButton, mediaControls.skipBackButton]
+PASS mediaControls.controlsBar.children[3].children is [mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]
 PASS mediaControls.volumeSlider.parent.x == expectedVolumeSliderContainerX is true
 PASS successfullyParsed is true
 
index 91eb092..99ec0ec 100644 (file)
@@ -30,16 +30,17 @@ scheduler.frameDidFire = function()
     if (iconButtons.some(button => button.width == 0))
         return;
 
-    shouldBeTrue("mediaControls.controlsBar.children[0] instanceof ButtonsContainer");
-    shouldBeTrue("mediaControls.controlsBar.children[1] instanceof LayoutNode");
-    shouldBeTrue("mediaControls.controlsBar.children[2] instanceof ButtonsContainer");
+    shouldBeTrue("mediaControls.controlsBar.children[0] instanceof BackgroundTint");
+    shouldBeTrue("mediaControls.controlsBar.children[1] instanceof ButtonsContainer");
+    shouldBeTrue("mediaControls.controlsBar.children[2] instanceof TimeControl");
+    shouldBeTrue("mediaControls.controlsBar.children[3] instanceof ButtonsContainer");
 
     shouldBe("mediaControls.timeControl.x", "118");
 
     shouldBeTrue("mediaControls.timeControl.width == expectedTimeControlWidth");
 
-    shouldBe("mediaControls.controlsBar.children[0].children", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
-    shouldBe("mediaControls.controlsBar.children[2].children", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
+    shouldBe("mediaControls.controlsBar.children[1].children", "[mediaControls.playPauseButton, mediaControls.skipBackButton]");
+    shouldBe("mediaControls.controlsBar.children[3].children", "[mediaControls.muteButton, mediaControls.airplayButton, mediaControls.pipButton, mediaControls.tracksButton, mediaControls.fullscreenButton]");
 
     shouldBeTrue("mediaControls.volumeSlider.parent.x == expectedVolumeSliderContainerX");
 
index a99e395..2b9e33e 100644 (file)
@@ -10,8 +10,8 @@ window.jsTestIsAsync = true;
 
 const mediaControls = new MacOSInlineMediaControls({ width: 600 });
 
-const leftContainer = mediaControls.controlsBar.children[0];
-const rightContainer = mediaControls.controlsBar.children[1];
+const leftContainer = mediaControls.controlsBar.children[1];
+const rightContainer = mediaControls.controlsBar.children[2];
 const buttons = leftContainer.buttons.concat(rightContainer.buttons);
 
 let numberOfFrames = 0;
index eac76d2..d68f3c7 100644 (file)
@@ -3,7 +3,7 @@ Testing the MacOSInlineMediaControls computed styles.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "23px"
+PASS window.getComputedStyle(mediaControls.timeControl.scrubber.element).top is "13px"
 PASS window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top is "14.5px"
 PASS window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top is "14.5px"
 
index 23384fb..1b48ec2 100644 (file)
@@ -14,7 +14,7 @@ scheduler.frameDidFire = function()
 {
     document.body.appendChild(mediaControls.element);
 
-    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "23px");
+    shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.scrubber.element).top", "13px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.elapsedTimeLabel.element).top", "14.5px");
     shouldBeEqualToString("window.getComputedStyle(mediaControls.timeControl.remainingTimeLabel.element).top", "14.5px");
     debug("");
index 3a7e4f3..3744598 100644 (file)
@@ -4,13 +4,12 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 
 PASS volumeSliderContainerStyle.position is "absolute"
-PASS volumeSliderContainerStyle.top is "0px"
-PASS volumeSliderContainerStyle.width is "31px"
-PASS volumeSliderContainerStyle.height is "81px"
-PASS volumeSliderContainerStyle.transform is "matrix(1, 0, 0, 1, 0, -81)"
-PASS volumeSliderStyle.transform is "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)"
-PASS volumeSliderStyle.left is "-15px"
-PASS volumeSliderStyle.top is "40px"
+PASS volumeSliderContainerStyle.bottom is "50px"
+PASS volumeSliderContainerStyle.width is "81px"
+PASS volumeSliderContainerStyle.height is "31px"
+PASS volumeSliderContainerStyle.transform is "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, -25, -25)"
+PASS volumeSliderStyle.left is "11px"
+PASS volumeSliderStyle.top is "10px"
 
 PASS successfullyParsed is true
 
index 5e0b23d..206efd3 100644 (file)
@@ -18,15 +18,14 @@ scheduler.frameDidFire = function()
 
     volumeSliderContainerStyle = window.getComputedStyle(mediaControls.volumeSlider.parent.element);
     shouldBeEqualToString("volumeSliderContainerStyle.position", "absolute");
-    shouldBeEqualToString("volumeSliderContainerStyle.top", "0px");
-    shouldBeEqualToString("volumeSliderContainerStyle.width", "31px");
-    shouldBeEqualToString("volumeSliderContainerStyle.height", "81px");
-    shouldBeEqualToString("volumeSliderContainerStyle.transform", "matrix(1, 0, 0, 1, 0, -81)");
+    shouldBeEqualToString("volumeSliderContainerStyle.bottom", "50px");
+    shouldBeEqualToString("volumeSliderContainerStyle.width", "81px");
+    shouldBeEqualToString("volumeSliderContainerStyle.height", "31px");
+    shouldBeEqualToString("volumeSliderContainerStyle.transform", "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, -25, -25)");
 
     volumeSliderStyle = window.getComputedStyle(mediaControls.volumeSlider.element);
-    shouldBeEqualToString("volumeSliderStyle.transform", "matrix(0.00000000000000006123233995736766, -1, 1, 0.00000000000000006123233995736766, 0, 0)");
-    shouldBeEqualToString("volumeSliderStyle.left", "-15px");
-    shouldBeEqualToString("volumeSliderStyle.top", "40px");
+    shouldBeEqualToString("volumeSliderStyle.left", "11px");
+    shouldBeEqualToString("volumeSliderStyle.top", "10px");
 
     mediaControls.element.remove();
 
index 44323a0..3204f0c 100644 (file)
@@ -3,7 +3,7 @@
     const layoutTestsPath = window.location.href.substr(0, window.location.href.indexOf("/LayoutTests/"));
     const modulePath = layoutTestsPath ? layoutTestsPath + "/Source/WebCore/Modules/modern-media-controls" : "/modern-media-controls";
 
-    ["media-controls", "scrubber", "volume-slider", "slider", "button", "start-button", "icon-button", "airplay-button", "time-label", "status-label", "macos-inline-media-controls", "macos-compact-inline-media-controls", "macos-fullscreen-media-controls", "ios-inline-media-controls", "buttons-container", "placard", "tracks-panel"].forEach(cssFile => {
+    ["media-controls", "background-tint", "volume-slider", "slider", "button", "start-button", "icon-button", "airplay-button", "time-label", "status-label", "controls-bar", "macos-media-controls", "macos-inline-media-controls", "macos-compact-inline-media-controls", "macos-fullscreen-media-controls", "ios-inline-media-controls", "buttons-container", "placard", "tracks-panel"].forEach(cssFile => {
         document.write(`<link rel="stylesheet" type="text/css" href="${modulePath}/controls/${cssFile}.css">`);
     });
 
index 1567323..52a4279 100644 (file)
@@ -1,10 +1,6 @@
-<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>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
 <body>
 <script type="text/javascript">
 
index b1f8bc5..5994b1c 100644 (file)
@@ -6,8 +6,7 @@ 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[0].element.localName is "canvas"
 PASS slider.children[1].element.localName is "input"
 PASS slider.children[1].element.type is "range"
 PASS slider.children[1].element.min is "0"
index ea8b141..0dcde49 100644 (file)
@@ -1,8 +1,6 @@
-<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>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
 <body>
 <script type="text/javascript">
 
@@ -13,15 +11,14 @@ 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[0].element.localName", "canvas");
 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");
+const sliderWithCSSClassName = new Slider({ cssClassName: "foo" });
 shouldBeEqualToString("sliderWithCSSClassName.element.className", "slider foo");
 
 </script>
diff --git a/LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt b/LayoutTests/media/modern-media-controls/slider/slider-fill-expected.txt
deleted file mode 100644 (file)
index d60f4d6..0000000
+++ /dev/null
@@ -1,10 +0,0 @@
-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
-
diff --git a/LayoutTests/media/modern-media-controls/slider/slider-fill.html b/LayoutTests/media/modern-media-controls/slider/slider-fill.html
deleted file mode 100644 (file)
index d6ae944..0000000
+++ /dev/null
@@ -1,26 +0,0 @@
-<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");
-    finishMediaControlsTest();
-}
-
-</script>
-<script src="../../../resources/js-test-post.js"></script>
-</body>
index a0d255c..cb11c26 100644 (file)
@@ -4,31 +4,20 @@ 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 canvasStyle.position is "absolute"
+PASS canvasStyle.top is "0px"
+PASS canvasStyle.left is "0px"
+PASS canvasStyle.width is "200px"
+PASS canvasStyle.height is "25px"
+PASS canvasStyle.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.height is "25px"
 PASS inputStyle.margin is "0px"
+PASS inputStyle.webkitAppearance is "none"
+PASS inputStyle.backgroundColor is "rgba(0, 0, 0, 0)"
 PASS successfullyParsed is true
 
 TEST COMPLETE
index 35603b0..ec48b2b 100644 (file)
@@ -1,9 +1,6 @@
-<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>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
 <body>
 <script type="text/javascript">
 
@@ -13,6 +10,7 @@ window.jsTestIsAsync = true;
 
 const slider = new Slider;
 slider.width = 200;
+slider.height = 25;
 
 let containerStyle, fillStyle, inputStyle;
 scheduler.frameDidFire = function()
@@ -21,29 +19,24 @@ scheduler.frameDidFire = function()
 
     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");
+
+    canvasStyle = window.getComputedStyle(slider.children[0].element);
+    shouldBeEqualToString("canvasStyle.position", "absolute");
+    shouldBeEqualToString("canvasStyle.top", "0px");
+    shouldBeEqualToString("canvasStyle.left", "0px");
+    shouldBeEqualToString("canvasStyle.width", "200px");
+    shouldBeEqualToString("canvasStyle.height", "25px");
+    shouldBeEqualToString("canvasStyle.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.height", "25px");
     shouldBeEqualToString("inputStyle.margin", "0px");
+    shouldBeEqualToString("inputStyle.webkitAppearance", "none");
+    shouldBeEqualToString("inputStyle.backgroundColor", "rgba(0, 0, 0, 0)");
 
     finishMediaControlsTest();
 }
index 56c3b0e..cd6fbb1 100644 (file)
@@ -9,10 +9,6 @@ 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"
index 2369a9c..dcdf366 100644 (file)
@@ -1,10 +1,6 @@
-<link rel="stylesheet" href="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.css" type="text/css" media="screen">
 <script src="../../../resources/js-test-pre.js"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
 <script src="../resources/media-controls-utils.js" type="text/javascript"></script>
-<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
-<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
-<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-item.js" type="text/javascript"></script>
-<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/time-label.js" type="text/javascript"></script>
 <body>
 <script type="text/javascript">
 
@@ -35,7 +31,6 @@ scheduler.frameDidFire = function()
     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();
 
index 00738ad..52fb6bd 100644 (file)
@@ -5,49 +5,47 @@ On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE
 
 PASS tracksPanel.presented is true
 PASS tracksPanel.parent is container
-PASS tracksPanel.children.length is numberOfSections
+PASS tracksPanel.children.length is numberOfSections + 1
 
 Hierarchy for section #0
-PASS tracksPanel.children[0].element.localName is "div"
-PASS tracksPanel.children[0].element.className is "tracks-panel-section"
-PASS tracksPanel.children[0].children.length is 2
-PASS tracksPanel.children[0].children[0].element.localName is "h3"
-PASS tracksPanel.children[0].children[0].element.textContent is "Title #0"
-PASS tracksPanel.children[0].children[1].element.localName is "ul"
-PASS tracksPanel.children[0].children[1].children.length is 3
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.textContent is "Track 0x0"
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.className is "selected"
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.textContent is "Track 0x1"
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[0].children[1].children[trackIndex].element.textContent is "Track 0x2"
-
-Hierarchy for section #1
-PASS tracksPanel.children[1].element.localName is "div"
-PASS tracksPanel.children[1].element.className is "tracks-panel-section"
+PASS tracksPanel.children[1].element.localName is "section"
 PASS tracksPanel.children[1].children.length is 2
 PASS tracksPanel.children[1].children[0].element.localName is "h3"
-PASS tracksPanel.children[1].children[0].element.textContent is "Title #1"
+PASS tracksPanel.children[1].children[0].element.textContent is "Title #0"
 PASS tracksPanel.children[1].children[1].element.localName is "ul"
-PASS tracksPanel.children[1].children[1].children.length is 5
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 1x0"
+PASS tracksPanel.children[1].children[1].children.length is 3
 PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
 PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 1x1"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 1x2"
+PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x0"
 PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
 PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is "selected"
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 1x3"
+PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x1"
 PASS tracksPanel.children[1].children[1].children[trackIndex].element.localName is "li"
 PASS tracksPanel.children[1].children[1].children[trackIndex].element.className is ""
-PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 1x4"
+PASS tracksPanel.children[1].children[1].children[trackIndex].element.textContent is "Track 0x2"
+
+Hierarchy for section #1
+PASS tracksPanel.children[2].element.localName is "section"
+PASS tracksPanel.children[2].children.length is 2
+PASS tracksPanel.children[2].children[0].element.localName is "h3"
+PASS tracksPanel.children[2].children[0].element.textContent is "Title #1"
+PASS tracksPanel.children[2].children[1].element.localName is "ul"
+PASS tracksPanel.children[2].children[1].children.length is 5
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x0"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x1"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x2"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is "selected"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x3"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.localName is "li"
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.className is ""
+PASS tracksPanel.children[2].children[1].children[trackIndex].element.textContent is "Track 1x4"
 
 PASS successfullyParsed is true
 
index ad2bda6..d6ac44c 100644 (file)
@@ -43,23 +43,22 @@ tracksPanel.presentInParent(container);
 
 shouldBeTrue("tracksPanel.presented");
 shouldBe("tracksPanel.parent", "container");
-shouldBe("tracksPanel.children.length", "numberOfSections");
+shouldBe("tracksPanel.children.length", "numberOfSections + 1");
 
 let sectionIndex, trackIndex;
 for (sectionIndex = 0; sectionIndex < numberOfSections; ++sectionIndex) {
     debug("");
     debug(`Hierarchy for section #${sectionIndex}`);
-    shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].element.localName`, "div");
-    shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].element.className`, "tracks-panel-section");
-    shouldBe(`tracksPanel.children[${sectionIndex}].children.length`, "2");
-    shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].children[0].element.localName`, "h3");
-    shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].children[0].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForSection(sectionIndex));
-    shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].children[1].element.localName`, "ul");
-    shouldBe(`tracksPanel.children[${sectionIndex}].children[1].children.length`, `${numberOfTracksInSection[sectionIndex]}`);
+    shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].element.localName`, "section");
+    shouldBe(`tracksPanel.children[${sectionIndex + 1}].children.length`, "2");
+    shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[0].element.localName`, "h3");
+    shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[0].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForSection(sectionIndex));
+    shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].element.localName`, "ul");
+    shouldBe(`tracksPanel.children[${sectionIndex + 1}].children[1].children.length`, `${numberOfTracksInSection[sectionIndex]}`);
     for (trackIndex = 0; trackIndex < numberOfTracksInSection[sectionIndex]; ++trackIndex) {
-        shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].children[1].children[trackIndex].element.localName`, "li");
-        shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].children[1].children[trackIndex].element.className`, selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex) ? "selected" : "");
-        shouldBeEqualToString(`tracksPanel.children[${sectionIndex}].children[1].children[trackIndex].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex));
+        shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.localName`, "li");
+        shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.className`, selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex) ? "selected" : "");
+        shouldBeEqualToString(`tracksPanel.children[${sectionIndex + 1}].children[1].children[trackIndex].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex));
     }
 }
 
index 1f6b47c..03b3a2b 100644 (file)
@@ -33,7 +33,7 @@ function clickOnTracksButton()
 
 function listContentsOfTracksPanel()
 {
-    for (let section of shadowRoot.lastChild.querySelectorAll(".tracks-panel-section")) {
+    for (let section of shadowRoot.lastChild.querySelectorAll("section")) {
         debug(section.querySelector("h3").textContent);
         for (let item of section.querySelectorAll("li"))
             debug("  " + item.textContent);
index 0bde1e8..b6eb464 100644 (file)
@@ -7,26 +7,26 @@ 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
+controlValueDidChange, value = 0.019
+controlValueDidChange, value = 0.024
+controlValueDidChange, value = 0.03
+controlValueDidChange, value = 0.035
+controlValueDidChange, value = 0.041
+controlValueDidChange, value = 0.046
+controlValueDidChange, value = 0.051
+controlValueDidChange, value = 0.057
+controlValueDidChange, value = 0.062
+controlValueDidChange, value = 0.068
+controlValueDidChange, value = 0.073
+controlValueDidChange, value = 0.078
+controlValueDidChange, value = 0.084
+controlValueDidChange, value = 0.089
+controlValueDidChange, value = 0.095
+controlValueDidChange, value = 0.1
+controlValueDidChange, value = 0.105
+controlValueDidChange, value = 0.111
+controlValueDidChange, value = 0.116
+controlValueDidChange, value = 0.122
 controlValueDidStopChanging
 PASS successfullyParsed is true
 
index 32aa316..d2a2591 100644 (file)
@@ -1,10 +1,5 @@
-<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>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
 <body>
 <script type="text/javascript">
 
index 2d11387..261387b 100644 (file)
@@ -1,10 +1,6 @@
-<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>
+<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
+<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
 <body>
 <script type="text/javascript">
 
index befb7ff..cda0e10 100644 (file)
@@ -3,7 +3,7 @@ Testing the VolumeSupport behavior when clicking the volume slider.
 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
 
 
-PASS media.volume is 0.51
+PASS media.volume is 0.5
 PASS successfullyParsed is true
 
 TEST COMPLETE
index d192fea..76bc81d 100644 (file)
@@ -55,7 +55,7 @@ scheduler.frameDidFire = function() {
 mediaController.controls.showsStartButton = false;
 
 media.addEventListener("volumechange", () => {
-    shouldBe("media.volume", "0.51");
+    shouldBe("media.volume", "0.5");
     container.remove();
     media.remove();
     finishJSTest();
index fea48a4..02e928a 100644 (file)
@@ -11,7 +11,7 @@ PASS media.muted is true
 
 We initiated a volume slider drag, the media should no longer be muted and the volume set
 PASS media.muted is false
-PASS media.volume is 0.51
+PASS media.volume is 0.5
 
 We finished dragging to set the volume to 1
 PASS media.volume is 1
index ad4475a..240ae0c 100644 (file)
@@ -62,7 +62,7 @@ scheduler.frameDidFire = function() {
         debug("");
         debug("We initiated a volume slider drag, the media should no longer be muted and the volume set");
         shouldBeFalse("media.muted");
-        shouldBe("media.volume", "0.51");
+        shouldBe("media.volume", "0.5");
 
         for (let i = 1; i <= iterations; ++i)
             eventSender.mouseMoveTo(bounds.left + bounds.width / 2, dragStartY + i * Math.sign(delta));
index 38dcd1f..27df4de 100644 (file)
@@ -1,3 +1,149 @@
+2017-02-13  Antoine Quint  <graouts@apple.com>
+
+        REGRESSION: Update volume and scrubbing slider to match HI designs
+        https://bugs.webkit.org/show_bug.cgi?id=168170
+        <rdar://problem/28095266>
+
+        Reviewed by Dean Jackson.
+
+        We bring the designs of the control's background materials, scrubber and
+        volume slider up to spec.
+
+        The first important set of changes is that, on macOS, the materials and colors
+        were incorrect. Buttons and time labels now set a mix-blend-mode to correctly
+        appear vibrant against the media, and the controls bar, volume container
+        and tracks menu now use a new BackgroundTint node to correctly apply both
+        a backdrop-filter and blended tint above it.
+
+        The second important set of changes is the rendering of the sliders. Up to now
+        we would simply style the <input type="range"> track and thumb, applying solid
+        fills and strokes. We now draw sliders in two ways depending on the platform.
+        
+        On macOS, we draw the whole slider with a <canvas> element with "mix-blend-mode"
+        set to "plus-lighter". On iOS, we draw the track as a <div> with "mix-blend-mode"
+        set to "plus-darker" and draw the fill (up to the thumb) in the <canvas> with
+        no blend mode to obtain a pure white color, finally the thumb is rendered by the
+        <input> element. We couldn't draw the pure white color with the track in the
+        same <canvas> due to the "plus-darker" blend mode.
+
+        Test: media/modern-media-controls/background-tint/background-tint.html
+
+        * Modules/modern-media-controls/controls/airplay-button.css:
+        (button.airplay.on):
+        * Modules/modern-media-controls/controls/background-tint.css: Added.
+        (.background-tint):
+        (.background-tint,):
+        (.background-tint > .blur):
+        (.background-tint > .tint):
+        * Modules/modern-media-controls/controls/background-tint.js: Added.
+        (BackgroundTint):
+        * Modules/modern-media-controls/controls/ios-inline-media-controls.css:
+        (.media-controls.ios.inline .scrubber.slider):
+        (.media-controls.ios.inline .scrubber.slider > div):
+        (.media-controls.ios.inline .scrubber.slider > input::-webkit-slider-thumb):
+        (.media-controls.ios.inline .scrubber.slider > .fill): Deleted.
+        * Modules/modern-media-controls/controls/macos-compact-inline-media-controls.css:
+        (.media-controls.mac.inline.compact .volume-slider-container):
+        (.media-controls.mac.inline.compact .volume.slider):
+        (.media-controls.mac.inline.compact .scrubber.slider > input::-webkit-slider-thumb): Deleted.
+        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.css:
+        (.media-controls.mac.fullscreen > .controls-bar):
+        (.media-controls.mac.fullscreen > .controls-bar > .background-tint > div):
+        (.media-controls.mac.fullscreen .volume.slider):
+        (.media-controls.mac.fullscreen button.volume-up):
+        (.media-controls.mac.fullscreen button.rewind):
+        (.media-controls.mac.fullscreen button.forward):
+        (.media-controls.mac.fullscreen .buttons-container.right button):
+        (.media-controls.mac.fullscreen .scrubber):
+        (.media-controls.mac.fullscreen > .controls-bar button): Deleted.
+        (.media-controls.mac.fullscreen button.airplay): Deleted.
+        (.media-controls.mac.fullscreen button.aspect-ratio): Deleted.
+        (.media-controls.mac.fullscreen button.pip): Deleted.
+        (.media-controls.mac.fullscreen button.tracks): Deleted.
+        (.media-controls.mac.fullscreen button.fullscreen): Deleted.
+        * Modules/modern-media-controls/controls/macos-fullscreen-media-controls.js:
+        * Modules/modern-media-controls/controls/macos-inline-media-controls.css:
+        (.media-controls.mac.inline .scrubber.slider):
+        (.media-controls.mac.inline .volume-slider-container):
+        (.media-controls.mac.inline .volume-slider-container > .background-tint):
+        (.media-controls.mac.inline .volume-slider-container > .background-tint > div):
+        (.media-controls.mac.inline .volume.slider):
+        (.media-controls.mac.inline button): Deleted.
+        (.media-controls.mac.inline button:active): Deleted.
+        (.media-controls.mac.inline > .controls-bar button): Deleted.
+        (.media-controls.mac.inline > .controls-bar,): Deleted.
+        (.media-controls.mac.inline .volume-slider-container:before): Deleted.
+        * Modules/modern-media-controls/controls/macos-inline-media-controls.js:
+        (MacOSInlineMediaControls.prototype.layout):
+        * Modules/modern-media-controls/controls/macos-media-controls.css: Added.
+        (.media-controls.mac button:active):
+        (.media-controls.mac > .controls-bar button):
+        (.media-controls.mac > .controls-bar .time-label):
+        (.media-controls.mac > .controls-bar .slider > canvas):
+        (.media-controls.mac > .controls-bar .slider > input::-webkit-slider-thumb):
+        * Modules/modern-media-controls/controls/scrubber.css: Removed.
+        * Modules/modern-media-controls/controls/scrubber.js:
+        (Scrubber):
+        (Scrubber.prototype.get buffered):
+        (Scrubber.prototype.set buffered):
+        (Scrubber.prototype.draw):
+        (Scrubber.prototype._drawMacOS):
+        (Scrubber.prototype._drawiOS):
+        * Modules/modern-media-controls/controls/slider.css:
+        (.slider):
+        (.slider > canvas,):
+        (.slider > canvas):
+        (.slider > input):
+        (.slider > input,): Deleted.
+        (.slider > .fill): Deleted.
+        (.slider > input::-webkit-slider-thumb): Deleted.
+        * Modules/modern-media-controls/controls/slider.js:
+        (Slider.prototype.set value):
+        (Slider.prototype.set width):
+        (Slider.prototype.commitProperty):
+        (Slider.prototype.layout):
+        (Slider.prototype.draw):
+        (Slider.prototype._handleInputEvent):
+        (Slider.prototype._handleChangeEvent):
+        (addRoundedRect):
+        (Slider.prototype._updateFill): Deleted.
+        * Modules/modern-media-controls/controls/start-button.css:
+        (button.start):
+        * Modules/modern-media-controls/controls/time-control.js:
+        * Modules/modern-media-controls/controls/time-label.css:
+        (.time-label):
+        * Modules/modern-media-controls/controls/tracks-panel.css:
+        (.tracks-panel):
+        (.tracks-panel > .background-tint > div):
+        (.tracks-panel > section):
+        (.tracks-panel > section:first-of-type):
+        (.tracks-panel > section > h3):
+        (.tracks-panel > section > ul):
+        (.tracks-panel > section > ul > li):
+        (.tracks-panel > section > ul > li:focus):
+        (.tracks-panel > section > ul > li.selected:before):
+        (.tracks-panel > section > ul > li.animated):
+        (.tracks-panel-section): Deleted.
+        (.tracks-panel-section:first-of-type): Deleted.
+        (.tracks-panel-section > h3): Deleted.
+        (.tracks-panel-section > ul): Deleted.
+        (.tracks-panel-section > ul > li): Deleted.
+        (.tracks-panel-section > ul > li:focus): Deleted.
+        (.tracks-panel-section > ul > li.selected:before): Deleted.
+        (.tracks-panel-section > ul > li.animated): Deleted.
+        * Modules/modern-media-controls/controls/tracks-panel.js:
+        (TracksPanel.prototype._childrenFromDataSource):
+        (TracksPanel.prototype._childrenFromDataSource.): Deleted.
+        * Modules/modern-media-controls/controls/volume-slider.js:
+        (VolumeSlider):
+        (VolumeSlider.prototype.handleEvent):
+        (VolumeSlider.prototype.draw):
+        * Modules/modern-media-controls/js-files:
+        * Modules/modern-media-controls/media/scrubbing-support.js:
+        (ScrubbingSupport.prototype.get mediaEvents):
+        (ScrubbingSupport.prototype.syncControl):
+        (ScrubbingSupport):
+
 2017-02-13  Alex Christensen  <achristensen@webkit.org>
 
         URLs with an invalid IPv4 address should be invalid
index 8653a3f..3856c8d 100644 (file)
@@ -25,4 +25,5 @@
 
 button.airplay.on {
     background-color: -apple-wireless-playback-target-active !important;
+    mix-blend-mode: normal !important;
 }
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/background-tint.css b/Source/WebCore/Modules/modern-media-controls/controls/background-tint.css
new file mode 100644 (file)
index 0000000..7de9804
--- /dev/null
@@ -0,0 +1,48 @@
+/*
+ * Copyright (C) 2017 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.
+ */
+
+.background-tint {
+    pointer-events: none;
+}
+
+.background-tint,
+.background-tint > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.background-tint > .blur {
+    /* FIXME: we want to use the real System Dark treatment here, see <rdar://problem/19993961> */
+    background-color: rgba(30, 30, 30, 0.45);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+}
+
+.background-tint > .tint {
+    background-color: rgb(41, 41, 41);
+    mix-blend-mode: lighten;
+}
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2016 Apple Inc. All Rights Reserved.
+ * Copyright (C) 2017 Apple Inc. All Rights Reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * 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;
+class BackgroundTint extends LayoutNode
+{
+
+    constructor()
+    {
+        super(`<div class="background-tint"><div class="blur"></div><div class="tint"></div></div>`);
+    }
+
 }
index 0ed732b..ba683a9 100644 (file)
     -webkit-mask-position-y: 10px;
 }
 
-.media-controls.ios.inline .scrubber.slider {
-    top: 23px;
-}
-
 .media-controls.ios.inline button.airplay {
     -webkit-mask-position-y: 13px;
 }
 /* Scrubber */
 
 .media-controls.ios.inline .scrubber.slider {
-    background-color: black;
+    top: 13px;
 }
 
-.media-controls.ios.inline .scrubber.slider > .fill {
-    background-color: white;
+.media-controls.ios.inline .scrubber.slider > div {
+    position: absolute;
+    top: 10px;
+    left: 2px;
+    right: 2px;
+    height: 3px;
+    border-radius: 1.5px;
+    background-color: rgba(0, 0, 0, 0.55);
+    mix-blend-mode: plus-darker;
 }
 
 .media-controls.ios.inline .scrubber.slider > input::-webkit-slider-thumb {
     background-color: transparent;
     box-shadow: none;
     border: none;
+    -webkit-appearance: none !important;
 }
-
-
-
index aca1609..456d789 100644 (file)
 /* Volume slider */
 
 .media-controls.mac.inline.compact .volume-slider-container {
-    width: 21px;
-    transform: translateY(-100%) translateX(-2px);
+    height: 21px;
+    transform: rotate(-90deg) translate(5px, -33px);
 }
 
 .media-controls.mac.inline.compact .volume.slider {
-    left: -19.5px;
-}
-
-/* Scrubber */
-
-.media-controls.mac.inline.compact .scrubber.slider > input::-webkit-slider-thumb {
-    height: 15px;
+    top: 5px;
 }
index dcfd264..2d7c976 100644 (file)
     width: var(--controls-bar-width);
     height: 75px;
     overflow: hidden;
-    border-radius: 8px;
+}
 
-    /* FIXME: we want to use the real System Dark treatment here, see <rdar://problem/19993961> */
-    background-color: rgba(30, 30, 30, 0.45);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
+.media-controls.mac.fullscreen > .controls-bar > .background-tint > div {
+    border-radius: 8px;
 }
 
 /* Volume slider */
 
 .media-controls.mac.fullscreen .volume.slider {
     left: 31px;
-    top: 23px;
+    top: 19px;
 }
 
 .media-controls.mac.fullscreen:not(.uses-ltr-user-interface-layout-direction) .volume.slider {
@@ -62,7 +61,7 @@
 }
 
 .media-controls.mac.fullscreen button.volume-up {
-    -webkit-mask-position-y: 18px;
+    -webkit-mask-position-y: 17px;
 }
 
 /* Button containers */
     transform: translateX(-50%);
 }
 
-/* Buttons */
-
-.media-controls.mac.fullscreen > .controls-bar button {
-    height: 100% !important;
-}
-
 /* Buttons placement for center container */
 
 .media-controls.mac.fullscreen button.rewind {
-    -webkit-mask-position-y: 16px;
+    -webkit-mask-position-y: 17px;
 }
 
 .media-controls.mac.fullscreen button.play-pause {
@@ -94,7 +87,7 @@
 }
 
 .media-controls.mac.fullscreen button.forward {
-    -webkit-mask-position-y: 16px;
+    -webkit-mask-position-y: 17px;
 }
 
 /* Make right container flush to the right */
 
 /* Buttons placement for right container */
 
-.media-controls.mac.fullscreen button.airplay {
-    -webkit-mask-position-y: 13px;
-}
-
-.media-controls.mac.fullscreen button.aspect-ratio {
-    -webkit-mask-position-y: 13px;
-}
-
-.media-controls.mac.fullscreen button.pip {
-    -webkit-mask-position-y: 13px;
-}
-
-.media-controls.mac.fullscreen button.tracks {
-    -webkit-mask-position-y: 15px;
-}
-
-.media-controls.mac.fullscreen button.fullscreen {
-    -webkit-mask-position-y: 13px;
+.media-controls.mac.fullscreen .buttons-container.right button {
+    -webkit-mask-position-y: 18px;
 }
 
 /* Scrubber */
 }
 
 .media-controls.mac.fullscreen .scrubber {
-    top: 7px;
+    top: -3px;
 }
index c82e342..1d6f31c 100644 (file)
@@ -71,7 +71,7 @@ class MacOSFullscreenMediaControls extends MacOSMediaControls
             rightMargin: 12
         });
 
-        this.controlsBar.children = [this._leftContainer, this._centerContainer, this._rightContainer, this.timeControl];
+        this.controlsBar.children = [new BackgroundTint, this._leftContainer, this._centerContainer, this._rightContainer, this.timeControl];
 
         this.element.addEventListener("mousedown", this);
     }
index a676ae7..1c5892d 100644 (file)
     position: absolute;
 }
 
-.media-controls.mac.inline button {
-    background-color: rgba(255, 255, 255, 0.572);
-}
-
-.media-controls.mac.inline button:active {
-    background-color: white;
-}
-
-.media-controls.mac.inline > .controls-bar button {
-    height: 100% !important;
-}
-
-/* Blurred backgrounds */
-
-.media-controls.mac.inline > .controls-bar,
-.media-controls.mac.inline .volume-slider-container:before {
-    /* FIXME: we want to use the real System Dark treatment here, see <rdar://problem/19993961> */
-    background-color: rgba(30, 30, 30, 0.45);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
-}
+/* Start button blur */
 
 .media-controls.mac.inline > button.start > div {
     -webkit-backdrop-filter: saturate(180%) blur(20px);
@@ -72,7 +53,7 @@
 }
 
 .media-controls.mac.inline .scrubber.slider {
-    top: 23px;
+    top: 13px;
 }
 
 .media-controls.mac.inline button.mute {
 .media-controls.mac.inline .volume-slider-container {
     position: absolute;
 
-    top: 0px;
-    width: 31px;
-    height: 81px;
-    transform: translateY(-100%);
+    bottom: 50px;
+    width: 81px;
+    height: 31px;
+    transform: rotate(-90deg) translate(25px, -25px);
 }
 
-.media-controls.mac.inline .volume-slider-container:before {
-    content: "";
-
-    position: absolute;
+.media-controls.mac.inline .volume-slider-container > .background-tint {
     top: 0;
-    left: 0;
+    left: 1px;
     right: 0;
-    bottom: 1px;
+    bottom: 0px;
+    width: auto;
+}
 
-    border-radius: 4px 4px 0 0;
+.media-controls.mac.inline .volume-slider-container > .background-tint > div {
+    border-radius: 0 4px 4px 0;
 }
 
 .media-controls.mac.inline .volume.slider {
-    transform: rotate(-90deg);
-    left: -15px;
-    top: 40px;
+    left: 11px;
+    top: 10px;
 }
 
 /* Tracks Panel */
index 6f02106..a79b81c 100644 (file)
@@ -43,8 +43,10 @@ class MacOSInlineMediaControls extends MacOSMediaControls
 
         this._matchLayoutTraits();
 
+        this._backgroundTint = new BackgroundTint;
+
         this._volumeSliderContainer = new LayoutNode(`<div class="volume-slider-container"></div>`);
-        this._volumeSliderContainer.children = [this.volumeSlider];
+        this._volumeSliderContainer.children = [new BackgroundTint, this.volumeSlider];
         this._volumeSliderContainer.visible = false;
         this.volumeSlider.width = 60;
 
@@ -53,7 +55,7 @@ class MacOSInlineMediaControls extends MacOSMediaControls
         this.muteButton.element.addEventListener("mouseleave", this);
         this._volumeSliderContainer.element.addEventListener("mouseleave", this);
 
-        this.controlsBar.children = [this.leftContainer, this.rightContainer, this._volumeSliderContainer];
+        this.controlsBar.children = [this._backgroundTint, this.leftContainer, this.rightContainer, this._volumeSliderContainer];
     }
 
     // Public
@@ -86,7 +88,7 @@ class MacOSInlineMediaControls extends MacOSMediaControls
         this.rightContainer.layout();
 
         const middleContainer = !!this.statusLabel.text ? this.statusLabel : this.timeControl;
-        this.controlsBar.children = [this.leftContainer, middleContainer, this.rightContainer, this._volumeSliderContainer];
+        this.controlsBar.children = [this._backgroundTint, this.leftContainer, middleContainer, this.rightContainer, this._volumeSliderContainer];
 
         if (middleContainer === this.timeControl)
             this.timeControl.width = this.width - this.leftContainer.width - this.rightContainer.width;
diff --git a/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css b/Source/WebCore/Modules/modern-media-controls/controls/macos-media-controls.css
new file mode 100644 (file)
index 0000000..bb16d9f
--- /dev/null
@@ -0,0 +1,51 @@
+/*
+ * Copyright (C) 2017 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.
+ */
+
+/* Buttons in controls bar */
+
+.media-controls.mac button:active {
+    background-color: white;
+}
+
+.media-controls.mac > .controls-bar button {
+    height: 100% !important;
+    background-color: rgba(255, 255, 255, 0.45);
+    mix-blend-mode: plus-lighter;
+}
+
+.media-controls.mac > .controls-bar .time-label {
+    color: rgba(255, 255, 255, 0.45);
+    mix-blend-mode: plus-lighter;
+}
+
+.media-controls.mac > .controls-bar .slider > canvas {
+    mix-blend-mode: plus-lighter;
+}
+
+.media-controls.mac > .controls-bar .slider > input::-webkit-slider-thumb {
+    width: 3px !important;
+    height: 100% !important;
+    -webkit-appearance: none !important;
+}
index 133dd5a..4993996 100644 (file)
 class Scrubber extends Slider
 {
 
-    constructor()
+    constructor(layoutDelegate)
     {
-        super("scrubber");
+        super({
+            cssClassName: "scrubber",
+            layoutDelegate
+        });
+
+         this.height = 23;
+
+        // Add the element used to draw the track on iOS.
+        if (this.layoutTraits & LayoutTraits.iOS)
+            this.addChild(new LayoutNode(`<div></div>`), 0);
+
+        this._buffered = 0;
+    }
+
+    // Public
+
+    get buffered()
+    {
+        return this._buffered;
+    }
+
+    set buffered(buffered)
+    {
+        if (this._buffered === buffered)
+            return;
+
+        this._buffered = buffered;
+        this.needsLayout = true;
+    }
+
+    // Protected
+
+    draw(ctx)
+    {
+        const width = this.width;
+        const height = this.height;
+
+        if (!this.width || !this.height)
+            return;
+
+        const dpr = window.devicePixelRatio;
+
+        ctx.save();
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, width, height);
+
+        const layoutTraits = this.layoutTraits;
+        if (layoutTraits & LayoutTraits.macOS)
+            this._drawMacOS(ctx, width, height);
+        else if (layoutTraits & LayoutTraits.iOS)
+            this._drawiOS(ctx, width, height);
+
+        ctx.restore();
+    }
+
+    _drawMacOS(ctx, width, height)
+    {
+        const trackHeight = 3;
+        const trackY = (height - trackHeight) / 2;
+        const scrubberWidth = 4;
+        const scrubberHeight = height;
+        const borderSize = 2;
+        const scrubberPosition = Math.max(0, Math.min(width - scrubberWidth, Math.round(width * this.value)));
+
+        // Draw background.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, trackY, width, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(20, 20, 20)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        // Buffered.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, trackY, width, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(39, 39, 39)";
+        ctx.fillRect(0, 0, width * this._buffered, height);
+        ctx.restore();
+
+        // Draw played section.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, trackY, width, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(84, 84, 84)";
+        ctx.fillRect(0, 0, width * this.value, height);
+        ctx.restore();
+
+        // Draw the scrubber.
+        ctx.save();
+        ctx.clearRect(scrubberPosition - 1, 0, scrubberWidth + borderSize, height, 0);
+        ctx.beginPath();
+        addRoundedRect(ctx, scrubberPosition, 0, scrubberWidth, scrubberHeight, 1);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(138, 138, 138)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+    }
+
+    _drawiOS(ctx, width, height)
+    {
+        const trackHeight = 3;
+        const trackY = (height - trackHeight) / 2;
+        const scrubberWidth = 15;
+        const leftPadding = 2;
+        const rightPadding = 2;
+        const trackWidth = this.width - leftPadding - rightPadding - scrubberWidth;
+
+        // Draw played section.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, leftPadding, trackY, scrubberWidth / 2 + trackWidth * this.value, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.fillStyle = "white";
+        ctx.fill();
+        ctx.restore();
     }
 
 }
index 7f14fc2..cb5ab15 100644 (file)
 
 .slider {
     position: absolute;
-    height: 3px;
-    background-color: rgba(255, 255, 255, 0.185);
-    border-radius: 1.5px;
 }
 
-.slider > input,
-.slider > .fill {
+.slider > canvas,
+.slider > input {
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
     height: 100%;
 }
 
-.slider > .fill {
-    border-radius: 1.5px 0 0 1.5px;
-    background-color: rgba(255, 255, 255, 0.255);
+.slider > canvas {
     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 {
+    background-color: transparent;
     -webkit-appearance: none !important;
-    background-color: rgb(179, 179, 179);
-    box-shadow: 0px 0px 0px 1px rgb(40, 40, 40);
 }
index 82ee178..c32d662 100644 (file)
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-class Slider extends LayoutNode
+class Slider extends LayoutItem
 {
 
-    constructor(cssClassName = "")
+    constructor({ layoutDelegate = null, cssClassName = "" } = {})
     {
-        super(`<div class="slider ${cssClassName}"></div>`);
+        super({
+            element: `<div class="slider ${cssClassName}"></div>`,
+            layoutDelegate
+        });
 
-        this._fill = new LayoutNode(`<div class="fill"></div>`);
+        this._canvas = new LayoutNode(`<canvas></canvas>`);
 
         this._input = new LayoutNode(`<input type="range" min="0" max="1" step="0.001" />`);
         this._input.element.addEventListener("change", this);
@@ -38,7 +41,7 @@ class Slider extends LayoutNode
 
         this.value = 0;
 
-        this.children = [this._fill, this._input];
+        this.children = [this._canvas, this._input];
     }
 
     // Public
@@ -57,7 +60,7 @@ class Slider extends LayoutNode
 
         this._value = value;
         this.markDirtyProperty("value");
-        this._updateFill();
+        this.needsLayout = true;
     }
 
     get width()
@@ -68,7 +71,7 @@ class Slider extends LayoutNode
     set width(width)
     {
         super.width = width;
-        this._updateFill();
+        this.needsLayout = true;
     }
 
     // Protected
@@ -87,11 +90,30 @@ class Slider extends LayoutNode
 
     commitProperty(propertyName)
     {
-        if (propertyName === "value") {
+        switch (propertyName) {
+        case "value":
             this._input.element.value = this._value;
             delete this._value;
-        } else
+            break;
+        case "width":
+            this._canvas.element.width = this.width * window.devicePixelRatio;
+        case "height":
+            this._canvas.element.height = this.height * window.devicePixelRatio;
+        default :
             super.commitProperty(propertyName);
+            break;
+        }
+    }
+
+    layout()
+    {
+        super.layout();
+        this.draw(this._canvas.element.getContext("2d"));
+    }
+
+    draw(ctx)
+    {
+        // Implemented by subclasses.
     }
 
     // Private
@@ -104,7 +126,7 @@ class Slider extends LayoutNode
         if (this.uiDelegate && typeof this.uiDelegate.controlValueDidChange === "function")
             this.uiDelegate.controlValueDidChange(this);
 
-        this._updateFill();
+        this.needsLayout = true;
     }
 
     _handleChangeEvent()
@@ -113,12 +135,18 @@ class Slider extends LayoutNode
         if (this.uiDelegate && typeof this.uiDelegate.controlValueDidStopChanging === "function")
             this.uiDelegate.controlValueDidStopChanging(this);
 
-        this._updateFill();
+        this.needsLayout = true;
     }
 
-    _updateFill()
-    {
-        this._fill.width = Math.ceil(this.value * this.width);
-    }
+}
 
+function addRoundedRect(ctx, x, y, width, height, radius) {
+    ctx.moveTo(x + radius, y);
+    ctx.arcTo(x + width, y, x + width, y + radius, radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+    ctx.lineTo(x + radius, y + height);
+    ctx.arcTo(x, y + height, x, y + height - radius, radius);
+    ctx.lineTo(x, y + radius);
+    ctx.arcTo(x, y, x + radius, y, radius);
 }
index 1d4ad1d..82e172d 100644 (file)
@@ -30,7 +30,7 @@ button.start {
     width: 70px;
     height: 70px;
 
-    background: transparent !important;
+    background-color: transparent !important;
 
     transform: translate3d(-50%, -50%, 0);
 }
index dce988a..8a78ccd 100644 (file)
@@ -33,14 +33,15 @@ const ScrubberMargin = 5;
 class TimeControl extends LayoutItem
 {
 
-    constructor()
+    constructor(layoutDelegate)
     {
         super({
-            element: `<div class="time-control"></div>`
+            element: `<div class="time-control"></div>`,
+            layoutDelegate
         });
 
         this.elapsedTimeLabel = new TimeLabel;
-        this.scrubber = new Scrubber;
+        this.scrubber = new Scrubber(layoutDelegate);
         this.remainingTimeLabel = new TimeLabel;
 
         this.children = [this.elapsedTimeLabel, this.scrubber, this.remainingTimeLabel];
index 8e7ef00..76d2e91 100644 (file)
@@ -29,6 +29,5 @@
     font-family: -apple-system-monospaced-numbers;
     font-size: 14px;
 
-    color: rgba(255, 255, 255, 0.572);
     text-align: right;
 }
index fbac078..b071748 100644 (file)
 .tracks-panel {
     position: absolute;
     display: inline-block;
+}
+
+.tracks-panel > .background-tint > div {
     border-radius: 7px;
-    /* FIXME: we want to use the real System Dark treatment here, see <rdar://problem/19993961> */
-    background-color: rgba(30, 30, 30, 0.45);
-    -webkit-backdrop-filter: saturate(180%) blur(20px);
 }
 
 .tracks-panel * {
     opacity: 0;
 }
 
-.tracks-panel-section {
+.tracks-panel > section {
     border-top: 2px solid rgb(104, 104, 104);
+    will-change: transform;
 }
 
-.tracks-panel-section:first-of-type {
+.tracks-panel > section:first-of-type {
     border-top: 0;
 }
 
-.tracks-panel-section > h3 {
+.tracks-panel > section > h3 {
     color: rgb(150, 150, 150);
     padding: 5px 20px 1px 21px;
     margin: 0;
 }
 
-.tracks-panel-section > ul {
+.tracks-panel > section > ul {
     list-style-type: none;
     margin-top: 0;
     padding: 0;
 }
 
-.tracks-panel-section > ul > li {
+.tracks-panel > section > ul > li {
     position: relative;
     padding: 1px 20px 1px 33px;
     color: white;
 }
 
-.tracks-panel-section > ul > li:focus {
+.tracks-panel > section > ul > li:focus {
     background-color: rgba(26, 68, 243, 0.6);
     -webkit-backdrop-filter: saturate(180%) blur(20px);
     outline: none;
 }
 
-.tracks-panel-section > ul > li.selected:before {
+.tracks-panel > section > ul > li.selected:before {
     position: absolute;
     top: 3px;
     left: 12px;
@@ -84,7 +85,7 @@
     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
 }
 
-.tracks-panel-section > ul > li.animated {
+.tracks-panel > section > ul > li.animated {
     animation-name: tracks-panel-item-selection;
     animation-duration: 150ms;
     animation-timing-function: step-end;
index 146c6c1..4a69bb6 100644 (file)
@@ -5,6 +5,7 @@ class TracksPanel extends LayoutNode
     constructor()
     {
         super(`<div class="tracks-panel"></div>`);
+        this._backgroundTint = new BackgroundTint;
         this._rightX = 0;
         this._bottomY = 0;
     }
@@ -132,7 +133,7 @@ class TracksPanel extends LayoutNode
 
     _childrenFromDataSource()
     {
-        const children = [];
+        const children = [this._backgroundTint];
 
         this._trackNodes = [];
 
@@ -145,7 +146,7 @@ class TracksPanel extends LayoutNode
             return children;
 
         for (let sectionIndex = 0; sectionIndex < numberOfSections; ++sectionIndex) {
-            let sectionNode = new LayoutNode(`<div class="tracks-panel-section"></div>`);
+            let sectionNode = new LayoutNode(`<section></section>`);
             sectionNode.addChild(new LayoutNode(`<h3>${dataSource.tracksPanelTitleForSection(sectionIndex)}</h3>`));
 
             let tracksListNode = sectionNode.addChild(new LayoutNode(`<ul></ul>`));
index 91ebe4e..993eb16 100644 (file)
 class VolumeSlider extends Slider
 {
 
-    constructor()
+    constructor(layoutDelegate)
     {
-        super("volume");
+        super({
+            cssClassName: "volume",
+            layoutDelegate
+        });
+
+        this.height = 11;
         this.enabled = true;
+
+        this._active = false;
+        this.element.addEventListener("mousedown", this);
     }
 
+    // Protected
+
+    handleEvent(event)
+    {
+        super.handleEvent(event);
+
+        if (event instanceof MouseEvent) {
+            this._active = event.type === "mousedown";
+            if (event.type === "mousedown")
+                window.addEventListener("mouseup", this, true);
+            else
+                window.removeEventListener("mouseup", this, true);
+        }
+    }
+
+    draw(ctx)
+    {
+        const width = this.width;
+        const height = this.height;
+
+        if (!this.width || !this.height)
+            return;
+
+        const dpr = window.devicePixelRatio;
+
+        ctx.save();
+        ctx.scale(dpr, dpr);
+        ctx.clearRect(0, 0, width, height);
+
+        const trackHeight = 3;
+        const knobRadius = 5.5;
+        const knobDiameter = 2 * knobRadius;
+        const borderSize = 2;
+        const knobX = Math.round(this.value * (width - knobDiameter - borderSize));
+
+        // Draw portion of volume under slider thumb.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, 0, 4, knobX + 2, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(84, 84, 84)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        // Draw portion of volume above slider thumb.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, knobX, 4, width - knobX, trackHeight, trackHeight / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = "rgb(39, 39, 39)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        // Clear a hole in the slider for the scrubber.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, knobX, 0, knobDiameter + borderSize, height, (knobDiameter + borderSize) / 2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.clearRect(0, 0, width, height);
+        ctx.restore();
+
+        // Draw scrubber.
+        ctx.save();
+        ctx.beginPath();
+        addRoundedRect(ctx, knobX + 1, 0, knobDiameter, knobDiameter, knobRadius);
+        ctx.closePath();
+        ctx.clip();
+        ctx.fillStyle = this._active ? "white" : "rgb(138, 138, 138)";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+
+        ctx.restore();
+    }    
+
 }
index c136250..b5ca1ee 100644 (file)
@@ -5,6 +5,7 @@ controls/scheduler.js
 controls/layout-node.js
 controls/layout-item.js
 controls/icon-service.js
+controls/background-tint.js
 controls/time-control.js
 controls/time-label.js
 controls/slider.js
index f5039fc..3d9bcd6 100644 (file)
@@ -35,7 +35,7 @@ class ScrubbingSupport extends MediaControllerSupport
 
     get mediaEvents()
     {
-        return ["timeupdate"];
+        return ["timeupdate", "progress"];
     }
 
     controlValueWillStartChanging(control)
@@ -68,6 +68,11 @@ class ScrubbingSupport extends MediaControllerSupport
         if (isNaN(media.duration))
             return;
 
+        let buffered = 0;
+        for (let i = 0, count = media.buffered.length; i < count; ++i)
+            buffered = Math.max(media.buffered.end(i), buffered);
+
+        this.control.buffered = buffered / media.duration;
         this.control.value = media.currentTime / media.duration;
     }