fix: Allow use in jsdom environments without window.CSS

src/js/tracks/text-track-display.js

@@ -326,7 +326,7 @@ class TextTrackDisplay extends Component {
       this.updateForTrack(descriptionsTrack);
     }
 
-    if (!window.CSS.supports('inset', '10px')) {
+    if (!(window.CSS !== undefined && window.CSS.supports('inset', '10px'))) {
       const textTrackDisplay = this.el_;
       const vjsTextTrackCues = textTrackDisplay.querySelectorAll('.vjs-text-track-cue');
       const controlBarHeight = this.player_.controlBar.el_.getBoundingClientRect().height;
@@ -370,7 +370,7 @@ class TextTrackDisplay extends Component {
   updateDisplayOverlay() {
     // inset-inline and inset-block are not supprted on old chrome, but these are
     // only likely to be used on TV devices
-    if (!this.player_.videoHeight() || !window.CSS.supports('inset-inline: 10px')) {
+    if (!this.player_.videoHeight() || !(window.CSS !== undefined && window.CSS.supports('inset-inline: 10px'))) {
       return;
     }
 

test/unit/tracks/text-track-display.test.js

@@ -501,6 +501,48 @@ if (!Html5.supportsNativeTextTracks()) {
     player.dispose();
   });
 
+  QUnit.test('should use relative position for vjs-text-track-display element if environment does not support window.CSS', function(assert) {
+    const cssDescriptor = Object.getOwnPropertyDescriptor(window, 'CSS');
+
+    try {
+      // Set conditions for the use of the style modifications. Temporarily
+      // remove window.CSS to match the environment created by jsdom.
+      // https://github.com/jsdom/jsdom/issues/3991
+      delete window.CSS;
+
+      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);
+
+      player.src({type: 'video/mp4', src: 'http://google.com'});
+      player.play();
+
+      // as if metadata was loaded
+      player.textTrackDisplay.updateDisplayOverlay();
+
+      // 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();
+    } finally {
+      // Restore window.CSS
+      Object.defineProperty(window, 'CSS', cssDescriptor);
+    }
+  });
+
   QUnit.test('should use relative position for vjs-text-track-display element if browser does not support inset property', function(assert) {
     // Set conditions for the use of the style modifications
     window.CSS.supports = () => false;