fix: add unit test for first case to update caption styles

videojs · Aug 9, 2024 · 5192a67 · 5192a67
1 parent f0089e8
commit 5192a67
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js
@@ -5,6 +5,7 @@ import Component from '../component';
 import * as Fn from '../utils/fn.js';
 import * as Dom from '../utils/dom.js';
 import window from 'global/window';
+import * as browser from '../utils/browser';
 
 /** @import Player from '../player' */
 
@@ -320,21 +321,15 @@ class TextTrackDisplay extends Component {
       this.updateForTrack(descriptionsTrack);
     }
 
-    if (!window.CSS.supports('inset', '0')) {
+    if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) {
       const textTrack = window.document.querySelector('.vjs-text-track-display');
-      const player = window.document.querySelector('video-js');
       const textTrackHeight = textTrack.getBoundingClientRect().height;
 
       // This styles are required to be inline
       textTrack.style.position = 'relative';
       textTrack.style.height = textTrackHeight + 'px';
       textTrack.style.top = 'unset';
-
-      if (player.classList.contains('vjs-fullscreen')) {
-        textTrack.style.bottom = textTrackHeight + 'px';
-      } else {
-        textTrack.style.bottom = '0px';
-      }
+      textTrack.style.bottom = '0px';
     }
   }
 
@@ -502,7 +497,7 @@ class TextTrackDisplay extends Component {
       }
     }
 
-    if (!window.CSS.supports('inset', '0')) {
+    if (browser.IS_SMART_TV && !window.CSS.supports('inset', '10px')) {
       const document_ = window.document;
       const vjsTextTrackCue = document_.querySelector('.vjs-text-track-cue');
 

diff --git a/test/unit/tracks/text-track-display.test.js b/test/unit/tracks/text-track-display.test.js
@@ -500,4 +500,32 @@ if (!Html5.supportsNativeTextTracks()) {
 
     player.dispose();
   });
+
+  QUnit.test('should use relative position for vjs-text-track-display element if browser is does not support inset property', function(assert) {
+    // Set conditions for the use of the style modifications
+    window.CSS.supports = () => false;
+    browser.IS_SMART_TV = () => true;
+
+    const player = TestHelpers.makePlayer();
+    const track1 = {
+      kind: 'captions',
+      label: 'English',
+      language: 'en',
+      src: 'en.vtt',
+      default: true
+    };
+
+    // Add the text track
+    player.addRemoteTextTrack(track1, true);
+
+    // Make sure the ready handler runs
+    this.clock.tick(1);
+
+    const textTrack = window.document.querySelector('.vjs-text-track-display');
+
+    assert.ok(textTrack.style.position === 'relative', 'Style of position for vjs-text-track-display element should be relative');
+    assert.ok(textTrack.style.top === 'unset', 'Style of position for vjs-text-track-display element should be unset');
+    assert.ok(textTrack.style.bottom === '0px', 'Style of bottom for vjs-text-track-display element should be 0px');
+    player.dispose();
+  });
 }