diff --git a/gulpfile.js b/gulpfile.js
index 86800169631..c9d60471333 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -171,6 +171,8 @@ function validHTMLTask() {
function startTest() {
return [
+ {pattern: './test/fixtures/**/*.json', included: false},
+ {pattern: './test/fixtures/**/*.png', included: false},
'./node_modules/moment/min/moment.min.js',
'./test/jasmine.index.js',
'./src/**/*.js',
diff --git a/package.json b/package.json
index 374f90d17a5..24a313f4b29 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"merge-stream": "^1.0.0",
+ "pixelmatch": "^4.0.2",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"yargs": "^5.0.0"
diff --git a/test/fixtures/element.line/fill-line-bottom-span.json b/test/fixtures/element.line/fill-line-bottom-span.json
new file mode 100644
index 00000000000..ec6bb4b0d0a
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-bottom-span.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 255, 0, 0.25)",
+ "data": [6, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(255, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [8, 7, 6, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "bottom",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-bottom-span.png b/test/fixtures/element.line/fill-line-bottom-span.png
new file mode 100644
index 00000000000..45e4992768b
Binary files /dev/null and b/test/fixtures/element.line/fill-line-bottom-span.png differ
diff --git a/test/fixtures/element.line/fill-line-bottom.json b/test/fixtures/element.line/fill-line-bottom.json
new file mode 100644
index 00000000000..a0557fe78c5
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-bottom.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 255, 0, 0.25)",
+ "data": [6, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(255, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 0, 255, 0.25)",
+ "data": [8, 7, 6, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "bottom",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-bottom.png b/test/fixtures/element.line/fill-line-bottom.png
new file mode 100644
index 00000000000..1cd05e60dfc
Binary files /dev/null and b/test/fixtures/element.line/fill-line-bottom.png differ
diff --git a/test/fixtures/element.line/fill-line-spline-span.json b/test/fixtures/element.line/fill-line-spline-span.json
new file mode 100644
index 00000000000..c87833b6e23
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-spline-span.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-spline-span.png b/test/fixtures/element.line/fill-line-spline-span.png
new file mode 100644
index 00000000000..01aae5a995d
Binary files /dev/null and b/test/fixtures/element.line/fill-line-spline-span.png differ
diff --git a/test/fixtures/element.line/fill-line-spline.json b/test/fixtures/element.line/fill-line-spline.json
new file mode 100644
index 00000000000..543b8cd0600
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-spline.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-spline.png b/test/fixtures/element.line/fill-line-spline.png
new file mode 100644
index 00000000000..b2ec1797ff5
Binary files /dev/null and b/test/fixtures/element.line/fill-line-spline.png differ
diff --git a/test/fixtures/element.line/fill-line-stepped-span.json b/test/fixtures/element.line/fill-line-stepped-span.json
new file mode 100644
index 00000000000..c6f24e1c12b
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-stepped-span.json
@@ -0,0 +1,56 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "stepped": true,
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-stepped-span.png b/test/fixtures/element.line/fill-line-stepped-span.png
new file mode 100644
index 00000000000..9f7c15b9ddb
Binary files /dev/null and b/test/fixtures/element.line/fill-line-stepped-span.png differ
diff --git a/test/fixtures/element.line/fill-line-stepped.json b/test/fixtures/element.line/fill-line-stepped.json
new file mode 100644
index 00000000000..3fbdd7677cc
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-stepped.json
@@ -0,0 +1,56 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "cubicInterpolationMode": "monotone",
+ "borderColor": "transparent",
+ "stepped": true,
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-stepped.png b/test/fixtures/element.line/fill-line-stepped.png
new file mode 100644
index 00000000000..19f5a8d9262
Binary files /dev/null and b/test/fixtures/element.line/fill-line-stepped.png differ
diff --git a/test/fixtures/element.line/fill-line-top-span.json b/test/fixtures/element.line/fill-line-top-span.json
new file mode 100644
index 00000000000..b74b1f5cac3
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-top-span.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [5.5, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [8, 7, 6.5, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "top",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-top-span.png b/test/fixtures/element.line/fill-line-top-span.png
new file mode 100644
index 00000000000..83519b05fb7
Binary files /dev/null and b/test/fixtures/element.line/fill-line-top-span.png differ
diff --git a/test/fixtures/element.line/fill-line-top.json b/test/fixtures/element.line/fill-line-top.json
new file mode 100644
index 00000000000..e0696ba0661
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-top.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [5.5, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [8, 7, 6.5, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "top",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-top.png b/test/fixtures/element.line/fill-line-top.png
new file mode 100644
index 00000000000..25c8f136996
Binary files /dev/null and b/test/fixtures/element.line/fill-line-top.png differ
diff --git a/test/fixtures/element.line/fill-line-zero-span.json b/test/fixtures/element.line/fill-line-zero-span.json
new file mode 100644
index 00000000000..64fbbb315c5
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-zero-span.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [6, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 64, 192, 0.25)",
+ "data": [8, 7, 6, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": true,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "zero",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-zero-span.png b/test/fixtures/element.line/fill-line-zero-span.png
new file mode 100644
index 00000000000..727cc0309b0
Binary files /dev/null and b/test/fixtures/element.line/fill-line-zero-span.png differ
diff --git a/test/fixtures/element.line/fill-line-zero.json b/test/fixtures/element.line/fill-line-zero.json
new file mode 100644
index 00000000000..1958fc5d0a1
--- /dev/null
+++ b/test/fixtures/element.line/fill-line-zero.json
@@ -0,0 +1,55 @@
+{
+ "config": {
+ "type": "line",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 3, 4, -4, -2, 1, 0]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [6, 2, null, 4, 5, null, null, 2, 1]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [7, 3, 4, 5, 6, 1, 4, null, null]
+ }, {
+ "backgroundColor": "rgba(0, 64, 192, 0.25)",
+ "data": [8, 7, 6, -6, -4, -6, 4, 5, 8]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "spanGaps": false,
+ "legend": false,
+ "title": false,
+ "scales": {
+ "xAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }],
+ "yAxes": [{
+ "ticks": {
+ "display": false
+ }
+ }]
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "zero",
+ "tension": 0
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 512
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-line-zero.png b/test/fixtures/element.line/fill-line-zero.png
new file mode 100644
index 00000000000..f8f0208d4fd
Binary files /dev/null and b/test/fixtures/element.line/fill-line-zero.png differ
diff --git a/test/fixtures/element.line/fill-radar-spline.json b/test/fixtures/element.line/fill-radar-spline.json
new file mode 100644
index 00000000000..c22d8a6517c
--- /dev/null
+++ b/test/fixtures/element.line/fill-radar-spline.json
@@ -0,0 +1,50 @@
+{
+ "config": {
+ "type": "radar",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "legend": false,
+ "title": false,
+ "scale": {
+ "pointLabels": {
+ "fontSize": 0
+ },
+ "ticks": {
+ "display": false
+ }
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "tension": 0.5,
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 256
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-radar-spline.png b/test/fixtures/element.line/fill-radar-spline.png
new file mode 100644
index 00000000000..29b6c8e185e
Binary files /dev/null and b/test/fixtures/element.line/fill-radar-spline.png differ
diff --git a/test/fixtures/element.line/fill-radar-zero.json b/test/fixtures/element.line/fill-radar-zero.json
new file mode 100644
index 00000000000..172007943a7
--- /dev/null
+++ b/test/fixtures/element.line/fill-radar-zero.json
@@ -0,0 +1,49 @@
+{
+ "config": {
+ "type": "radar",
+ "data": {
+ "labels": ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+ "datasets": [{
+ "backgroundColor": "rgba(0, 0, 192, 0.25)",
+ "data": [null, null, 2, 4, 2, 1, -1, 1, 2]
+ }, {
+ "backgroundColor": "rgba(0, 192, 0, 0.25)",
+ "data": [4, 2, null, 3, 2.5, null, -2, 1.5, 3]
+ }, {
+ "backgroundColor": "rgba(192, 0, 0, 0.25)",
+ "data": [3.5, 2, 1, 2.5, -2, 3, -1, null, null]
+ }, {
+ "backgroundColor": "rgba(128, 0, 128, 0.25)",
+ "data": [5, 6, 5, -2, -4, -3, 4, 2, 4.5]
+ }]
+ },
+ "options": {
+ "responsive": false,
+ "legend": false,
+ "title": false,
+ "scale": {
+ "pointLabels": {
+ "fontSize": 0
+ },
+ "ticks": {
+ "display": false
+ }
+ },
+ "elements": {
+ "point": {
+ "radius": 0
+ },
+ "line": {
+ "borderColor": "transparent",
+ "fill": "zero"
+ }
+ }
+ }
+ },
+ "options": {
+ "canvas": {
+ "height": 256,
+ "width": 256
+ }
+ }
+}
diff --git a/test/fixtures/element.line/fill-radar-zero.png b/test/fixtures/element.line/fill-radar-zero.png
new file mode 100644
index 00000000000..5ede186f2c6
Binary files /dev/null and b/test/fixtures/element.line/fill-radar-zero.png differ
diff --git a/test/jasmine.index.js b/test/jasmine.index.js
index aeaee77c6c4..55c587ab0a2 100644
--- a/test/jasmine.index.js
+++ b/test/jasmine.index.js
@@ -37,6 +37,8 @@ var utils = require('./jasmine.utils');
'position: absolute' +
'}');
+ jasmine.specsFromFixtures = utils.specsFromFixtures;
+
beforeEach(function() {
jasmine.addMatchers(matchers);
});
diff --git a/test/jasmine.matchers.js b/test/jasmine.matchers.js
index abb90d7789e..8a3c9e121a3 100644
--- a/test/jasmine.matchers.js
+++ b/test/jasmine.matchers.js
@@ -1,5 +1,56 @@
'use strict';
+var pixelmatch = require('pixelmatch');
+var utils = require('./jasmine.utils');
+
+function toPercent(value) {
+ return Math.round(value * 10000) / 100;
+}
+
+function createImageData(w, h) {
+ var canvas = utils.createCanvas(w, h);
+ var context = canvas.getContext('2d');
+ return context.getImageData(0, 0, w, h);
+}
+
+function canvasFromImageData(data) {
+ var canvas = utils.createCanvas(data.width, data.height);
+ var context = canvas.getContext('2d');
+ context.putImageData(data, 0, 0);
+ return canvas;
+}
+
+function buildPixelMatchPreview(actual, expected, diff, threshold, tolerance, count) {
+ var ratio = count / (actual.width * actual.height);
+ var wrapper = document.createElement('div');
+
+ wrapper.style.cssText = 'display: flex; overflow-y: auto';
+
+ [
+ {data: actual, label: 'Actual'},
+ {data: expected, label: 'Expected'},
+ {data: diff, label:
+ 'diff: ' + count + 'px ' +
+ '(' + toPercent(ratio) + '%)
' +
+ 'thr: ' + toPercent(threshold) + '%, ' +
+ 'tol: '+ toPercent(tolerance) + '%'
+ }
+ ].forEach(function(values) {
+ var item = document.createElement('div');
+ item.style.cssText = 'text-align: center; font: 12px monospace; line-height: 1.4; margin: 8px';
+ item.innerHTML = '