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 () {