Support padding, margin and border for internal UA cue styling
authorvcarbune@chromium.org <vcarbune@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Mar 2013 22:42:02 +0000 (22:42 +0000)
committervcarbune@chromium.org <vcarbune@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Mar 2013 22:42:02 +0000 (22:42 +0000)
https://bugs.webkit.org/show_bug.cgi?id=110703

Reviewed by Eric Carlson.

Source/WebCore:

For some particular user agent styling this allows the possibility
of making the window around the cue text bigger to match some user
styles (see CaptionUserPreferencesMac::captionsStyleSheetOverride).

These properties *cannot* be set through by using the ::cue
pseudo-element and, as specified, are used only internally.

Note: This patch is identical to the previously commited one,
as it was rolled back without related tests failing.

Test: media/track/track-cue-rendering-with-padding.html

* css/mediaControls.css:
(video::-webkit-media-text-track-display): Set the CSS box model
to include in the specified width or height the values of
padding / margin / border by using -webkit-box-sizing and avoid
overflow over 100% width because of having these properties set.
* rendering/RenderTextTrackCue.cpp:
(WebCore::RenderTextTrackCue::isOutside): To not interfere with
the regular WebVTT positioning algorithm, the check is done for
the absolute content box.
(WebCore::RenderTextTrackCue::repositionCueSnapToLinesSet): Added
an extra adjustment step to accomodate vertical padding (and not
overflow the cue container)

LayoutTests:

* media/track/track-cue-rendering-with-padding-expected.txt: Added.
* media/track/track-cue-rendering-with-padding.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/media/track/track-cue-rendering-with-padding-expected.txt [new file with mode: 0644]
LayoutTests/media/track/track-cue-rendering-with-padding.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/mediaControls.css
Source/WebCore/rendering/RenderTextTrackCue.cpp

index c26f048..72e9dc5 100644 (file)
@@ -1,3 +1,13 @@
+2013-03-01  Victor Carbune  <vcarbune@chromium.org>
+
+        Support padding, margin and border for internal UA cue styling
+        https://bugs.webkit.org/show_bug.cgi?id=110703
+
+        Reviewed by Eric Carlson.
+
+        * media/track/track-cue-rendering-with-padding-expected.txt: Added.
+        * media/track/track-cue-rendering-with-padding.html: Added.
+
 2013-03-01  Chris Fleizach  <cfleizach@apple.com>
 
         AX: Upstream iOS Accessibility layout tests
