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
WebKit · Nov 10, 2015 · 05391d27b139c2e3bed0088818e00970af9a2e7d · 05391d2
1 parent 8d3cb4e
commit 05391d27b139c2e3bed0088818e00970af9a2e7d
Showing 6 changed files with 86 additions and 1 deletion.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -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

diff --git a/LayoutTests/media/controls/controls-test-helpers.js b/LayoutTests/media/controls/controls-test-helpers.js
@@ -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)

diff --git a/LayoutTests/media/controls/fullscreen-button-inline-layout-expected.txt b/LayoutTests/media/controls/fullscreen-button-inline-layout-expected.txt
@@ -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.
+
diff --git a/LayoutTests/media/controls/fullscreen-button-inline-layout.html b/LayoutTests/media/controls/fullscreen-button-inline-layout.html
@@ -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>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
@@ -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

diff --git a/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css b/Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
@@ -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;