fix(text): Don't use flex layout in subtitles.

Using flex layout causes problems with the positioning of elements and
causes the borders to be wrapped over the whole parent.  This changes
to use block/inline layouts instead.

This also removes any padding around the cue lines, hugging the
background around the text.  This is a bit more consistent with other
renderers by having a gap between lines.  This also changes a bit of
the nested cues padding.

The deeply nested cue test is different because the `background-color`
CSS attribute isn't inherited, so the default in our CSS sets the
background to black.

Fixes shaka-project#3013

Change-Id: I3e4b63b1b4de1f12e69fce2460d142e0a69bfcd9

lib/text/ui_text_displayer.js

@@ -218,14 +218,25 @@ shaka.text.UITextDisplayer = class {
    * @private
    */
   displayCue_(container, cue, isNested) {
+    let type = isNested ? 'span' : 'div';
+    if (cue.lineBreak || cue.spacer) {
+      if (cue.spacer) {
+        shaka.Deprecate.deprecateFeature(4,
+            'shaka.extern.Cue',
+            'Please use lineBreak instead of spacer.');
+      }
+      type = 'br';
+    }
+
     // Nested cues are inline elements.  Top-level cues are block elements.
-    const cueElement = shaka.util.Dom.createHTMLElement(
-        isNested ? 'span' : 'div');
+    const cueElement = shaka.util.Dom.createHTMLElement(type);
 
-    this.setCaptionStyles_(cueElement, cue, isNested);
+    if (type != 'br') {
+      this.setCaptionStyles_(cueElement, cue, isNested);
 
-    for (const nestedCue of cue.nestedCues) {
-      this.displayCue_(cueElement, nestedCue, /* isNested= */ true);
+      for (const nestedCue of cue.nestedCues) {
+        this.displayCue_(cueElement, nestedCue, /* isNested= */ true);
+      }
     }
 
     container.appendChild(cueElement);
@@ -240,26 +251,9 @@ shaka.text.UITextDisplayer = class {
    */
   setCaptionStyles_(cueElement, cue, isNested) {
     const Cue = shaka.text.Cue;
-    const style = cueElement.style;
+    let style = cueElement.style;
     const isLeaf = cue.nestedCues.length == 0;
 
-    if (cue.lineBreak || cue.spacer) {
-      if (cue.spacer) {
-        shaka.Deprecate.deprecateFeature(4,
-            'shaka.extern.Cue',
-            'Please use lineBreak instead of spacer.');
-      }
-      // This takes up a whole line on its own, but that line is 0-height,
-      // making it effectively a line-break.
-      style.flexBasis = '100%';
-      style.height = '0';
-      // TODO: support multiple line breaks in a row, in which case second and
-      // up need to take up vertical space.
-
-      // Line breaks have no other styles applied.
-      return;
-    }
-
     // TODO: wrapLine is not yet supported.  Lines always wrap.
 
     // White space should be preserved if emitted by the text parser.  It's the
@@ -273,10 +267,20 @@ shaka.text.UITextDisplayer = class {
     // still has not implemented break-spaces, and the original Chromecast will
     // never have this feature since it no longer gets firmware updates.
     // So we need to replace trailing spaces with non-breaking spaces.
-    cueElement.textContent = cue.payload.replace(/\s+$/g, (match) => {
+    const text = cue.payload.replace(/\s+$/g, (match) => {
       const nonBreakingSpace = '\xa0';
       return nonBreakingSpace.repeat(match.length);
     });
+    if (isNested) {
+      cueElement.textContent = text;
+    } else if (text.length) {
+      // If a top-level cue has text, move to a <span> so the background is
+      // styled correctly.
+      const span = shaka.util.Dom.createHTMLElement('span');
+      span.textContent = text;
+      cueElement.appendChild(span);
+      style = span.style;
+    }
 
     style.backgroundColor = cue.backgroundColor;
     style.border = cue.border;
@@ -302,36 +306,19 @@ shaka.text.UITextDisplayer = class {
       }
     }
 
-    // The displayAlign attribute specifys the vertical alignment of the
+    // The displayAlign attribute specifies the vertical alignment of the
     // captions inside the text container. Before means at the top of the
     // text container, and after means at the bottom.
     if (cue.displayAlign == Cue.displayAlign.BEFORE) {
-      style.justifyContent = 'flex-start';
+      style.verticalAlign = 'top';
     } else if (cue.displayAlign == Cue.displayAlign.CENTER) {
-      style.justifyContent = 'center';
+      style.verticalAlign = 'middle';
     } else {
-      style.justifyContent = 'flex-end';
+      style.verticalAlign = 'bottom';
     }
 
-    if (isLeaf) {
-      style.display = 'inline-block';
-    } else {
-      style.display = 'flex';
-      style.flexDirection = 'row';
-      style.flexWrap = 'wrap';
+    if (!isLeaf) {
       style.margin = '0';
-      // Setting flexDirection to "row" switches the meanings of align and
-      // justify.  Now align is vertical and justify is horizontal.  See
-      // comments above on vertical alignment for displayAlign.
-      style.alignItems = style.justifyContent;
-      style.justifyContent = 'center';
-    }
-
-    if (isNested) {
-      // Work around an IE 11 flexbox bug in which center-aligned items can
-      // overflow their container.  See
-      // https://github.com/philipwalton/flexbugs/tree/6e720da8#flexbug-2
-      style.maxWidth = '100%';
     }
 
     style.fontFamily = cue.fontFamily;

test/text/ui_text_displayer_unit.js

@@ -88,7 +88,7 @@ describe('UITextDisplayer', () => {
 
     const textContainer =
         videoContainer.querySelector('.shaka-text-container');
-    const captions = textContainer.querySelector('div');
+    const captions = textContainer.querySelector('span');
     const cssObj = parseCssText(captions.style.cssText);
     expect(cssObj).toEqual(
         jasmine.objectContaining({
@@ -175,7 +175,7 @@ describe('UITextDisplayer', () => {
 
     const textContainer =
         videoContainer.querySelector('.shaka-text-container');
-    const captions = textContainer.querySelector('div');
+    const captions = textContainer.querySelector('span');
     const cssObj = parseCssText(captions.style.cssText);
     expect(cssObj).toEqual(
         jasmine.objectContaining({
@@ -205,7 +205,7 @@ describe('UITextDisplayer', () => {
 
     const textContainer =
         videoContainer.querySelector('.shaka-text-container');
-    const captions = textContainer.querySelector('div');
+    const captions = textContainer.querySelector('span');
     const cssObj = parseCssText(captions.style.cssText);
     expect(cssObj).toEqual(
         jasmine.objectContaining({'font-size': expectedFontSize}));

ui/less/containers.less

@@ -221,7 +221,7 @@
   transition-delay: 500ms;
 
   /* These are defaults which are overridden by JS or cue styles. */
-  div {
+  span {
     font-size: 20px;
     line-height: 1.4;  // relative to font size.
     background-color: rgba(0, 0, 0, 0.8);