Diff
Modified: trunk/LayoutTests/ChangeLog (212942 => 212943)
--- trunk/LayoutTests/ChangeLog 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/ChangeLog 2017-02-24 06:40:29 UTC (rev 212943)
@@ -1,5 +1,32 @@
2017-02-23 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Controls overflow when media element has border or padding
+ https://bugs.webkit.org/show_bug.cgi?id=168818
+ <rdar://problem/30689780>
+
+ Reviewed by Jon Lee.
+
+ Updating a host of tests to ensure they have an explicitly host and add a new test
+ to check that we have the correct size with borders and padding.
+
+ * media/modern-media-controls/fullscreen-support/fullscreen-support-click.html:
+ * media/modern-media-controls/media-controller/media-controller-compact-expected.txt:
+ * media/modern-media-controls/media-controller/media-controller-compact.html:
+ * media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding-expected.txt: Added.
+ * media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding.html: Added.
+ * media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt:
+ * media/modern-media-controls/media-controller/media-controller-reduced-padding.html:
+ * media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt:
+ * media/modern-media-controls/media-controller/media-controller-tight-padding.html:
+ * media/modern-media-controls/pip-support/pip-support-click.html:
+ * media/modern-media-controls/scrubber-support/scrubber-support-click.html:
+ * media/modern-media-controls/scrubber-support/scrubber-support-drag.html:
+ * media/modern-media-controls/volume-support/volume-support-click.html:
+ * media/modern-media-controls/volume-support/volume-support-drag.html:
+ * media/track/track-cue-rendering-snap-to-lines-not-set.html: Turn modern media controls off for this test to pass.
+
+2017-02-23 Antoine Quint <grao...@apple.com>
+
[Modern Media Controls] Dragging controls in fullscreen on macOS prevents scrubbing or interacting with controls
https://bugs.webkit.org/show_bug.cgi?id=168820
<rdar://problem/30690281>
Modified: trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/fullscreen-support/fullscreen-support-click.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -8,9 +8,6 @@
position: absolute;
top: 0;
left: 0;
- }
-
- video {
width: 800px;
height: 240px;
}
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact-expected.txt 2017-02-24 06:40:29 UTC (rev 212943)
@@ -8,4 +8,3 @@
TEST COMPLETE
-
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-compact.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -1,7 +1,18 @@
<script src=""
<script src="" type="text/_javascript_"></script>
+<style type="text/css" media="screen">
+
+ video, #shadow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 240px;
+ height: 180px;
+ }
+
+</style>
<body>
-<video src="" style="width: 240px;" controls autoplay></video>
+<video src="" controls autoplay></video>
<div id="shadow"></div>
<script type="text/_javascript_">
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding-expected.txt (0 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding-expected.txt 2017-02-24 06:40:29 UTC (rev 212943)
@@ -0,0 +1,11 @@
+Testing media controls are sized correctly when borders and padding are set on the media element.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS mediaControls.style.width became "320px"
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding.html (0 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -0,0 +1,21 @@
+<script src=""
+<body>
+<video src="" style="background-color: blue; border: 50px solid red; padding: 100px; width: 320px;" controls></video>
+<script type="text/_javascript_">
+
+window.jsTestIsAsync = true;
+
+description("Testing media controls are sized correctly when borders and padding are set on the media element.");
+
+const media = document.querySelector("video");
+const mediaControls = window.internals.shadowRoot(media).lastElementChild.lastElementChild;
+
+shouldBecomeEqualToString("mediaControls.style.width", "320px", () => {
+ debug("");
+ media.remove();
+ finishJSTest();
+});
+
+</script>
+<script src=""
+</body>
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding-expected.txt 2017-02-24 06:40:29 UTC (rev 212943)
@@ -8,4 +8,3 @@
TEST COMPLETE
-
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-reduced-padding.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -1,7 +1,18 @@
<script src=""
<script src="" type="text/_javascript_"></script>
+<style type="text/css" media="screen">
+
+ video, #shadow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 300px;
+ height: 225px;
+ }
+
+</style>
<body>
-<video src="" style="width: 300px;" controls autoplay></video>
+<video src="" controls autoplay></video>
<div id="shadow"></div>
<script type="text/_javascript_">
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding-expected.txt 2017-02-24 06:40:29 UTC (rev 212943)
@@ -8,4 +8,3 @@
TEST COMPLETE
-
Modified: trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/media-controller/media-controller-tight-padding.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -1,7 +1,18 @@
<script src=""
<script src="" type="text/_javascript_"></script>
+<style type="text/css" media="screen">
+
+ audio, #shadow {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 400px;
+ height: 300px;
+ }
+
+</style>
<body>
-<audio src="" style="width: 400px;" controls autoplay></audio>
+<audio src="" controls autoplay></audio>
<div id="shadow"></div>
<script type="text/_javascript_">
Modified: trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/pip-support/pip-support-click.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -8,9 +8,6 @@
position: absolute;
top: 0;
left: 0;
- }
-
- video {
width: 800px;
height: 240px;
}
Modified: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-click.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -8,9 +8,6 @@
position: absolute;
top: 0;
left: 0;
- }
-
- video {
width: 800px;
height: 240px;
}
Modified: trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/scrubber-support/scrubber-support-drag.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -7,9 +7,6 @@
position: absolute;
top: 0;
left: 0;
- }
-
- video {
width: 800px;
height: 240px;
}
Modified: trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-click.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -7,9 +7,6 @@
position: absolute;
top: 0;
left: 0;
- }
-
- video {
width: 800px;
height: 240px;
}
Modified: trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html (212942 => 212943)
--- trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/modern-media-controls/volume-support/volume-support-drag.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -8,9 +8,6 @@
position: absolute;
top: 0;
left: 0;
- }
-
- video {
width: 800px;
height: 240px;
}
Modified: trunk/LayoutTests/media/track/track-cue-rendering-snap-to-lines-not-set.html (212942 => 212943)
--- trunk/LayoutTests/media/track/track-cue-rendering-snap-to-lines-not-set.html 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/LayoutTests/media/track/track-cue-rendering-snap-to-lines-not-set.html 2017-02-24 06:40:29 UTC (rev 212943)
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html><!-- webkit-test-runner [ enableModernMediaControls=false ] -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Modified: trunk/Source/WebCore/ChangeLog (212942 => 212943)
--- trunk/Source/WebCore/ChangeLog 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/Source/WebCore/ChangeLog 2017-02-24 06:40:29 UTC (rev 212943)
@@ -1,5 +1,25 @@
2017-02-23 Antoine Quint <grao...@apple.com>
+ [Modern Media Controls] Controls overflow when media element has border or padding
+ https://bugs.webkit.org/show_bug.cgi?id=168818
+ <rdar://problem/30689780>
+
+ Reviewed by Jon Lee.
+
+ We used to query the media element's layout size to compute the size of the media controls,
+ which would account for border and padding. Instead, we should use the size of the container,
+ at the root of the ShadowRoot, which will always match the size of the media.
+
+ Test: media/modern-media-controls/media-controller/media-controller-controls-sizing-with-border-and-padding.html
+
+ * Modules/modern-media-controls/controls/media-controls.css:
+ (.media-controls-container,):
+ * Modules/modern-media-controls/media/media-controller.js:
+ (MediaController.prototype._updateControlsSize):
+ (MediaController.prototype._controlsWidth):
+
+2017-02-23 Antoine Quint <grao...@apple.com>
+
[Modern Media Controls] Dragging controls in fullscreen on macOS prevents scrubbing or interacting with controls
https://bugs.webkit.org/show_bug.cgi?id=168820
<rdar://problem/30690281>
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (212942 => 212943)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2017-02-24 06:40:29 UTC (rev 212943)
@@ -38,6 +38,7 @@
left: 0;
top: 0;
width: 100%;
+ height: 100%;
}
.media-controls-container,
Modified: trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js (212942 => 212943)
--- trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-24 05:41:22 UTC (rev 212942)
+++ trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js 2017-02-24 06:40:29 UTC (rev 212943)
@@ -177,12 +177,12 @@
_updateControlsSize()
{
this.controls.width = this._controlsWidth();
- this.controls.height = Math.round(this.media.offsetHeight * this.controls.scaleFactor);
+ this.controls.height = Math.round(this.container.getBoundingClientRect().height * this.controls.scaleFactor);
}
_controlsWidth()
{
- return Math.round(this.media.offsetWidth * (this.controls ? this.controls.scaleFactor : 1));
+ return Math.round(this.container.getBoundingClientRect().width * (this.controls ? this.controls.scaleFactor : 1));
}
_returnMediaLayerToInlineIfNeeded()
