From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/css-gradients/1224761-1-ref.html   |  37 +++++++
 layout/reftests/css-gradients/1224761-1.html       |  36 +++++++
 .../reftests/css-gradients/aja-linear-1-ref.html   |  23 +++++
 layout/reftests/css-gradients/aja-linear-1a.html   |  10 ++
 layout/reftests/css-gradients/aja-linear-1b.html   |  10 ++
 layout/reftests/css-gradients/aja-linear-1c.html   |  10 ++
 layout/reftests/css-gradients/aja-linear-1d.html   |  10 ++
 layout/reftests/css-gradients/aja-linear-1e.html   |  10 ++
 layout/reftests/css-gradients/aja-linear-1f.html   |  10 ++
 .../reftests/css-gradients/aja-linear-2-ref.html   |  23 +++++
 layout/reftests/css-gradients/aja-linear-2.html    |  10 ++
 .../reftests/css-gradients/aja-linear-3-ref.html   |  25 +++++
 layout/reftests/css-gradients/aja-linear-3a.html   |  10 ++
 layout/reftests/css-gradients/aja-linear-3b.html   |  10 ++
 .../reftests/css-gradients/aja-linear-4-ref.html   |  24 +++++
 layout/reftests/css-gradients/aja-linear-4a.html   |  10 ++
 layout/reftests/css-gradients/aja-linear-4b.html   |  10 ++
 .../reftests/css-gradients/aja-linear-5-ref.html   |  24 +++++
 layout/reftests/css-gradients/aja-linear-5a.html   |  10 ++
 .../bug-916535-background-repeat-linear-ref.html   |  24 +++++
 .../bug-916535-background-repeat-linear.html       |  25 +++++
 .../color-stop-clamp-interpolation-ref.html        |  18 ++++
 .../color-stop-clamp-interpolation.html            |  18 ++++
 .../css-gradients/height-dependence-1-ref.html     |  43 ++++++++
 .../css-gradients/height-dependence-1.html         |  49 +++++++++
 .../css-gradients/height-dependence-2-ref.html     |  44 ++++++++
 .../css-gradients/height-dependence-2.html         |  50 ++++++++++
 .../css-gradients/height-dependence-3-ref.html     |  44 ++++++++
 .../css-gradients/height-dependence-3.html         |  50 ++++++++++
 .../css-gradients/large-gradient-1-ref.html        |  23 +++++
 .../reftests/css-gradients/large-gradient-1.html   |  40 ++++++++
 .../css-gradients/large-gradient-2-ref.html        |  17 ++++
 .../reftests/css-gradients/large-gradient-2.html   |  40 ++++++++
 .../css-gradients/large-gradient-3-ref.html        |  23 +++++
 .../reftests/css-gradients/large-gradient-3.html   |  40 ++++++++
 .../css-gradients/large-gradient-4-ref.html        |  17 ++++
 .../reftests/css-gradients/large-gradient-4.html   |  40 ++++++++
 .../css-gradients/large-gradient-5-ref.html        |  19 ++++
 .../reftests/css-gradients/large-gradient-5.html   |  30 ++++++
 layout/reftests/css-gradients/linear-1-ref.html    |  24 +++++
 layout/reftests/css-gradients/linear-1a.html       |   1 +
 .../css-gradients/linear-diagonal-1-ref.html       |   1 +
 .../reftests/css-gradients/linear-diagonal-1a.html |   1 +
 .../css-gradients/linear-diagonal-2-ref.html       |   1 +
 .../reftests/css-gradients/linear-diagonal-2a.html |   1 +
 .../css-gradients/linear-diagonal-3-ref.html       |   1 +
 .../reftests/css-gradients/linear-diagonal-3a.html |   1 +
 .../css-gradients/linear-diagonal-4-ref.html       |   1 +
 .../reftests/css-gradients/linear-diagonal-4a.html |   1 +
 .../css-gradients/linear-flipped-1-ref.html        |   2 +
 .../reftests/css-gradients/linear-flipped-1.html   |   2 +
 .../linear-gradient-repeated-ref.html              |  18 ++++
 .../css-gradients/linear-gradient-repeated.html    |  19 ++++
 .../css-gradients/linear-keywords-1-ref.html       |  23 +++++
 .../reftests/css-gradients/linear-keywords-1a.html |   1 +
 .../linear-onestopposition-1-ref.html              |  12 +++
 .../linear-onestopposition-1-ref2.html             |  21 ++++
 .../css-gradients/linear-onestopposition-1.html    |  12 +++
 .../css-gradients/linear-position-1-ref.html       |   2 +
 .../reftests/css-gradients/linear-position-1a.html |   2 +
 .../reftests/css-gradients/linear-premul-ref.html  |   1 +
 layout/reftests/css-gradients/linear-premul.html   |   1 +
 .../css-gradients/linear-repeat-1-ref.html         |   6 ++
 .../reftests/css-gradients/linear-repeat-1a.html   |   2 +
 .../reftests/css-gradients/linear-repeat-1b.html   |   2 +
 .../reftests/css-gradients/linear-repeat-1c.html   |   4 +
 .../reftests/css-gradients/linear-repeat-1d.html   |   3 +
 .../reftests/css-gradients/linear-repeat-1e.html   |   3 +
 .../reftests/css-gradients/linear-repeat-1f.html   |  10 ++
 .../reftests/css-gradients/linear-repeat-1g.html   |  12 +++
 .../css-gradients/linear-rotated-1-ref.html        |   7 ++
 .../reftests/css-gradients/linear-rotated-1.html   |   7 ++
 .../reftests/css-gradients/linear-size-1-ref.html  |   3 +
 layout/reftests/css-gradients/linear-size-1a.html  |   2 +
 .../reftests/css-gradients/linear-stops-1-ref.html |   1 +
 layout/reftests/css-gradients/linear-stops-1a.html |   1 +
 layout/reftests/css-gradients/linear-stops-1b.html |   1 +
 layout/reftests/css-gradients/linear-stops-1c.html |   1 +
 layout/reftests/css-gradients/linear-stops-1d.html |   1 +
 layout/reftests/css-gradients/linear-stops-1e.html |   1 +
 layout/reftests/css-gradients/linear-stops-1f.html |   1 +
 .../css-gradients/linear-vertical-1-ref.html       |  16 +++
 .../reftests/css-gradients/linear-vertical-1a.html |   1 +
 .../reftests/css-gradients/linear-vertical-1b.html |   1 +
 .../reftests/css-gradients/linear-vertical-1c.html |   1 +
 .../reftests/css-gradients/linear-vertical-1d.html |   1 +
 .../linear-vertical-subpixel-1-ref.html            |  15 +++
 .../css-gradients/linear-vertical-subpixel-1.html  |  15 +++
 .../css-gradients/linear-viewport-ref.html         |   1 +
 layout/reftests/css-gradients/linear-viewport.html |   2 +
 .../mask-gradient-translucent-end-color-1-ref.html |  17 ++++
 .../mask-gradient-translucent-end-color-1.html     |  34 +++++++
 layout/reftests/css-gradients/nostops.html         |   1 +
 layout/reftests/css-gradients/onestop.html         |   1 +
 layout/reftests/css-gradients/orange-square.html   |  12 +++
 layout/reftests/css-gradients/radial-1-ref.html    |  22 ++++
 layout/reftests/css-gradients/radial-1a.html       |   1 +
 layout/reftests/css-gradients/radial-1b.html       |   1 +
 layout/reftests/css-gradients/radial-2-ref.html    |  22 ++++
 layout/reftests/css-gradients/radial-2a.html       |   1 +
 layout/reftests/css-gradients/radial-2b.html       |   3 +
 layout/reftests/css-gradients/radial-2c.html       |   1 +
 layout/reftests/css-gradients/radial-2d.html       |   3 +
 .../radial-onestopposition-1-ref.html              |  12 +++
 .../css-gradients/radial-onestopposition-1a.html   |  12 +++
 .../css-gradients/radial-onestopposition-1b.html   |  12 +++
 .../css-gradients/radial-position-1-ref.html       |   2 +
 .../reftests/css-gradients/radial-position-1a.html |   2 +
 .../reftests/css-gradients/radial-position-1b.html |   2 +
 .../reftests/css-gradients/radial-premul-ref.html  |   1 +
 layout/reftests/css-gradients/radial-premul.html   |   1 +
 .../radial-shape-closest-corner-1-ref.html         |   9 ++
 .../radial-shape-closest-corner-1a.html            |   9 ++
 .../radial-shape-closest-corner-1b.html            |   9 ++
 .../radial-shape-closest-side-1-ref.html           |   9 ++
 .../radial-shape-closest-side-1a.html              |   9 ++
 .../radial-shape-closest-side-1b.html              |   9 ++
 .../radial-shape-farthest-corner-1-ref.html        |   9 ++
 .../radial-shape-farthest-corner-1a.html           |   9 ++
 .../radial-shape-farthest-corner-1b.html           |   9 ++
 .../radial-shape-farthest-side-1-ref.html          |   9 ++
 .../radial-shape-farthest-side-1a.html             |   9 ++
 .../radial-shape-farthest-side-1b.html             |   9 ++
 .../reftests/css-gradients/radial-size-1-ref.html  |   3 +
 layout/reftests/css-gradients/radial-size-1a.html  |   2 +
 layout/reftests/css-gradients/radial-size-1b.html  |   2 +
 .../css-gradients/radial-zero-length-1-ref.html    |   2 +
 .../css-gradients/radial-zero-length-1a.html       |   2 +
 .../css-gradients/radial-zero-length-1b.html       |   2 +
 .../css-gradients/radial-zero-length-1c.html       |   2 +
 .../css-gradients/radial-zero-length-1d.html       |   2 +
 .../css-gradients/radial-zero-length-1e.html       |   2 +
 .../css-gradients/radial-zero-length-1f.html       |   2 +
 layout/reftests/css-gradients/reftest.list         | 111 +++++++++++++++++++++
 .../css-gradients/repeated-final-stop-1-ref.html   |  18 ++++
 .../css-gradients/repeated-final-stop-1.html       |  17 ++++
 .../css-gradients/repeating-linear-1-ref.html      |   8 ++
 .../css-gradients/repeating-linear-1a.html         |   1 +
 .../css-gradients/repeating-linear-1b.html         |   1 +
 .../css-gradients/repeating-linear-2-ref.html      |   1 +
 .../css-gradients/repeating-linear-2a.html         |   1 +
 .../repeating-linear-onestopposition-1.html        |  12 +++
 .../css-gradients/repeating-radial-1-ref.html      |   1 +
 .../css-gradients/repeating-radial-1a.html         |   1 +
 .../css-gradients/repeating-radial-1b.html         |   4 +
 .../css-gradients/repeating-radial-1c.html         |   1 +
 .../css-gradients/repeating-radial-1d.html         |   4 +
 .../css-gradients/repeating-radial-2-ref.html      |   1 +
 .../css-gradients/repeating-radial-2a.html         |   1 +
 .../css-gradients/repeating-radial-2b.html         |   1 +
 .../repeating-radial-onestopposition-1a.html       |  12 +++
 .../repeating-radial-onestopposition-1b.html       |  12 +++
 .../scaled-color-stop-position-ref.html            |  26 +++++
 .../css-gradients/scaled-color-stop-position.html  |  24 +++++
 layout/reftests/css-gradients/twostops-1-ref.html  |   7 ++
 layout/reftests/css-gradients/twostops-1a.html     |   1 +
 layout/reftests/css-gradients/twostops-1b.html     |   1 +
 layout/reftests/css-gradients/twostops-1c.html     |   1 +
 layout/reftests/css-gradients/twostops-1d.html     |   1 +
 layout/reftests/css-gradients/twostops-1e.html     |   1 +
 160 files changed, 1798 insertions(+)
 create mode 100644 layout/reftests/css-gradients/1224761-1-ref.html
 create mode 100644 layout/reftests/css-gradients/1224761-1.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-1-ref.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-1a.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-1b.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-1c.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-1d.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-1e.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-1f.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-2-ref.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-2.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-3-ref.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-3a.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-3b.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-4-ref.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-4a.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-4b.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-5-ref.html
 create mode 100644 layout/reftests/css-gradients/aja-linear-5a.html
 create mode 100644 layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html
 create mode 100644 layout/reftests/css-gradients/bug-916535-background-repeat-linear.html
 create mode 100644 layout/reftests/css-gradients/color-stop-clamp-interpolation-ref.html
 create mode 100644 layout/reftests/css-gradients/color-stop-clamp-interpolation.html
 create mode 100644 layout/reftests/css-gradients/height-dependence-1-ref.html
 create mode 100644 layout/reftests/css-gradients/height-dependence-1.html
 create mode 100644 layout/reftests/css-gradients/height-dependence-2-ref.html
 create mode 100644 layout/reftests/css-gradients/height-dependence-2.html
 create mode 100644 layout/reftests/css-gradients/height-dependence-3-ref.html
 create mode 100644 layout/reftests/css-gradients/height-dependence-3.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-1-ref.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-1.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-2-ref.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-2.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-3-ref.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-3.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-4-ref.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-4.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-5-ref.html
 create mode 100644 layout/reftests/css-gradients/large-gradient-5.html
 create mode 100644 layout/reftests/css-gradients/linear-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-2-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-2a.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-3-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-3a.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-4-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-diagonal-4a.html
 create mode 100644 layout/reftests/css-gradients/linear-flipped-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-flipped-1.html
 create mode 100644 layout/reftests/css-gradients/linear-gradient-repeated-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-gradient-repeated.html
 create mode 100644 layout/reftests/css-gradients/linear-keywords-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-keywords-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-onestopposition-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-onestopposition-1-ref2.html
 create mode 100644 layout/reftests/css-gradients/linear-onestopposition-1.html
 create mode 100644 layout/reftests/css-gradients/linear-position-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-position-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-premul-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-premul.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1b.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1c.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1d.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1e.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1f.html
 create mode 100644 layout/reftests/css-gradients/linear-repeat-1g.html
 create mode 100644 layout/reftests/css-gradients/linear-rotated-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-rotated-1.html
 create mode 100644 layout/reftests/css-gradients/linear-size-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-size-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-stops-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-stops-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-stops-1b.html
 create mode 100644 layout/reftests/css-gradients/linear-stops-1c.html
 create mode 100644 layout/reftests/css-gradients/linear-stops-1d.html
 create mode 100644 layout/reftests/css-gradients/linear-stops-1e.html
 create mode 100644 layout/reftests/css-gradients/linear-stops-1f.html
 create mode 100644 layout/reftests/css-gradients/linear-vertical-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-vertical-1a.html
 create mode 100644 layout/reftests/css-gradients/linear-vertical-1b.html
 create mode 100644 layout/reftests/css-gradients/linear-vertical-1c.html
 create mode 100644 layout/reftests/css-gradients/linear-vertical-1d.html
 create mode 100644 layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-vertical-subpixel-1.html
 create mode 100644 layout/reftests/css-gradients/linear-viewport-ref.html
 create mode 100644 layout/reftests/css-gradients/linear-viewport.html
 create mode 100644 layout/reftests/css-gradients/mask-gradient-translucent-end-color-1-ref.html
 create mode 100644 layout/reftests/css-gradients/mask-gradient-translucent-end-color-1.html
 create mode 100644 layout/reftests/css-gradients/nostops.html
 create mode 100644 layout/reftests/css-gradients/onestop.html
 create mode 100644 layout/reftests/css-gradients/orange-square.html
 create mode 100644 layout/reftests/css-gradients/radial-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-2-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-2a.html
 create mode 100644 layout/reftests/css-gradients/radial-2b.html
 create mode 100644 layout/reftests/css-gradients/radial-2c.html
 create mode 100644 layout/reftests/css-gradients/radial-2d.html
 create mode 100644 layout/reftests/css-gradients/radial-onestopposition-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-onestopposition-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-onestopposition-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-position-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-position-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-position-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-premul-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-premul.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-closest-corner-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-closest-corner-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-closest-side-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-closest-side-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-farthest-side-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-shape-farthest-side-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-size-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-size-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-size-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-zero-length-1-ref.html
 create mode 100644 layout/reftests/css-gradients/radial-zero-length-1a.html
 create mode 100644 layout/reftests/css-gradients/radial-zero-length-1b.html
 create mode 100644 layout/reftests/css-gradients/radial-zero-length-1c.html
 create mode 100644 layout/reftests/css-gradients/radial-zero-length-1d.html
 create mode 100644 layout/reftests/css-gradients/radial-zero-length-1e.html
 create mode 100644 layout/reftests/css-gradients/radial-zero-length-1f.html
 create mode 100644 layout/reftests/css-gradients/reftest.list
 create mode 100644 layout/reftests/css-gradients/repeated-final-stop-1-ref.html
 create mode 100644 layout/reftests/css-gradients/repeated-final-stop-1.html
 create mode 100644 layout/reftests/css-gradients/repeating-linear-1-ref.html
 create mode 100644 layout/reftests/css-gradients/repeating-linear-1a.html
 create mode 100644 layout/reftests/css-gradients/repeating-linear-1b.html
 create mode 100644 layout/reftests/css-gradients/repeating-linear-2-ref.html
 create mode 100644 layout/reftests/css-gradients/repeating-linear-2a.html
 create mode 100644 layout/reftests/css-gradients/repeating-linear-onestopposition-1.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-1-ref.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-1a.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-1b.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-1c.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-1d.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-2-ref.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-2a.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-2b.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html
 create mode 100644 layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html
 create mode 100644 layout/reftests/css-gradients/scaled-color-stop-position-ref.html
 create mode 100644 layout/reftests/css-gradients/scaled-color-stop-position.html
 create mode 100644 layout/reftests/css-gradients/twostops-1-ref.html
 create mode 100644 layout/reftests/css-gradients/twostops-1a.html
 create mode 100644 layout/reftests/css-gradients/twostops-1b.html
 create mode 100644 layout/reftests/css-gradients/twostops-1c.html
 create mode 100644 layout/reftests/css-gradients/twostops-1d.html
 create mode 100644 layout/reftests/css-gradients/twostops-1e.html

