Captions container should not clip content.
authorroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 16 Jul 2014 23:34:23 +0000 (23:34 +0000)
committerroger_fong@apple.com <roger_fong@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 16 Jul 2014 23:34:23 +0000 (23:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=134840.
<rdar://problem/14553608>.

Reviewed by Simon Fraser.

Tests: media/track/track-in-band-subtitles-too-large.html
       media/track/track-long-word-container-sizing.html

* Modules/mediacontrols/mediaControlsApple.css:
(video::-webkit-media-text-track-container):
Set word break property of WebCTT cues to normal to make it consistent with in-band cues.
* html/track/TextTrackCueGeneric.cpp:
(WebCore::TextTrackCueGenericBoxElement::applyCSSProperties):
Set -webkit-min-content on min-width/min-height property of the text track display.
* html/track/VTTCue.cpp:
(WebCore::VTTCueBox::applyCSSProperties):
Do the same for WebVTT cues.

* media/track/track-cue-rendering-snap-to-lines-not-set-expected.txt: Rebaseline.
* media/track/captions-webvtt/long-word-small-track-display.vtt: Added.
* media/track/track-in-band-subtitles-too-large-expected.txt: Added.
* media/track/track-in-band-subtitles-too-large.html: Added.
* media/track/track-long-word-container-sizing-expected.txt: Added.
* media/track/track-long-word-container-sizing.html: Added.

We no longer break in the middle of a word, this test is no longer useful.
* media/track/captions-webvtt/long-word.vtt: Removed.
* media/track/track-word-breaking-expected.txt: Removed.
* media/track/track-word-breaking.html: Removed.

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

14 files changed:
LayoutTests/ChangeLog
LayoutTests/media/track/captions-webvtt/long-word-small-track-display.vtt [new file with mode: 0644]
LayoutTests/media/track/captions-webvtt/long-word.vtt [deleted file]
LayoutTests/media/track/track-cue-rendering-snap-to-lines-not-set-expected.txt
LayoutTests/media/track/track-in-band-subtitles-too-large-expected.txt [new file with mode: 0644]
LayoutTests/media/track/track-in-band-subtitles-too-large.html [new file with mode: 0644]
LayoutTests/media/track/track-long-word-container-sizing-expected.txt [new file with mode: 0644]
LayoutTests/media/track/track-long-word-container-sizing.html [new file with mode: 0644]
LayoutTests/media/track/track-word-breaking-expected.txt [deleted file]
LayoutTests/media/track/track-word-breaking.html [deleted file]
Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsApple.css
Source/WebCore/html/track/TextTrackCueGeneric.cpp
Source/WebCore/html/track/VTTCue.cpp

index 9d9a288..d4a4f5a 100644 (file)
@@ -1,3 +1,23 @@
+2014-07-16  Roger Fong  <roger_fong@apple.com>
+
+        Captions container should not clip content.
+        https://bugs.webkit.org/show_bug.cgi?id=134840.
+        <rdar://problem/14553608>.
+
+        Reviewed by Simon Fraser.
+
+        * media/track/track-cue-rendering-snap-to-lines-not-set-expected.txt: Rebaseline.
+        * media/track/captions-webvtt/long-word-small-track-display.vtt: Added.
+        * media/track/track-in-band-subtitles-too-large-expected.txt: Added.
+        * media/track/track-in-band-subtitles-too-large.html: Added.
+        * media/track/track-long-word-container-sizing-expected.txt: Added.
+        * media/track/track-long-word-container-sizing.html: Added.
+        
+        We no longer break in the middle of a word, this test is no longer useful.
+        * media/track/captions-webvtt/long-word.vtt: Removed.
+        * media/track/track-word-breaking-expected.txt: Removed.
+        * media/track/track-word-breaking.html: Removed.
+
 2014-07-16  Mike West  <mkwst@chromium.org>
 
         CSP: Drop 'script-nonce' directive.
diff --git a/LayoutTests/media/track/captions-webvtt/long-word-small-track-display.vtt b/LayoutTests/media/track/captions-webvtt/long-word-small-track-display.vtt
new file mode 100644 (file)
index 0000000..c9a8e97
--- /dev/null
@@ -0,0 +1,5 @@
+WEBVTT
+
+1
+00:00:00.000 --> 00:00:02.000 size:50% align:middle position:0%
+thiswordisquitelongindeed
diff --git a/LayoutTests/media/track/captions-webvtt/long-word.vtt b/LayoutTests/media/track/captions-webvtt/long-word.vtt
deleted file mode 100644 (file)
index d548b7d..0000000
+++ /dev/null
@@ -1,9 +0,0 @@
-WEBVTT
-
-1
-00:00:00.000 --> 00:00:02.000
-first caption
-
-2
-00:00:02.000 --> 00:01:00.000
-mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
index 0674de6..b3fe05c 100644 (file)
@@ -9,7 +9,7 @@ Active cues: 1
 * Cue 0 *
 EXPECTED (cueDisplayElement.innerText == 'This is a demo track to illustrate positioning features of cues.') OK
 Cue alignment (default or as specified): middle
-Cue left position (percentage): 50
+Cue left position (percentage): 51
 Cue top position (percentage): 100
 
 ** Center **
@@ -19,7 +19,7 @@ Active cues: 1
 * Cue 0 *
 EXPECTED (cueDisplayElement.innerText == 'Using HTML5 captions, you can position the cues anywhere.') OK
 Cue alignment (default or as specified): middle
-Cue left position (percentage): 50
+Cue left position (percentage): 51
 Cue top position (percentage): 50
 
 ** Top left **
diff --git a/LayoutTests/media/track/track-in-band-subtitles-too-large-expected.txt b/LayoutTests/media/track/track-in-band-subtitles-too-large-expected.txt
new file mode 100644 (file)
index 0000000..a7c070b
--- /dev/null
@@ -0,0 +1,72 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x278
+  RenderBlock {HTML} at (0,0) size 800x278
+    RenderBody {BODY} at (8,16) size 784x254
+      RenderBlock {P} at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 430x18
+          text run at (0,0) width 430: "Tests that in-band caption container expands when subtitles don't fit."
+      RenderBlock (anonymous) at (0,34) size 784x184
+        RenderText {#text} at (0,0) size 0x0
+      RenderBlock {DIV} at (0,218) size 784x36
+        RenderText {#text} at (0,0) size 107x18
+          text run at (0,0) width 107: "EVENT(seeked)"
+        RenderBR {BR} at (107,0) size 0x18
+        RenderText {#text} at (0,18) size 102x18
+          text run at (0,18) width 102: "END OF TEST"
+        RenderBR {BR} at (102,18) size 0x18
+layer at (8,50) size 320x180
+  RenderVideo {VIDEO} at (0,0) size 320x180
+layer at (8,50) size 320x180
+  RenderFlexibleBox {DIV} at (0,0) size 320x180
+layer at (8,50) size 320x155
+  RenderBlock (relative positioned) {DIV} at (0,0) size 320x155 [color=#FFFFFF]
+layer at (123,140) size 89x62 scrollWidth 90
+  RenderBlock (positioned) {DIV} at (115,89) size 90x63
+    RenderBlock {DIV} at (0,0) size 89x62
+      RenderInline {SPAN} at (0,0) size 90x62 [color=#FFFF00CC] [bgcolor=#000000CC]
+        RenderText {#text} at (0,0) size 90x62
+          text run at (0,0) width 89: "English"
+          text run at (89,0) width 1: " "
+          text run at (37,31) width 15: "5"
+          text run at (52,31) width 8: " "
+layer at (8,205) size 320x25
+  RenderFlexibleBox {DIV} at (0,155) size 320x25
+layer at (14,210) size 16x16
+  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]
+layer at (40,210) size 16x16
+  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
+layer at (57,213) size 187x11
+  RenderFlexibleBox {DIV} at (49,7) size 187x12
+layer at (57,213) size 45x11
+  RenderFlexibleBox {DIV} at (0,0) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (10,0) size 25x11
+      RenderText {#text} at (0,0) size 25x11
+        text run at (0,0) width 25: "00:09"
+layer at (199,213) size 45x11
+  RenderFlexibleBox {DIV} at (142,0) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (8,0) size 29x11
+      RenderText {#text} at (0,0) size 29x11
+        text run at (0,0) width 29: "-00:20"
+layer at (104,214) size 93x9
+  RenderFlexibleBox {DIV} at (47,1) size 93x9
+    RenderSlider {INPUT} at (0,0) size 93x9 [color=#909090] [bgcolor=#4A4A4A]
+      RenderFlexibleBox {DIV} at (0,0) size 93x9
+        RenderBlock {DIV} at (0,1) size 93x7
+layer at (132,215) size 6x6
+  RenderBlock {DIV} at (27,0) size 7x6 [bgcolor=#FFFFFF]
+layer at (244,207) size 22x22
+  RenderFlexibleBox {DIV} at (236,2) size 22x22
+layer at (244,207) size 2x22
+  RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
+    RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
+      RenderFlexibleBox {DIV} at (1,1) size 0x8
+        RenderBlock {DIV} at (0,0) size 0x8
+layer at (230,214) size 8x8
+  RenderBlock {DIV} at (-8,0) size 8x8
+layer at (247,210) size 16x16
+  RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
+layer at (275,210) size 16x16
+  RenderButton {BUTTON} at (267,5) size 16x16 [color=#FFFFFF]
+layer at (305,210) size 16x16
+  RenderButton {BUTTON} at (297,5) size 16x16 [color=#FFFFFF]
diff --git a/LayoutTests/media/track/track-in-band-subtitles-too-large.html b/LayoutTests/media/track/track-in-band-subtitles-too-large.html
new file mode 100644 (file)
index 0000000..ee0b78a
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src=../media-file.js></script>
+        <script src=../media-controls.js></script>
+        <script>
+            var requirePixelDump = true;
+
+            function loaded()
+            {
+                if (window.testRunner)
+                {
+                    testRunner.waitUntilDone();
+                    findMediaElement();
+                    internals.setCaptionsStyleSheetOverride('video::cue { font-size:27px; } video::-webkit-media-text-track-display { width: 10%; }');
+                    internals.setCaptionDisplayMode('AlwaysOn');
+                    setTimeout(function() { 
+                        video.currentTime = 9.5;
+                    }, 1000);
+                    waitForEvent('seeked', endTest);
+                }
+            }
+        </script>
+
+        <script src=../video-test.js></script>
+    </head>
+    <body onload="loaded()">
+        <p>Tests that in-band caption container expands when subtitles don't fit.</p>
+        <video width="320" height="180" src='../content/CC+Subtitles.mov' controls>
+        </video>
+    </body>
+</html>
diff --git a/LayoutTests/media/track/track-long-word-container-sizing-expected.txt b/LayoutTests/media/track/track-long-word-container-sizing-expected.txt
new file mode 100644 (file)
index 0000000..bfc5b4e
--- /dev/null
@@ -0,0 +1,70 @@
+CONSOLE MESSAGE: line 25: ReferenceError: Can't find variable: setCaptionDisplayMode
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+  RenderBlock {HTML} at (0,0) size 800x600
+    RenderBody {BODY} at (8,8) size 784x584
+      RenderBlock (anonymous) at (0,0) size 784x240
+        RenderText {#text} at (0,0) size 0x0
+      RenderBlock {DIV} at (0,240) size 784x54
+        RenderText {#text} at (0,0) size 162x18
+          text run at (0,0) width 162: "EVENT(canplaythrough)"
+        RenderBR {BR} at (162,14) size 0x0
+        RenderText {#text} at (0,18) size 107x18
+          text run at (0,18) width 107: "EVENT(seeked)"
+        RenderBR {BR} at (107,32) size 0x0
+        RenderText {#text} at (0,36) size 102x18
+          text run at (0,36) width 102: "END OF TEST"
+        RenderBR {BR} at (102,50) size 0x0
+layer at (8,8) size 320x240
+  RenderVideo {VIDEO} at (0,0) size 320x240
+layer at (8,8) size 320x240
+  RenderFlexibleBox {DIV} at (0,0) size 320x240
+layer at (8,8) size 320x215
+  RenderBlock (relative positioned) {DIV} at (0,0) size 320x215 [color=#FFFFFF]
+layer at (8,209) size 144x14
+  RenderBlock (positioned) {DIV} at (0,201) size 144x14
+    RenderBlock {DIV} at (0,0) size 144x14
+      RenderInline {SPAN} at (0,0) size 144x14 [bgcolor=#000000CC]
+        RenderText {#text} at (0,0) size 144x14
+          text run at (0,0) width 144: "thiswordisquitelongindeed"
+layer at (8,223) size 320x25
+  RenderFlexibleBox {DIV} at (0,215) size 320x25
+layer at (14,228) size 16x16
+  RenderButton {BUTTON} at (6,4) size 16x17 [color=#FFFFFF]
+layer at (40,228) size 16x16
+  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
+layer at (57,231) size 187x11
+  RenderFlexibleBox {DIV} at (49,7) size 187x12
+layer at (57,231) size 45x11
+  RenderFlexibleBox {DIV} at (0,0) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (10,0) size 25x11
+      RenderText {#text} at (0,0) size 25x11
+        text run at (0,0) width 25: "00:01"
+layer at (199,231) size 45x11
+  RenderFlexibleBox {DIV} at (142,0) size 45x11 [color=#FFFFFF]
+    RenderBlock (anonymous) at (8,0) size 29x11
+      RenderText {#text} at (0,0) size 29x11
+        text run at (0,0) width 29: "-00:05"
+layer at (104,232) size 93x9
+  RenderFlexibleBox {DIV} at (47,1) size 93x9
+    RenderSlider {INPUT} at (0,0) size 93x9 [color=#909090] [bgcolor=#4A4A4A]
+      RenderFlexibleBox {DIV} at (0,0) size 93x9
+        RenderBlock {DIV} at (0,1) size 93x7
+layer at (118,233) size 6x6
+  RenderBlock {DIV} at (14,0) size 7x6 [bgcolor=#FFFFFF]
+layer at (244,225) size 22x22
+  RenderFlexibleBox {DIV} at (236,2) size 22x22
+layer at (244,225) size 2x22
+  RenderFlexibleBox {DIV} at (0,0) size 2x22 [border: (1px solid #000000F3)]
+    RenderSlider {INPUT} at (-7,6) size 2x10 [color=#909090] [border: (1px solid #000000DF)]
+      RenderFlexibleBox {DIV} at (1,1) size 0x8
+        RenderBlock {DIV} at (0,0) size 0x8
+layer at (230,232) size 8x8
+  RenderBlock {DIV} at (-8,0) size 8x8
+layer at (247,228) size 16x16
+  RenderButton {BUTTON} at (3,3) size 16x16 [color=#FFFFFF]
+layer at (275,228) size 16x16
+  RenderButton {BUTTON} at (267,5) size 16x16 [color=#FFFFFF]
+layer at (305,228) size 16x16
+  RenderButton {BUTTON} at (297,5) size 16x16 [color=#FFFFFF]
diff --git a/LayoutTests/media/track/track-long-word-container-sizing.html b/LayoutTests/media/track/track-long-word-container-sizing.html
new file mode 100644 (file)
index 0000000..c208000
--- /dev/null
@@ -0,0 +1,35 @@
+<html>
+    <head>
+        <script src=../media-file.js></script>
+        <script src=../media-controls.js></script>
+        <script>
+        var requirePixelDump = true;
+
+        function seekToCaption()
+        {
+            video.currentTime = 1;
+        }
+
+        function loaded()
+        {
+            if (window.testRunner)
+            {
+                testRunner.waitUntilDone();
+                findMediaElement();
+                video.src = findMediaFile('video', '../content/test');
+                waitForEvent('canplaythrough', seekToCaption);
+                waitForEvent('seeked', endTest);
+            }
+        }
+
+        setCaptionDisplayMode('AlwaysOn');
+        </script>
+
+        <script src=../video-test.js></script>
+    </head>
+    <body onload="loaded()">
+        <video controls >
+            <track src="captions-webvtt/long-word-small-track-display.vtt" kind="captions" default>
+        </video>
+    </body>
+</html>
diff --git a/LayoutTests/media/track/track-word-breaking-expected.txt b/LayoutTests/media/track/track-word-breaking-expected.txt
deleted file mode 100644 (file)
index 8bc9bac..0000000
+++ /dev/null
@@ -1,8 +0,0 @@
-
-Test that line breaks are forced in captions.
-EVENT(canplaythrough)
-Single line caption height recorded.
-EVENT(seeked)
-Second caption was more than twice as tall as first caption. OK
-END OF TEST
-
diff --git a/LayoutTests/media/track/track-word-breaking.html b/LayoutTests/media/track/track-word-breaking.html
deleted file mode 100644 (file)
index 30745aa..0000000
+++ /dev/null
@@ -1,42 +0,0 @@
-<html>
-    <head>
-        <script src=../media-file.js></script>
-        <script src=../video-test.js></script>
-        <script src=../media-controls.js></script>
-        <script>
-
-        var singleLineRect;
-
-        function testUnbreakableLine()
-        {
-            var multiLineRect = textTrackDisplayElement(video).firstChild.firstChild.getBoundingClientRect();
-            var ratio = multiLineRect.height / singleLineRect.height;
-            logResult(ratio > 2, "Second caption was more than twice as tall as first caption.")
-            endTest();
-        }
-
-        function testSingleLine()
-        {
-            singleLineRect = textTrackDisplayElement(video).firstChild.firstChild.getBoundingClientRect();
-            consoleWrite("Single line caption height recorded.");
-            video.currentTime = 3;
-        }
-
-        function loaded()
-        {
-            consoleWrite('Test that line breaks are forced in captions.');
-            findMediaElement();
-            waitForEvent('canplaythrough', testSingleLine);
-            waitForEvent('seeked', testUnbreakableLine);
-            video.src = findMediaFile('video', '../content/test');
-        }
-
-        setCaptionDisplayMode('Automatic');
-        </script>
-    </head>
-    <body onload="loaded()">
-        <video controls >
-            <track src="captions-webvtt/long-word.vtt" kind="captions" default>
-        </video>
-    </body>
-</html>
index f3f5556..6061ec8 100644 (file)
@@ -1,3 +1,24 @@
+2014-07-16  Roger Fong  <roger_fong@apple.com>
+
+        Captions container should not clip content.
+        https://bugs.webkit.org/show_bug.cgi?id=134840.
+        <rdar://problem/14553608>.
+
+        Reviewed by Simon Fraser.
+
+        Tests: media/track/track-in-band-subtitles-too-large.html
+               media/track/track-long-word-container-sizing.html
+
+        * Modules/mediacontrols/mediaControlsApple.css:
+        (video::-webkit-media-text-track-container):
+        Set word break property of WebCTT cues to normal to make it consistent with in-band cues.
+        * html/track/TextTrackCueGeneric.cpp:
+        (WebCore::TextTrackCueGenericBoxElement::applyCSSProperties):
+        Set -webkit-min-content on min-width/min-height property of the text track display.
+        * html/track/VTTCue.cpp:
+        (WebCore::VTTCueBox::applyCSSProperties):
+        Do the same for WebVTT cues.
+
 2014-07-16  Eric Carlson  <eric.carlson@apple.com>
 
         [Mac] replace AVPlayerItem on the main thread
index ce95a15..78047da 100644 (file)
@@ -709,7 +709,6 @@ video::-webkit-media-text-track-container {
     text-decoration: none;
     pointer-events: none;
     -webkit-user-select: none;
-    word-break: break-word;
 
     -webkit-flex: 1 1;
 
index 7ccaffa..72276d1 100644 (file)
@@ -81,6 +81,11 @@ void TextTrackCueGenericBoxElement::applyCSSProperties(const IntSize& videoSize)
             setInlineStyleProperty(CSSPropertyHeight, size,  CSSPrimitiveValue::CSS_PERCENTAGE);
     }
 
+    if (cue->getWritingDirection() == VTTCue::Horizontal)
+        setInlineStyleProperty(CSSPropertyMinWidth, "-webkit-min-content");
+    else
+        setInlineStyleProperty(CSSPropertyMinHeight, "-webkit-min-content");
+
     if (cue->foregroundColor().isValid())
         cueElement->setInlineStyleProperty(CSSPropertyColor, cue->foregroundColor().serialized());
     if (cue->highlightColor().isValid())
@@ -105,7 +110,6 @@ void TextTrackCueGenericBoxElement::applyCSSProperties(const IntSize& videoSize)
         setInlineStyleProperty(CSSPropertyBackgroundColor, cue->backgroundColor().serialized());
     setInlineStyleProperty(CSSPropertyWebkitWritingMode, cue->getCSSWritingMode(), false);
     setInlineStyleProperty(CSSPropertyWhiteSpace, CSSValuePreWrap);
-    setInlineStyleProperty(CSSPropertyWordBreak, CSSValueNormal);
 }
 
 TextTrackCueGeneric::TextTrackCueGeneric(ScriptExecutionContext& context, double start, double end, const String& content)
index 35b4df0..212c8b4 100644 (file)
@@ -174,9 +174,11 @@ void VTTCueBox::applyCSSProperties(const IntSize&)
     if (m_cue.vertical() == horizontalKeyword()) {
         setInlineStyleProperty(CSSPropertyWidth, static_cast<double>(m_cue.getCSSSize()), CSSPrimitiveValue::CSS_PERCENTAGE);
         setInlineStyleProperty(CSSPropertyHeight, CSSValueAuto);
+        setInlineStyleProperty(CSSPropertyMinWidth, "-webkit-min-content");
     } else {
         setInlineStyleProperty(CSSPropertyWidth, CSSValueAuto);
         setInlineStyleProperty(CSSPropertyHeight, static_cast<double>(m_cue.getCSSSize()),  CSSPrimitiveValue::CSS_PERCENTAGE);
+        setInlineStyleProperty(CSSPropertyMinHeight, "-webkit-min-content");
     }
 
     // The 'text-align' property on the (root) List of WebVTT Node Objects must