Fix missing background color behind emphasis mark

Add more comments and tests for TextEmphasis

library/core/src/main/java/com/google/android/exoplayer2/text/ttml/TextEmphasis.java

@@ -132,6 +132,21 @@ import java.util.Set;
     return parseNodes(nodes);
   }
 
+  /**
+   * Parses the text emphasis description
+   * See https://www.w3.org/TR/ttml2/#style-attribute-textEmphasis
+   *
+   * The parser considers emphasis-style and emphasis-position independently
+   * If a valid style is not found, it reverts to the default style.
+   * If a valid position is not found, it reverts to the default position.
+   *
+   * Not implemented:
+   *   - emphasis-color
+   *   - quoted string emphasis-style
+   *
+   * @param nodes - the text emphasis description
+   * @return TextEmphasis object encapsulating the text emphasis description
+   */
   private static @Nullable TextEmphasis parseNodes(Set<String> nodes) {
     @MarkShape int markShape;
     @TextEmphasisSpan.MarkFill int markFill = TextEmphasisSpan.MARK_FILL_UNSPECIFIED;
@@ -141,11 +156,9 @@ import java.util.Set;
       // attributes.
       markShape = TtmlNode.TEXT_EMPHASIS_NONE.equals(styleSet.iterator().next())
           ? TextEmphasisSpan.MARK_SHAPE_NONE : MARK_SHAPE_AUTO;
-      // markFill is ignored when markShape is NONE or AUTO
     } else {
       Set<String> fillSet = Sets.intersection(markFillValues, nodes).immutableCopy();
       Set<String> shapeSet = Sets.intersection(markShapeValues, nodes).immutableCopy();
-
       if (fillSet.size() == 0 && shapeSet.size() == 0) {
         // If an implementation does not recognize or otherwise distinguish an emphasis style value,
         // then it must be interpreted as if a style of auto were specified; as such, an

library/core/src/test/java/com/google/android/exoplayer2/text/ttml/TextEmphasisTest.java

@@ -73,7 +73,6 @@ public class TextEmphasisTest {
         .isEqualTo(TextEmphasis.POSITION_OUTSIDE);
   }
 
-
   @Test
   public void testAutoOutside() {
     String value = "auto outside";
@@ -560,4 +559,42 @@ public class TextEmphasisTest {
         .isEqualTo(TextEmphasisSpan.MARK_FILL_FILLED);
     assertWithMessage("position").that(textEmphasis.position).isEqualTo(POSITION_OUTSIDE);
   }
+
+  @Test
+  public void testValidMixedWithInvalidDescription() {
+    String value = "blue open sesame foo bar after";
+    @Nullable TextEmphasis textEmphasis = createTextEmphasis(value);
+    assertWithMessage("Text Emphasis must exist").that(textEmphasis).isNotNull();
+    assertWithMessage("markShape").that(textEmphasis.markShape)
+        .isEqualTo(TextEmphasisSpan.MARK_SHAPE_SESAME);
+    assertWithMessage("markFill").that(textEmphasis.markFill)
+        .isEqualTo(TextEmphasisSpan.MARK_FILL_OPEN);
+    assertWithMessage("position").that(textEmphasis.position).isEqualTo(
+        TextAnnotation.POSITION_AFTER);
+  }
+
+  @Test
+  public void testColorDescriptionNotSupported() {
+    String value = "blue";
+    @Nullable TextEmphasis textEmphasis = createTextEmphasis(value);
+    assertWithMessage("Text Emphasis must exist").that(textEmphasis).isNotNull();
+    assertWithMessage("markShape").that(textEmphasis.markShape)
+        .isEqualTo(MARK_SHAPE_AUTO);
+    assertWithMessage("markFill").that(textEmphasis.markFill)
+        .isEqualTo(TextEmphasisSpan.MARK_FILL_UNSPECIFIED);
+    assertWithMessage("position").that(textEmphasis.position).isEqualTo(POSITION_OUTSIDE);
+  }
+
+  @Test
+  public void testQuotedStringStyleNotSupported() {
+    String value = "\"x\" after";
+    @Nullable TextEmphasis textEmphasis = createTextEmphasis(value);
+    assertWithMessage("Text Emphasis must exist").that(textEmphasis).isNotNull();
+    assertWithMessage("markShape").that(textEmphasis.markShape)
+        .isEqualTo(MARK_SHAPE_AUTO);
+    assertWithMessage("markFill").that(textEmphasis.markFill)
+        .isEqualTo(TextEmphasisSpan.MARK_FILL_UNSPECIFIED);
+    assertWithMessage("position").that(textEmphasis.position)
+        .isEqualTo(TextAnnotation.POSITION_AFTER);
+  }
 }

library/ui/src/main/java/com/google/android/exoplayer2/ui/SpannedToHtmlConverter.java

@@ -206,7 +206,8 @@ import java.util.regex.Pattern;
       return Util
           .formatInvariant(
               "<span style='-webkit-text-emphasis-style: %1$s; text-emphasis-style: %1$s; "
-                  + "-webkit-text-emphasis-position: %2$s; text-emphasis-position: %2$s;'>",
+                  + "-webkit-text-emphasis-position: %2$s; text-emphasis-position: %2$s; "
+                  + "display: inline-block;'>", /** Sets background color behind emphasis mark */
               style, position);
     } else {
       return null;

library/ui/src/test/java/com/google/android/exoplayer2/ui/SpannedToHtmlConverterTest.java

@@ -283,19 +283,19 @@ public class SpannedToHtmlConverterTest {
 
   @Test
   public void convert_supportsTextEmphasisSpan() {
-    SpannableString spanned = new SpannableString("Text emphasis おはよ ございます ");
+    SpannableString spanned = new SpannableString("Text emphasis おはよ ございます");
     spanned.setSpan(
         new TextEmphasisSpan(TextEmphasisSpan.MARK_SHAPE_CIRCLE, TextEmphasisSpan.MARK_FILL_FILLED,
             TextAnnotation.POSITION_BEFORE),
         "Text emphasis ".length(),
-        "Text emphasis おはよ".length(),
+        "Text emphasis おはよ ".length(),
         Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 
     spanned.setSpan(
         new TextEmphasisSpan(TextEmphasisSpan.MARK_SHAPE_SESAME, TextEmphasisSpan.MARK_FILL_OPEN,
             TextAnnotation.POSITION_AFTER),
         "Text emphasis おはよ ".length(),
-        "Text emphasis おはよ ございます ".length(),
+        "Text emphasis おはよ ございます".length(),
         Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 
     SpannedToHtmlConverter.HtmlAndCss htmlAndCss =
@@ -306,12 +306,11 @@ public class SpannedToHtmlConverterTest {
         .isEqualTo(
             "Text emphasis <span style='"
                 + "-webkit-text-emphasis-style: filled circle; text-emphasis-style: filled circle; "
-                + "-webkit-text-emphasis-position: over right; text-emphasis-position: over right;"
-                + "'>&#12362;&#12399;&#12424;</span> "
-                + "<span style='"
+                + "-webkit-text-emphasis-position: over right; text-emphasis-position: over right; "
+                + "display: inline-block;'>&#12362;&#12399;&#12424; </span><span style='"
                 + "-webkit-text-emphasis-style: open sesame; text-emphasis-style: open sesame; "
-                + "-webkit-text-emphasis-position: under left; text-emphasis-position: under left;"
-                + "'>&#12372;&#12374;&#12356;&#12414;&#12377; </span>");
+                + "-webkit-text-emphasis-position: under left; text-emphasis-position: under left; "
+                + "display: inline-block;'>&#12372;&#12374;&#12356;&#12414;&#12377;</span>");
   }
 
   @Test