Enable applying of gradients and pattern on line segments (#11217)

* Enable applying of gradients and pattern on line segments

* add test case

* improve replacer

src/helpers/helpers.segment.js

@@ -1,5 +1,6 @@
 import {_angleBetween, _angleDiff, _isBetween, _normalizeAngle} from './helpers.math.js';
 import {createContext} from './helpers.options.js';
+import {isPatternOrGradient} from './helpers.color.js';
 
 /**
  * @typedef { import('../elements/element.line.js').default } LineElement
@@ -346,5 +347,18 @@ function readStyle(options) {
 }
 
 function styleChanged(style, prevStyle) {
-  return prevStyle && JSON.stringify(style) !== JSON.stringify(prevStyle);
+  if (!prevStyle) {
+    return false;
+  }
+  const cache = [];
+  const replacer = function(key, value) {
+    if (!isPatternOrGradient(value)) {
+      return value;
+    }
+    if (!cache.includes(value)) {
+      cache.push(value);
+    }
+    return cache.indexOf(value);
+  };
+  return JSON.stringify(style, replacer) !== JSON.stringify(prevStyle, replacer);
 }

test/fixtures/controller.line/segments/gradient.js

@@ -0,0 +1,34 @@
+const getGradient = (context) => {
+  const {chart, p0, p1} = context;
+  const ctx = chart.ctx;
+  const {x: x0} = p0.getProps(['x'], true);
+  const {x: x1} = p1.getProps(['x'], true);
+  const gradient = ctx.createLinearGradient(x0, 0, x1, 0);
+  gradient.addColorStop(0, p0.options.backgroundColor);
+  gradient.addColorStop(1, p1.options.backgroundColor);
+  return gradient;
+};
+
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [{
+        data: [{x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}, {x: 4, y: 4}, {x: 5, y: 5}, {x: 6, y: 6}],
+        pointBackgroundColor: ['red', 'yellow', 'green', 'green', 'blue', 'pink', 'blue'],
+        pointBorderWidth: 0,
+        pointRadius: 10,
+        borderWidth: 5,
+        segment: {
+          borderColor: getGradient,
+        }
+      }]
+    },
+    options: {
+      scales: {
+        x: {type: 'linear', display: false},
+        y: {display: false}
+      }
+    }
+  }
+};