fix(UI): Fix writing-mode on Tizen 3

Old versions of Chromium, which may be found in certain versions of
Tizen and WebOS, may require the prefixed version of "writingMode":
"webkitWritingMode".

However, testing shows that Tizen 3, at least, has a "writingMode"
property, but the setter for it does nothing.

Therefore, instead of just detecting the existence of the property, we
need to additionally check if setting it had any effect.  If it is
either missing or non-functional, then we fall back to the prefixed
version of the property.  This fixes the functionality on Tizen 3.

We also need to change the conditions we check for in the tests, since
property existence is not enough to set the correct test expectation.

See also PR shaka-project#3330

Change-Id: Ic906f3c5af956b5edd1788e95e1978eb4b3098ac

lib/text/ui_text_displayer.js

@@ -408,12 +408,19 @@ 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
+    // Old versions of Chromium, which may be found in certain versions of Tizen
+    // and WebOS, may require the prefixed version: webkitWritingMode.
     // https://caniuse.com/css-writing-mode
-    if ('writingMode' in document.documentElement.style) {
-      style.writingMode = cue.writingMode;
-    } else if ('webkitWritingMode' in document.documentElement.style) {
+    // However, testing shows that Tizen 3, at least, has a 'writingMode'
+    // property, but the setter for it does nothing.  Therefore we need to
+    // detect that and fall back to the prefixed version in this case, too.
+    if (!('writingMode' in document.documentElement.style) ||
+        style.writingMode != cue.writingMode) {
+      // Note that here we do not bother to check for webkitWritingMode support
+      // explicitly.  We try the unprefixed version, then fall back to the
+      // prefixed version unconditionally.
       style.webkitWritingMode = cue.writingMode;
     }
 

test/text/ui_text_displayer_unit.js

@@ -101,11 +101,16 @@ describe('UITextDisplayer', () => {
       '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) {
+
+    // Either the prefixed or unprefixed version may be present.  We will accept
+    // either.  Detecting which property the platform has may not work, because
+    // Tizen 3, for example, has a writingMode property, but it is
+    // non-functional.  Instead of checking for which properties are on the
+    // platform's style interface, check which properties are in the cssObj.
+    // We expect one or the other to work on all supported platforms.
+    if ('writing-mode' in cssObj) {
       expectCssObj['writing-mode'] = 'horizontal-tb';
-    } else if ('webkitWritingMode' in document.documentElement.style) {
+    } else {
       expectCssObj['-webkit-writing-mode'] = 'horizontal-tb';
     }
 
@@ -146,11 +151,16 @@ describe('UITextDisplayer', () => {
       '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) {
+
+    // Either the prefixed or unprefixed version may be present.  We will accept
+    // either.  Detecting which property the platform has may not work, because
+    // Tizen 3, for example, has a writingMode property, but it is
+    // non-functional.  Instead of checking for which properties are on the
+    // platform's style interface, check which properties are in the cssObj.
+    // We expect one or the other to work on all supported platforms.
+    if ('writing-mode' in cssObj) {
       expectCssObj['writing-mode'] = 'horizontal-tb';
-    } else if ('webkitWritingMode' in document.documentElement.style) {
+    } else {
       expectCssObj['-webkit-writing-mode'] = 'horizontal-tb';
     }