fix(WebVTT): Fix mapNativeCueToShakaCue in Chromium browsers (#7273)

Chromium browsers do not currently support the `lineAlign` or
`positionAlign` properties on the VTTCue class, just like the region
property. So this pull request adds an if before reading those
properties so that the position and line values are handled correctly in
UITextDisplayer (without this change the subtitles are always at the
bottom edge of the player and right aligned subtitles are displayed
off-screen).


https://developer.mozilla.org/en-US/docs/Web/API/VTTCue/lineAlign#browser_compatibility

https://developer.mozilla.org/en-US/docs/Web/API/VTTCue/positionAlign#browser_compatibility

Before fix
![Screenshot 2024-09-09 at 08 42
04](https://github.com/user-attachments/assets/b19f223f-0e6e-4678-a1b1-36a759ec9691)
After fix

![image](https://github.com/user-attachments/assets/79854c9d-838b-4b20-9370-4a81407d82fd)

Steps to reproduce:
- Get local demo running (`python build/all.py --debug`?)
- Visit custom content, add
https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4 (with
whatever name)
- Add track below
- Start playing custom video, switch Captions to the new text track


**JS to add text track**
```js
await document.getElementById('video').ui.getControls().getPlayer().addTextTrackAsync('data:text/vtt;charset=utf-8,WEBVTT%0AKind%3A%20subtitles%0ALanguage%3A%20en%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Astart%20position%3A0%25%20line%3A0%25%0ATop%2FLeft%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20line%3A0%25%0ATop%2FCentre%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Aend%20position%3A100%25%20line%3A0%25%0ATop%2FRight%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Astart%20position%3A0%25%20line%3A48%25%0AMiddle%2FLeft%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20line%3A48%25%0AMiddle%2FCentre%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Aend%20position%3A100%25%20line%3A48%25%0AMiddle%2FRight%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Astart%20position%3A0%25%0ABottom%2FLeft%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%0ABottom%2FCentre%0A%0A00%3A00%3A00.000%20--%3E%2000%3A01%3A00.000%20align%3Aend%20position%3A100%25%0ABottom%2FRight%0A%0A', 'en', 'subtitles', 'text/vtt')
```

lib/text/text_utils.js

@@ -276,14 +276,19 @@ shaka.text.Utils = class {
     const cue = new shaka.text.Cue(vttCue.startTime, vttCue.endTime,
         vttCue.text);
     cue.line = typeof vttCue.line === 'number' ? vttCue.line : null;
-    cue.lineAlign = /** @type {shaka.text.Cue.lineAlign} */ (vttCue.lineAlign);
+    if (vttCue.lineAlign) {
+      cue.lineAlign = /** @type {shaka.text.Cue.lineAlign} */
+        (vttCue.lineAlign);
+    }
     cue.lineInterpretation = vttCue.snapToLines ?
       shaka.text.Cue.lineInterpretation.LINE_NUMBER :
       shaka.text.Cue.lineInterpretation.PERCENTAGE;
     cue.position = typeof vttCue.position === 'number' ?
       vttCue.position : null;
-    cue.positionAlign = /** @type {shaka.text.Cue.positionAlign} */
-      (vttCue.positionAlign);
+    if (vttCue.positionAlign) {
+      cue.positionAlign = /** @type {shaka.text.Cue.positionAlign} */
+        (vttCue.positionAlign);
+    }
     cue.size = vttCue.size;
     cue.textAlign = /** @type {shaka.text.Cue.textAlign} */ (vttCue.align);
     if (vttCue.vertical === 'lr') {