getRegionElement_(cue) {
    const region = cue.region;
    // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#caption-window-size
    // if aspect ratio is 4/3, use that value, otherwise, use the 16:9 value
    const lineWidthMultiple = this.aspectRatio_ === 4/3 ? 2.5 : 1.9;
    const lineHeightMultiple = 5.33;

    const regionId = this.generateRegionId_(region);
    if (this.regionElements_.has(regionId)) {
      return this.regionElements_.get(regionId);
    }

    const regionElement = shaka.util.Dom.createHTMLElement('span');

    const linesUnit = shaka.text.CueRegion.units.LINES;
    const percentageUnit = shaka.text.CueRegion.units.PERCENTAGE;
    const pixelUnit = shaka.text.CueRegion.units.PX;
    let heightUnit = region.heightUnits == percentageUnit ? '%' : 'px';
    let widthUnit = region.widthUnits == percentageUnit ? '%' : 'px';
    const viewportAnchorUnit =
        region.viewportAnchorUnits == percentageUnit ? '%' : 'px';

    regionElement.id = 'shaka-text-region---' + regionId;
    regionElement.classList.add('shaka-text-region');

    regionElement.style.position = 'absolute';

    let regionHeight = region.height;
    let regionWidth = region.width;

    if (region.heightUnits === linesUnit) {
      regionHeight = region.height * lineHeightMultiple;
      heightUnit = '%';
    }
    if (region.widthUnits === linesUnit) {
      regionWidth = region.width * lineWidthMultiple;
      widthUnit = '%';
    }
    regionElement.style.height = regionHeight + heightUnit;
    regionElement.style.width = regionWidth + widthUnit;

    if (region.viewportAnchorUnits === linesUnit) {
      // from https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html#positioning-in-cea-708
      let top = region.viewportAnchorY / 75 * 100;
      const windowWidth = this.aspectRatio_ === 4/3 ? 160 : 210;
      let left = region.viewportAnchorX / windowWidth * 100;
      // adjust top and left values based on the region anchor and window size
      top -= region.regionAnchorY * regionHeight / 100;
      left -= region.regionAnchorX * regionWidth / 100;
      regionElement.style.top = top + '%';
      regionElement.style.left = left + '%';
    } else {
      regionElement.style.top = region.viewportAnchorY -
        region.regionAnchorY * regionHeight / 100 + viewportAnchorUnit;
      regionElement.style.left = region.viewportAnchorX -
        region.regionAnchorX * regionWidth / 100 + viewportAnchorUnit;
    }
    if (region.heightUnits !== pixelUnit &&
        region.widthUnits !== pixelUnit &&
        region.viewportAnchorUnits !== pixelUnit) {
      // Clip region
      const top = parseInt(regionElement.style.top.slice(0, -1), 10) || 0;
      const left = parseInt(regionElement.style.left.slice(0, -1), 10) || 0;
      const height = parseInt(regionElement.style.height.slice(0, -1), 10) || 0;
      const width = parseInt(regionElement.style.width.slice(0, -1), 10) || 0;
      const realTop = Math.max(0, Math.min(100 - height, top));
      const realLeft = Math.max(0, Math.min(100 - width, left));
      regionElement.style.top = realTop + '%';
      regionElement.style.left = realLeft + '%';
    }

    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(regionId, regionElement);
    return regionElement;
  }
Get or create a region element corresponding to the cue region.  These are
cached by ID.

@param {!shaka.text.Cue} cue
@return {!HTMLElement}
@private