From 0eb4e4b99e2ac8a6f6432a8be58be131b030c586 Mon Sep 17 00:00:00 2001
From: Scott Western <s.j.western@gmail.com>
Date: Wed, 21 Jul 2021 20:44:41 +0000
Subject: [PATCH] Use CSS standard gradients

---
 openlp/core/display/html/display.js | 17 ++++++++---------
 tests/js/test_display.js            |  6 +++---
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index c4d5dc72c..e059ac653 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -137,14 +137,13 @@ function $(selector) {
 /**
  * Build linear gradient CSS
  * @private
- * @param {string} startDir - Starting direction
- * @param {string} endDir - Ending direction
+ * @param {string} direction - The direction or angle of the gradient e.g. to bottom or 90deg
  * @param {string} startColor - The starting color
  * @param {string} endColor - The ending color
  * @returns {string} A string of the gradient CSS
  */
-function _buildLinearGradient(startDir, endDir, startColor, endColor) {
-  return "-webkit-gradient(linear, " + startDir + ", " + endDir + ", from(" + startColor + "), to(" + endColor + ")) fixed";
+function _buildLinearGradient(direction, startColor, endColor) {
+  return "linear-gradient(" + direction + ", " + startColor + ", " + endColor + ") fixed";
 }
 
 /**
@@ -156,7 +155,7 @@ function _buildLinearGradient(startDir, endDir, startColor, endColor) {
  * @returns {string} A string of the gradient CSS
  */
 function _buildRadialGradient(width, startColor, endColor) {
-  return "-webkit-gradient(radial, " + width + " 50%, 100, " + width + " 50%, " + width + ", from(" + startColor + "), to(" + endColor + ")) fixed";
+  return "radial-gradient(" + startColor + ", " + endColor + ") fixed";
 }
 
 /**
@@ -971,22 +970,22 @@ var Display = {
       case BackgroundType.Gradient:
         switch (Display._theme.background_direction) {
           case GradientType.Horizontal:
-            backgroundContent = _buildLinearGradient("left top", "left bottom",
+            backgroundContent = _buildLinearGradient("to right",
                                                                  Display._theme.background_start_color,
                                                                  Display._theme.background_end_color);
             break;
           case GradientType.Vertical:
-            backgroundContent = _buildLinearGradient("left top", "right top",
+            backgroundContent = _buildLinearGradient("to bottom",
                                                                  Display._theme.background_start_color,
                                                                  Display._theme.background_end_color);
             break;
           case GradientType.LeftTop:
-            backgroundContent = _buildLinearGradient("left top", "right bottom",
+            backgroundContent = _buildLinearGradient("to right bottom",
                                                                  Display._theme.background_start_color,
                                                                  Display._theme.background_end_color);
             break;
           case GradientType.LeftBottom:
-            backgroundContent = _buildLinearGradient("left bottom", "right top",
+            backgroundContent = _buildLinearGradient("to top right",
                                                                  Display._theme.background_start_color,
                                                                  Display._theme.background_end_color);
             break;
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index 06b02c746..a3b543ac7 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -44,13 +44,13 @@ describe("The function", function () {
   });
 
   it("_buildLinearGradient() should build the correct string", function () {
-    var gradient = _buildLinearGradient("left top", "left bottom", "#000", "#fff");
-    expect(gradient).toBe("-webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)) fixed");
+    var gradient = _buildLinearGradient("to bottom", "#000", "#fff");
+    expect(gradient).toBe("linear-gradient(to bottom, #000, #fff) fixed");
   });
 
   it("_buildRadialGradient() should build the correct string", function () {
     var gradient = _buildRadialGradient(10, "#000", "#fff");
-    expect(gradient).toBe("-webkit-gradient(radial, 10 50%, 100, 10 50%, 10, from(#000), to(#fff)) fixed");
+    expect(gradient).toBe("radial-gradient(#000, #fff) fixed");
   });
 
   it("_getStyle should return the correct style on an element", function () {