From baab7c1ddbffcbdeb53c3933b8177cd35101a007 Mon Sep 17 00:00:00 2001
From: Tatsiana Gelahova <tgelahova99@gmail.com>
Date: Wed, 4 Mar 2020 01:51:16 +0300
Subject: [PATCH 01/14] Add support of cellResolution fontSize

---
 externs/shaka/text.js              | 16 +++++++++
 lib/text/cue.js                    | 22 ++++++++++++
 lib/text/ttml_text_parser.js       | 45 +++++++++++++++++++++---
 test/text/ttml_text_parser_unit.js | 37 ++++++++++++++++++++
 ui/text_displayer.js               | 56 +++++++++++++++++++++++++++++-
 5 files changed, 171 insertions(+), 5 deletions(-)

diff --git a/externs/shaka/text.js b/externs/shaka/text.js
index df9a77f9c1..a70d94f01f 100644
--- a/externs/shaka/text.js
+++ b/externs/shaka/text.js
@@ -246,6 +246,22 @@ shaka.extern.Cue = class {
      */
     this.backgroundColor;
 
+    /**
+     * The number of horizontal cells into which the Root Container
+     * Region area is divided
+     * @type {!number}
+     * @exportDoc
+     */
+    this.cellResolutionRows;
+
+    /**
+     * The number of vertical cells into which the Root Container
+     * Region area is divided
+     * @type {!number}
+     * @exportDoc
+     */
+    this.cellResolutionColumns;
+
     /**
      * Image background represented by any string that would be
      * accepted in image HTML element.
diff --git a/lib/text/cue.js b/lib/text/cue.js
index 06ba0c925f..b65a94c823 100644
--- a/lib/text/cue.js
+++ b/lib/text/cue.js
@@ -200,6 +200,18 @@ shaka.text.Cue = class {
      * @exportInterface
      */
     this.spacer = false;
+
+    /**
+     * @override
+     * @exportInterface
+     */
+    this.cellResolutionRows = Cue.cellResolution.ROWS;
+
+    /**
+     * @override
+     * @exportInterface
+     */
+    this.cellResolutionColumns = Cue.cellResolution.COLUMNS;
   }
 };
 
@@ -296,6 +308,16 @@ shaka.text.Cue.fontWeight = {
   'BOLD': 700,
 };
 