(limited to 'layout/reftests/css-gradients')

diff --git a/layout/reftests/css-gradients/1224761-1-ref.html b/layout/reftests/css-gradients/1224761-1-ref.html
new file mode 100644
index 0000000000..7b243c9a45
--- /dev/null
+++ b/layout/reftests/css-gradients/1224761-1-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    border: 1px solid black;
+    width: 30px;
+    height: 30px;
+    margin: 1px;
+}
+.grad-5 {
+    background: yellow;
+}
+.grad0 {
+    background: yellow;
+}
+.grad30 {
+    /* not much of a test, but this isn't where the bug was anyway! */
+    background: linear-gradient(to right, blue 30%, yellow 30%);
+}
+.grad100 {
+    background: blue;
+}
+.grad150 {
+    background: blue;
+}
+</style>
+</head>
+<body>
+  You shouldn't see a gradual gradient in any of the divs below.
+  <div class="grad-5"></div>
+  <div class="grad0"></div>
+  <div class="grad30"></div>
+  <div class="grad100"></div>
+  <div class="grad150"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/1224761-1.html b/layout/reftests/css-gradients/1224761-1.html
new file mode 100644
index 0000000000..97e00f7dd6
--- /dev/null
+++ b/layout/reftests/css-gradients/1224761-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+    border: 1px solid black;
+    width: 30px;
+    height: 30px;
+    margin: 1px;
+}
+.grad-5 {
+    background: linear-gradient(to right, blue -5%, yellow -5%);
+}
+.grad0 {
+    background: linear-gradient(to right, blue 0%, yellow 0%);
+}
+.grad30 {
+    background: linear-gradient(to right, blue 30%, yellow 30%);
+}
+.grad100 {
+    background: linear-gradient(to right, blue 100%, yellow 100%);
+}
+.grad150 {
+    background: linear-gradient(to right, blue 150%, yellow 150%);
+}
+</style>
+</head>
+<body>
+  You shouldn't see a gradual gradient in any of the divs below.
+  <div class="grad-5"></div>
+  <div class="grad0"></div>
+  <div class="grad30"></div>
+  <div class="grad100"></div>
+  <div class="grad150"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-1-ref.html b/layout/reftests/css-gradients/aja-linear-1-ref.html
new file mode 100644
index 0000000000..c96ed5e385
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,0,0,200);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(1, 'blue');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-1a.html b/layout/reftests/css-gradients/aja-linear-1a.html
new file mode 100644
index 0000000000..8860679bf2
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(to bottom, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1b.html b/layout/reftests/css-gradients/aja-linear-1b.html
new file mode 100644
index 0000000000..27a7ee4311
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(to top, blue, yellow);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1c.html b/layout/reftests/css-gradients/aja-linear-1c.html
new file mode 100644
index 0000000000..cb5977f8f1
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1c.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(180deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1d.html b/layout/reftests/css-gradients/aja-linear-1d.html
new file mode 100644
index 0000000000..bfc70bce9d
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1d.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(-180deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1e.html b/layout/reftests/css-gradients/aja-linear-1e.html
new file mode 100644
index 0000000000..7d71c3462e
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1e.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(to bottom, yellow 0%, blue 100%);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-1f.html b/layout/reftests/css-gradients/aja-linear-1f.html
new file mode 100644
index 0000000000..57de342064
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-1f.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-2-ref.html b/layout/reftests/css-gradients/aja-linear-2-ref.html
new file mode 100644
index 0000000000..81699da99b
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-2-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,0,160,80);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(1, 'blue');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-2.html b/layout/reftests/css-gradients/aja-linear-2.html
new file mode 100644
index 0000000000..84ed929120
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-2.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(to bottom right, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-3-ref.html b/layout/reftests/css-gradients/aja-linear-3-ref.html
new file mode 100644
index 0000000000..75086eefcc
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-3-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  /* this gradient goes at an angle of -45deg through the center of
+     the box */
+  var grad = ctx.createLinearGradient(-25,25,125,175);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(1, 'blue');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-3a.html b/layout/reftests/css-gradients/aja-linear-3a.html
new file mode 100644
index 0000000000..e59acd9659
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-3a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(135deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-3b.html b/layout/reftests/css-gradients/aja-linear-3b.html
new file mode 100644
index 0000000000..3ad588f22c
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-3b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(-225deg, yellow, blue);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-4-ref.html b/layout/reftests/css-gradients/aja-linear-4-ref.html
new file mode 100644
index 0000000000..c26d0204fd
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-4-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(50, 0, 50, 200);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(0.5, 'blue');
+  grad.addColorStop(1, '#0f0');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-4a.html b/layout/reftests/css-gradients/aja-linear-4a.html
new file mode 100644
index 0000000000..bbaf37e22f
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-4a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(yellow, blue, #0f0);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-4b.html b/layout/reftests/css-gradients/aja-linear-4b.html
new file mode 100644
index 0000000000..ae618512b8
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-4b.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(yellow, blue 50%, #0f0);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/aja-linear-5-ref.html b/layout/reftests/css-gradients/aja-linear-5-ref.html
new file mode 100644
index 0000000000..1a26fd96a1
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-5-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<html class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(50, 0, 50, 200);
+  grad.addColorStop(0, 'yellow');
+  grad.addColorStop(0.2, 'blue');
+  grad.addColorStop(1, '#0f0');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,100,200);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="100" height="200"></canvas>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/aja-linear-5a.html b/layout/reftests/css-gradients/aja-linear-5a.html
new file mode 100644
index 0000000000..569b5827e6
--- /dev/null
+++ b/layout/reftests/css-gradients/aja-linear-5a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<!-- Derived from http://a-ja.net/newgrad.html -->
+<style>
+div {
+  height: 200px;
+  width: 100px;
+  background: linear-gradient(yellow, blue 20%, #0f0);
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html b/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html
new file mode 100644
index 0000000000..c4c0a8b9cd
--- /dev/null
+++ b/layout/reftests/css-gradients/bug-916535-background-repeat-linear-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Grid</title>
+  <style>
+      body {
+        background: #fff;
+    }
+    .r {background: red; width: 300px; height: 50px}
+    .g {background: green; width: 300px; height: 50px}
+  </style>
+</head>
+
+<body>
+        <div class=r></div>
+        <div class=g></div>
+        <div class=r></div>
+        <div class=g></div>
+        <div class=r></div>
+        <div class=g></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html b/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html
new file mode 100644
index 0000000000..995c9e0410
--- /dev/null
+++ b/layout/reftests/css-gradients/bug-916535-background-repeat-linear.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Grid</title>
+  <style>
+      body {
+        background: #fff;
+      }
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: #269;
+        background-size: 100px 100px;
+        background-image:
+          linear-gradient( red 50px, green 50px);
+  }
+  </style>
+</head>
+
+<body>
+  <div ></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/color-stop-clamp-interpolation-ref.html b/layout/reftests/css-gradients/color-stop-clamp-interpolation-ref.html
new file mode 100644
index 0000000000..ec3b0166b7
--- /dev/null
+++ b/layout/reftests/css-gradients/color-stop-clamp-interpolation-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1274624: Clamped colour stop interpolation</title>
+    <style type="text/css">
+      div {
+        background-image: linear-gradient(90deg, rgba(0, 0, 255, 0.6), rgba(0, 0, 255, 0.4));
+        background-size: 100px 100px;
+        width: 400px;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/css-gradients/color-stop-clamp-interpolation.html b/layout/reftests/css-gradients/color-stop-clamp-interpolation.html
new file mode 100644
index 0000000000..ce68135d5f
--- /dev/null
+++ b/layout/reftests/css-gradients/color-stop-clamp-interpolation.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1274624: Clamped colour stop interpolation</title>
+    <style type="text/css">
+      div {
+        background: linear-gradient(90deg, rgba(0, 0, 255, 1) -200%, rgba(255, 255, 0, 0) 300%);
+        background-size: 100px 100px;
+        width: 400px;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-1-ref.html b/layout/reftests/css-gradients/height-dependence-1-ref.html
new file mode 100644
index 0000000000..f56fe8f02d
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-1-ref.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html><head>
+<style>
+html {
+  background-image: linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 14em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-1.html b/layout/reftests/css-gradients/height-dependence-1.html
new file mode 100644
index 0000000000..58d8969b22
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-1.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html class="reftest-wait"><head>
+<style>
+html {
+  background-image: linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 28em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+<script>
+window.addEventListener("MozReftestInvalidate", function() {
+  document.body.style.width = "14em";
+  document.documentElement.removeAttribute("class");
+});
+</script>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-2-ref.html b/layout/reftests/css-gradients/height-dependence-2-ref.html
new file mode 100644
index 0000000000..c2e15f751f
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-2-ref.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html><head>
+<style>
+html {
+  background-image: linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 400px;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 14em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-2.html b/layout/reftests/css-gradients/height-dependence-2.html
new file mode 100644
index 0000000000..4404a7d509
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-2.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html class="reftest-wait"><head>
+<style>
+html {
+  background-image: linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 400px;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 28em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+<script>
+window.addEventListener("MozReftestInvalidate", function() {
+  document.body.style.width = "14em";
+  document.documentElement.removeAttribute("class");
+});
+</script>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-3-ref.html b/layout/reftests/css-gradients/height-dependence-3-ref.html
new file mode 100644
index 0000000000..9ee3a7aee8
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-3-ref.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html><head>
+<style>
+html {
+  background-image: linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 80%;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 14em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/height-dependence-3.html b/layout/reftests/css-gradients/height-dependence-3.html
new file mode 100644
index 0000000000..e4e4a7d238
--- /dev/null
+++ b/layout/reftests/css-gradients/height-dependence-3.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html class="reftest-wait"><head>
+<style>
+html {
+  background-image: linear-gradient(black, white 20%);
+  background-repeat: repeat-x;
+  background-size: 1px 80%;
+}
+body {
+  font-size: 1em;
+  padding: 2em;
+  margin: 50px auto;
+  width: 28em;
+  border: 1px solid black;
+  background-color: white;
+}
+</style>
+<script>
+window.addEventListener("MozReftestInvalidate", function() {
+  document.body.style.width = "14em";
+  document.documentElement.removeAttribute("class");
+});
+</script>
+</head><body>
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+pad pad pad pad pad pad pad pad
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/large-gradient-1-ref.html b/layout/reftests/css-gradients/large-gradient-1-ref.html
new file mode 100644
index 0000000000..ddd7651e6e
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-1-ref.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 1000px;
+  background-image: linear-gradient(rgb(210,210,210) 0px, rgb(215,215,215) 1000px);
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-1.html b/layout/reftests/css-gradients/large-gradient-1.html
new file mode 100644
index 0000000000..bcba165a28
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-1.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 51000px; /* = 255 * 200 */
+  background-image: linear-gradient(rgb(0,0,0) 0px, rgb(255,255,255) 51000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 210 * 200; // 42000 > 32768
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-2-ref.html b/layout/reftests/css-gradients/large-gradient-2-ref.html
new file mode 100644
index 0000000000..ee33eedf19
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-2-ref.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: lime;
+  overflow: hidden;
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-2.html b/layout/reftests/css-gradients/large-gradient-2.html
new file mode 100644
index 0000000000..17074baddd
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-2.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 51000px;
+  background-image: linear-gradient(black 0px, lime 2000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 42000; // > 32768
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-3-ref.html b/layout/reftests/css-gradients/large-gradient-3-ref.html
new file mode 100644
index 0000000000..e13864ee66
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-3-ref.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 1000px;
+  background-image: linear-gradient(rgb(210,210,210) 0px, rgb(215,215,215) 4000px);
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-3.html b/layout/reftests/css-gradients/large-gradient-3.html
new file mode 100644
index 0000000000..0c859a89b7
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-3.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 204000px; /* = 255 * 800 */
+  background-image: linear-gradient(rgb(0,0,0) 0px, rgb(255,255,255) 204000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 210 * 800; // 168000 > 131072 == 2^17
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-4-ref.html b/layout/reftests/css-gradients/large-gradient-4-ref.html
new file mode 100644
index 0000000000..ee33eedf19
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-4-ref.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+
+<style>
+
+html {
+  background: lime;
+  overflow: hidden;
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/large-gradient-4.html b/layout/reftests/css-gradients/large-gradient-4.html
new file mode 100644
index 0000000000..dc8f151022
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-4.html
@@ -0,0 +1,40 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1011166 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 204000px; /* = 255 * 800 */;
+  background-image: linear-gradient(black 0px, lime 2000px);
+}
+
+div {
+  height: 1000px;
+  background-color: red;
+}
+
+</style>
+
+<div></div>
+
+<script>
+
+window.addEventListener("MozReftestInvalidate", function () {
+  document.documentElement.scrollTop = 210 * 800; // 168000 > 131072 == 2^17
+  document.documentElement.removeAttribute("class");
+});
+
+</script>
diff --git a/layout/reftests/css-gradients/large-gradient-5-ref.html b/layout/reftests/css-gradients/large-gradient-5-ref.html
new file mode 100644
index 0000000000..a0e9237568
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-5-ref.html
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Reference for: Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1271112 -->
+
+<style>
+
+html {
+  background-color: lime;
+}
+
+</style>
+
+<body>
diff --git a/layout/reftests/css-gradients/large-gradient-5.html b/layout/reftests/css-gradients/large-gradient-5.html
new file mode 100644
index 0000000000..d254d461ed
--- /dev/null
+++ b/layout/reftests/css-gradients/large-gradient-5.html
@@ -0,0 +1,30 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that large gradient backgrounds are painted even at extreme scroll positions</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1271112 -->
+
+<style>
+
+html, body {
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+  height: 100000px;
+  /* a green gradient that is not opaque on top of a red background color */
+  background: repeating-linear-gradient(45deg, rgba(0, 255, 0, 1.0) 0%, rgba(0, 255, 0, 0.99) 10%, rgba(0, 255, 0, 1.0) 20%) red;
+}
+
+</style>
+
+<body>
+
+<script>
+document.documentElement.scrollTop = 35000;
+</script>
diff --git a/layout/reftests/css-gradients/linear-1-ref.html b/layout/reftests/css-gradients/linear-1-ref.html
new file mode 100644
index 0000000000..f4d209a3da
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-1-ref.html
@@ -0,0 +1,24 @@
+<html xmlns="http://www.w3.org/1999/xhtml" 
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,150,300,150);
+  grad.addColorStop(0, 'red');
+  grad.addColorStop(1, 'rgb(100, 200, 0)');
+  grad.addColorStop(0.5, '#7777FF');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
+
diff --git a/layout/reftests/css-gradients/linear-1a.html b/layout/reftests/css-gradients/linear-1a.html
new file mode 100644
index 0000000000..0f633f0f3e
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-1a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right, red 0%, #7777FF 50%, rgb(100, 200, 0) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-1-ref.html b/layout/reftests/css-gradients/linear-diagonal-1-ref.html
new file mode 100644
index 0000000000..4aa7d36492
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-1-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-1a.html b/layout/reftests/css-gradients/linear-diagonal-1a.html
new file mode 100644
index 0000000000..3828169184
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-1a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-2-ref.html b/layout/reftests/css-gradients/linear-diagonal-2-ref.html
new file mode 100644
index 0000000000..22cc0ab1e6
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-2-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-2a.html b/layout/reftests/css-gradients/linear-diagonal-2a.html
new file mode 100644
index 0000000000..670e25a4c3
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-2a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(-135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-3-ref.html b/layout/reftests/css-gradients/linear-diagonal-3-ref.html
new file mode 100644
index 0000000000..6a06898de2
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-3-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top left, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-3a.html b/layout/reftests/css-gradients/linear-diagonal-3a.html
new file mode 100644
index 0000000000..dd61b284b8
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-3a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(-45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-4-ref.html b/layout/reftests/css-gradients/linear-diagonal-4-ref.html
new file mode 100644
index 0000000000..0ff8802b0e
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-4-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top right, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-diagonal-4a.html b/layout/reftests/css-gradients/linear-diagonal-4a.html
new file mode 100644
index 0000000000..b51d4c885c
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-diagonal-4a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-flipped-1-ref.html b/layout/reftests/css-gradients/linear-flipped-1-ref.html
new file mode 100644
index 0000000000..7193dcbd24
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-flipped-1-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="height:100px; background:linear-gradient(to top, black, white);"></div>
diff --git a/layout/reftests/css-gradients/linear-flipped-1.html b/layout/reftests/css-gradients/linear-flipped-1.html
new file mode 100644
index 0000000000..4fb4ae28df
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-flipped-1.html
@@ -0,0 +1,2 @@
+<!DOCTYPE HTML>
+<div style="height:100px; background:linear-gradient(to bottom, black, white); transform:scale(1,-1);"></div>
diff --git a/layout/reftests/css-gradients/linear-gradient-repeated-ref.html b/layout/reftests/css-gradients/linear-gradient-repeated-ref.html
new file mode 100644
index 0000000000..2c3f9f7151
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-gradient-repeated-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1274624: Repeating linear gradient</title>
+    <style type="text/css">
+      div {
+        background: repeating-linear-gradient(to top, red, blue 100px);
+        background-position: 30px 30px;
+        width: 400px;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-gradient-repeated.html b/layout/reftests/css-gradients/linear-gradient-repeated.html
new file mode 100644
index 0000000000..7e6e14dd56
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-gradient-repeated.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1274624: Linear gradient, repeated</title>
+    <style type="text/css">
+      div {
+        background: linear-gradient(to top, red, blue);
+        background-size: 100px 100px;
+        background-position: 30px 30px;
+        width: 400px;
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-keywords-1-ref.html b/layout/reftests/css-gradients/linear-keywords-1-ref.html
new file mode 100644
index 0000000000..d311b3df12
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-keywords-1-ref.html
@@ -0,0 +1,23 @@
+<html xmlns="http://www.w3.org/1999/xhtml" 
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var grad = ctx.createLinearGradient(0,0,300,300);
+  grad.addColorStop(0, '#0000ff');
+  grad.addColorStop(1, '#000000');
+
+  ctx.fillStyle = grad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
+
diff --git a/layout/reftests/css-gradients/linear-keywords-1a.html b/layout/reftests/css-gradients/linear-keywords-1a.html
new file mode 100644
index 0000000000..48cf46606f
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-keywords-1a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right bottom, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-onestopposition-1-ref.html b/layout/reftests/css-gradients/linear-onestopposition-1-ref.html
new file mode 100644
index 0000000000..c9fdca6b44
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-onestopposition-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for linear-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: linear-gradient(to right, blue 0%, blue 25%, orange 25%, orange 100%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html b/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html
new file mode 100644
index 0000000000..51f70bcd46
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-onestopposition-1-ref2.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<title>Test for linear-gradient() with all stops at the same position</title>
+<style>
+
+#div1 {
+  float: left;
+  width: 50px;
+  height: 200px;
+  background: blue;
+}
+
+#div2 {
+  float: left;
+  width: 150px;
+  height: 200px;
+  background: orange;
+}
+
+</style>
+<div id="div1"></div>
+<div id="div2"></div>
diff --git a/layout/reftests/css-gradients/linear-onestopposition-1.html b/layout/reftests/css-gradients/linear-onestopposition-1.html
new file mode 100644
index 0000000000..0addaf8822
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-onestopposition-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for linear-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: linear-gradient(to right, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/linear-position-1-ref.html b/layout/reftests/css-gradients/linear-position-1-ref.html
new file mode 100644
index 0000000000..cd66e66812
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-position-1-ref.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: linear-gradient(to right, white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-position-1a.html b/layout/reftests/css-gradients/linear-position-1a.html
new file mode 100644
index 0000000000..235d0136ce
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-position-1a.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: linear-gradient(to right, white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-premul-ref.html b/layout/reftests/css-gradients/linear-premul-ref.html
new file mode 100644
index 0000000000..bf0b12c33f
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-premul-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right, rgba(255, 0, 0, .9) 0% , rgba(255, 0, 0, 0) 50%, rgba(0, 0, 255, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-premul.html b/layout/reftests/css-gradients/linear-premul.html
new file mode 100644
index 0000000000..20c7c276a2
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-premul.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right, rgba(255, 0, 0, .9) 0% , rgba(0, 255, 0, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1-ref.html b/layout/reftests/css-gradients/linear-repeat-1-ref.html
new file mode 100644
index 0000000000..f9f42811f4
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1-ref.html
@@ -0,0 +1,6 @@
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1a.html b/layout/reftests/css-gradients/linear-repeat-1a.html
new file mode 100644
index 0000000000..524b09201d
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1a.html
@@ -0,0 +1,2 @@
+<div style="background: linear-gradient(black, black 50%, white 50%, white);
+            background-size: 100px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1b.html b/layout/reftests/css-gradients/linear-repeat-1b.html
new file mode 100644
index 0000000000..72e47ce46a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1b.html
@@ -0,0 +1,2 @@
+<div style="background: linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px);
+            background-size: 100px 200px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1c.html b/layout/reftests/css-gradients/linear-repeat-1c.html
new file mode 100644
index 0000000000..246a694ce8
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1c.html
@@ -0,0 +1,4 @@
+<div style="background: linear-gradient(white, white 50%, black 50%, black);
+            background-size: 100px 100px;
+            background-position: 0 -50px;
+            width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1d.html b/layout/reftests/css-gradients/linear-repeat-1d.html
new file mode 100644
index 0000000000..e087da805b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1d.html
@@ -0,0 +1,3 @@
+<div style="background: linear-gradient(white, white 50px, black 50px, black 100px, white 100px, white 150px, black 150px, black 200px);
+            background-size: 100px 200px; background-position: 0 -50px;
+            width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1e.html b/layout/reftests/css-gradients/linear-repeat-1e.html
new file mode 100644
index 0000000000..be4b600f21
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1e.html
@@ -0,0 +1,3 @@
+<div style="background: linear-gradient(black, black 50%, white 50%, white);
+            background-size: 300px 100px; background-repeat: repeat-y;
+            width: 500px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1f.html b/layout/reftests/css-gradients/linear-repeat-1f.html
new file mode 100644
index 0000000000..c0f4bdb82d
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1f.html
@@ -0,0 +1,10 @@
+<div style="background: linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px);
+            background-size: 100px 200px; background-repeat: repeat-x;
+            width: 300px; height: 800px;
+            margin-bottom: -600px;"></div>
+<!-- making the gradient actually be 300px high isn't reliable since
+     the stop positions cannot be exactly represented and rounding errors
+     creep in. So just let the gradient be 200px high and pad out to match
+     the reference. -->
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
diff --git a/layout/reftests/css-gradients/linear-repeat-1g.html b/layout/reftests/css-gradients/linear-repeat-1g.html
new file mode 100644
index 0000000000..9cdac22765
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-repeat-1g.html
@@ -0,0 +1,12 @@
+<body style="overflow:hidden">
+<div style="background: linear-gradient(black, black 50px, white 50px, white 100px, black 100px, black 150px, white 150px, white 200px);
+            background-size: 300px 200px; background-repeat: no-repeat;
+            width: 800px; height: 800px;
+            margin-bottom: -600px;"></div>
+<!-- making the gradient actually be 300px high isn't reliable since
+     the stop positions cannot be exactly represented and rounding errors
+     creep in. So just let the gradient be 200px high and pad out to match
+     the reference. -->
+<div style="background: black; width: 300px; height: 50px;"></div>
+<div style="background: white; width: 300px; height: 50px;"></div>
+</body>
diff --git a/layout/reftests/css-gradients/linear-rotated-1-ref.html b/layout/reftests/css-gradients/linear-rotated-1-ref.html
new file mode 100644
index 0000000000..d22ca1bb74
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-rotated-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:100px; height:100px; background:linear-gradient(to left, red, green);"></div>
+<div style="width:100px; height:100px; background:linear-gradient(to right, red, green);"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-rotated-1.html b/layout/reftests/css-gradients/linear-rotated-1.html
new file mode 100644
index 0000000000..b927d1db27
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-rotated-1.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="width:100px; height:100px; transform:rotate(90deg); background:linear-gradient(red, green);"></div>
+<div style="width:100px; height:100px; transform:rotate(270deg); background:linear-gradient(red, green);"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-size-1-ref.html b/layout/reftests/css-gradients/linear-size-1-ref.html
new file mode 100644
index 0000000000..662048f40b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-size-1-ref.html
@@ -0,0 +1,3 @@
+<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
diff --git a/layout/reftests/css-gradients/linear-size-1a.html b/layout/reftests/css-gradients/linear-size-1a.html
new file mode 100644
index 0000000000..30d133369f
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-size-1a.html
@@ -0,0 +1,2 @@
+<div style="background: linear-gradient(white, black);
+            background-size: 300px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1-ref.html b/layout/reftests/css-gradients/linear-stops-1-ref.html
new file mode 100644
index 0000000000..7ef12c93ec
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1-ref.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white 0%, red 20%, green 40%, blue 60%, yellow 80%, black 100%) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1a.html b/layout/reftests/css-gradients/linear-stops-1a.html
new file mode 100644
index 0000000000..4eed757f1a
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white, red, green, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1b.html b/layout/reftests/css-gradients/linear-stops-1b.html
new file mode 100644
index 0000000000..69f7260db5
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1b.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white 0, red 60px, green 120px, blue 180px, yellow 240px, black 300px) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1c.html b/layout/reftests/css-gradients/linear-stops-1c.html
new file mode 100644
index 0000000000..99fa88a746
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1c.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white, red 20%, green, blue 60%, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1d.html b/layout/reftests/css-gradients/linear-stops-1d.html
new file mode 100644
index 0000000000..005f4fdf5b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1d.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white, red, green 40%, red 40%, green 40%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1e.html b/layout/reftests/css-gradients/linear-stops-1e.html
new file mode 100644
index 0000000000..808ecd016e
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1e.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white, red, green 40%, red 20%, green 40%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-stops-1f.html b/layout/reftests/css-gradients/linear-stops-1f.html
new file mode 100644
index 0000000000..79ce44928b
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-stops-1f.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white, red, green 40%, red 40%, green 20%, blue, yellow, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1-ref.html b/layout/reftests/css-gradients/linear-vertical-1-ref.html
new file mode 100644
index 0000000000..4de794ac61
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<canvas id="canvas" width="300" height="300"/>
+<script>
+var ctx = document.getElementById('canvas').getContext('2d');
+
+var grad = ctx.createLinearGradient(150,0,150,300);
+grad.addColorStop(0, 'white');
+grad.addColorStop(1, 'black');
+
+ctx.fillStyle = grad;
+ctx.fillRect(0,0,300,300);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-vertical-1a.html b/layout/reftests/css-gradients/linear-vertical-1a.html
new file mode 100644
index 0000000000..fd2b62fbb2
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1b.html b/layout/reftests/css-gradients/linear-vertical-1b.html
new file mode 100644
index 0000000000..4b9ffc5050
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1b.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom, white, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1c.html b/layout/reftests/css-gradients/linear-vertical-1c.html
new file mode 100644
index 0000000000..f311e8ac47
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1c.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white 0%, white 0%, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-1d.html b/layout/reftests/css-gradients/linear-vertical-1d.html
new file mode 100644
index 0000000000..aab3c104a9
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-1d.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(white 0%, white -20%, black) no-repeat; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html b/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html
new file mode 100644
index 0000000000..e60080125c
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-subpixel-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  margin-top: 21px;
+  height: 30px;
+  background-image: linear-gradient(black, white);
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-vertical-subpixel-1.html b/layout/reftests/css-gradients/linear-vertical-subpixel-1.html
new file mode 100644
index 0000000000..0bca7bafb3
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-vertical-subpixel-1.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+  margin-top: 20.7px;
+  height: 30px;
+  background-image: linear-gradient(black, white);
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/linear-viewport-ref.html b/layout/reftests/css-gradients/linear-viewport-ref.html
new file mode 100644
index 0000000000..36a51e521f
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-viewport-ref.html
@@ -0,0 +1 @@
+<body style="border: 0; margin: 0; padding: 0;"><div style="background: linear-gradient(blue, aqua) no-repeat; width: 100%; height: 100%;">&nbsp;</div></body>
diff --git a/layout/reftests/css-gradients/linear-viewport.html b/layout/reftests/css-gradients/linear-viewport.html
new file mode 100644
index 0000000000..a6f2bf64ed
--- /dev/null
+++ b/layout/reftests/css-gradients/linear-viewport.html
@@ -0,0 +1,2 @@
+<!-- bug 509681 -->
+<body style="background: linear-gradient(blue, aqua) fixed no-repeat;">
diff --git a/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1-ref.html b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1-ref.html
new file mode 100644
index 0000000000..e5fdd1028f
--- /dev/null
+++ b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1-ref.html
@@ -0,0 +1,17 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>Make sure that gradient masks are painted correctly with translucent end-color</title>
+
+<style>
+
+html {
+  background: rgba(255, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+</style>
diff --git a/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1.html b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1.html
new file mode 100644
index 0000000000..29c0b28313
--- /dev/null
+++ b/layout/reftests/css-gradients/mask-gradient-translucent-end-color-1.html
@@ -0,0 +1,34 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html lang="en" class="reftest-wait">
+<meta charset="utf-8">
+<title>Make sure that gradient masks are painted correctly with translucent end-color</title>
+<!-- See https://bugzilla.mozilla.org/show_bug.cgi?id=1329411 -->
+
+<style>
+
+html {
+  background: white;
+  overflow: hidden;
+}
+
+div {
+  height: 5000px;
+  background-color: red;
+  mask-image: linear-gradient(transparent 0px, rgba(255, 0, 0, 0.5) 2000px);
+}
+
+</style>
+<body style="margin: 0px;">
+  <div></div>
+
+  <script>
+    window.addEventListener("MozReftestInvalidate", function () {
+      document.documentElement.scrollTop = 3000; // > 2000
+      document.documentElement.removeAttribute("class");
+    });
+  </script>
+</body>
diff --git a/layout/reftests/css-gradients/nostops.html b/layout/reftests/css-gradients/nostops.html
new file mode 100644
index 0000000000..9c40353658
--- /dev/null
+++ b/layout/reftests/css-gradients/nostops.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right bottom) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/onestop.html b/layout/reftests/css-gradients/onestop.html
new file mode 100644
index 0000000000..afa1ad6fb3
--- /dev/null
+++ b/layout/reftests/css-gradients/onestop.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to right bottom, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/orange-square.html b/layout/reftests/css-gradients/orange-square.html
new file mode 100644
index 0000000000..aa70b29fa6
--- /dev/null
+++ b/layout/reftests/css-gradients/orange-square.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>orange square</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background: orange;
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-1-ref.html b/layout/reftests/css-gradients/radial-1-ref.html
new file mode 100644
index 0000000000..b836c6c061
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-1-ref.html
@@ -0,0 +1,22 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var radgrad = ctx.createRadialGradient(100,100,25,100,100,50);
+  radgrad.addColorStop(0, '#FF0000');
+  radgrad.addColorStop(1, '#0000FF');
+
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/radial-1a.html b/layout/reftests/css-gradients/radial-1a.html
new file mode 100644
index 0000000000..e42e1d1ca3
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-1a.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(100px 100px at 100px 100px, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-1b.html b/layout/reftests/css-gradients/radial-1b.html
new file mode 100644
index 0000000000..450dbc9590
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-1b.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(closest-side at 100px 100px, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2-ref.html b/layout/reftests/css-gradients/radial-2-ref.html
new file mode 100644
index 0000000000..71ccb53eee
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2-ref.html
@@ -0,0 +1,22 @@
+<html xmlns="http://www.w3.org/1999/xhtml"
+      class="reftest-wait">
+<head>
+<script>
+function doDraw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var radgrad = ctx.createRadialGradient(100,100,0,100,100,50);
+  radgrad.addColorStop(0, '#FF0000');
+  radgrad.addColorStop(1, '#0000FF');
+
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,300,300);
+
+  document.documentElement.removeAttribute('class');
+}
+</script>
+</head>
+<body onload="doDraw();">
+<canvas id="canvas" width="300" height="300"/>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/radial-2a.html b/layout/reftests/css-gradients/radial-2a.html
new file mode 100644
index 0000000000..b316e1c504
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2a.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(closest-side at 100px 100px, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2b.html b/layout/reftests/css-gradients/radial-2b.html
new file mode 100644
index 0000000000..675cb6ecd6
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2b.html
@@ -0,0 +1,3 @@
+<!-- This test checks that adjustment of stop positions to be non-negative
+     happens after the calculation of implied stop positions -->
+<div style="background: radial-gradient(closest-side at 100px 100px, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2c.html b/layout/reftests/css-gradients/radial-2c.html
new file mode 100644
index 0000000000..38bdcfd85c
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2c.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(100px 100px at 100px 100px, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-2d.html b/layout/reftests/css-gradients/radial-2d.html
new file mode 100644
index 0000000000..152ee771ba
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-2d.html
@@ -0,0 +1,3 @@
+<!-- This test checks that adjustment of stop positions to be non-negative
+     happens after the calculation of implied stop positions -->
+<div style="background: radial-gradient(100px 100px at 100px 100px, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-onestopposition-1-ref.html b/layout/reftests/css-gradients/radial-onestopposition-1-ref.html
new file mode 100644
index 0000000000..439e50cbd5
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-onestopposition-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: radial-gradient(closest-side, blue 0%, blue 25%, orange 25%, orange 100%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-onestopposition-1a.html b/layout/reftests/css-gradients/radial-onestopposition-1a.html
new file mode 100644
index 0000000000..60ad3e6a3d
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-onestopposition-1a.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: radial-gradient(closest-side, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-onestopposition-1b.html b/layout/reftests/css-gradients/radial-onestopposition-1b.html
new file mode 100644
index 0000000000..22a00ff896
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-onestopposition-1b.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: radial-gradient(100px 100px at 100px, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/radial-position-1-ref.html b/layout/reftests/css-gradients/radial-position-1-ref.html
new file mode 100644
index 0000000000..c94455ebe8
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-position-1-ref.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: radial-gradient(white, black) no-repeat; position:relative; left:-200px; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-position-1a.html b/layout/reftests/css-gradients/radial-position-1a.html
new file mode 100644
index 0000000000..ecd4b369f4
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-position-1a.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: radial-gradient(white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-position-1b.html b/layout/reftests/css-gradients/radial-position-1b.html
new file mode 100644
index 0000000000..02d3ed0714
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-position-1b.html
@@ -0,0 +1,2 @@
+<body style="margin:0;">
+<div style="background: radial-gradient(212.132034px 212.132034px at center, white, black) no-repeat; background-position:-200px 0; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-premul-ref.html b/layout/reftests/css-gradients/radial-premul-ref.html
new file mode 100644
index 0000000000..1424f4373c
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-premul-ref.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(rgba(255, 0, 0, .9) 0% , rgba(255, 0, 0, 0) 50%, rgba(0, 0, 255, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-premul.html b/layout/reftests/css-gradients/radial-premul.html
new file mode 100644
index 0000000000..33b89c72bc
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-premul.html
@@ -0,0 +1 @@
+<div style="background: radial-gradient(rgba(255, 0, 0, .9) 0% , rgba(0, 255, 0, 0) 50%, rgba(0, 0, 255, 1) 100%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html
new file mode 100644
index 0000000000..b6835d759d
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(closest-side circle at 60px 80px, white, black 100px); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 140px 80px, white, black 100px); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(closest-side circle at 80px 60px, white, black 100px); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 80px 140px, white, black 100px); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(closest-corner at 60px 80px, white, black 60px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner at 140px 80px, white, black 60px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse closest-corner at 80px 60px, white, black 80px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(ellipse closest-corner at 80px 140px, white, black 80px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html
new file mode 100644
index 0000000000..508b002670
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle closest-corner at 60px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner circle at 140px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle closest-corner at 80px 60px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner circle at 80px 140px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse closest-corner at 60px 80px, white, black 60px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner ellipse at 140px 80px, white, black 60px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(closest-corner at 80px 60px, white, black 80px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(closest-corner at 80px 140px, white, black 80px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html b/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html
new file mode 100644
index 0000000000..e5d3dc5ee6
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-corner-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(100px 100px at 60px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(100px at 140px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(100px 100px at 80px 60px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(100px at 80px 140px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(84.8528137px 113.137084px at 60px 80px, white, black 60px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(84.8528137px 113.137084px at 140px 80px, white, black 60px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(113.137084px 84.8528137px at 80px 60px, white, black 80px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(113.137084px 84.8528137px at 80px 140px, white, black 80px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html b/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html
new file mode 100644
index 0000000000..284cf85855
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-side-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle closest-side at 50px 80px, white, black 50px); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(circle closest-side at 150px 80px, white, black 50px); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle closest-side at 80px 50px, white, black 50px); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(circle closest-side at 80px 150px, white, black 50px); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(circle closest-side at 20px 20px, white, black 20px); height:100px; transform-origin:0 0; transform:scale(1.0, 2.0); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(circle closest-side at 180px 20px, white, black 20px); height:100px; transform-origin:0 0; transform:scale(1.0, 2.0); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(circle closest-side at 20px 20px, white, black 20px); width:100px; transform-origin:0 0; transform:scale(2.0, 1.0); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(circle closest-side at 20px 180px, white, black 20px); width:100px; transform-origin:0 0; transform:scale(2.0, 1.0); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1a.html b/layout/reftests/css-gradients/radial-shape-closest-side-1a.html
new file mode 100644
index 0000000000..a689ab0365
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-side-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle closest-side at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle closest-side at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side circle at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse closest-side at 20px 40px, white, black); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side ellipse at 180px 40px, white, black); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(closest-side at 40px 20px, white, black); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(closest-side at 40px 180px, white, black); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-closest-side-1b.html b/layout/reftests/css-gradients/radial-shape-closest-side-1b.html
new file mode 100644
index 0000000000..8290b6ad11
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-closest-side-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(50px 50px at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(50px at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(50px 50px at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(50px at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(20px 40px at 20px 40px, white, black); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(20px 40px at 180px 40px, white, black); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(40px 20px at 40px 20px, white, black); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(40px 20px at 40px 180px, white, black); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html
new file mode 100644
index 0000000000..e8fc7ff5ef
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-side at 40px 80px, white, black 200px); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 160px 80px, white, black 200px); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 40px, white, black 200px); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 80px 160px, white, black 200px); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(farthest-corner at 60px 80px, white, black 140px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner at 140px 80px, white, black 140px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse farthest-corner at 80px 60px, white, black 120px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(ellipse farthest-corner at 80px 140px, white, black 120px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html
new file mode 100644
index 0000000000..6ee7b27c88
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-corner at 40px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner circle at 160px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-corner at 80px 40px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner circle at 80px 160px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse farthest-corner at 60px 80px, white, black 140px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner ellipse at 140px 80px, white, black 140px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(farthest-corner at 80px 60px, white, black 120px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-corner at 80px 140px, white, black 120px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html b/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html
new file mode 100644
index 0000000000..b095575f00
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-corner-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(200px 200px at 40px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(200px at 160px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(200px 200px at 80px 40px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(200px at 80px 160px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(197.989898px 169.705627px at 60px 80px, white, black 140px); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(197.989898px 169.705627px at 140px 80px, white, black 140px); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(169.705627px 197.989898px at 80px 60px, white, black 120px); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(169.705627px 197.989898px at 80px 140px, white, black 120px); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html
new file mode 100644
index 0000000000..d2a04d803d
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1-ref.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-side at 50px 80px, white, black 150px); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 150px 80px, white, black 150px); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 50px, white, black 150px); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 80px 150px, white, black 150px); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 80px, white, black 120px); transform-origin:0 0; transform:scale(1.0, 0.5); top:430px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 120px 120px, white, black 120px); transform-origin:0 0; transform:scale(1.0, 0.5); top:430px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 80px, white, black 120px); transform-origin:0 0; transform:scale(0.5, 1.0); top:640px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 120px 120px, white, black 120px); transform-origin:0 0; transform:scale(0.5, 1.0); top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html
new file mode 100644
index 0000000000..802280dd6b
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1a.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(circle farthest-side at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(circle farthest-side at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side circle at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(farthest-side at 80px 40px, white, black); height:100px; top:430px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side at 120px 60px, white, black); height:100px; top:430px; left:220px;"></div>
+<div style="background: radial-gradient(ellipse farthest-side at 40px 80px, white, black); width:100px; top:640px; left:10px;"></div>
+<div style="background: radial-gradient(farthest-side ellipse at 60px 120px, white, black); width:100px; top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html b/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html
new file mode 100644
index 0000000000..4ff7974762
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-shape-farthest-side-1b.html
@@ -0,0 +1,9 @@
+<style>div { position:absolute; width:200px; height:200px; }</style>
+<div style="background: radial-gradient(150px 150px at 50px 80px, white, black); top:10px; left:10px;"></div>
+<div style="background: radial-gradient(150px at 150px 80px, white, black); top:10px; left:220px;"></div>
+<div style="background: radial-gradient(150px 150px at 80px 50px, white, black); top:220px; left:10px;"></div>
+<div style="background: radial-gradient(150px at 80px 150px, white, black); top:220px; left:220px;"></div>
+<div style="background: radial-gradient(120px 60px at 80px 40px, white, black); height:100px; top:430px; left:10px;"></div>
+<div style="background: radial-gradient(120px 60px at 120px 60px, white, black); height:100px; top:430px; left:220px;"></div>
+<div style="background: radial-gradient(60px 120px at 40px 80px, white, black); width:100px; top:640px; left:10px;"></div>
+<div style="background: radial-gradient(60px 120px at 60px 120px, white, black); width:100px; top:640px; left:220px;"></div>
diff --git a/layout/reftests/css-gradients/radial-size-1-ref.html b/layout/reftests/css-gradients/radial-size-1-ref.html
new file mode 100644
index 0000000000..bb0cc963fe
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-size-1-ref.html
@@ -0,0 +1,3 @@
+<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
+<div style="background: radial-gradient(white, black) no-repeat; width: 300px; height: 100px;"></div>
diff --git a/layout/reftests/css-gradients/radial-size-1a.html b/layout/reftests/css-gradients/radial-size-1a.html
new file mode 100644
index 0000000000..7c4fa66c7f
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-size-1a.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(white, black);
+            background-size: 300px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-size-1b.html b/layout/reftests/css-gradients/radial-size-1b.html
new file mode 100644
index 0000000000..6095144d3d
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-size-1b.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(70.7106781% 70.7106781% at center, white, black);
+            background-size: 300px 100px; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1-ref.html b/layout/reftests/css-gradients/radial-zero-length-1-ref.html
new file mode 100644
index 0000000000..0379d19246
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1-ref.html
@@ -0,0 +1,2 @@
+<div style="background: black; width: 300px; height: 300px;"></div>
+<div style="background: black; width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1a.html b/layout/reftests/css-gradients/radial-zero-length-1a.html
new file mode 100644
index 0000000000..e1a2faee28
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1a.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(circle closest-side at left, white, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side circle at left, white, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1b.html b/layout/reftests/css-gradients/radial-zero-length-1b.html
new file mode 100644
index 0000000000..85aa9b4730
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1b.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(circle closest-side at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side circle at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1c.html b/layout/reftests/css-gradients/radial-zero-length-1c.html
new file mode 100644
index 0000000000..2113caae10
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1c.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(0 0 at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(0 0 at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1d.html b/layout/reftests/css-gradients/radial-zero-length-1d.html
new file mode 100644
index 0000000000..fc078321df
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1d.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(ellipse closest-side at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side ellipse at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1e.html b/layout/reftests/css-gradients/radial-zero-length-1e.html
new file mode 100644
index 0000000000..52341674a7
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1e.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(0 150px at left, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(0 150px at left, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/radial-zero-length-1f.html b/layout/reftests/css-gradients/radial-zero-length-1f.html
new file mode 100644
index 0000000000..64d0fafd75
--- /dev/null
+++ b/layout/reftests/css-gradients/radial-zero-length-1f.html
@@ -0,0 +1,2 @@
+<div style="background: radial-gradient(ellipse closest-side at top, red, white 100px, black); width: 300px; height: 300px;"></div>
+<div style="background: repeating-radial-gradient(closest-side ellipse at top, red, white 100px, black); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/reftest.list b/layout/reftests/css-gradients/reftest.list
new file mode 100644
index 0000000000..cb22973622
--- /dev/null
+++ b/layout/reftests/css-gradients/reftest.list
@@ -0,0 +1,111 @@
+fuzzy(0-4,0-89700) == linear-1a.html linear-1-ref.html
+fuzzy(0-2,0-23918) == linear-keywords-1a.html linear-keywords-1-ref.html
+== linear-diagonal-1a.html linear-diagonal-1-ref.html
+== linear-diagonal-2a.html linear-diagonal-2-ref.html
+== linear-diagonal-3a.html linear-diagonal-3-ref.html
+== linear-diagonal-4a.html linear-diagonal-4-ref.html
+fuzzy(0-3,0-43000) == linear-premul.html linear-premul-ref.html
+
+fuzzy(0-1,0-800000) == linear-flipped-1.html linear-flipped-1-ref.html
+== linear-position-1a.html linear-position-1-ref.html
+== linear-repeat-1a.html linear-repeat-1-ref.html
+== linear-repeat-1b.html linear-repeat-1-ref.html
+== linear-repeat-1c.html linear-repeat-1-ref.html
+== linear-repeat-1d.html linear-repeat-1-ref.html
+== linear-repeat-1e.html linear-repeat-1-ref.html
+== linear-repeat-1f.html linear-repeat-1-ref.html
+== linear-repeat-1g.html linear-repeat-1-ref.html # bug 582236
+fuzzy(0-1,0-500) fuzzy-if(winWidget,0-2,0-100) == linear-rotated-1.html linear-rotated-1-ref.html
+fuzzy(0-1,0-45000) == linear-size-1a.html linear-size-1-ref.html
+== linear-stops-1a.html linear-stops-1-ref.html
+== linear-stops-1b.html linear-stops-1-ref.html
+== linear-stops-1c.html linear-stops-1-ref.html
+# these gradients will be cached (in WebRender) and thus exhibit off-by-1 texture interpolation differences:
+fuzzy(0-1,0-35400) == linear-stops-1d.html linear-stops-1-ref.html
+fuzzy(0-1,0-35400) == linear-stops-1e.html linear-stops-1-ref.html
+fuzzy(0-1,0-35400) == linear-stops-1f.html linear-stops-1-ref.html
+fuzzy(0-3,0-89700) == linear-vertical-1a.html linear-vertical-1-ref.html
+fuzzy(0-3,0-89700) == linear-vertical-1b.html linear-vertical-1-ref.html
+fuzzy(0-3,0-89700) == linear-vertical-1c.html linear-vertical-1-ref.html
+fuzzy(0-3,0-89700) == linear-vertical-1d.html linear-vertical-1-ref.html
+fuzzy(0-3,0-21070) == linear-vertical-subpixel-1.html linear-vertical-subpixel-1-ref.html
+== linear-viewport.html linear-viewport-ref.html
+== nostops.html about:blank
+== onestop.html about:blank
+random-if(d2d) fuzzy(0-4,0-6000) == radial-1a.html radial-1-ref.html
+random-if(d2d) fuzzy(0-4,0-6000) == radial-1b.html radial-1-ref.html
+fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2a.html radial-2-ref.html
+fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2b.html radial-2-ref.html
+fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2c.html radial-2-ref.html
+fuzzy(0-3,0-7860) fuzzy-if(cocoaWidget,0-5,0-89041) fuzzy-if(azureSkiaGL,0-4,0-90000) == radial-2d.html radial-2-ref.html
+fuzzy(0-1,0-50) == radial-position-1b.html radial-position-1-ref.html
+fuzzy-if(cocoaWidget,0-4,0-22317) fuzzy-if(Android,0-8,0-771) == radial-shape-closest-corner-1a.html radial-shape-closest-corner-1-ref.html
+fuzzy(0-2,0-300) == radial-shape-closest-corner-1b.html radial-shape-closest-corner-1-ref.html
+fuzzy(0-5,0-30000) fuzzy-if(Android,0-17,0-5000) == radial-shape-closest-side-1a.html radial-shape-closest-side-1-ref.html
+fuzzy(0-5,0-30000) fuzzy-if(Android,0-17,0-5000) == radial-shape-closest-side-1b.html radial-shape-closest-side-1-ref.html
+fuzzy-if(Android,0-8,0-771) == radial-shape-farthest-corner-1a.html radial-shape-farthest-corner-1-ref.html
+fails-if(gtkWidget&&/x86_64-/.test(xulRuntime.XPCOMABI)) fuzzy(0-2,0-500) == radial-shape-farthest-corner-1b.html radial-shape-farthest-corner-1-ref.html
+fuzzy(0-2,0-15000) fuzzy-if(Android,0-17,0-13320) == radial-shape-farthest-side-1a.html radial-shape-farthest-side-1-ref.html
+fuzzy(0-2,0-15000) fuzzy-if(Android,0-17,0-13320) == radial-shape-farthest-side-1b.html radial-shape-farthest-side-1-ref.html
+== radial-size-1a.html radial-size-1-ref.html
+== radial-size-1b.html radial-size-1-ref.html
+fuzzy-if(Android,0-4,0-248) == radial-zero-length-1a.html radial-zero-length-1-ref.html
+fuzzy-if(Android,0-4,0-248) == radial-zero-length-1b.html radial-zero-length-1-ref.html
+fuzzy-if(Android,0-4,0-248) == radial-zero-length-1c.html radial-zero-length-1-ref.html
+fuzzy-if(Android,0-4,0-248) == radial-zero-length-1d.html radial-zero-length-1-ref.html
+fuzzy-if(Android,0-4,0-248) == radial-zero-length-1e.html radial-zero-length-1-ref.html
+fuzzy-if(Android,0-4,0-248) == radial-zero-length-1f.html radial-zero-length-1-ref.html
+fuzzy(0-1,0-40) == radial-premul.html radial-premul-ref.html
+== repeated-final-stop-1.html repeated-final-stop-1-ref.html
+== repeating-linear-1a.html repeating-linear-1-ref.html
+== repeating-linear-1b.html repeating-linear-1-ref.html
+== repeating-linear-2a.html repeating-linear-2-ref.html
+fuzzy-if(d2d,0-127,0-2612) == repeating-radial-1a.html repeating-radial-1-ref.html
+== repeating-radial-1b.html repeating-radial-1-ref.html
+fuzzy-if(d2d,0-127,0-2612) == repeating-radial-1c.html repeating-radial-1-ref.html
+== repeating-radial-1d.html repeating-radial-1-ref.html
+== repeating-radial-2a.html repeating-radial-2-ref.html
+== repeating-radial-2b.html repeating-radial-2-ref.html
+fuzzy(0-18,0-600) == twostops-1a.html twostops-1-ref.html
+fuzzy(0-18,0-600) == twostops-1b.html twostops-1-ref.html
+fuzzy(0-226,0-600) == twostops-1c.html twostops-1-ref.html
+fuzzy(0-141,0-300) == twostops-1d.html twostops-1-ref.html
+fuzzy(0-73,0-900) == twostops-1e.html twostops-1-ref.html
+
+# from http://www.xanthir.com/:4bhipd by way of http://a-ja.net/newgrad.html
+fuzzy-if(!contentSameGfxBackendAsCanvas,0-3,0-20000) fuzzy-if(azureSkiaGL||layersGPUAccelerated,0-8,0-20000) == aja-linear-1a.html aja-linear-1-ref.html
+fuzzy(0-1,0-20000) == aja-linear-1b.html aja-linear-1-ref.html # bug 526694
+fuzzy(0-8,0-20000) == aja-linear-1c.html aja-linear-1-ref.html
+fuzzy(0-8,0-20000) == aja-linear-1d.html aja-linear-1-ref.html
+fuzzy(0-8,0-20000) == aja-linear-1e.html aja-linear-1-ref.html
+fuzzy(0-8,0-20000) == aja-linear-1f.html aja-linear-1-ref.html
+fuzzy(0-8,0-20000) == aja-linear-2.html aja-linear-2-ref.html
+fuzzy(0-8,0-20000) == aja-linear-3a.html aja-linear-3-ref.html
+fuzzy(0-8,0-20000) == aja-linear-3b.html aja-linear-3-ref.html
+fuzzy(0-8,0-20000) == aja-linear-4a.html aja-linear-4-ref.html
+fuzzy(0-8,0-20000) == aja-linear-4b.html aja-linear-4-ref.html
+fuzzy(0-8,0-20000) fuzzy-if(winWidget,1-5,5600-20000) == aja-linear-5a.html aja-linear-5-ref.html
+fuzzy-if(Android,0-6,0-10576) == height-dependence-1.html height-dependence-1-ref.html
+fuzzy-if(cocoaWidget,0-1,0-40000) fuzzy-if(Android,0-6,0-10576) == height-dependence-2.html height-dependence-2-ref.html
+fuzzy-if(Android,0-6,0-10576) == height-dependence-3.html height-dependence-3-ref.html
+
+== linear-onestopposition-1.html linear-onestopposition-1-ref.html
+fuzzy-if(d2d,0-47,0-400) fuzzy-if(winWidget,0-1,0-1375) == linear-onestopposition-1.html linear-onestopposition-1-ref2.html # d2d interpolates the hard stop
+== radial-onestopposition-1a.html radial-onestopposition-1-ref.html
+== radial-onestopposition-1b.html radial-onestopposition-1-ref.html
+fuzzy-if(winWidget,0-1,0-1875) == repeating-linear-onestopposition-1.html orange-square.html
+fuzzy-if(winWidget,0-1,0-1875) == repeating-radial-onestopposition-1a.html orange-square.html
+fuzzy-if(winWidget,0-1,0-1875) == repeating-radial-onestopposition-1b.html orange-square.html
+fuzzy-if(winWidget,0-1,0-2925) == bug-916535-background-repeat-linear.html bug-916535-background-repeat-linear-ref.html
+fuzzy(0-1,0-800000) fails-if(useDrawSnapshot) == large-gradient-1.html large-gradient-1-ref.html
+fuzzy-if(Android,0-4,0-1) fails-if(useDrawSnapshot) == large-gradient-2.html large-gradient-2-ref.html # Bug 1182082
+fuzzy(0-1,0-800000) fails-if(useDrawSnapshot) == large-gradient-3.html large-gradient-3-ref.html
+fails-if(useDrawSnapshot) == large-gradient-4.html large-gradient-4-ref.html
+fuzzy(0-2,0-800000) == large-gradient-5.html large-gradient-5-ref.html
+== 1224761-1.html 1224761-1-ref.html
+
+fuzzy(0-4,0-800000) fails-if(useDrawSnapshot) == mask-gradient-translucent-end-color-1.html mask-gradient-translucent-end-color-1-ref.html
+
+== scaled-color-stop-position.html scaled-color-stop-position-ref.html
+fuzzy(0-1,0-40000) == color-stop-clamp-interpolation.html color-stop-clamp-interpolation-ref.html
+fuzzy-if(swgl,0-2,0-81000) == linear-gradient-repeated.html linear-gradient-repeated-ref.html
diff --git a/layout/reftests/css-gradients/repeated-final-stop-1-ref.html b/layout/reftests/css-gradients/repeated-final-stop-1-ref.html
new file mode 100644
index 0000000000..31bad474e1
--- /dev/null
+++ b/layout/reftests/css-gradients/repeated-final-stop-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+html {
+  background: white;
+}
+div {
+  background: linear-gradient(to rigtht, 0 white, 100% orange);
+  height: 100px;
+  width: 50%;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/repeated-final-stop-1.html b/layout/reftests/css-gradients/repeated-final-stop-1.html
new file mode 100644
index 0000000000..84c13aad29
--- /dev/null
+++ b/layout/reftests/css-gradients/repeated-final-stop-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+html {
+  background: white;
+}
+div {
+  background: linear-gradient(to rigtht, 0 white, 50% orange, 50% white);
+  height: 100px;
+}
+</style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/repeating-linear-1-ref.html b/layout/reftests/css-gradients/repeating-linear-1-ref.html
new file mode 100644
index 0000000000..74f2dcebd6
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-1-ref.html
@@ -0,0 +1,8 @@
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
+<div style="background: black; width: 400px; height: 50px;"></div>
+<div style="background: white; width: 400px; height: 50px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-1a.html b/layout/reftests/css-gradients/repeating-linear-1a.html
new file mode 100644
index 0000000000..b5a4301119
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-1a.html
@@ -0,0 +1 @@
+<div style="background: repeating-linear-gradient(black 0, black 50px, white 50px, white 100px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-1b.html b/layout/reftests/css-gradients/repeating-linear-1b.html
new file mode 100644
index 0000000000..8c0a51256f
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-1b.html
@@ -0,0 +1 @@
+<div style="background: repeating-linear-gradient(black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-2-ref.html b/layout/reftests/css-gradients/repeating-linear-2-ref.html
new file mode 100644
index 0000000000..50dd2d8c29
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-2-ref.html
@@ -0,0 +1 @@
+<div style="width:300px; height:300px; background:blue;"></div>
\ No newline at end of file
diff --git a/layout/reftests/css-gradients/repeating-linear-2a.html b/layout/reftests/css-gradients/repeating-linear-2a.html
new file mode 100644
index 0000000000..fc9d44fe99
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-2a.html
@@ -0,0 +1 @@
+<div style="background: repeating-linear-gradient(red 20px, blue 20px); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html b/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html
new file mode 100644
index 0000000000..47963778fd
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-linear-onestopposition-1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for repeating-linear-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: repeating-linear-gradient(to right, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1-ref.html b/layout/reftests/css-gradients/repeating-radial-1-ref.html
new file mode 100644
index 0000000000..6064a9edae
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1-ref.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(closest-side, black 0, black 50px, white 50px, white 100px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1a.html b/layout/reftests/css-gradients/repeating-radial-1a.html
new file mode 100644
index 0000000000..4237891348
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1a.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(closest-side, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1b.html b/layout/reftests/css-gradients/repeating-radial-1b.html
new file mode 100644
index 0000000000..b123651617
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1b.html
@@ -0,0 +1,4 @@
+<!-- Test adjustment of negative stop positions in a repeating radial gradient.
+     We should still get a repeating pattern, i.e., the stops cannot
+     naively be mapped to 0. -->
+<div style="background: repeating-radial-gradient(closest-side, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1c.html b/layout/reftests/css-gradients/repeating-radial-1c.html
new file mode 100644
index 0000000000..c78a4d6780
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1c.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(200px 200px at center, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-1d.html b/layout/reftests/css-gradients/repeating-radial-1d.html
new file mode 100644
index 0000000000..b91ac6bb31
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-1d.html
@@ -0,0 +1,4 @@
+<!-- Test adjustment of negative stop positions in a repeating radial gradient.
+     We should still get a repeating pattern, i.e., the stops cannot
+     naively be mapped to 0. -->
+<div style="background: repeating-radial-gradient(200px 200px at center, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-2-ref.html b/layout/reftests/css-gradients/repeating-radial-2-ref.html
new file mode 100644
index 0000000000..9620cead22
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-2-ref.html
@@ -0,0 +1 @@
+<div style="width:300px; height:300px; background:blue;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-2a.html b/layout/reftests/css-gradients/repeating-radial-2a.html
new file mode 100644
index 0000000000..a29371a2b8
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-2a.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(red 20px, blue 20px); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-2b.html b/layout/reftests/css-gradients/repeating-radial-2b.html
new file mode 100644
index 0000000000..560132bdf5
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-2b.html
@@ -0,0 +1 @@
+<div style="background: repeating-radial-gradient(212.1320343px 212.1320343px at center, red 20px, blue 20px); width: 300px; height: 300px;"></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html b/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html
new file mode 100644
index 0000000000..fab13595f7
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-onestopposition-1a.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for repeating-radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: repeating-radial-gradient(closest-side, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html b/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html
new file mode 100644
index 0000000000..8a7993451a
--- /dev/null
+++ b/layout/reftests/css-gradients/repeating-radial-onestopposition-1b.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<title>Test for repeating-radial-gradient() with all stops at the same position</title>
+<style>
+
+div {
+  width: 200px;
+  height: 200px;
+  background-image: repeating-radial-gradient(50% 50% at 50% 50%, blue 25%, orange 25%);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/css-gradients/scaled-color-stop-position-ref.html b/layout/reftests/css-gradients/scaled-color-stop-position-ref.html
new file mode 100644
index 0000000000..ce080931f4
--- /dev/null
+++ b/layout/reftests/css-gradients/scaled-color-stop-position-ref.html
@@ -0,0 +1,26 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Color stop positioning for scaled gradients as backgrounds reference</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 600px; height: 300px;
+}
+#inner
+{
+  width: 400px; height: 300px;
+  /* 250px stop is halfway along 500px diagonal */
+  background-image: linear-gradient(to bottom right, lime 0%, teal 250px, black 100%);
+}
+  </style>
+</head>
+<body>
+<div id="outer"><div id="inner"></div></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/scaled-color-stop-position.html b/layout/reftests/css-gradients/scaled-color-stop-position.html
new file mode 100644
index 0000000000..897d909898
--- /dev/null
+++ b/layout/reftests/css-gradients/scaled-color-stop-position.html
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Color stop positioning for scaled gradients as backgrounds</title>
+  <style type="text/css">
+#outer
+{
+  border: 1px solid black;
+  width: 600px; height: 300px;
+  /* 250px stop is halfway along 500px diagonal */
+  background-image: linear-gradient(to bottom right, lime 0%, teal 250px, black 100%);
+  background-size: 400px auto;
+  background-repeat: no-repeat;
+}
+  </style>
+</head>
+<body>
+<div id="outer"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/twostops-1-ref.html b/layout/reftests/css-gradients/twostops-1-ref.html
new file mode 100644
index 0000000000..26ab00cf24
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="background:#0000ff; width:300px; height:150px;"></div>
+<div style="background:#ff0000; width:300px; height:150px;"></div>
+</body>
+</html>
diff --git a/layout/reftests/css-gradients/twostops-1a.html b/layout/reftests/css-gradients/twostops-1a.html
new file mode 100644
index 0000000000..8965d63633
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1a.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to bottom, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1b.html b/layout/reftests/css-gradients/twostops-1b.html
new file mode 100644
index 0000000000..f6102065b2
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1b.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(to top, #ff0000 50%, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1c.html b/layout/reftests/css-gradients/twostops-1c.html
new file mode 100644
index 0000000000..edd7e1543d
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1c.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(yellow -50%, #0000ff 0, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1d.html b/layout/reftests/css-gradients/twostops-1d.html
new file mode 100644
index 0000000000..60ed5ec212
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1d.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(#0000ff 50%, #ff0000 50%, #ff0000 100%, yellow 150%) no-repeat; width: 300px; height: 300px;"><br></div>
diff --git a/layout/reftests/css-gradients/twostops-1e.html b/layout/reftests/css-gradients/twostops-1e.html
new file mode 100644
index 0000000000..79d7545259
--- /dev/null
+++ b/layout/reftests/css-gradients/twostops-1e.html
@@ -0,0 +1 @@
+<div style="background: linear-gradient(yellow -50%, #0000ff 0, #0000ff 50%, #ff0000 50%, #ff0000 100%, yellow 150%) no-repeat; width: 300px; height: 300px;"><br></div>
-- 
cgit v1.2.3