fix(UI): Fix writing-mode support in old versions of Tizen and WebOS (s…

…haka-project#3330)
joeyparrish · Apr 19, 2021 · 7af44ef · 7af44ef
1 parent df5340f
commit 7af44ef
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 29 deletions.
diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
@@ -408,7 +408,14 @@ shaka.text.UITextDisplayer = class {
 
     style.textAlign = cue.textAlign;
     style.textDecoration = cue.textDecoration.join(' ');
-    style.writingMode = cue.writingMode;
+
+    // Prefixed version required for old versions of Chromium, eg: Tizen, WebOS
+    // https://caniuse.com/css-writing-mode
+    if ('writingMode' in document.documentElement.style) {
+      style.writingMode = cue.writingMode;
+    } else if ('webkitWritingMode' in document.documentElement.style) {
+      style.webkitWritingMode = cue.writingMode;
+    }
 
     // The size is a number giving the size of the text container, to be
     // interpreted as a percentage of the video, as defined by the writing

diff --git a/test/text/ui_text_displayer_unit.js b/test/text/ui_text_displayer_unit.js
@@ -90,21 +90,26 @@ describe('UITextDisplayer', () => {
         videoContainer.querySelector('.shaka-text-container');
     const captions = textContainer.querySelector('span');
     const cssObj = parseCssText(captions.style.cssText);
-    expect(cssObj).toEqual(
-        jasmine.objectContaining({
-          'color': 'green',
-          'background-color': 'black',
-          'direction': 'ltr',
-          'font-size': '10px',
-          'font-style': 'normal',
-          'font-weight': 400,
-          'line-height': 2,
-          'text-align': 'center',
-          // TODO: Old versions of Tizen and WebOS only supports the webkit
-          // prefixed version. Until we support the prefixed version, this
-          // has to be maintained. https://caniuse.com/css-writing-mode
-          // 'writing-mode': 'horizontal-tb',
-        }));
+
+    const expectCssObj = {
+      'color': 'green',
+      'background-color': 'black',
+      'direction': 'ltr',
+      'font-size': '10px',
+      'font-style': 'normal',
+      'font-weight': 400,
+      'line-height': 2,
+      'text-align': 'center',
+    };
+    // Old versions of Tizen and WebOS only supports the webkit prefixed
+    // version. https://caniuse.com/css-writing-mode
+    if ('writingMode' in document.documentElement.style) {
+      expectCssObj['writing-mode'] = 'horizontal-tb';
+    } else if ('webkitWritingMode' in document.documentElement.style) {
+      expectCssObj['-webkit-writing-mode'] = 'horizontal-tb';
+    }
+
+    expect(cssObj).toEqual(jasmine.objectContaining(expectCssObj));
   });
 
   it('correctly displays styles for nested cues', async () => {
@@ -132,19 +137,24 @@ describe('UITextDisplayer', () => {
         videoContainer.querySelector('.shaka-text-container');
     const captions = textContainer.querySelector('span');
     const cssObj = parseCssText(captions.style.cssText);
-    expect(cssObj).toEqual(
-        jasmine.objectContaining({
-          'color': 'green',
-          'background-color': 'black',
-          'font-size': '10px',
-          'font-style': 'normal',
-          'font-weight': 400,
-          'text-align': 'center',
-          // TODO: Old versions of Tizen and WebOS only supports the webkit
-          // prefixed version. Until we support the prefixed version, this
-          // has to be maintained. https://caniuse.com/css-writing-mode
-          // 'writing-mode': 'horizontal-tb',
-        }));
+
+    const expectCssObj = {
+      'color': 'green',
+      'background-color': 'black',
+      'font-size': '10px',
+      'font-style': 'normal',
+      'font-weight': 400,
+      'text-align': 'center',
+    };
+    // Old versions of Tizen and WebOS only supports the webkit prefixed
+    // version. https://caniuse.com/css-writing-mode
+    if ('writingMode' in document.documentElement.style) {
+      expectCssObj['writing-mode'] = 'horizontal-tb';
+    } else if ('webkitWritingMode' in document.documentElement.style) {
+      expectCssObj['-webkit-writing-mode'] = 'horizontal-tb';
+    }
+
+    expect(cssObj).toEqual(jasmine.objectContaining(expectCssObj));
   });
 
   it('correctly displays styles for cellResolution units', async () => {