Use !important for all Readium CSS variables (#334)

Author: mickael-menu

readium/navigator/src/main/assets/_scripts/src/utils.js

@@ -292,6 +292,8 @@ export function setProperty(key, value) {
     removeProperty(key);
   } else {
     var root = document.documentElement;
+    // The `!important` annotation is added with `setProperty()` because if it's part of the
+    // `value`, it will be ignored by the Web View.
     root.style.setProperty(key, value, "important");
   }
 }

readium/navigator/src/main/assets/readium/scripts/readium-fixed.js

@@ -28,8 +28,8 @@ interface Properties : Cssable {
         }
 
         return props
-            .map { (key, value) -> "$key: $value" }
-            .joinToString(";\n") + ";\n"
+            .map { (key, value) -> "$key: $value !important;" }
+            .joinToString("\n") + "\n"
     }
 }
 

readium/navigator/src/main/assets/readium/scripts/readium-reflowable.js

@@ -261,8 +261,8 @@ class PropertiesTest {
     fun `Generate minimal inline CSS properties`() {
         assertEquals(
             """
-                --USER__view: readium-scroll-on;
-                --USER__colCount: auto;
+                --USER__view: readium-scroll-on !important;
+                --USER__colCount: auto !important;
                 
             """.trimIndent(),
             UserProperties(
@@ -276,28 +276,28 @@ class PropertiesTest {
     fun `Generate full inline CSS properties`() {
         assertEquals(
             """
-                --USER__view: readium-scroll-on;
-                --USER__colCount: auto;
-                --USER__pageMargins: 1.2;
-                --USER__appearance: readium-night-on;
-                --USER__darkenImages: readium-darken-on;
-                --USER__invertImages: readium-invert-on;
-                --USER__textColor: #FF0000;
-                --USER__backgroundColor: #00FF00;
-                --USER__fontOverride: readium-font-on;
-                --USER__fontFamily: "Times New", "Comic Sans";
-                --USER__fontSize: 2.3vmax;
-                --USER__advancedSettings: readium-advanced-on;
-                --USER__typeScale: 3.4;
-                --USER__textAlign: justify;
-                --USER__lineHeight: 4.5pt;
-                --USER__paraSpacing: 5.6pt;
-                --USER__paraIndent: 6.7rem;
-                --USER__wordSpacing: 7.8rem;
-                --USER__letterSpacing: 8.9rem;
-                --USER__bodyHyphens: auto;
-                --USER__ligatures: common-ligatures;
-                --USER__a11yNormalize: readium-a11y-on;
+                --USER__view: readium-scroll-on !important;
+                --USER__colCount: auto !important;
+                --USER__pageMargins: 1.2 !important;
+                --USER__appearance: readium-night-on !important;
+                --USER__darkenImages: readium-darken-on !important;
+                --USER__invertImages: readium-invert-on !important;
+                --USER__textColor: #FF0000 !important;
+                --USER__backgroundColor: #00FF00 !important;
+                --USER__fontOverride: readium-font-on !important;
+                --USER__fontFamily: "Times New", "Comic Sans" !important;
+                --USER__fontSize: 2.3vmax !important;
+                --USER__advancedSettings: readium-advanced-on !important;
+                --USER__typeScale: 3.4 !important;
+                --USER__textAlign: justify !important;
+                --USER__lineHeight: 4.5pt !important;
+                --USER__paraSpacing: 5.6pt !important;
+                --USER__paraIndent: 6.7rem !important;
+                --USER__wordSpacing: 7.8rem !important;
+                --USER__letterSpacing: 8.9rem !important;
+                --USER__bodyHyphens: auto !important;
+                --USER__ligatures: common-ligatures !important;
+                --USER__a11yNormalize: readium-a11y-on !important;
                 
             """.trimIndent(),
             UserProperties(