+/**
+ * Default values for cue cellResolution
+ *
+ * @enum {number}
+ * @export
+ */
+shaka.text.Cue.cellResolution = {
+  'COLUMNS': 32,
+  'ROWS': 15,
+};
 
 /**
  * @enum {string}
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index 69a682b287..068e43931b 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -76,6 +76,7 @@ shaka.text.TtmlTextParser = class {
       let tickRate = null;
       let spaceStyle = null;
       let extent = null;
+      let cellResolution = null;
       const tts = xml.getElementsByTagName('tt');
       const tt = tts[0];
       // TTML should always have tt element.
@@ -91,6 +92,7 @@ shaka.text.TtmlTextParser = class {
         frameRateMultiplier =
             XmlUtils.getAttributeNS(tt, ttpNs, 'frameRateMultiplier');
         tickRate = XmlUtils.getAttributeNS(tt, ttpNs, 'tickRate');
+        cellResolution = XmlUtils.getAttributeNS(tt, ttpNs, 'cellResolution');
         spaceStyle = tt.getAttribute('xml:space') || 'default';
         extent = tt.getAttribute('tts:extent');
       }
@@ -107,6 +109,9 @@ shaka.text.TtmlTextParser = class {
       const rateInfo = new TtmlTextParser.RateInfo_(
           frameRate, subFrameRate, frameRateMultiplier, tickRate);
 
+      const cellResolutionInfo =
+        TtmlTextParser.getCellResolution_(cellResolution);
+
       const metadataElements = TtmlTextParser.getLeafNodes_(
           tt.getElementsByTagName('metadata')[0]);
       const styles = TtmlTextParser.getLeafNodes_(
@@ -127,7 +132,8 @@ shaka.text.TtmlTextParser = class {
       for (const node of textNodes) {
         const cue = TtmlTextParser.parseCue_(
             node, time.periodStart, rateInfo, metadataElements, styles,
-            regionElements, cueRegions, whitespaceTrim, false);
+            regionElements, cueRegions, whitespaceTrim, false,
+            cellResolutionInfo);
         if (cue) {
           ret.push(cue);
         }
@@ -239,12 +245,13 @@ shaka.text.TtmlTextParser = class {
    * @param {!Array.<!shaka.text.CueRegion>} cueRegions
    * @param {boolean} whitespaceTrim
    * @param {boolean} isNested
+   * @param {Object} cellResolutionInfo
    * @return {shaka.text.Cue}
    * @private
    */
   static parseCue_(
       cueElement, offset, rateInfo, metadataElements, styles, regionElements,
-      cueRegions, whitespaceTrim, isNested) {
+      cueRegions, whitespaceTrim, isNested, cellResolutionInfo) {
     if (isNested && cueElement.nodeName == 'br') {
       const cue = new shaka.text.Cue(0, 0, '');
       cue.spacer = true;
@@ -322,7 +329,8 @@ shaka.text.TtmlTextParser = class {
             regionElements,
             cueRegions,
             whitespaceTrim,
-            /* isNested= */ true
+            /* isNested= */ true,
+            cellResolutionInfo,
         );
 
         if (nestedCue) {
@@ -334,6 +342,9 @@ shaka.text.TtmlTextParser = class {
     const cue = new shaka.text.Cue(start, end, payload);
     cue.nestedCues = nestedCues;
 
+    cue.cellResolutionRows = cellResolutionInfo.rows;
+    cue.cellResolutionColumns = cellResolutionInfo.columns;
+
     // Get other properties if available.
     const regionElement = shaka.text.TtmlTextParser.getElementsFromCollection_(
         cueElement, 'region', regionElements, /* prefix= */ '')[0];
@@ -543,7 +554,8 @@ shaka.text.TtmlTextParser = class {
 
     const fontSize = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'fontSize');
-    if (fontSize && fontSize.match(TtmlTextParser.unitValues_)) {
+    // TODO: correct regular expression
+    if (fontSize) {
       cue.fontSize = fontSize;
     }
 
@@ -933,6 +945,31 @@ shaka.text.TtmlTextParser = class {
 
     return (milliseconds / 1000) + seconds + (minutes * 60) + (hours * 3600);
   }
+
+  /**
+   *
+   * @param {?string} cellResolution
+   * @return {Object}
+   * @private
+   */
+  static getCellResolution_(cellResolution) {
+    const {COLUMNS, ROWS} = shaka.text.Cue.cellResolution;
+
+    // If not specified, the number of columns and rows must be considered
+    // to be 32 and 15 respectively
+    let columns = COLUMNS;
+    let rows = ROWS;
+
+    if (cellResolution) {
+      const regExp = /^(\d+) (\d+)$/.exec(cellResolution);
+
+      if (regExp !== null) {
+        columns = parseInt(regExp[1], 10);
+        rows = parseInt(regExp[2], 10);
+      }
+    }
+    return {columns, rows};
+  }
 };
 
 /**
diff --git a/test/text/ttml_text_parser_unit.js b/test/text/ttml_text_parser_unit.js
index 729e11c607..a9dcfc11e5 100644
--- a/test/text/ttml_text_parser_unit.js
+++ b/test/text/ttml_text_parser_unit.js
@@ -913,6 +913,43 @@ describe('TtmlTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
+  describe('getCellResolution_', () => {
+    const {cellResolution} = shaka.text.Cue;
+
+    const DEFAULT = {
+      columns: cellResolution.COLUMNS,
+      rows: cellResolution.ROWS,
+    };
+
+    const {getCellResolution_} = shaka.text.TtmlTextParser;
+
+    it('should return default values if cellResolution was not provided',
+        () => {
+          expect(getCellResolution_('')).toEqual(DEFAULT);
+          expect(getCellResolution_(null)).toEqual(DEFAULT);
+        });
+
+    it('should return default values if provided cellResolution is not valid',
+        () => {
+          expect(getCellResolution_('')).toEqual(DEFAULT);
+          expect(getCellResolution_('-50 14')).toEqual(DEFAULT);
+          expect(getCellResolution_('60 incorrect')).toEqual(DEFAULT);
+          expect(getCellResolution_('incorrect50 14')).toEqual(DEFAULT);
+          expect(getCellResolution_('50 14incorrect')).toEqual(DEFAULT);
+        });
+
+    it('should return columns and rows by provided cell resolution', () => {
+      expect(getCellResolution_('60 20')).toEqual({
+        columns: 60,
+        rows: 20,
+      });
+      expect(getCellResolution_('10 30')).toEqual({
+        columns: 10,
+        rows: 30,
+      });
+    });
+  });
+
 
   /**
    * @param {!Array} cues
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index 934ddccc6e..fff9d74d61 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -268,11 +268,15 @@ shaka.ui.TextDisplayer = class {
       captionsStyle.margin = '0';
     }
 
+    const {convertLengthValue_} = shaka.ui.TextDisplayer;
+
     captionsStyle.fontFamily = cue.fontFamily;
     captionsStyle.fontWeight = cue.fontWeight.toString();
-    captionsStyle.fontSize = cue.fontSize;
     captionsStyle.fontStyle = cue.fontStyle;
     captionsStyle.letterSpacing = cue.letterSpacing;
+    captionsStyle.fontSize = convertLengthValue_(
+        cue.fontSize, cue, this.videoContainer_
+    );
 
     // The line attribute defines the positioning of the text container inside
     // the video container.
@@ -361,4 +365,54 @@ shaka.ui.TextDisplayer = class {
       panelStyle.height = cue.size + '%';
     }
   }
+
+  /**
+   * Returns info about provided lengthValue
+   * @example 100px => { value: 100, unit: 'px' }
+   * @param {?string} lengthValue
+   *
+   * @return {?{ value: number, unit: string }}
+   * @private
+   */
+  static getLengthValueInfo_(lengthValue) {
+    const regexp = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
+
+    if (!regexp) {
+      return null;
+    }
+
+    return {
+      value: Number(regexp[1]),
+      unit: regexp[2],
+    };
+  }
+
+  /**
+   * Converts length value
+   *
+   * @param {string} lengthValue
+   * @param {!shaka.extern.Cue} cue
+   * @param {HTMLElement} videoContainer
+   * @return {string}
+   * @private
+  */
+  static convertLengthValue_(lengthValue, cue, videoContainer) {
+    const {getLengthValueInfo_} = shaka.ui.TextDisplayer;
+
+    const lengthValueInfo = getLengthValueInfo_(lengthValue);
+
+    if (!lengthValueInfo) {
+      return lengthValue;
+    }
+
+    const {unit, value} = getLengthValueInfo_(lengthValue);
+
+    if (unit === 'c') {
+      const containerHeight = videoContainer.clientHeight;
+
+      return (containerHeight * (1 /cue.cellResolutionRows) * value) + 'px';
+    }
+
+    return lengthValue;
+  }
 };

From a8d5c6423e423a9f3aa964d803950631672aa5c0 Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Wed, 4 Mar 2020 12:18:28 +0300
Subject: [PATCH 02/14] Update unit tests for parsing cellResolution from ttml
 cue

---
 test/text/ttml_text_parser_unit.js | 88 ++++++++++++++++--------------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/test/text/ttml_text_parser_unit.js b/test/text/ttml_text_parser_unit.js
index a9dcfc11e5..f01fe13247 100644
--- a/test/text/ttml_text_parser_unit.js
+++ b/test/text/ttml_text_parser_unit.js
@@ -792,8 +792,8 @@ describe('TtmlTextParser', () => {
     verifyHelper(
         [
           {
-            startTime: 62.05,
-            endTime: 3723.2,
+            startTime: 1,
+            endTime: 2,
             payload: 'Test',
             color: 'red',
             backgroundColor: 'blue',
@@ -803,6 +803,12 @@ describe('TtmlTextParser', () => {
             lineHeight: '20px',
             fontSize: '10em',
           },
+          {
+            startTime: 2,
+            endTime: 4,
+            payload: 'Test 2',
+            fontSize: '0.80c',
+          },
         ],
         '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
         '<styling>' +
@@ -813,12 +819,14 @@ describe('TtmlTextParser', () => {
         'tts:fontStyle="italic" ' +
         'tts:lineHeight="20px" ' +
         'tts:fontSize="10em"/>' +
+        '<style xml:id="s2" tts:fontSize="0.80c" />' +
         '</styling>' +
         '<layout>' +
         '<region xml:id="subtitleArea" />' +
         '</layout>' +
         '<body region="subtitleArea">' +
-        '<p begin="01:02.05" end="01:02:03.200" style="s1">Test</p>' +
+        '<p begin="00:01.00" end="00:02.00" style="s1">Test</p>' +
+        '<p begin="00:02.00" end="00:04.00" style="s2">Test 2</p>' +
         '</body>' +
         '</tt>',
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
@@ -875,6 +883,42 @@ describe('TtmlTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
+  it('parses cellResolution', () => {
+    verifyHelper(
+        [
+          {
+            startTime: 1,
+            endTime: 2,
+            cellResolutionRows: Cue.cellResolution.ROWS,
+            cellResolutionColumns: Cue.cellResolution.COLUMNS,
+          },
+        ],
+        '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<body >' +
+        '<p begin="00:01.00" end="00:02.00">Test</p>' +
+        '</body>' +
+        '</tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0});
+
+    verifyHelper(
+        [
+          {
+            startTime: 1,
+            endTime: 2,
+            payload: 'Test',
+            cellResolutionRows: 20,
+            cellResolutionColumns: 60,
+          },
+        ],
+        '<tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" ' +
+        'ttp:cellResolution="60 20">' +
+        '<body >' +
+        '<p begin="00:01.00" end="00:02.00">Test</p>' +
+        '</body>' +
+        '</tt>',
+        {periodStart: 0, segmentStart: 0, segmentEnd: 0});
+  });
+
   it('chooses style on element over style on region', () => {
     verifyHelper(
         [
@@ -913,44 +957,6 @@ describe('TtmlTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
-  describe('getCellResolution_', () => {
-    const {cellResolution} = shaka.text.Cue;
-
-    const DEFAULT = {
-      columns: cellResolution.COLUMNS,
-      rows: cellResolution.ROWS,
-    };
-
-    const {getCellResolution_} = shaka.text.TtmlTextParser;
-
-    it('should return default values if cellResolution was not provided',
-        () => {
-          expect(getCellResolution_('')).toEqual(DEFAULT);
-          expect(getCellResolution_(null)).toEqual(DEFAULT);
-        });
-
-    it('should return default values if provided cellResolution is not valid',
-        () => {
-          expect(getCellResolution_('')).toEqual(DEFAULT);
-          expect(getCellResolution_('-50 14')).toEqual(DEFAULT);
-          expect(getCellResolution_('60 incorrect')).toEqual(DEFAULT);
-          expect(getCellResolution_('incorrect50 14')).toEqual(DEFAULT);
-          expect(getCellResolution_('50 14incorrect')).toEqual(DEFAULT);
-        });
-
-    it('should return columns and rows by provided cell resolution', () => {
-      expect(getCellResolution_('60 20')).toEqual({
-        columns: 60,
-        rows: 20,
-      });
-      expect(getCellResolution_('10 30')).toEqual({
-        columns: 10,
-        rows: 30,
-      });
-    });
-  });
-
-
   /**
    * @param {!Array} cues
    * @param {string} text

From 40ee5d7bbf82b15f3e9671d91a5251b635e914aa Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Wed, 4 Mar 2020 15:29:27 +0300
Subject: [PATCH 03/14] Add unit test in text_displayer for cellResolution
 support

---
 lib/text/ttml_text_parser.js   |  7 +++----
 test/ui/text_displayer_unit.js | 33 ++++++++++++++++++++++++++++++++-
 ui/text_displayer.js           |  2 +-
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index 068e43931b..f24ddd3475 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -554,8 +554,7 @@ shaka.text.TtmlTextParser = class {
 
     const fontSize = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'fontSize');
-    // TODO: correct regular expression
-    if (fontSize) {
+    if (fontSize && fontSize.match(TtmlTextParser.unitValues_)) {
       cue.fontSize = fontSize;
     }
 
@@ -1033,9 +1032,9 @@ shaka.text.TtmlTextParser.percentValues_ =
 /**
  * @const
  * @private {!RegExp}
- * @example 100px
+ * @example 100px, 8em, 0.80c
  */
-shaka.text.TtmlTextParser.unitValues_ = /^(\d+px|\d+em)$/;
+shaka.text.TtmlTextParser.unitValues_ = /^(\d+px|\d+em|\d*\.?\d+c)$/;
 
 /**
  * @const
diff --git a/test/ui/text_displayer_unit.js b/test/ui/text_displayer_unit.js
index 32fcc60906..0e4f890a76 100644
--- a/test/ui/text_displayer_unit.js
+++ b/test/ui/text_displayer_unit.js
@@ -10,6 +10,8 @@ describe('UITextDisplayer', () => {
   let video;
   /** @type {shaka.ui.TextDisplayer} */
   let textDisplayer;
+  /** @type {number} */
+  const videoContainerHeight = 450;
 
   /**
    * Transform a cssText to an object.
@@ -39,15 +41,20 @@ describe('UITextDisplayer', () => {
   }
 
 
-  beforeAll(() => {
+  beforeEach(() => {
     videoContainer =
       /** @type {!HTMLElement} */ (document.createElement('div'));
+    videoContainer.style.height = `${videoContainerHeight}px`;
     document.body.appendChild(videoContainer);
     video = shaka.test.UiUtils.createVideoElement();
     videoContainer.appendChild(video);
     textDisplayer = new shaka.ui.TextDisplayer(video, videoContainer);
   });
 
+  afterEach(() => {
+    textDisplayer.destroy();
+  });
+
   it('correctly displays styles for cues', async () => {
     /** @type {!shaka.text.Cue} */
     const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
@@ -129,4 +136,28 @@ describe('UITextDisplayer', () => {
           // 'writing-mode': 'horizontal-tb',
         }));
   });
+
+  it('correctly displays styles for cellResolution units', async () => {
+    /** @type {!shaka.text.Cue} */
+    const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
+    cue.fontSize = '0.80c';
+    cue.cellResolutionRows = 20;
+    cue.cellResolutionColumns = 60;
+
+    textDisplayer.setTextVisibility(true);
+    textDisplayer.append([cue]);
+    // Wait until updateCaptions_() gets called.
+    await shaka.test.Util.delay(0.5);
+
+    // Expected value is calculated based on  ttp:cellResolution="60 20"
+    // videoContainerHeight=450px and tts:fontSize="0.80c" on the default style.
+    const expectedFontSize = '18px';
+
+    const textContainer =
+        videoContainer.querySelector('.shaka-text-container');
+    const captions = textContainer.querySelector('span');
+    const cssObj = parseCssText(captions.style.cssText);
+    expect(cssObj).toEqual(
+        jasmine.objectContaining({'font-size': expectedFontSize}));
+  });
 });
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index fff9d74d61..b866eacd8a 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -405,7 +405,7 @@ shaka.ui.TextDisplayer = class {
       return lengthValue;
     }
 
-    const {unit, value} = getLengthValueInfo_(lengthValue);
+    const {unit, value} = lengthValueInfo;
 
     if (unit === 'c') {
       const containerHeight = videoContainer.clientHeight;

From 1306ca52b6c587e5242c16c268ee0834b5410a87 Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Wed, 4 Mar 2020 17:17:31 +0300
Subject: [PATCH 04/14] Add support of percentages values of fontSize

---
 lib/text/ttml_text_parser.js   | 14 +++++++++++++-
 test/ui/text_displayer_unit.js | 24 ++++++++++++++++++++++++
 ui/text_displayer.js           | 34 +++++++++++++++++++++++++++-------
 3 files changed, 64 insertions(+), 8 deletions(-)

diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index f24ddd3475..d2382ee8c0 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -554,7 +554,12 @@ shaka.text.TtmlTextParser = class {
 
     const fontSize = TtmlTextParser.getStyleAttribute_(
         cueElement, region, styles, 'fontSize');
-    if (fontSize && fontSize.match(TtmlTextParser.unitValues_)) {
+
+    const isValidFontSizeUnit = fontSize
+      && (fontSize.match(TtmlTextParser.unitValues_)
+      || fontSize.match(TtmlTextParser.percentValue_));
+
+    if (isValidFontSizeUnit) {
       cue.fontSize = fontSize;
     }
 
@@ -1029,6 +1034,13 @@ shaka.text.TtmlTextParser.RateInfo_ = class {
 shaka.text.TtmlTextParser.percentValues_ =
     /^(\d{1,2}(?:\.\d+)?|100)% (\d{1,2}(?:\.\d+)?|100)%$/;
 
+/**
+ * @const
+ * @private {!RegExp}
+ * @example 0.6% 90%
+ */
+shaka.text.TtmlTextParser.percentValue_ = /^(\d{1,2}(?:\.\d+)?|100)%$/;
+
 /**
  * @const
  * @private {!RegExp}
diff --git a/test/ui/text_displayer_unit.js b/test/ui/text_displayer_unit.js
index 0e4f890a76..b0284c933d 100644
--- a/test/ui/text_displayer_unit.js
+++ b/test/ui/text_displayer_unit.js
@@ -160,4 +160,28 @@ describe('UITextDisplayer', () => {
     expect(cssObj).toEqual(
         jasmine.objectContaining({'font-size': expectedFontSize}));
   });
+
+  it('correctly displays styles for percentages units', async () => {
+    /** @type {!shaka.text.Cue} */
+    const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
+    cue.fontSize = '0.90c';
+    cue.cellResolutionRows = 15;
+    cue.cellResolutionColumns = 32;
+
+    textDisplayer.setTextVisibility(true);
+    textDisplayer.append([cue]);
+    // Wait until updateCaptions_() gets called.
+    await shaka.test.Util.delay(0.5);
+
+    // Expected value is calculated based on  ttp:cellResolution="32 15"
+    // videoContainerHeight=450px and tts:fontSize="90%" on the default style.
+    const expectedFontSize = '27px';
+
+    const textContainer =
+        videoContainer.querySelector('.shaka-text-container');
+    const captions = textContainer.querySelector('span');
+    const cssObj = parseCssText(captions.style.cssText);
+    expect(cssObj).toEqual(
+        jasmine.objectContaining({'font-size': expectedFontSize}));
+  });
 });
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index b866eacd8a..23af396bc3 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -397,9 +397,9 @@ shaka.ui.TextDisplayer = class {
    * @private
   */
   static convertLengthValue_(lengthValue, cue, videoContainer) {
-    const {getLengthValueInfo_} = shaka.ui.TextDisplayer;
+    const {TextDisplayer} = shaka.ui;
 
-    const lengthValueInfo = getLengthValueInfo_(lengthValue);
+    const lengthValueInfo = TextDisplayer.getLengthValueInfo_(lengthValue);
 
     if (!lengthValueInfo) {
       return lengthValue;
@@ -407,12 +407,32 @@ shaka.ui.TextDisplayer = class {
 
     const {unit, value} = lengthValueInfo;
 
-    if (unit === 'c') {
-      const containerHeight = videoContainer.clientHeight;
-
-      return (containerHeight * (1 /cue.cellResolutionRows) * value) + 'px';
+    switch (unit) {
+      case '%':
+        return TextDisplayer.getComputedValue_(
+            value / 100,
+            cue,
+            videoContainer
+        );
+      case 'c':
+        return TextDisplayer.getComputedValue_(value, cue, videoContainer);
+      default:
+        return lengthValue;
     }
+  }
+
+  /**
+   * Returns computed value
+   * @param {number} value
+   * @param {!shaka.extern.Cue} cue
+   * @param {HTMLElement} videoContainer
+   * @return {string}
+   *
+   * @private
+   * */
+  static getComputedValue_(value, cue, videoContainer) {
+    const containerHeight = videoContainer.clientHeight;
 
-    return lengthValue;
+    return (containerHeight * value / cue.cellResolutionRows) + 'px';
   }
 };

From 7e857b68dae97d52842c70afb86a50eb3a024834 Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Wed, 4 Mar 2020 17:41:25 +0300
Subject: [PATCH 05/14] Update authors and contributors

---
 AUTHORS      | 1 +
 CONTRIBUTORS | 1 +
 2 files changed, 2 insertions(+)

diff --git a/AUTHORS b/AUTHORS
index 2e60643b22..9c787fd2a0 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -50,6 +50,7 @@ SameGoal Inc. <*@samegoal.com>
 Sanborn Hilland <sanbornh@rogers.com>
 Sander Saares <sander@saares.eu>
 TalkTalk Plc <*@talktalkplc.com>
+Tatsiana Gelahova <tatsiana.gelahova@gmail.com>
 Tomas Tichy <mr.tichyt@gmail.com>
 Tomohiro Matsuzawa <thmatuza75@hotmail.com>
 Toshihiro Suzuki <t.suzuki326@gmail.com>
diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index 75a9e91fd5..d7e35271b6 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -76,6 +76,7 @@ Sandra Lokshina <ismena@google.com>
 Satheesh Velmurugan <satheesh@philo.com>
 Semih Gokceoglu <semih.gkcoglu@gmail.com>
 Seth Madison <seth@philo.com>
+Tatsiana Gelahova <tatsiana.gelahova@gmail.com>
 Theodore Abshire <theodab@google.com>
 Thomas Stephens <thomas@ustudio.com>
 Tim Plummer <objelisks@google.com>

From 27f429b1e8db832a0371c175c94522b1027df1dc Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Wed, 4 Mar 2020 18:45:37 +0300
Subject: [PATCH 06/14] Change cellResolution type in Cue

---
 externs/shaka/text.js              | 18 ++++++------------
 lib/text/cue.js                    | 10 ++--------
 lib/text/ttml_text_parser.js       | 20 +++++++++-----------
 test/text/ttml_text_parser_unit.js |  9 +++++----
 test/ui/text_displayer_unit.js     |  6 ++----
 ui/text_displayer.js               |  3 ++-
 6 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/externs/shaka/text.js b/externs/shaka/text.js
index a70d94f01f..284e31ca51 100644
--- a/externs/shaka/text.js
+++ b/externs/shaka/text.js
@@ -247,20 +247,14 @@ shaka.extern.Cue = class {
     this.backgroundColor;
 
     /**
-     * The number of horizontal cells into which the Root Container
-     * Region area is divided
-     * @type {!number}
-     * @exportDoc
-     */
-    this.cellResolutionRows;
-
-    /**
-     * The number of vertical cells into which the Root Container
-     * Region area is divided
-     * @type {!number}
+     * The number of horizontal and vertical cells into which
+     * the Root Container Region area is divided
+     * cellResolution[0] - columns
+     * cellResolution[1] - rows
+     * @type {!Array.<number>}
      * @exportDoc
      */
-    this.cellResolutionColumns;
+    this.cellResolution;
 
     /**
      * Image background represented by any string that would be
diff --git a/lib/text/cue.js b/lib/text/cue.js
index b65a94c823..84e0bbd33e 100644
--- a/lib/text/cue.js
+++ b/lib/text/cue.js
@@ -205,13 +205,7 @@ shaka.text.Cue = class {
      * @override
      * @exportInterface
      */
-    this.cellResolutionRows = Cue.cellResolution.ROWS;
-
-    /**
-     * @override
-     * @exportInterface
-     */
-    this.cellResolutionColumns = Cue.cellResolution.COLUMNS;
+    this.cellResolution = [Cue.cellResolution.COLUMNS, Cue.cellResolution.ROWS];
   }
 };
 
@@ -311,7 +305,7 @@ shaka.text.Cue.fontWeight = {
 /**
  * Default values for cue cellResolution
  *
- * @enum {number}
+ * @const
  * @export
  */
 shaka.text.Cue.cellResolution = {
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index d2382ee8c0..21762b9e6c 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -245,13 +245,13 @@ shaka.text.TtmlTextParser = class {
    * @param {!Array.<!shaka.text.CueRegion>} cueRegions
    * @param {boolean} whitespaceTrim
    * @param {boolean} isNested
-   * @param {Object} cellResolutionInfo
+   * @param {!Array.<number>} cellResolution
    * @return {shaka.text.Cue}
    * @private
    */
   static parseCue_(
       cueElement, offset, rateInfo, metadataElements, styles, regionElements,
-      cueRegions, whitespaceTrim, isNested, cellResolutionInfo) {
+      cueRegions, whitespaceTrim, isNested, cellResolution) {
     if (isNested && cueElement.nodeName == 'br') {
       const cue = new shaka.text.Cue(0, 0, '');
       cue.spacer = true;
@@ -330,7 +330,7 @@ shaka.text.TtmlTextParser = class {
             cueRegions,
             whitespaceTrim,
             /* isNested= */ true,
-            cellResolutionInfo,
+            cellResolution,
         );
 
         if (nestedCue) {
@@ -341,9 +341,7 @@ shaka.text.TtmlTextParser = class {
 
     const cue = new shaka.text.Cue(start, end, payload);
     cue.nestedCues = nestedCues;
-
-    cue.cellResolutionRows = cellResolutionInfo.rows;
-    cue.cellResolutionColumns = cellResolutionInfo.columns;
+    cue.cellResolution= cellResolution;
 
     // Get other properties if available.
     const regionElement = shaka.text.TtmlTextParser.getElementsFromCollection_(
@@ -953,16 +951,16 @@ shaka.text.TtmlTextParser = class {
   /**
    *
    * @param {?string} cellResolution
-   * @return {Object}
+   * @return {!Array.<number>}
    * @private
    */
   static getCellResolution_(cellResolution) {
-    const {COLUMNS, ROWS} = shaka.text.Cue.cellResolution;
+    const {Cue} = shaka.text;
 
     // If not specified, the number of columns and rows must be considered
     // to be 32 and 15 respectively
-    let columns = COLUMNS;
-    let rows = ROWS;
+    let columns = Cue.cellResolution.COLUMNS;
+    let rows = Cue.cellResolution.ROWS;
 
     if (cellResolution) {
       const regExp = /^(\d+) (\d+)$/.exec(cellResolution);
@@ -972,7 +970,7 @@ shaka.text.TtmlTextParser = class {
         rows = parseInt(regExp[2], 10);
       }
     }
-    return {columns, rows};
+    return [columns, rows];
   }
 };
 
diff --git a/test/text/ttml_text_parser_unit.js b/test/text/ttml_text_parser_unit.js
index f01fe13247..d64c37355d 100644
--- a/test/text/ttml_text_parser_unit.js
+++ b/test/text/ttml_text_parser_unit.js
@@ -889,8 +889,10 @@ describe('TtmlTextParser', () => {
           {
             startTime: 1,
             endTime: 2,
-            cellResolutionRows: Cue.cellResolution.ROWS,
-            cellResolutionColumns: Cue.cellResolution.COLUMNS,
+            cellResolution: [
+              Cue.cellResolution.COLUMNS,
+              Cue.cellResolution.ROWS,
+            ],
           },
         ],
         '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
@@ -906,8 +908,7 @@ describe('TtmlTextParser', () => {
             startTime: 1,
             endTime: 2,
             payload: 'Test',
-            cellResolutionRows: 20,
-            cellResolutionColumns: 60,
+            cellResolution: [60, 20],
           },
         ],
         '<tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" ' +
diff --git a/test/ui/text_displayer_unit.js b/test/ui/text_displayer_unit.js
index b0284c933d..575f017ae7 100644
--- a/test/ui/text_displayer_unit.js
+++ b/test/ui/text_displayer_unit.js
@@ -141,8 +141,7 @@ describe('UITextDisplayer', () => {
     /** @type {!shaka.text.Cue} */
     const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
     cue.fontSize = '0.80c';
-    cue.cellResolutionRows = 20;
-    cue.cellResolutionColumns = 60;
+    cue.cellResolution = [60, 20];
 
     textDisplayer.setTextVisibility(true);
     textDisplayer.append([cue]);
@@ -165,8 +164,7 @@ describe('UITextDisplayer', () => {
     /** @type {!shaka.text.Cue} */
     const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
     cue.fontSize = '0.90c';
-    cue.cellResolutionRows = 15;
-    cue.cellResolutionColumns = 32;
+    cue.cellResolution = [32, 15];
 
     textDisplayer.setTextVisibility(true);
     textDisplayer.append([cue]);
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index 23af396bc3..e93d3172c6 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -432,7 +432,8 @@ shaka.ui.TextDisplayer = class {
    * */
   static getComputedValue_(value, cue, videoContainer) {
     const containerHeight = videoContainer.clientHeight;
+    const cellResolutionRows = cue.cellResolution[1];
 
-    return (containerHeight * value / cue.cellResolutionRows) + 'px';
+    return (containerHeight * value / cellResolutionRows) + 'px';
   }
 };

From 7757a3d986a0309511836190cec8877fb3de9a22 Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Wed, 4 Mar 2020 19:27:16 +0300
Subject: [PATCH 07/14] Rename variable in getLengthValueInfo_  method

---
 lib/text/ttml_text_parser.js | 3 ++-
 ui/text_displayer.js         | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index 21762b9e6c..71534c03b0 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -341,7 +341,7 @@ shaka.text.TtmlTextParser = class {
 
     const cue = new shaka.text.Cue(start, end, payload);
     cue.nestedCues = nestedCues;
-    cue.cellResolution= cellResolution;
+    cue.cellResolution = cellResolution;
 
     // Get other properties if available.
     const regionElement = shaka.text.TtmlTextParser.getElementsFromCollection_(
@@ -970,6 +970,7 @@ shaka.text.TtmlTextParser = class {
         rows = parseInt(regExp[2], 10);
       }
     }
+
     return [columns, rows];
   }
 };
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index e93d3172c6..0e598d323e 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -375,15 +375,15 @@ shaka.ui.TextDisplayer = class {
    * @private
    */
   static getLengthValueInfo_(lengthValue) {
-    const regexp = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
+    const matches = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
 
-    if (!regexp) {
+    if (!matches ) {
       return null;
     }
 
     return {
-      value: Number(regexp[1]),
-      unit: regexp[2],
+      value: Number(matches[1]),
+      unit: matches[2],
     };
   }
 

From 751468849a56f94703c4b2689db70b498ac0ebc7 Mon Sep 17 00:00:00 2001
From: Tatsiana Gelahova <tgelahova99@gmail.com>
Date: Thu, 5 Mar 2020 00:11:37 +0300
Subject: [PATCH 08/14] Fix review remarks

---
 lib/text/cue.js                    | 13 +-----------
 lib/text/ttml_text_parser.js       | 32 +++++++++++++++---------------
 test/text/ttml_text_parser_unit.js | 25 +++++++++++++++--------
 test/ui/text_displayer_unit.js     |  5 ++++-
 ui/text_displayer.js               | 27 +++++++++++++++----------
 5 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/lib/text/cue.js b/lib/text/cue.js
index 84e0bbd33e..ddcea46267 100644
--- a/lib/text/cue.js
+++ b/lib/text/cue.js
@@ -205,7 +205,7 @@ shaka.text.Cue = class {
      * @override
      * @exportInterface
      */
-    this.cellResolution = [Cue.cellResolution.COLUMNS, Cue.cellResolution.ROWS];
+    this.cellResolution = [32, 15]; // columns, rows
   }
 };
 
@@ -302,17 +302,6 @@ shaka.text.Cue.fontWeight = {
   'BOLD': 700,
 };
 
-/**
- * Default values for cue cellResolution
- *
- * @const
- * @export
- */
-shaka.text.Cue.cellResolution = {
-  'COLUMNS': 32,
-  'ROWS': 15,
-};
-
 /**
  * @enum {string}
  * @export
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index 71534c03b0..fbf559617b 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -245,7 +245,7 @@ shaka.text.TtmlTextParser = class {
    * @param {!Array.<!shaka.text.CueRegion>} cueRegions
    * @param {boolean} whitespaceTrim
    * @param {boolean} isNested
-   * @param {!Array.<number>} cellResolution
+   * @param {?Array.<number>} cellResolution
    * @return {shaka.text.Cue}
    * @private
    */
@@ -341,7 +341,10 @@ shaka.text.TtmlTextParser = class {
 
     const cue = new shaka.text.Cue(start, end, payload);
     cue.nestedCues = nestedCues;
-    cue.cellResolution = cellResolution;
+
+    if (cellResolution) {
+      cue.cellResolution = cellResolution;
+    }
 
     // Get other properties if available.
     const regionElement = shaka.text.TtmlTextParser.getElementsFromCollection_(
@@ -949,28 +952,25 @@ shaka.text.TtmlTextParser = class {
   }
 
   /**
+   * If ttp:cellResolution provided returns array
+   * with cellResolution info, where
+   * cellResolution[0] - columns
+   * cellResolution[1] - rows
    *
    * @param {?string} cellResolution
-   * @return {!Array.<number>}
+   * @return {?Array.<number>}
    * @private
    */
   static getCellResolution_(cellResolution) {
-    const {Cue} = shaka.text;
+    const matches = /^(\d+) (\d+)$/.exec(cellResolution);
 
-    // If not specified, the number of columns and rows must be considered
-    // to be 32 and 15 respectively
-    let columns = Cue.cellResolution.COLUMNS;
-    let rows = Cue.cellResolution.ROWS;
-
-    if (cellResolution) {
-      const regExp = /^(\d+) (\d+)$/.exec(cellResolution);
-
-      if (regExp !== null) {
-        columns = parseInt(regExp[1], 10);
-        rows = parseInt(regExp[2], 10);
-      }
+    if (!matches) {
+      return null;
     }
 
+    const columns = parseInt(matches[1], 10);
+    const rows = parseInt(matches[2], 10);
+
     return [columns, rows];
   }
 };
diff --git a/test/text/ttml_text_parser_unit.js b/test/text/ttml_text_parser_unit.js
index d64c37355d..0c4a42a145 100644
--- a/test/text/ttml_text_parser_unit.js
+++ b/test/text/ttml_text_parser_unit.js
@@ -883,25 +883,28 @@ describe('TtmlTextParser', () => {
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
   });
 
-  it('parses cellResolution', () => {
+  it('cues should have default cellResolution', () => {
     verifyHelper(
         [
           {
             startTime: 1,
             endTime: 2,
-            cellResolution: [
-              Cue.cellResolution.COLUMNS,
-              Cue.cellResolution.ROWS,
-            ],
+            cellResolution: [32, 15],
+            fontSize: '0.45c',
           },
         ],
         '<tt xmlns:tts="http://www.w3.org/ns/ttml#styling">' +
+        '<styling>' +
+        '<style xml:id="s1" tts:fontSize="0.45c"/>' +
+        '</styling>' +
         '<body >' +
-        '<p begin="00:01.00" end="00:02.00">Test</p>' +
+        '<p begin="00:01.00" end="00:02.00" style="s1">Test</p>' +
         '</body>' +
         '</tt>',
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
+  });
 
+  it('parses cellResolution', () => {
     verifyHelper(
         [
           {
@@ -909,12 +912,18 @@ describe('TtmlTextParser', () => {
             endTime: 2,
             payload: 'Test',
             cellResolution: [60, 20],
+            fontSize: '67%',
           },
         ],
-        '<tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" ' +
+        '<tt ' +
+        'xmlns:ttp="http://www.w3.org/ns/ttml#parameter" ' +
+        'xmlns:tts="http://www.w3.org/ns/ttml#styling" ' +
         'ttp:cellResolution="60 20">' +
+        '<styling>' +
+        '<style xml:id="s1" tts:fontSize="67%"/>' +
+        '</styling>' +
         '<body >' +
-        '<p begin="00:01.00" end="00:02.00">Test</p>' +
+        '<p begin="00:01.00" end="00:02.00" style="s1">Test</p>' +
         '</body>' +
         '</tt>',
         {periodStart: 0, segmentStart: 0, segmentEnd: 0});
diff --git a/test/ui/text_displayer_unit.js b/test/ui/text_displayer_unit.js
index 575f017ae7..7e29e5d6e2 100644
--- a/test/ui/text_displayer_unit.js
+++ b/test/ui/text_displayer_unit.js
@@ -41,13 +41,16 @@ describe('UITextDisplayer', () => {
   }
 
 
-  beforeEach(() => {
+  beforeAll(() => {
     videoContainer =
       /** @type {!HTMLElement} */ (document.createElement('div'));
     videoContainer.style.height = `${videoContainerHeight}px`;
     document.body.appendChild(videoContainer);
     video = shaka.test.UiUtils.createVideoElement();
     videoContainer.appendChild(video);
+  });
+
+  beforeEach(() => {
     textDisplayer = new shaka.ui.TextDisplayer(video, videoContainer);
   });
 
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index 0e598d323e..e5cfce9a93 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -268,13 +268,11 @@ shaka.ui.TextDisplayer = class {
       captionsStyle.margin = '0';
     }
 
-    const {convertLengthValue_} = shaka.ui.TextDisplayer;
-
     captionsStyle.fontFamily = cue.fontFamily;
     captionsStyle.fontWeight = cue.fontWeight.toString();
     captionsStyle.fontStyle = cue.fontStyle;
     captionsStyle.letterSpacing = cue.letterSpacing;
-    captionsStyle.fontSize = convertLengthValue_(
+    captionsStyle.fontSize = shaka.ui.TextDisplayer.convertLengthValue_(
         cue.fontSize, cue, this.videoContainer_
     );
 
@@ -377,7 +375,7 @@ shaka.ui.TextDisplayer = class {
   static getLengthValueInfo_(lengthValue) {
     const matches = new RegExp(/(\d*\.?\d+)([a-z]+|%+)/).exec(lengthValue);
 
-    if (!matches ) {
+    if (!matches) {
       return null;
     }
 
@@ -388,7 +386,10 @@ shaka.ui.TextDisplayer = class {
   }
 
   /**
-   * Converts length value
+   * Converts length value to an absolute value in pixels.
+   * If lengthValue is already an absolute value it will not
+   * be modified. Relative lengthValue will be converted to an
+   * absolute value in pixels based on Computed Cell Size
    *
    * @param {string} lengthValue
    * @param {!shaka.extern.Cue} cue
@@ -397,9 +398,12 @@ shaka.ui.TextDisplayer = class {
    * @private
   */
   static convertLengthValue_(lengthValue, cue, videoContainer) {
-    const {TextDisplayer} = shaka.ui;
+    const {
+      getLengthValueInfo_,
+      getAbsoluteLengthInPixels_,
+    } = shaka.ui.TextDisplayer;
 
-    const lengthValueInfo = TextDisplayer.getLengthValueInfo_(lengthValue);
+    const lengthValueInfo = getLengthValueInfo_(lengthValue);
 
     if (!lengthValueInfo) {
       return lengthValue;
@@ -409,20 +413,21 @@ shaka.ui.TextDisplayer = class {
 
     switch (unit) {
       case '%':
-        return TextDisplayer.getComputedValue_(
+        return getAbsoluteLengthInPixels_(
             value / 100,
             cue,
             videoContainer
         );
       case 'c':
-        return TextDisplayer.getComputedValue_(value, cue, videoContainer);
+        return getAbsoluteLengthInPixels_(value, cue, videoContainer);
       default:
         return lengthValue;
     }
   }
 
   /**
-   * Returns computed value
+   * Returns computed absolute length value in pixels based on cell
+   * and a video container size
    * @param {number} value
    * @param {!shaka.extern.Cue} cue
    * @param {HTMLElement} videoContainer
@@ -430,7 +435,7 @@ shaka.ui.TextDisplayer = class {
    *
    * @private
    * */
-  static getComputedValue_(value, cue, videoContainer) {
+  static getAbsoluteLengthInPixels_(value, cue, videoContainer) {
     const containerHeight = videoContainer.clientHeight;
     const cellResolutionRows = cue.cellResolution[1];
 

From 12e68421fbe0242a835e4846c91203ad154d2dec Mon Sep 17 00:00:00 2001
From: Tatsiana Gelahova <tatsiana.gelahova@gmail.com>
Date: Thu, 5 Mar 2020 00:17:16 +0300
Subject: [PATCH 09/14] Return blank line

---
 lib/text/cue.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/text/cue.js b/lib/text/cue.js
index ddcea46267..c5eaf81150 100644
--- a/lib/text/cue.js
+++ b/lib/text/cue.js
@@ -302,6 +302,7 @@ shaka.text.Cue.fontWeight = {
   'BOLD': 700,
 };
 
+
 /**
  * @enum {string}
  * @export

From 79fae68feeefa2287aad1f8b8080f93048e44f01 Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Thu, 5 Mar 2020 13:12:19 +0300
Subject: [PATCH 10/14] Convert cellResolution from array to object

---
 externs/shaka/text.js              | 11 ++++++++---
 lib/text/cue.js                    |  5 ++++-
 lib/text/ttml_text_parser.js       | 15 +++++++--------
 test/text/ttml_text_parser_unit.js | 10 ++++++++--
 test/ui/text_displayer_unit.js     | 10 ++++++++--
 ui/text_displayer.js               |  3 +--
 6 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/externs/shaka/text.js b/externs/shaka/text.js
index 284e31ca51..2892d9e786 100644
--- a/externs/shaka/text.js
+++ b/externs/shaka/text.js
@@ -249,9 +249,14 @@ shaka.extern.Cue = class {
     /**
      * The number of horizontal and vertical cells into which
      * the Root Container Region area is divided
-     * cellResolution[0] - columns
-     * cellResolution[1] - rows
-     * @type {!Array.<number>}
+     *
+     * @typedef {{ columns: number, rows: number }}
+     *
+     * @property {number} columns
+     *     The number of vertical cells
+     * @property {number} rows
+     *     The number of horizontal cells
+     *
      * @exportDoc
      */
     this.cellResolution;
diff --git a/lib/text/cue.js b/lib/text/cue.js
index c5eaf81150..db7495b5a6 100644
--- a/lib/text/cue.js
+++ b/lib/text/cue.js
@@ -205,7 +205,10 @@ shaka.text.Cue = class {
      * @override
      * @exportInterface
      */
-    this.cellResolution = [32, 15]; // columns, rows
+    this.cellResolution = {
+      columns: 32,
+      rows: 15,
+    };
   }
 };
 
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index fbf559617b..dcc38c3a3e 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -245,7 +245,7 @@ shaka.text.TtmlTextParser = class {
    * @param {!Array.<!shaka.text.CueRegion>} cueRegions
    * @param {boolean} whitespaceTrim
    * @param {boolean} isNested
-   * @param {?Array.<number>} cellResolution
+   * @param {?Object} cellResolution
    * @return {shaka.text.Cue}
    * @private
    */
@@ -343,7 +343,7 @@ shaka.text.TtmlTextParser = class {
     cue.nestedCues = nestedCues;
 
     if (cellResolution) {
-      cue.cellResolution = cellResolution;
+      cue.cellResolution = Object.assign({}, cellResolution);
     }
 
     // Get other properties if available.
@@ -952,13 +952,12 @@ shaka.text.TtmlTextParser = class {
   }
 
   /**
-   * If ttp:cellResolution provided returns array
-   * with cellResolution info, where
-   * cellResolution[0] - columns
-   * cellResolution[1] - rows
+   * If ttp:cellResolution provided returns cell resolution info
+   * with number of columns and rows into which the Root Container
+   * Region area is divided
    *
    * @param {?string} cellResolution
-   * @return {?Array.<number>}
+   * @return {?Object}
    * @private
    */
   static getCellResolution_(cellResolution) {
@@ -971,7 +970,7 @@ shaka.text.TtmlTextParser = class {
     const columns = parseInt(matches[1], 10);
     const rows = parseInt(matches[2], 10);
 
-    return [columns, rows];
+    return {columns, rows};
   }
 };
 
diff --git a/test/text/ttml_text_parser_unit.js b/test/text/ttml_text_parser_unit.js
index 0c4a42a145..44c943a2bf 100644
--- a/test/text/ttml_text_parser_unit.js
+++ b/test/text/ttml_text_parser_unit.js
@@ -889,7 +889,10 @@ describe('TtmlTextParser', () => {
           {
             startTime: 1,
             endTime: 2,
-            cellResolution: [32, 15],
+            cellResolution: {
+              columns: 32,
+              rows: 15,
+            },
             fontSize: '0.45c',
           },
         ],
@@ -911,7 +914,10 @@ describe('TtmlTextParser', () => {
             startTime: 1,
             endTime: 2,
             payload: 'Test',
-            cellResolution: [60, 20],
+            cellResolution: {
+              columns: 60,
+              rows: 20,
+            },
             fontSize: '67%',
           },
         ],
diff --git a/test/ui/text_displayer_unit.js b/test/ui/text_displayer_unit.js
index 7e29e5d6e2..74748463ed 100644
--- a/test/ui/text_displayer_unit.js
+++ b/test/ui/text_displayer_unit.js
@@ -144,7 +144,10 @@ describe('UITextDisplayer', () => {
     /** @type {!shaka.text.Cue} */
     const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
     cue.fontSize = '0.80c';
-    cue.cellResolution = [60, 20];
+    cue.cellResolution = {
+      columns: 60,
+      rows: 20,
+    };
 
     textDisplayer.setTextVisibility(true);
     textDisplayer.append([cue]);
@@ -167,7 +170,10 @@ describe('UITextDisplayer', () => {
     /** @type {!shaka.text.Cue} */
     const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
     cue.fontSize = '0.90c';
-    cue.cellResolution = [32, 15];
+    cue.cellResolution = {
+      columns: 32,
+      rows: 15,
+    };
 
     textDisplayer.setTextVisibility(true);
     textDisplayer.append([cue]);
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index e5cfce9a93..04f45ec965 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -437,8 +437,7 @@ shaka.ui.TextDisplayer = class {
    * */
   static getAbsoluteLengthInPixels_(value, cue, videoContainer) {
     const containerHeight = videoContainer.clientHeight;
-    const cellResolutionRows = cue.cellResolution[1];
 
-    return (containerHeight * value / cellResolutionRows) + 'px';
+    return (containerHeight * value / cue.cellResolution.rows) + 'px';
   }
 };

From d96aa9f93e600c56da888d8cc174e52b11236898 Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Thu, 5 Mar 2020 13:56:16 +0300
Subject: [PATCH 11/14] correct fontSize value in test

---
 test/ui/text_displayer_unit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/ui/text_displayer_unit.js b/test/ui/text_displayer_unit.js
index 74748463ed..0c8b5e379b 100644
--- a/test/ui/text_displayer_unit.js
+++ b/test/ui/text_displayer_unit.js
@@ -169,7 +169,7 @@ describe('UITextDisplayer', () => {
   it('correctly displays styles for percentages units', async () => {
     /** @type {!shaka.text.Cue} */
     const cue = new shaka.text.Cue(0, 100, 'Captain\'s log.');
-    cue.fontSize = '0.90c';
+    cue.fontSize = '90%';
     cue.cellResolution = {
       columns: 32,
       rows: 15,

From 336b720991ed20bf6958dc1e2a18936d8af131ee Mon Sep 17 00:00:00 2001
From: Tatsiana Gelahova <tatsiana.gelahova@gmail.com>
Date: Thu, 5 Mar 2020 21:47:54 +0300
Subject: [PATCH 12/14] Refer to methods directly

---
 ui/text_displayer.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index 04f45ec965..cf70a0905d 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -398,12 +398,8 @@ shaka.ui.TextDisplayer = class {
    * @private
   */
   static convertLengthValue_(lengthValue, cue, videoContainer) {
-    const {
-      getLengthValueInfo_,
-      getAbsoluteLengthInPixels_,
-    } = shaka.ui.TextDisplayer;
-
-    const lengthValueInfo = getLengthValueInfo_(lengthValue);
+    const lengthValueInfo =
+      shaka.ui.TextDisplayer.getLengthValueInfo_(lengthValue);
 
     if (!lengthValueInfo) {
       return lengthValue;
@@ -413,13 +409,13 @@ shaka.ui.TextDisplayer = class {
 
     switch (unit) {
       case '%':
-        return getAbsoluteLengthInPixels_(
-            value / 100,
-            cue,
-            videoContainer
+        return shaka.ui.TextDisplayer.getAbsoluteLengthInPixels_(
+            value / 100, cue, videoContainer
         );
       case 'c':
-        return getAbsoluteLengthInPixels_(value, cue, videoContainer);
+        return shaka.ui.TextDisplayer.getAbsoluteLengthInPixels_(
+            value, cue, videoContainer
+        );
       default:
         return lengthValue;
     }

From f47f286e4698ac636525520f7001e8f86c50a3a7 Mon Sep 17 00:00:00 2001
From: Tatsiana Gelahova <tatsiana.gelahova@gmail.com>
Date: Fri, 6 Mar 2020 01:15:13 +0300
Subject: [PATCH 13/14] Fix review remarks

---
 externs/shaka/text.js        | 8 +-------
 lib/text/ttml_text_parser.js | 9 ++++++---
 ui/text_displayer.js         | 6 ++----
 3 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/externs/shaka/text.js b/externs/shaka/text.js
index 2892d9e786..1db8924e4f 100644
--- a/externs/shaka/text.js
+++ b/externs/shaka/text.js
@@ -250,13 +250,7 @@ shaka.extern.Cue = class {
      * The number of horizontal and vertical cells into which
      * the Root Container Region area is divided
      *
-     * @typedef {{ columns: number, rows: number }}
-     *
-     * @property {number} columns
-     *     The number of vertical cells
-     * @property {number} rows
-     *     The number of horizontal cells
-     *
+     * @type {{ columns: number, rows: number }}
      * @exportDoc
      */
     this.cellResolution;
diff --git a/lib/text/ttml_text_parser.js b/lib/text/ttml_text_parser.js
index dcc38c3a3e..c23851c42a 100644
--- a/lib/text/ttml_text_parser.js
+++ b/lib/text/ttml_text_parser.js
@@ -245,7 +245,7 @@ shaka.text.TtmlTextParser = class {
    * @param {!Array.<!shaka.text.CueRegion>} cueRegions
    * @param {boolean} whitespaceTrim
    * @param {boolean} isNested
-   * @param {?Object} cellResolution
+   * @param {?{columns: number, rows: number}} cellResolution
    * @return {shaka.text.Cue}
    * @private
    */
@@ -343,7 +343,7 @@ shaka.text.TtmlTextParser = class {
     cue.nestedCues = nestedCues;
 
     if (cellResolution) {
-      cue.cellResolution = Object.assign({}, cellResolution);
+      cue.cellResolution = cellResolution;
     }
 
     // Get other properties if available.
@@ -957,10 +957,13 @@ shaka.text.TtmlTextParser = class {
    * Region area is divided
    *
    * @param {?string} cellResolution
-   * @return {?Object}
+   * @return {?{columns: number, rows: number}}
    * @private
    */
   static getCellResolution_(cellResolution) {
+    if (!cellResolution) {
+      return null;
+    }
     const matches = /^(\d+) (\d+)$/.exec(cellResolution);
 
     if (!matches) {
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index cf70a0905d..0e4b5c5149 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -410,12 +410,10 @@ shaka.ui.TextDisplayer = class {
     switch (unit) {
       case '%':
         return shaka.ui.TextDisplayer.getAbsoluteLengthInPixels_(
-            value / 100, cue, videoContainer
-        );
+            value / 100, cue, videoContainer);
       case 'c':
         return shaka.ui.TextDisplayer.getAbsoluteLengthInPixels_(
-            value, cue, videoContainer
-        );
+            value, cue, videoContainer);
       default:
         return lengthValue;
     }

From 93df379c98869a35291609aab75c2ce375de5f6e Mon Sep 17 00:00:00 2001
From: Tatsiana <tatsiana.gelahova@gmail.com>
Date: Fri, 6 Mar 2020 11:22:26 +0300
Subject: [PATCH 14/14] Pass async callback to afterEach

---
 test/ui/text_displayer_unit.js | 4 ++--
 ui/text_displayer.js           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/ui/text_displayer_unit.js b/test/ui/text_displayer_unit.js
index 0c8b5e379b..e1b36bcda3 100644
--- a/test/ui/text_displayer_unit.js
+++ b/test/ui/text_displayer_unit.js
@@ -54,8 +54,8 @@ describe('UITextDisplayer', () => {
     textDisplayer = new shaka.ui.TextDisplayer(video, videoContainer);
   });
 
-  afterEach(() => {
-    textDisplayer.destroy();
+  afterEach(async () => {
+    await textDisplayer.destroy();
   });
 
   it('correctly displays styles for cues', async () => {
diff --git a/ui/text_displayer.js b/ui/text_displayer.js
index 0e4b5c5149..e1ff013d6a 100644
--- a/ui/text_displayer.js
+++ b/ui/text_displayer.js
@@ -399,7 +399,7 @@ shaka.ui.TextDisplayer = class {
   */
   static convertLengthValue_(lengthValue, cue, videoContainer) {
     const lengthValueInfo =
-      shaka.ui.TextDisplayer.getLengthValueInfo_(lengthValue);
+        shaka.ui.TextDisplayer.getLengthValueInfo_(lengthValue);
 
     if (!lengthValueInfo) {
       return lengthValue;