diff --git a/LayoutTests/media/track/track-cue-rendering-with-padding-expected.txt b/LayoutTests/media/track/track-cue-rendering-with-padding-expected.txt
new file mode 100644 (file)
index 0000000..d3e705a
--- /dev/null
@@ -0,0 +1,9 @@
+Rendering text track cue line with padding set.
+
+EVENT(canplaythrough)
+EVENT(seeked)
+
+** Cue should be displayed entirely within the container. **
+EXPECTED (cueDisplayBottomPoint <= cueContainerBottomPoint == 'true') OK
+END OF TEST
+
diff --git a/LayoutTests/media/track/track-cue-rendering-with-padding.html b/LayoutTests/media/track/track-cue-rendering-with-padding.html
new file mode 100644 (file)
index 0000000..06cfb2c
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <style type="text/css">
+        video::-webkit-media-text-track-display {
+          padding: 15px;
+        }
+        </style>
+
+        <script src=../media-file.js></script>
+        <script src=../media-controls.js></script>
+        <script src=../video-test.js></script>
+
+        <script>
+        var cueContainerBottomPoint;
+        var cueDisplayBottomPoint;
+
+        function startTest()
+        {
+            if (!window.internals) {
+                consoleWrite("<br><b>** This test only works in DRT! **<" + "/b>");
+                return;
+            }
+
+            var cueContainerElement = textTrackDisplayElement(video);
+            var cueDisplayElement = textTrackDisplayElement(video, 'display', 0);
+
+            cueDisplayBottomPoint = cueDisplayElement.offsetTop + cueDisplayElement.offsetHeight;
+            cueContainerBottomPoint = cueContainerElement.offsetTop + cueContainerElement.offsetHeight;
+
+            consoleWrite("<br>** Cue should be displayed entirely within the container. **");
+            testExpected("cueDisplayBottomPoint <= cueContainerBottomPoint", true);
+            endTest();
+        }
+
+        function loaded()
+        {
+            consoleWrite("Rendering text track cue line with padding set.<br>");
+            findMediaElement();
+
+            testTrack = document.querySelector('track');
+            video.src = findMediaFile('video', '../content/test');
+
+            waitForEvent('seeked', startTest);
+            waitForEvent('canplaythrough', function() {
+                video.currentTime = .25;
+            });
+        }
+
+        </script>
+    </head>
+    <body onload="loaded()">
+        <video controls>
+            <track src="captions-webvtt/captions-fast.vtt" kind="captions" default>
+        </video>
+    </body>
+</html>
index 637e0ce..a79c597 100644 (file)
@@ -1,3 +1,35 @@
+2013-03-01  Victor Carbune  <vcarbune@chromium.org>
+
+        Support padding, margin and border for internal UA cue styling
+        https://bugs.webkit.org/show_bug.cgi?id=110703
+
+        Reviewed by Eric Carlson.
+
+        For some particular user agent styling this allows the possibility
+        of making the window around the cue text bigger to match some user
+        styles (see CaptionUserPreferencesMac::captionsStyleSheetOverride).
+
+        These properties *cannot* be set through by using the ::cue
+        pseudo-element and, as specified, are used only internally.
+
+        Note: This patch is identical to the previously commited one,
+        as it was rolled back without related tests failing.
+
+        Test: media/track/track-cue-rendering-with-padding.html
+
+        * css/mediaControls.css:
+        (video::-webkit-media-text-track-display): Set the CSS box model
+        to include in the specified width or height the values of
+        padding / margin / border by using -webkit-box-sizing and avoid
+        overflow over 100% width because of having these properties set.
+        * rendering/RenderTextTrackCue.cpp:
+        (WebCore::RenderTextTrackCue::isOutside): To not interfere with
+        the regular WebVTT positioning algorithm, the check is done for
+        the absolute content box.
+        (WebCore::RenderTextTrackCue::repositionCueSnapToLinesSet): Added
+        an extra adjustment step to accomodate vertical padding (and not
+        overflow the cue container)
+
 2013-03-01  Andy Estes  <aestes@apple.com>
 
         REGRESSION (r125809): CFStrings created via StringImpl::createCFString()  might reference freed memory when Objective-C garbage collection is enabled
index 8e2763b..b94d447 100644 (file)
@@ -249,6 +249,7 @@ video::-webkit-media-text-track-display {
     position: absolute;
     overflow: hidden;
     white-space: pre-wrap;
+    -webkit-box-sizing: border-box;
 }
 
 video::cue(:future) {
index e1678dd..11399b3 100644 (file)
@@ -123,7 +123,7 @@ void RenderTextTrackCue::placeBoxInDefaultPosition(LayoutUnit position, bool& sw
 
 bool RenderTextTrackCue::isOutside() const
 {
-    return !containingBlock()->absoluteBoundingBoxRect().contains(absoluteBoundingBoxRect());
+    return !containingBlock()->absoluteBoundingBoxRect().contains(absoluteContentBox());
 }
 
 bool RenderTextTrackCue::isOverlapping() const
@@ -225,6 +225,25 @@ void RenderTextTrackCue::repositionCueSnapToLinesSet()
 
         // 19. Jump back to the step labeled step loop.
     }
+
+    // Acommodate extra top and bottom padding, border or margin.
+    // Note: this is supported only for internal UA styling, not through the cue selector.
+    if (hasInlineDirectionBordersPaddingOrMargin()) {
+        IntRect containerRect = containingBlock()->absoluteBoundingBoxRect();
+        IntRect cueRect = absoluteBoundingBoxRect();
+
+        int topOverflow = cueRect.y() - containerRect.y();
+        int bottomOverflow = containerRect.y() + containerRect.height() - cueRect.y() - cueRect.height();
+
+        int adjustment = 0;
+        if (topOverflow < 0)
+            adjustment = -topOverflow;
+        else if (bottomOverflow < 0)
+            adjustment = bottomOverflow;
+
+        if (adjustment)
+            setY(y() + adjustment);
+    }
 }
 
 void RenderTextTrackCue::repositionGenericCue()