Diff
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-controls-bar-styles.html (279546 => 279547)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-controls-bar-styles.html 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-controls-controls-bar-styles.html 2021-07-03 21:29:20 UTC (rev 279547)
@@ -20,27 +20,33 @@
const mediaControls = new IOSInlineMediaControls({ width: 680, height: 300 });
let style, bounds;
+let frameCount = 0;
scheduler.frameDidFire = function()
{
- document.body.appendChild(mediaControls.element);
+ if (frameCount == 0)
+ document.body.appendChild(mediaControls.element);
+ else if (frameCount == 3) {
+ style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
+ bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
- style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
- bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
-
- shouldBeEqualToString("style.left", "6px");
- shouldBeEqualToString("style.bottom", "6px");
- shouldBeEqualToString("style.width", "668px");
- shouldBeEqualToString("style.height", "31px");
+ shouldBeEqualToString("style.left", "6px");
+ shouldBeEqualToString("style.bottom", "6px");
+ shouldBeEqualToString("style.width", "668px");
+ shouldBeEqualToString("style.height", "31px");
- shouldBe("bounds.left", "6");
- shouldBe("bounds.top", "263");
- shouldBe("bounds.width", "668");
- shouldBe("bounds.height", "31");
+ shouldBe("bounds.left", "6");
+ shouldBe("bounds.top", "263");
+ shouldBe("bounds.width", "668");
+ shouldBe("bounds.height", "31");
- mediaControls.element.remove();
+ mediaControls.element.remove();
- debug("");
- finishMediaControlsTest();
+ debug("");
+ finishMediaControlsTest();
+ }
+
+ mediaControls.needsLayout = true;
+ frameCount++;
};
</script>
Modified: trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html (279546 => 279547)
--- trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/LayoutTests/media/modern-media-controls/ios-inline-media-controls/ios-inline-media-dropping-controls.html 2021-07-03 21:29:20 UTC (rev 279547)
@@ -32,6 +32,7 @@
}
shouldBecomeEqual("ready()", "true", () => {
+ document.body.appendChild(mediaControls.element);
debug("");
while (droppableControls.length) {
for (let i = droppableControls.length - 1; i >= 0; --i) {
@@ -43,6 +44,7 @@
mediaControls.width--;
}
+ mediaControls.element.remove();
debug("");
finishJSTest();
});
Modified: trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html (279546 => 279547)
--- trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/LayoutTests/media/modern-media-controls/macos-inline-media-controls/macos-inline-media-controls-controls-bar-styles.html 2021-07-03 21:29:20 UTC (rev 279547)
@@ -9,7 +9,6 @@
top: 0;
left: 0;
}
-
</style>
<script type="text/_javascript_">
@@ -20,27 +19,33 @@
const mediaControls = new MacOSInlineMediaControls({ width: 680, height: 300 });
let style, bounds;
+let frameCount = 0;
scheduler.frameDidFire = function()
{
- document.body.appendChild(mediaControls.element);
+ if (frameCount == 0)
+ document.body.appendChild(mediaControls.element);
+ else if (frameCount == 3) {
+ style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
+ bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
- style = window.getComputedStyle(mediaControls.bottomControlsBar.element);
- bounds = mediaControls.bottomControlsBar.element.getBoundingClientRect();
-
- shouldBeEqualToString("style.left", "6px");
- shouldBeEqualToString("style.bottom", "6px");
- shouldBeEqualToString("style.width", "668px");
- shouldBeEqualToString("style.height", "31px");
+ shouldBeEqualToString("style.left", "6px");
+ shouldBeEqualToString("style.bottom", "6px");
+ shouldBeEqualToString("style.width", "668px");
+ shouldBeEqualToString("style.height", "31px");
- shouldBe("bounds.left", "6");
- shouldBe("bounds.top", "263");
- shouldBe("bounds.width", "668");
- shouldBe("bounds.height", "31");
+ shouldBe("bounds.left", "6");
+ shouldBe("bounds.top", "263");
+ shouldBe("bounds.width", "668");
+ shouldBe("bounds.height", "31");
- mediaControls.element.remove();
+ mediaControls.element.remove();
- debug("");
- finishMediaControlsTest();
+ debug("");
+ finishMediaControlsTest();
+ }
+
+ mediaControls.needsLayout = true;
+ frameCount++;
};
</script>
Modified: trunk/Source/WebCore/ChangeLog (279546 => 279547)
--- trunk/Source/WebCore/ChangeLog 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/Source/WebCore/ChangeLog 2021-07-03 21:29:20 UTC (rev 279547)
@@ -1,3 +1,23 @@
+2021-07-01 Dean Jackson <[email protected]>
+
+ Move BottomControlsBarHeight and InsideMargin to be computed at runtime
+ https://bugs.webkit.org/show_bug.cgi?id=227505
+ <rdar://problem/79932256>
+
+ Reviewed by Devin Rousso.
+
+ Rather than having two JS constants that have to be kept in sync
+ with CSS, simply retrieve the value from the computed style.
+
+ No change in behaviour.
+
+ * Modules/modern-media-controls/controls/inline-media-controls.js:
+ (InlineMediaControls.prototype.layout):
+ * Modules/modern-media-controls/controls/media-controls.css:
+ (:host(audio), :host(video.media-document.audio), *):
+ * Modules/modern-media-controls/controls/layout-node.js: Add two helpers to
+ retrive computed style values.
+
2021-07-03 Alexey Shvayka <[email protected]>
[WebIDL] Rework runtime enabled properties leveraging PropertyCallback
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js (279546 => 279547)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js 2021-07-03 21:29:20 UTC (rev 279547)
@@ -23,9 +23,6 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
-const InsideMargin = 6; // Minimum margin to guarantee around all controls, this constant needs to stay in sync with the --inline-controls-inside-margin CSS variable.
-const BottomControlsBarHeight = 31; // This constant needs to stay in sync with the --inline-controls-bar-height CSS variable.
-
class InlineMediaControls extends MediaControls
{
@@ -133,7 +130,9 @@
this.topLeftControlsBar.visible = this._topLeftControlsBarContainer.children.some(button => button.visible);
// Compute the visible size for the controls bar.
- this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * InsideMargin);
+ if (!this._inlineInsideMargin)
+ this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
+ this.bottomControlsBar.width = this._shouldUseAudioLayout ? this.width : (this.width - 2 * this._inlineInsideMargin);
// Compute the absolute minimum width to display the center control (status label or time control).
const centerControl = this.statusLabel.enabled ? this.statusLabel : this.timeControl;
@@ -218,7 +217,9 @@
// Ensure we position the bottom controls bar at the bottom of the frame, accounting for
// the inside margin, unless this would yield a position outside of the frame.
- this.bottomControlsBar.y = Math.max(0, this.height - BottomControlsBarHeight - InsideMargin);
+ if (!this._inlineBottomControlsBarHeight)
+ this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");
+ this.bottomControlsBar.y = Math.max(0, this.height - this._inlineBottomControlsBarHeight - this._inlineInsideMargin);
this.bottomControlsBar.children = controlsBarChildren;
if (!this._shouldUseAudioLayout && !this._shouldUseSingleBarLayout)
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js (279546 => 279547)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-node.js 2021-07-03 21:29:20 UTC (rev 279547)
@@ -229,6 +229,21 @@
this._updateDirtyState();
}
+ computedValueForStyleProperty(propertyName)
+ {
+ return window.getComputedStyle(this.element).getPropertyValue(propertyName);
+ }
+
+ computedValueForStylePropertyInPx(propertyName)
+ {
+ const value = this.computedValueForStyleProperty(propertyName);
+ if (!value)
+ return 0;
+ if (!value.endsWith("px"))
+ return 0;
+ return parseFloat(value);
+ }
+
// Protected
layout()
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js (279546 => 279547)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/macos-inline-media-controls.js 2021-07-03 21:29:20 UTC (rev 279547)
@@ -59,8 +59,13 @@
if (!this._volumeSliderContainer)
return;
+ if (!this._inlineInsideMargin)
+ this._inlineInsideMargin = this.computedValueForStylePropertyInPx("--inline-controls-inside-margin");
+ if (!this._inlineBottomControlsBarHeight)
+ this._inlineBottomControlsBarHeight = this.computedValueForStylePropertyInPx("--inline-controls-bar-height");
+
this._volumeSliderContainer.x = this.rightContainer.x + this.muteButton.x;
- this._volumeSliderContainer.y = this.bottomControlsBar.y - BottomControlsBarHeight - InsideMargin;
+ this._volumeSliderContainer.y = this.bottomControlsBar.y - this._inlineBottomControlsBarHeight - this._inlineInsideMargin;
}
get preferredMuteButtonStyle()
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css (279546 => 279547)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2021-07-03 19:57:46 UTC (rev 279546)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/media-controls.css 2021-07-03 21:29:20 UTC (rev 279547)
@@ -37,7 +37,6 @@
}
* {
- /* This constant needs to stay in sync with the InsideMargin JS constant. */
--inline-controls-inside-margin: 6px;
--fullscreen-controls-bar-height: 75px;
--primary-glyph-color: rgba(255, 255, 255, 0.75);
@@ -45,7 +44,6 @@
}
:host(audio), :host(video.media-document.audio), * {
- /* This constant needs to stay in sync with the BottomControlsBarHeight JS constant. */
--inline-controls-bar-height: 31px;
}
