shaka-player 3.3.8 → 3.3.9

package/karma.conf.js

@@ -160,10 +160,6 @@ module.exports = (config) => {
       'node_modules/es6-promise-polyfill/promise.js',
       //   Babel polyfill, required for async/await
       'node_modules/@babel/polyfill/dist/polyfill.js',
-      //   TextDecoder polyfill, required for TextDecoder/TextEncoder on IE and
-      //   legacy Edge
-      //   eslint-disable-next-line max-len
-      'node_modules/fastestsmallesttextencoderdecoder/EncoderDecoderTogether.min.js',
 
       // muxjs module next
       'node_modules/mux.js/dist/mux.min.js',
@@ -306,13 +302,6 @@ module.exports = (config) => {
     // Force failure when running empty test-suites.
     failOnEmptyTestSuite: true,
 
-    coverageReporter: {
-      includeAllSources: true,
-      reporters: [
-        {type: 'text'},
-      ],
-    },
-
     specReporter: {
       suppressSkipped: true,
       showBrowser: true,
@@ -405,9 +394,12 @@ module.exports = (config) => {
 
     config.set({
       coverageReporter: {
+        includeAllSources: true,
         reporters: [
           {type: 'html', dir: 'coverage'},
           {type: 'cobertura', dir: 'coverage', file: 'coverage.xml'},
+          {type: 'json-summary', dir: 'coverage', file: 'coverage.json'},
+          {type: 'json', dir: 'coverage', file: 'coverage-details.json'},
         ],
       },
     });

package/lib/ads/client_side_ad_manager.js

@@ -409,7 +409,7 @@ shaka.ads.ClientSideAdManager = class {
   onAdComplete_(e) {
     this.onEvent_(new shaka.util.FakeEvent(shaka.ads.AdManager.AD_STOPPED,
         (new Map()).set('originalEvent', e)));
-    if (this.ad_.isLinear()) {
+    if (this.ad_ && this.ad_.isLinear()) {
       this.adContainer_.removeAttribute('ad-active');
       this.video_.play();
     }

package/lib/media/drm_engine.js

@@ -1495,7 +1495,7 @@ shaka.media.DrmEngine = class {
       if (shaka.media.DrmEngine.isPlayReadyKeySystem(
           this.currentDrmInfo_.keySystem) &&
           keyId.byteLength == 16 &&
-          shaka.util.Platform.isEdge()) {
+          (shaka.util.Platform.isEdge() || shaka.util.Platform.isPS4())) {
         // Read out some fields in little-endian:
         const dataView = shaka.util.BufferUtils.toDataView(keyId);
         const part0 = dataView.getUint32(0, /* LE= */ true);

package/lib/media/streaming_engine.js

@@ -1770,6 +1770,7 @@ shaka.media.StreamingEngine = class {
    *
    * @return {!Promise.<BufferSource>}
    * @private
+   * @suppress {strictMissingProperties}
    */
   async fetch_(mediaState, reference, streamDataCallback) {
     const requestType = shaka.net.NetworkingEngine.RequestType.SEGMENT;

package/lib/player.js

@@ -851,14 +851,9 @@ shaka.Player = class extends shaka.util.FakeEventTarget {
     if (!window.Promise) {
       shaka.log.alwaysWarn('A Promise implementation or polyfill is required');
     }
-    if (!window.TextDecoder || !window.TextEncoder) {
-      shaka.log.alwaysWarn(
-          'A TextDecoder/TextEncoder implementation or polyfill is required');
-    }
 
     // Basic features needed for the library to be usable.
     const basicSupport = !!window.Promise && !!window.Uint8Array &&
-                         !!window.TextDecoder && !!window.TextEncoder &&
                          // eslint-disable-next-line no-restricted-syntax
                          !!Array.prototype.forEach;
     if (!basicSupport) {
@@ -6634,7 +6629,7 @@ shaka.Player.TYPICAL_BUFFERING_THRESHOLD_ = 0.5;
  * @define {string} A version number taken from git at compile time.
  * @export
  */
-shaka.Player.version = 'v3.3.8-uncompiled';
+shaka.Player.version = 'v3.3.9-uncompiled';
 
 // Initialize the deprecation system using the version string we just set
 // on the player.

package/lib/polyfill/media_capabilities.js

@@ -41,6 +41,8 @@ shaka.polyfill.MediaCapabilities = class {
         !shaka.util.Platform.isApple() &&
         !shaka.util.Platform.isPS4() &&
         !shaka.util.Platform.isPS5() &&
+        !shaka.util.Platform.isWebOS() &&
+        !shaka.util.Platform.isTizen() &&
         navigator.mediaCapabilities) {
       shaka.log.info(
           'MediaCapabilities: Native mediaCapabilities support found.');

package/lib/text/cue.js

@@ -41,14 +41,9 @@ shaka.text.Cue = class {
      */
     this.endTime = endTime;
 
-    // The explicit type here is to work around an apparent compiler bug where
-    // the compiler seems to get confused about the type.  Since we are
-    // overriding the interface type, it shouldn't be necessary to do this.
-    // Compiler version 20200517.
     /**
      * @override
      * @exportInterface
-     * @type {string}
      */
     this.payload = payload;
 

package/lib/text/simple_text_displayer.js

@@ -127,16 +127,28 @@ shaka.text.SimpleTextDisplayer = class {
     // We don't want to modify the array or objects passed in, since we don't
     // technically own them.  So we build a new array and replace certain items
     // in it if they need to be flattened.
-    const flattenedCues = cues.map((cue) => {
-      if (cue.nestedCues.length) {
-        const flatCue = cue.clone();
-        flatCue.nestedCues = [];
-        flatCue.payload = flattenPayload(cue);
-        return flatCue;
-      } else {
-        return cue;
+    // We also don't want to flatten the text payloads starting at a container
+    // element; otherwise, for containers encapsulating multiple caption lines,
+    // the lines would merge into a single cue. This is undesirable when a
+    // subset of the captions are outside of the append time window. To fix
+    // this, we only call flattenPayload() starting at elements marked as
+    // isContainer = false.
+    const getCuesToFlatten = (cues, result) => {
+      for (const cue of cues) {
+        if (cue.isContainer) {
+          // Recurse to find the actual text payload cues.
+          getCuesToFlatten(cue.nestedCues, result);
+        } else {
+          // Flatten the payload.
+          const flatCue = cue.clone();
+          flatCue.nestedCues = [];
+          flatCue.payload = flattenPayload(cue);
+          result.push(flatCue);
+        }
       }
-    });
+      return result;
+    };
+    const flattenedCues = getCuesToFlatten(cues, []);
 
     // Convert cues.
     const textTrackCues = [];

package/lib/text/ui_text_displayer.js

@@ -78,6 +78,7 @@ shaka.text.UITextDisplayer = class {
      * the cue (e.g. the HTML element to put nested cues inside).
      * @private {Map.<!shaka.extern.Cue, !{
      *   cueElement: !HTMLElement,
+     *   regionElement: HTMLElement,
      *   wrapper: !HTMLElement
      * }>}
      */
@@ -98,6 +99,9 @@ shaka.text.UITextDisplayer = class {
       });
       this.resizeObserver_.observe(this.textContainer_);
     }
+
+    /** @private {Map.<string, !HTMLElement>} */
+    this.regionElements_ = new Map();
   }
 
 
@@ -235,6 +239,11 @@ shaka.text.UITextDisplayer = class {
         // even ones which are going to be planted again.
         toUproot.push(cueRegistry.cueElement);
 
+        // Also uproot all displayed region elements.
+        if (cueRegistry.regionElement) {
+          toUproot.push(cueRegistry.regionElement);
+        }
+
         // If the cue should not be displayed, remove it entirely.
         if (!shouldBeDisplayed) {
           // Since something has to be removed, we will need to update the DOM.
@@ -269,8 +278,12 @@ shaka.text.UITextDisplayer = class {
       goog.asserts.assert(topCue == cue, 'Parent cues should be kept in order');
     }
     if (updateDOM) {
-      for (const cueElement of toUproot) {
-        container.removeChild(cueElement);
+      for (const element of toUproot) {
+        // NOTE: Because we uproot shared region elements, too, we might hit an
+        // element here that has no parent because we've already processed it.
+        if (element.parentElement) {
+          element.parentElement.removeChild(element);
+        }
       }
       toPlant.sort((a, b) => {
         if (a.startTime != b.startTime) {
@@ -282,7 +295,12 @@ shaka.text.UITextDisplayer = class {
       for (const cue of toPlant) {
         const cueRegistry = this.currentCuesMap_.get(cue);
         goog.asserts.assert(cueRegistry, 'cueRegistry should exist.');
-        container.appendChild(cueRegistry.cueElement);
+        if (cueRegistry.regionElement) {
+          container.appendChild(cueRegistry.regionElement);
+          cueRegistry.regionElement.appendChild(cueRegistry.cueElement);
+        } else {
+          container.appendChild(cueRegistry.cueElement);
+        }
       }
     }
   }
@@ -299,11 +317,15 @@ shaka.text.UITextDisplayer = class {
 
     const currentTime = this.video_.currentTime;
     if (!this.isTextVisible_ || forceUpdate) {
-      if (this.currentCuesMap_.size > 0) {
-        // Clear away any existing cues.
-        shaka.util.Dom.removeAllChildren(this.textContainer_);
-        this.currentCuesMap_.clear();
+      // Remove child elements from all regions.
+      for (const regionElement of this.regionElements_.values()) {
+        shaka.util.Dom.removeAllChildren(regionElement);
       }
+      // Remove all top-level elements in the text container.
+      shaka.util.Dom.removeAllChildren(this.textContainer_);
+      // Clear the element maps.
+      this.currentCuesMap_.clear();
+      this.regionElements_.clear();
     }
     if (this.isTextVisible_) {
       // Log currently attached cue elements for verification, later.
@@ -333,6 +355,54 @@ shaka.text.UITextDisplayer = class {
     }
   }
 
+  /**
+   * Get or create a region element corresponding to the cue region.  These are
+   * cached by ID.
+   *
+   * @param {!shaka.extern.Cue} cue
+   * @return {!HTMLElement}
+   * @private
+   */
+  getRegionElement_(cue) {
+    const region = cue.region;
+
+    if (this.regionElements_.has(region.id)) {
+      return this.regionElements_.get(region.id);
+    }
+
+    const regionElement = shaka.util.Dom.createHTMLElement('span');
+
+    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
+    const heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
+    const widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
+    const viewportAnchorUnit =
+        region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
+
+    regionElement.id = 'shaka-text-region---' + region.id;
+    regionElement.classList.add('shaka-text-region');
+
+    regionElement.style.height = region.height + heightUnit;
+    regionElement.style.width = region.width + widthUnit;
+    regionElement.style.position = 'absolute';
+    regionElement.style.top = region.viewportAnchorY + viewportAnchorUnit;
+    regionElement.style.left = region.viewportAnchorX + viewportAnchorUnit;
+
+    regionElement.style.display = 'flex';
+    regionElement.style.flexDirection = 'column';
+    regionElement.style.alignItems = 'center';
+
+    if (cue.displayAlign == shaka.text.Cue.displayAlign.BEFORE) {
+      regionElement.style.justifyContent = 'flex-start';
+    } else if (cue.displayAlign == shaka.text.Cue.displayAlign.CENTER) {
+      regionElement.style.justifyContent = 'center';
+    } else {
+      regionElement.style.justifyContent = 'flex-end';
+    }
+
+    this.regionElements_.set(region.id, regionElement);
+    return regionElement;
+  }
+
   /**
    * Creates the object for a cue.
    *
@@ -360,6 +430,11 @@ shaka.text.UITextDisplayer = class {
       this.setCaptionStyles_(cueElement, cue, parents, needWrapper);
     }
 
+    let regionElement = null;
+    if (cue.region && cue.region.id) {
+      regionElement = this.getRegionElement_(cue);
+    }
+
     let wrapper = cueElement;
     if (needWrapper) {
       // Create a wrapper element which will serve to contain all children into
@@ -371,7 +446,7 @@ shaka.text.UITextDisplayer = class {
       cueElement.appendChild(wrapper);
     }
 
-    this.currentCuesMap_.set(cue, {cueElement, wrapper});
+    this.currentCuesMap_.set(cue, {cueElement, wrapper, regionElement});
   }
 
   /**
@@ -531,17 +606,6 @@ shaka.text.UITextDisplayer = class {
           }
         }
       }
-    } else if (cue.region && cue.region.id) {
-      const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
-      const heightUnit = cue.region.heightUnits == percentageUnit ? '%' : 'px';
-      const widthUnit = cue.region.widthUnits == percentageUnit ? '%' : 'px';
-      const viewportAnchorUnit =
-          cue.region.viewportAnchorUnits == percentageUnit ? '%' : 'px';
-      style.height = cue.region.height + heightUnit;
-      style.width = cue.region.width + widthUnit;
-      style.position = 'absolute';
-      style.top = cue.region.viewportAnchorY + viewportAnchorUnit;
-      style.left = cue.region.viewportAnchorX + viewportAnchorUnit;
     }
 
     style.lineHeight = cue.lineHeight;

package/lib/util/buffer_utils.js

@@ -20,6 +20,7 @@ shaka.util.BufferUtils = class {
    * @param {?BufferSource} arr2
    * @return {boolean}
    * @export
+   * @suppress {strictMissingProperties}
    */
   static equal(arr1, arr2) {
     const BufferUtils = shaka.util.BufferUtils;
@@ -135,8 +136,10 @@ shaka.util.BufferUtils = class {
   static view_(data, offset, length, Type) {
     const buffer = shaka.util.BufferUtils.unsafeGetArrayBuffer_(data);
     // Absolute end of the |data| view within |buffer|.
+    /** @suppress {strictMissingProperties} */
     const dataEnd = (data.byteOffset || 0) + data.byteLength;
     // Absolute start of the result within |buffer|.
+    /** @suppress {strictMissingProperties} */
     const rawStart = (data.byteOffset || 0) + offset;
     const start = Math.max(0, Math.min(rawStart, dataEnd));
     // Absolute end of the result within |buffer|.

package/lib/util/object_utils.js

@@ -22,6 +22,7 @@ shaka.util.ObjectUtils = class {
     const seenObjects = new Set();
     // This recursively clones the value |val|, using the captured variable
     // |seenObjects| to track the objects we have already cloned.
+    /** @suppress {strictMissingProperties} */
     const clone = (val) => {
       switch (typeof val) {
         case 'undefined':

package/lib/util/stream_utils.js

@@ -578,8 +578,16 @@ shaka.util.StreamUtils = class {
       // VideoConfiguration
       mediaDecodingConfig.video = {
         contentType: fullType,
-        width: video.width || 1,
-        height: video.height || 1,
+
+        // NOTE: Some decoders strictly check the width and height fields and
+        // won't decode smaller than 64x64.  So if we don't have this info (as
+        // is the case in some of our simpler tests), assume a 64x64 resolution
+        // to fill in this required field for MediaCapabilities.
+        //
+        // This became an issue specifically on Firefox on M1 Macs.
+        width: video.width || 64,
+        height: video.height || 64,
+
         bitrate: video.bandwidth || variant.bandwidth || 1,
         // framerate must be greater than 0, otherwise the config is invalid.
         framerate: video.frameRate || 1,
@@ -742,7 +750,19 @@ shaka.util.StreamUtils = class {
    */
   static patchVp9(codec) {
     if (codec == 'vp9') {
-      return 'vp09.00.10.08';
+      // This means profile 0, level 4.1, 8-bit color.  This supports 1080p @
+      // 60Hz.  See https://en.wikipedia.org/wiki/VP9#Levels
+      //
+      // If we don't have more detailed codec info, assume this profile and
+      // level because it's high enough to likely accommodate the parameters we
+      // do have, such as width and height.  If an implementation is checking
+      // the profile and level very strictly, we want older VP9 content to
+      // still work to some degree.  But we don't want to set a level so high
+      // that it is rejected by a hardware decoder that can't handle the
+      // maximum requirements of the level.
+      //
+      // This became an issue specifically on Firefox on M1 Macs.
+      return 'vp09.00.41.08';
     }
     return codec;
   }

package/lib/util/string_utils.js

@@ -37,6 +37,7 @@ shaka.util.StringUtils = class {
     if (uint8[0] == 0xef && uint8[1] == 0xbb && uint8[2] == 0xbf) {
       uint8 = uint8.subarray(3);
     }
+
     if (window.TextDecoder && !shaka.util.Platform.isPS4()) {
       // Use the TextDecoder interface to decode the text.  This has the
       // advantage compared to the previously-standard decodeUriComponent that
@@ -51,23 +52,69 @@ shaka.util.StringUtils = class {
       }
       return decoded;
     } else {
-      // http://stackoverflow.com/a/13691499
-      const utf8 = shaka.util.StringUtils.fromCharCode(uint8);
-      // This converts each character in the string to an escape sequence.  If
-      // the character is in the ASCII range, it is not converted; otherwise it
-      // is converted to a URI escape sequence.
-      // Example: '\x67\x35\xe3\x82\xac' -> 'g#%E3%82%AC'
-      const escaped = escape(utf8);
-      // Decode the escaped sequence.  This will interpret UTF-8 sequences into
-      // the correct character.
-      // Example: 'g#%E3%82%AC' -> 'g#€'
-      try {
-        return decodeURIComponent(escaped);
-      } catch (e) {
-        throw new shaka.util.Error(
-            shaka.util.Error.Severity.CRITICAL, shaka.util.Error.Category.TEXT,
-            shaka.util.Error.Code.BAD_ENCODING);
+      // Homebrewed UTF-8 decoder based on
+      // https://en.wikipedia.org/wiki/UTF-8#Encoding
+      // Unlike decodeURIComponent, won't throw on bad encoding.
+      // In this way, it is similar to TextDecoder.
+
+      let decoded = '';
+      for (let i = 0; i < uint8.length; ++i) {
+        // By default, the "replacement character" codepoint.
+        let codePoint = 0xFFFD;
+
+        // Top bit is 0, 1-byte encoding.
+        if ((uint8[i] & 0x80) == 0) {
+          codePoint = uint8[i];
+
+        // Top 3 bits of byte 0 are 110, top 2 bits of byte 1 are 10,
+        // 2-byte encoding.
+        } else if (uint8.length >= i + 2 &&
+            (uint8[i] & 0xe0) == 0xc0 &&
+            (uint8[i + 1] & 0xc0) == 0x80) {
+          codePoint = ((uint8[i] & 0x1f) << 6) |
+                      ((uint8[i + 1] & 0x3f));
+          i += 1;  // Consume one extra byte.
+
+        // Top 4 bits of byte 0 are 1110, top 2 bits of byte 1 and 2 are 10,
+        // 3-byte encoding.
+        } else if (uint8.length >= i + 3 &&
+            (uint8[i] & 0xf0) == 0xe0 &&
+            (uint8[i + 1] & 0xc0) == 0x80 &&
+            (uint8[i + 2] & 0xc0) == 0x80) {
+          codePoint = ((uint8[i] & 0x0f) << 12) |
+                      ((uint8[i + 1] & 0x3f) << 6) |
+                      ((uint8[i + 2] & 0x3f));
+          i += 2;  // Consume two extra bytes.
+
+        // Top 5 bits of byte 0 are 11110, top 2 bits of byte 1, 2 and 3 are 10,
+        // 4-byte encoding.
+        } else if (uint8.length >= i + 4 &&
+            (uint8[i] & 0xf1) == 0xf0 &&
+            (uint8[i + 1] & 0xc0) == 0x80 &&
+            (uint8[i + 2] & 0xc0) == 0x80 &&
+            (uint8[i + 3] & 0xc0) == 0x80) {
+          codePoint = ((uint8[i] & 0x07) << 18) |
+                      ((uint8[i + 1] & 0x3f) << 12) |
+                      ((uint8[i + 2] & 0x3f) << 6) |
+                      ((uint8[i + 3] & 0x3f));
+          i += 3;  // Consume three extra bytes.
+        }
+
+        // JavaScript strings are a series of UTF-16 characters.
+        if (codePoint <= 0xffff) {
+          decoded += String.fromCharCode(codePoint);
+        } else {
+          // UTF-16 surrogate-pair encoding, based on
+          // https://en.wikipedia.org/wiki/UTF-16#Description
+          const baseCodePoint = codePoint - 0x10000;
+          const highPart = baseCodePoint >> 10;
+          const lowPart = baseCodePoint & 0x3ff;
+          decoded += String.fromCharCode(0xd800 + highPart);
+          decoded += String.fromCharCode(0xdc00 + lowPart);
+        }
       }
+
+      return decoded;
     }
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shaka-player",
   "description": "DASH/EME video player library",
-  "version": "3.3.8",
+  "version": "3.3.9",
   "homepage": "https://github.com/shaka-project/shaka-player",
   "author": "Google",
   "maintainers": [
@@ -94,6 +94,9 @@
     "prepublishOnly": "python build/checkversion.py && python build/all.py --force"
   },
   "dependencies": {
-    "eme-encryption-scheme-polyfill": "^2.0.3"
+    "eme-encryption-scheme-polyfill": "^2.1.1"
+  },
+  "engines": {
+    "node": ">=14"
   }
 }

package/test/text/simple_text_displayer_unit.js

@@ -127,6 +127,33 @@ describe('SimpleTextDisplayer', () => {
           [shakaCue]);
     });
 
+    it('flattens nested cue payloads correctly', () => {
+      const level0ContainerCue = new shaka.text.Cue(10, 30, '');
+      level0ContainerCue.isContainer = true;
+
+      const level1NonContainerCueA = new shaka.text.Cue(10, 20, '');
+      const level1NonContainerCueB = new shaka.text.Cue(20, 30, '');
+
+      // Add a trailing whitespace character to get a space-delimited expected
+      // result.
+      const cueANestedCue0 = new shaka.text.Cue(10, 20, 'Cue A Test0 ');
+      const cueANestedCue1 = new shaka.text.Cue(10, 20, 'Cue A Test1');
+      const cueBNestedCue0 = new shaka.text.Cue(20, 30, 'Cue B Test0 ');
+      const cueBNestedCue1 = new shaka.text.Cue(20, 30, 'Cue B Test1');
+
+      level1NonContainerCueA.nestedCues = [cueANestedCue0, cueANestedCue1];
+      level1NonContainerCueB.nestedCues = [cueBNestedCue0, cueBNestedCue1];
+      level0ContainerCue.nestedCues =
+          [level1NonContainerCueA, level1NonContainerCueB];
+
+      verifyHelper(
+          [
+            {startTime: 10, endTime: 20, text: 'Cue A Test0 Cue A Test1'},
+            {startTime: 20, endTime: 30, text: 'Cue B Test0 Cue B Test1'},
+          ],
+          [level0ContainerCue]);
+    });
+
     // Regression test for b/159050711
     it('maintains the styles of the parent cue', () => {
       const shakaCue = new shaka.text.Cue(10, 20, '');

package/test/text/ui_text_displayer_unit.js

@@ -50,6 +50,7 @@ describe('UITextDisplayer', () => {
   });
 
   beforeEach(() => {
+    video.currentTime = 0;
     textDisplayer = new shaka.text.UITextDisplayer(video, videoContainer);
   });
 
@@ -396,4 +397,68 @@ describe('UITextDisplayer', () => {
     expect(parentCueElements.length).toBe(1);
     expect(parentCueElements[0].textContent).toBe('');
   });
+
+  it('creates separate elements for cue regions', () => {
+    const cueRegion = new shaka.text.CueRegion();
+    cueRegion.id = 'regionId';
+    cueRegion.height = 80;
+    cueRegion.heightUnits = shaka.text.CueRegion.units.PERCENTAGE;
+    cueRegion.width = 80;
+    cueRegion.widthUnits = shaka.text.CueRegion.units.PERCENTAGE;
+    cueRegion.viewportAnchorX = 10;
+    cueRegion.viewportAnchorY = 10;
+    cueRegion.viewportAnchorUnits = shaka.text.CueRegion.units.PERCENTAGE;
+
+    // These all attach to the same region, but only one region element should
+    // be created.
+    const cues = [
+      new shaka.text.Cue(0, 100, ''),
+      new shaka.text.Cue(0, 100, ''),
+      new shaka.text.Cue(0, 100, ''),
+    ];
+    for (const cue of cues) {
+      cue.displayAlign = shaka.text.Cue.displayAlign.CENTER;
+      cue.region = cueRegion;
+    }
+
+    textDisplayer.setTextVisibility(true);
+    textDisplayer.append(cues);
+    updateCaptions();
+
+    const textContainer = videoContainer.querySelector('.shaka-text-container');
+    const allRegionElements = textContainer.querySelectorAll(
+        '.shaka-text-region');
+
+    // Verify that the nested cues are all attached to a single region element.
+    expect(allRegionElements.length).toBe(1);
+    const regionElement = allRegionElements[0];
+    const children = Array.from(regionElement.childNodes).filter(
+        (e) => e.nodeType == Node.ELEMENT_NODE);
+    expect(children.length).toBe(3);
+
+    // Verify styles applied to the region element.
+    const regionCssObj = parseCssText(regionElement.style.cssText);
+    const expectRegionCssObj = {
+      'position': 'absolute',
+      'height': '80%',
+      'width': '80%',
+      'top': '10%',
+      'left': '10%',
+      'display': 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+      'justify-content': 'center',
+    };
+    expect(regionCssObj).toEqual(jasmine.objectContaining(expectRegionCssObj));
+
+    for (const caption of children) {
+      // Verify that styles applied to the nested cues _DO NOT_ include region
+      // placement.
+      const cueCssObj = parseCssText(caption.style.cssText);
+      expect(Object.keys(cueCssObj)).not.toContain('height');
+      expect(Object.keys(cueCssObj)).not.toContain('width');
+      expect(Object.keys(cueCssObj)).not.toContain('top');
+      expect(Object.keys(cueCssObj)).not.toContain('left');
+    }
+  });
 });