From 7af44ef5653618f79735ffa98beff08f9081f2b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <alvaro.velad@mirada.tv>
Date: Mon, 19 Apr 2021 19:44:17 +0200
Subject: [PATCH] fix(UI): Fix writing-mode support in old versions of Tizen
 and WebOS (#3330)

---
 lib/text/ui_text_displayer.js       |  9 +++-
 test/text/ui_text_displayer_unit.js | 66 +++++++++++++++++------------
 2 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/lib/text/ui_text_displayer.js b/lib/text/ui_text_displayer.js
index 19af7e38e9..87a9058691 100644
--- 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
index 89560b6124..85092d0f7b 100644
--- 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 () => {