Skip to content
Permalink
Browse files
REGRESSION (r189567): Inline controls on Mac are misplaced
https://bugs.webkit.org/show_bug.cgi?id=151072

Reviewed by Eric Carlson.

Source/WebCore:

Test: media/controls/fullscreen-button-inline-layout.html

For a certain range of video widths, r189567 caused the timeline track to be
too large, pushing the buttons on the right side of the inline controls out of
the rect bounds.

The fix is to set min-width to 0. The test added checks to see that the right
edge of the fullscreen button is within the rect bounds.

* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-timeline-container): Add min-width.
(audio::-webkit-media-controls-panel .thumbnail-track): Ditto. Fly-by fix of height rule.

LayoutTests:

* media/controls/controls-test-helpers.js:
(ControlsTest.prototype.isLessThan): Add helper function.
* media/controls/fullscreen-button-inline-layout-expected.txt: Added.
* media/controls/fullscreen-button-inline-layout.html: Added.


Canonical link: https://commits.webkit.org/169282@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@192205 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
qanat committed Nov 10, 2015
1 parent 8d3cb4e commit 05391d27b139c2e3bed0088818e00970af9a2e7d
Showing 6 changed files with 86 additions and 1 deletion.
@@ -1,3 +1,15 @@
2015-11-10 Jon Lee <jonlee@apple.com>

REGRESSION (r189567): Inline controls on Mac are misplaced
https://bugs.webkit.org/show_bug.cgi?id=151072

Reviewed by Eric Carlson.

* media/controls/controls-test-helpers.js:
(ControlsTest.prototype.isLessThan): Add helper function.
* media/controls/fullscreen-button-inline-layout-expected.txt: Added.
* media/controls/fullscreen-button-inline-layout.html: Added.

2015-11-09 Eric Carlson <eric.carlson@apple.com>

[Mac] Add a mock AppleTV device for testing
@@ -197,6 +197,14 @@ ControlsTest = class ControlsTest {
this.logFailure(`${this.currentMessage} Expected a non-zero value`);
}

isLessThan(value)
{
if (this.currentValue < value)
this.logSuccess(this.currentMessage);
else
this.logFailure(`${this.currentMessage} Actual: "${this.currentValue}" is not less than Expected: "${value}"`);
}

isGreaterThan(value)
{
if (this.currentValue > value)
@@ -0,0 +1,11 @@
This tests for proper flexbox layout by checking the location of the fullscreen button. It should be within the bounds of the inline bar instead of being pushed past the right edge.

This test only runs in DRT!


EVENT: canplaythrough
PASS: We are using the apple idiom
PASS: Fullscreen button is placed within bounds of inline controls

Testing finished.

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<script src="../media-file.js"></script>
<script src="controls-test-helpers.js"></script>
<script>
var tester = new ControlsTest()
.whenReady(runTests)
.start();

function runTests()
{
tester.test("We are using the apple idiom")
.value(tester.currentState.idiom)
.isEqualTo("apple");

var fullscreenButtonState = tester.stateForControlsElement("Fullscreen Button");
var videoBox = tester.media.getBoundingClientRect();
tester.test("Fullscreen button is placed within bounds of inline controls")
.value(fullscreenButtonState.bounds.right)
.isLessThan(videoBox.right);

tester.end();
}
</script>
</head>
<body>
<p>This tests for proper flexbox layout by checking the location of the fullscreen button. It should be within the bounds of the inline bar instead of being pushed past the right edge.</p>
<p>This test only runs in DRT!</p>
<video controls width="340" height="80"></video>
</body>
</html>
@@ -1,3 +1,23 @@
2015-11-10 Jon Lee <jonlee@apple.com>

REGRESSION (r189567): Inline controls on Mac are misplaced
https://bugs.webkit.org/show_bug.cgi?id=151072

Reviewed by Eric Carlson.

Test: media/controls/fullscreen-button-inline-layout.html

For a certain range of video widths, r189567 caused the timeline track to be
too large, pushing the buttons on the right side of the inline controls out of
the rect bounds.

The fix is to set min-width to 0. The test added checks to see that the right
edge of the fullscreen button is within the rect bounds.

* Modules/mediacontrols/mediaControlsApple.css:
(audio::-webkit-media-controls-timeline-container): Add min-width.
(audio::-webkit-media-controls-panel .thumbnail-track): Ditto. Fly-by fix of height rule.

2015-11-09 Eric Carlson <eric.carlson@apple.com>

[Mac] Add a mock AppleTV device for testing
@@ -614,6 +614,7 @@ audio::-webkit-media-controls-timeline-container {
-webkit-align-items: center;
-webkit-user-select: none;
-webkit-flex: 1 1 0;
min-width: 0;
position: relative;
padding: 0;
}
@@ -622,7 +623,8 @@ video::-webkit-media-controls-panel .thumbnail-track,
audio::-webkit-media-controls-panel .thumbnail-track {
position: relative;
-webkit-flex: 1 1 0;
height: 17 px;
min-width: 0;
height: 17px;
margin: 0 2px;
display: -webkit-flex;
-webkit-align-items: stretch;

0 comments on commit 05391d2

Please sign in to comment.