From c96c7fefead622b0417d5f1ae2b0cb457932c26a Mon Sep 17 00:00:00 2001
From: James Muscat <jamesremuscat@gmail.com>
Date: Sun, 21 Jan 2018 12:28:00 +0000
Subject: [PATCH 1/2] Fix broken syntax.

---
 openlp/core/display/html/display.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 4c85c5b70..13dd4dd07 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -133,7 +133,7 @@ AudioPlayer.prototype.createAudioElement = function () {
   this._audioElement.addEventListener("volumechange", this._callListener);
   this._audioElement.addEventListener("durationchange", this._callListener);
   this._audioElement.addEventListener("loadeddata", this._callListener);
-  document.addEventListener("complete", function(event) { 
+  document.addEventListener("complete", function(event) {
     document.body.appendChild(this._audioElement);
   });
 };
@@ -622,7 +622,6 @@ var Display = {
     }
     return videoTypes;
   }
-  }
 };
 new QWebChannel(qt.webChannelTransport, function (channel) {
   window.mediaWatcher = channel.objects.mediaWatcher;

From bbadd9fbce71d99ef83120702a9c5ee5d2c07de5 Mon Sep 17 00:00:00 2001
From: James Muscat <jamesremuscat@gmail.com>
Date: Sun, 21 Jan 2018 13:08:24 +0000
Subject: [PATCH 2/2] Use `pt` for outline size.

This matches the units used in the theme settings UI, and allows thin outlines
to be used with large font sizes.
---
 openlp/core/display/html/display.js |  4 ++--
 tests/js/test_display.js            | 37 +++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index 13dd4dd07..21e45c2c0 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -551,7 +551,7 @@ var Display = {
       "padding": "0"*/
     };
     if (!!theme.font_main_outline) {
-      mainStyle["-webkit-text-stroke"] = "" + (parseFloat(theme.font_main_outline_size) / 16.0) + "em " +
+      mainStyle["-webkit-text-stroke"] = "" + theme.font_main_outline_size + "pt " +
                                          theme.font_main_outline_color;
       mainStyle["-webkit-text-fill-color"] = theme.font_main_color;
     }
@@ -571,7 +571,7 @@ var Display = {
                                  theme.font_main_shadow_size + "px";
     }
     mainStyle["padding-bottom"] = theme.display_vertical_align == VerticalAlign.Bottom ? "0.5em" : "0";
-    mainStyle["padding-left"] = !!theme.font_main_outline ? "" + (theme.font_main_outline_size * 2) + "px" : "0";
+    mainStyle["padding-left"] = !!theme.font_main_outline ? "" + (theme.font_main_outline_size * 2) + "pt" : "0";
     // These need to be fixed, in the Python they use a width passed in as a parameter
     mainStyle["position"] = "absolute";
     mainStyle["width"] = "" + (window.innerWidth - (theme.font_main_outline_size * 4)) + "px";
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index 5e21187f7..bda2c39a0 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -193,6 +193,15 @@ describe("Display.setTextSlides", function () {
     var slidesDiv = document.createElement("div");
     slidesDiv.setAttribute("class", "slides");
     document.body.appendChild(slidesDiv);
+
+    var background = document.createElement("div");
+    background.setAttribute("id", "global-background");
+    document.body.appendChild(background);
+
+    var footer = document.createElement("div");
+    footer.setAttribute("class", "footer");
+    document.body.appendChild(footer);
+
     Display._slides = {};
   });
 
@@ -222,6 +231,34 @@ describe("Display.setTextSlides", function () {
     expect(Display.reinit).toHaveBeenCalledTimes(1);
     expect(Reveal.slide).toHaveBeenCalledWith(0);
   });
+
+  it("should correctly set outline width", function () {
+    const slides = [
+      {
+        "verse": "v1",
+        "text": "Amazing grace, how sweet the sound\nThat saved a wretch like me\n" +
+                "I once was lost, but now I'm found\nWas blind but now I see"
+      }
+    ];
+
+    const theme = {
+      'font_main_color': 'yellow',
+      'font_main_outline': true,
+      'font_main_outline_size': 42,
+      'font_main_outline_color': 'red'
+    };
+
+    spyOn(Display, "reinit");
+
+    Display.setTextSlides(slides);
+    Display.setTheme(theme);
+
+    const slidesDiv = $(".slides")[0];
+
+    expect(slidesDiv.style['-webkit-text-stroke']).toEqual('42pt red');
+    expect(slidesDiv.style['padding-left']).toEqual('84pt');
+    expect(slidesDiv.style['-webkit-text-fill-color']).toEqual('yellow');
+  })
 });
 
 describe("Display.setImageSlides", function () {