From 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 03:47:29 +0200
Subject: Adding upstream version 115.8.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../box-decoration-break-01-ref.xhtml              | 37 +++++++++++++
 .../svg-integration/box-decoration-break-01.xhtml  | 41 ++++++++++++++
 .../box-decoration-break-02-ref.xhtml              | 27 ++++++++++
 .../svg-integration/box-decoration-break-02.xhtml  | 33 ++++++++++++
 .../svg-integration/box-decoration-break-03.xhtml  | 42 +++++++++++++++
 .../clip-path/clip-path-circle-001-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-001.html            | 21 ++++++++
 .../clip-path/clip-path-circle-002-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-002.html            | 21 ++++++++
 .../clip-path/clip-path-circle-003-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-003.html            | 21 ++++++++
 .../clip-path/clip-path-circle-004-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-004.html            | 21 ++++++++
 .../clip-path/clip-path-circle-005-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-005.html            | 21 ++++++++
 .../clip-path/clip-path-circle-006-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-006.html            | 21 ++++++++
 .../clip-path/clip-path-circle-007-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-007.html            | 21 ++++++++
 .../clip-path/clip-path-circle-008-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-008.html            | 21 ++++++++
 .../clip-path/clip-path-circle-009-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-009.html            | 21 ++++++++
 .../clip-path/clip-path-circle-010-ref.html        | 20 +++++++
 .../clip-path/clip-path-circle-010.html            | 21 ++++++++
 .../clip-path/clip-path-circle-011.html            | 21 ++++++++
 .../clip-path/clip-path-circle-012.html            | 21 ++++++++
 .../clip-path/clip-path-circle-013.html            | 21 ++++++++
 .../clip-path/clip-path-circle-014.html            | 21 ++++++++
 .../clip-path/clip-path-circle-015.html            | 21 ++++++++
 .../clip-path/clip-path-circle-016.html            | 21 ++++++++
 .../clip-path/clip-path-circle-017.html            | 21 ++++++++
 .../clip-path/clip-path-circle-018.html            | 21 ++++++++
 .../clip-path/clip-path-circle-019.html            | 21 ++++++++
 .../clip-path/clip-path-circle-020.html            | 23 ++++++++
 .../clip-path/clip-path-circle-021-ref.html        | 16 ++++++
 .../clip-path/clip-path-circle-021.html            | 20 +++++++
 .../clip-path/clip-path-ellipse-001-ref.html       | 20 +++++++
 .../clip-path/clip-path-ellipse-001.html           | 21 ++++++++
 .../clip-path/clip-path-ellipse-002.html           | 21 ++++++++
 .../clip-path/clip-path-ellipse-003.html           | 21 ++++++++
 .../clip-path/clip-path-ellipse-004.html           | 21 ++++++++
 .../clip-path/clip-path-ellipse-005.html           | 21 ++++++++
 .../clip-path/clip-path-ellipse-006.html           | 21 ++++++++
 .../clip-path/clip-path-ellipse-007.html           | 21 ++++++++
 .../clip-path/clip-path-ellipse-008.html           | 21 ++++++++
 .../clip-path/clip-path-inset-001-ref.html         | 26 +++++++++
 .../clip-path/clip-path-inset-001a.html            | 26 +++++++++
 .../clip-path/clip-path-inset-001b.html            | 28 ++++++++++
 .../clip-path/clip-path-inset-001c.html            | 29 ++++++++++
 .../clip-path/clip-path-inset-002-ref.html         | 26 +++++++++
 .../clip-path/clip-path-inset-002a.html            | 26 +++++++++
 .../clip-path/clip-path-inset-002b.html            | 26 +++++++++
 .../clip-path/clip-path-inset-002c.html            | 26 +++++++++
 .../clip-path/clip-path-inset-003-ref.html         | 26 +++++++++
 .../clip-path/clip-path-inset-003.html             | 26 +++++++++
 .../clip-path/clip-path-polygon-001.html           | 21 ++++++++
 .../clip-path/clip-path-polygon-002.html           | 24 +++++++++
 .../clip-path/clip-path-polygon-003.html           | 21 ++++++++
 .../clip-path/clip-path-polygon-004.html           | 25 +++++++++
 .../clip-path/clip-path-polygon-005.html           | 26 +++++++++
 .../clip-path/clip-path-polygon-006.html           | 33 ++++++++++++
 .../clip-path/clip-path-polygon-007.html           | 34 ++++++++++++
 .../clip-path/clip-path-polygon-008.html           | 35 ++++++++++++
 .../clip-path/clip-path-polygon-009.html           | 33 ++++++++++++
 .../clip-path/clip-path-polygon-010.html           | 36 +++++++++++++
 .../clip-path/clip-path-polygon-011.html           | 36 +++++++++++++
 .../clip-path/clip-path-polygon-012.html           | 36 +++++++++++++
 .../clip-path/clip-path-polygon-013.html           | 51 ++++++++++++++++++
 .../clip-path/clip-path-rectangle-border-ref.html  | 15 ++++++
 .../clip-path/clip-path-rectangle-ref.html         | 15 ++++++
 .../clip-path/clip-path-square-001-ref.html        | 15 ++++++
 .../clip-path/clip-path-square-002-ref.html        | 15 ++++++
 .../clip-path/clip-path-stripes-001-ref.html       | 39 ++++++++++++++
 .../clip-path/clip-path-stripes-002-ref.html       | 31 +++++++++++
 .../clip-path/clip-path-stripes-003-ref.html       | 63 ++++++++++++++++++++++
 .../clip-path/clip-path-stroke-001-ref.html        | 21 ++++++++
 .../clip-path/clip-path-stroke-001.html            | 26 +++++++++
 .../clip-path/clip-path-transform-001-ref.html     |  5 ++
 .../clip-path/clip-path-transform-001.html         | 10 ++++
 .../svg/svg-integration/clip-path/reftest.list     | 61 +++++++++++++++++++++
 .../svg-integration/clipPath-html-01-extref.xhtml  | 15 ++++++
 .../svg/svg-integration/clipPath-html-01-ref.svg   |  8 +++
 .../svg/svg-integration/clipPath-html-01.xhtml     | 18 +++++++
 .../svg-integration/clipPath-html-02-extref.xhtml  | 18 +++++++
 .../svg/svg-integration/clipPath-html-02-ref.svg   |  9 ++++
 .../svg/svg-integration/clipPath-html-02.xhtml     | 23 ++++++++
 .../svg-integration/clipPath-html-03-extref.xhtml  | 18 +++++++
 .../svg/svg-integration/clipPath-html-03-ref.svg   | 10 ++++
 .../svg/svg-integration/clipPath-html-03.xhtml     | 23 ++++++++
 .../svg-integration/clipPath-html-04-extref.xhtml  | 22 ++++++++
 .../svg/svg-integration/clipPath-html-04-ref.xhtml | 14 +++++
 .../svg/svg-integration/clipPath-html-04.xhtml     | 27 ++++++++++
 .../svg-integration/clipPath-html-05-extref.xhtml  | 22 ++++++++
 .../svg/svg-integration/clipPath-html-05-ref.xhtml | 14 +++++
 .../svg/svg-integration/clipPath-html-05.xhtml     | 27 ++++++++++
 .../svg-integration/clipPath-html-06-extref.xhtml  | 24 +++++++++
 .../svg/svg-integration/clipPath-html-06-ref.xhtml | 20 +++++++
 .../svg/svg-integration/clipPath-html-06.xhtml     | 29 ++++++++++
 .../svg/svg-integration/clipPath-html-07-ref.svg   |  4 ++
 .../svg/svg-integration/clipPath-html-07.xhtml     | 31 +++++++++++
 .../svg/svg-integration/clipPath-html-08.xhtml     | 26 +++++++++
 .../svg-integration/clipPath-html-zoomed-01.xhtml  | 15 ++++++
 .../clipPath-transformed-html-01.xhtml             | 44 +++++++++++++++
 .../clipPath-transformed-html-02.xhtml             | 44 +++++++++++++++
 .../svg-integration/conditions-outer-svg-01.xhtml  | 18 +++++++
 .../svg-integration/conditions-outer-svg-02.xhtml  | 19 +++++++
 .../svg-integration/css-and-svg-filter-01-ref.html | 10 ++++
 .../svg/svg-integration/css-and-svg-filter-01.html | 27 ++++++++++
 .../dynamic-conditions-outer-svg-01.xhtml          | 18 +++++++
 .../dynamic-conditions-outer-svg-02.xhtml          | 18 +++++++
 .../dynamic-conditions-outer-svg-03.xhtml          | 18 +++++++
 .../dynamic-conditions-outer-svg-04.xhtml          | 18 +++++++
 .../svg-integration/filter-html-01-extref.xhtml    | 15 ++++++
 .../svg/svg-integration/filter-html-01-ref.svg     | 14 +++++
 .../svg/svg-integration/filter-html-01.xhtml       | 21 ++++++++
 .../filter-html-dynamic-01-ref.xhtml               | 23 ++++++++
 .../svg-integration/filter-html-dynamic-01.xhtml   | 35 ++++++++++++
 .../svg-integration/filter-html-zoomed-01.xhtml    | 18 +++++++
 .../mask-clipPath-opacity-01-ref.xhtml             | 14 +++++
 .../mask-clipPath-opacity-01a.xhtml                | 20 +++++++
 .../mask-clipPath-opacity-01b.xhtml                | 21 ++++++++
 .../mask-clipPath-opacity-01c.xhtml                | 21 ++++++++
 .../mask-clipPath-opacity-01d.xhtml                | 21 ++++++++
 .../mask-clipPath-opacity-01e.xhtml                | 25 +++++++++
 .../svg-integration/mask-html-01-extref-01.xhtml   | 15 ++++++
 .../svg-integration/mask-html-01-extref-02.xhtml   | 15 ++++++
 .../svg/svg-integration/mask-html-01-ref.svg       | 16 ++++++
 .../svg/svg-integration/mask-html-01-resource.svg  | 33 ++++++++++++
 .../svg/svg-integration/mask-html-01.xhtml         | 23 ++++++++
 .../svg/svg-integration/mask-html-zoomed-01.xhtml  | 20 +++++++
 .../mask-mask-clipPath-opacity-scale-ref.xhtml     | 15 ++++++
 .../mask-mask-clipPath-opacity-scale.xhtml         | 25 +++++++++
 .../svg-integration/mask-transformed-html-01.xhtml | 42 +++++++++++++++
 .../svg-integration/mask-transformed-html-02.xhtml | 42 +++++++++++++++
 .../patterned-svg-under-transformed-html-01.xhtml  | 47 ++++++++++++++++
 .../patterned-svg-under-transformed-html-02.xhtml  | 47 ++++++++++++++++
 layout/reftests/svg/svg-integration/reftest.list   | 53 ++++++++++++++++++
 .../transform-outer-svg-01-ref.xhtml               | 18 +++++++
 .../svg-integration/transform-outer-svg-01.xhtml   | 18 +++++++
 140 files changed, 3346 insertions(+)
 create mode 100644 layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html
 create mode 100644 layout/reftests/svg/svg-integration/clip-path/reftest.list
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-03.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-04.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-05.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-07.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-08.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html
 create mode 100644 layout/reftests/svg/svg-integration/css-and-svg-filter-01.html
 create mode 100644 layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/filter-html-01-ref.svg
 create mode 100644 layout/reftests/svg/svg-integration/filter-html-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-html-01-ref.svg
 create mode 100644 layout/reftests/svg/svg-integration/mask-html-01-resource.svg
 create mode 100644 layout/reftests/svg/svg-integration/mask-html-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/reftest.list
 create mode 100644 layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml
 create mode 100644 layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml

(limited to 'layout/reftests/svg/svg-integration')

diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml
new file mode 100644
index 0000000000..45cbb2ee3d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml
@@ -0,0 +1,37 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <style>
+    .clip {
+      clip-path:url(#path);
+    }
+    span {
+      font: 24px sans-serif;
+      line-height: 2;
+      color: lime;
+      background: lime;
+    }
+    br {
+      line-height: 0;
+    }
+  </style>
+</head>
+<body>
+  <h2>Box-Decoration-Break: Clone</h2>
+  <span class="clip">The</span><br />
+  <span class="clip">quick</span><br />
+  <span class="clip">orange fox</span>
+
+  <h2>Box-Decoration-Break: Slice</h2>
+  <span>The</span>
+
+  <svg xmlns="http://www.w3.org/2000/svg" height="0">
+    <defs>
+      <clipPath id="path" clipPathUnits="objectBoundingBox">
+        <rect x="0" y="0" width="1" height="0.3"/>
+      </clipPath>
+    </defs>
+  </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml
new file mode 100644
index 0000000000..a033175cd0
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml
@@ -0,0 +1,41 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test of box-decoration-break with clip-path: url</title>
+  <style>
+    .clone {
+      box-decoration-break: clone;
+    }
+    span {
+      font: 24px sans-serif;
+      line-height: 2;
+      color: lime;
+      background: lime;
+      clip-path: url(#path);
+    }
+    br {
+      line-height: 0;
+    }
+  </style>
+</head>
+<body>
+  <h2>Box-Decoration-Break: Clone</h2>
+  <span class="clone">The<br />quick<br />orange fox</span>
+
+  <h2>Box-Decoration-Break: Slice</h2>
+  <span>The<br />quick<br />orange fox</span>
+
+  <svg xmlns="http://www.w3.org/2000/svg" height="0">
+    <defs>
+      <clipPath id="path" clipPathUnits="objectBoundingBox">
+        <rect x="0" y="0" width="1" height="0.3"/>
+      </clipPath>
+    </defs>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml
new file mode 100644
index 0000000000..43d6d45efa
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml
@@ -0,0 +1,27 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <style>
+    span {
+      font: 24px sans-serif;
+      line-height: 2;
+      color: lime;
+      background: lime;
+    }
+    br {
+      line-height: 0;
+    }
+  </style>
+</head>
+<body>
+  <h2>Box-Decoration-Break: Clone</h2>
+  <span>The</span><br />
+  <span>quick</span><br />
+  <span>orange fox</span>
+
+  <h2>Box-Decoration-Break: Slice</h2>
+  <span>The</span><br />
+  <span>quick</span><br />
+  <span>orange fox</span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml
new file mode 100644
index 0000000000..f76d679d15
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test of box-decoration-break with filter</title>
+  <style>
+    .clone {
+      box-decoration-break: clone;
+    }
+    span {
+      font: 24px sans-serif;
+      line-height: 2;
+      color: lime;
+      background: lime;
+      filter: blur(0px);
+    }
+    br {
+      line-height: 0;
+    }
+  </style>
+</head>
+<body>
+  <h2>Box-Decoration-Break: Clone</h2>
+  <span class="clone">The<br />quick<br />orange fox</span>
+
+  <h2>Box-Decoration-Break: Slice</h2>
+  <span>The<br />quick<br />orange fox</span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml
new file mode 100644
index 0000000000..1563b24cf7
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml
@@ -0,0 +1,42 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta charset="utf-8" />
+  <title>Test of box-decoration-break with clip-path: url and filter</title>
+  <style>
+    .clone {
+      box-decoration-break: clone;
+    }
+    span {
+      font: 24px sans-serif;
+      line-height: 2;
+      color: lime;
+      background: lime;
+      clip-path: url(#path);
+      filter: blur(0px);
+    }
+    br {
+      line-height: 0;
+    }
+  </style>
+</head>
+<body>
+  <h2>Box-Decoration-Break: Clone</h2>
+  <span class="clone">The<br />quick<br />orange fox</span>
+
+  <h2>Box-Decoration-Break: Slice</h2>
+  <span>The<br />quick<br />orange fox</span>
+
+  <svg xmlns="http://www.w3.org/2000/svg" height="0">
+    <defs>
+      <clipPath id="path" clipPathUnits="objectBoundingBox">
+        <rect x="0" y="0" width="1" height="0.3"/>
+      </clipPath>
+    </defs>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html
new file mode 100644
index 0000000000..34def2ff95
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 001</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: url(#c1)"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="100" cy="100" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html
new file mode 100644
index 0000000000..c506a2b684
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with no values</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle without values for clipping of a square. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle();"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html
new file mode 100644
index 0000000000..007cd80c9d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 002</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="100" cy="100" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html
new file mode 100644
index 0000000000..c242dc91b3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with farthest-side</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with farthest-side for clipping of a square. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(farthest-side);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html
new file mode 100644
index 0000000000..4bb8d89ee1
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 003</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="padding-left: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="100" cy="100" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html
new file mode 100644
index 0000000000..ae4d2d5098
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with closest-side</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with the value closest-side for clipping of a square. On pass you
+    should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(closest-side);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html
new file mode 100644
index 0000000000..3885dd5547
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 004</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="100" cy="100" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
new file mode 100644
index 0000000000..6bff6f8399
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 001</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 0; height: 100px; border: solid green 100px; background-color: green; clip-path: circle(at top 100px left 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html
new file mode 100644
index 0000000000..1a52c69567
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 005</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="100" cy="300" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
new file mode 100644
index 0000000000..aeea854ea2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 002</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-002-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at bottom 100px left 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html
new file mode 100644
index 0000000000..a07cbb66cd
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 006</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 400px; height: 400px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="100" cy="100" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
new file mode 100644
index 0000000000..423f4b24ca
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 003</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 100px; height: 0; border: solid green 100px; background-color: green; clip-path: circle(at left 100px top 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html
new file mode 100644
index 0000000000..caba51737b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 007</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="100" cy="100" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
new file mode 100644
index 0000000000..fbf204fd7e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 004</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-002-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at right 100px top 50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html
new file mode 100644
index 0000000000..cdf8da8ede
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 008</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="150" cy="150" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
new file mode 100644
index 0000000000..564b6cd105
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 005</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-002-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: circle(at left -100px top 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html
new file mode 100644
index 0000000000..7d055c4d7d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 009</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="200" cy="200" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
new file mode 100644
index 0000000000..949c6afd14
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 006</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-003-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="padding-right: 200px; width: 0; height: 200px; background-color: green; clip-path: circle(at right -100px top 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html
new file mode 100644
index 0000000000..7fed7ee45c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's circle function 010</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="padding: 100px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <circle cx="200" cy="200" r="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
new file mode 100644
index 0000000000..4952c6f48d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 007</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-004-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 200px; padding-top: 200px; background-color: green; clip-path: circle(at top -100px left 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
new file mode 100644
index 0000000000..d2a00b5e80
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 008</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-005-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 200px; padding-bottom: 200px; background-color: green; clip-path: circle(at bottom -100px left 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html
new file mode 100644
index 0000000000..efded811f8
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 009</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-006-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(100px at 100px 100px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html
new file mode 100644
index 0000000000..482980af9b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with position 010</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-002-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a rectangle. On pass you should see
+    a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(25% at 25% 25%);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html
new file mode 100644
index 0000000000..3c4b35d7d3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with border-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-007-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position and the keyword border-box for clipping of a
+    rectangle. On pass you should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) border-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html
new file mode 100644
index 0000000000..bc8e161cc6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with padding-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-008-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position and the keyword padding-box for clipping of a
+    rectangle. On pass you should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) padding-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html
new file mode 100644
index 0000000000..7cea5f2bbb
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with content-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-009-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position and the keyword content-box for clipping of a
+    rectangle. On pass you should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) content-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html
new file mode 100644
index 0000000000..4947ac1a27
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function with margin-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-007-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position and the keyword margin-box for clipping of a
+    rectangle. On pass you should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; box-shadow: 0 0 0 50px green; clip-path: circle(100px at 150px 150px) margin-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html
new file mode 100644
index 0000000000..b41d7aecc5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function on rectangle 001</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-010-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a differently sized rectangle. On
+    pass you should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 100px; background-color: green; clip-path: circle(farthest-side at center 100px) content-box; padding: 100px;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html
new file mode 100644
index 0000000000..395002a2d2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function on rectangle 002</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-002-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a differently sized rectangle. On
+    pass you should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 200px; height: 400px; background-color: green; clip-path: circle(closest-side at center 100px) content-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html
new file mode 100644
index 0000000000..82b52ae457
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function on rectangle 003</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-002-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    circle with a position for clipping of a differently sized rectangle. This
+    also tests the correct usage of the specified formula:
+      r = sqrt(width^2 + height^2)
+    On pass you should see a green circle.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 60px; height: 80px; padding: 60px 70px 60px 70px; background-color: green; clip-path: circle(100px) content-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html
new file mode 100644
index 0000000000..c87ded532f
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html
@@ -0,0 +1,16 @@
+<!--
+  Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function on circle 021</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 600px; height: 600px; background-color: green; clip-path: circle();"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html
new file mode 100644
index 0000000000..a9229e6ea7
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html
@@ -0,0 +1,20 @@
+<!--
+  Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and circle function on circle 021</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-circle-021-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape circle() with large reference box and percentage radius.">
+</head>
+<body>
+  <p>The test passes if there is a green circle.</p>
+  <div style="width: 600px; height: 600px; background-color: green; clip-path: circle(50%);"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html
new file mode 100644
index 0000000000..fc0392da94
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Ref test for clip-path's ellipse function 001</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 400px; height: 200px; background-color: green; clip-path: url(#c1);"></div>
+  <svg>
+    <clipPath id="c1">
+      <ellipse cx="200" cy="100" rx="200" ry="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html
new file mode 100644
index 0000000000..77ff7b9b0e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function without values</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse without values for clipping of a rectangle. On pass you should see
+    a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse();"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html
new file mode 100644
index 0000000000..6b80585b90
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function with absolute radii</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse with absolute radii for clipping of a rectangle. On pass you should
+    see a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(200px 100px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html
new file mode 100644
index 0000000000..9b1051d189
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function percentage radii</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse with percentage radii for clipping of a rectangle. On pass you
+    should see a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(50% 50%);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html
new file mode 100644
index 0000000000..b1d05cddf5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function with farthest-side</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse with the value farthest-side for clipping of a rectangle. On pass
+    you should see a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(farthest-side farthest-side);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
new file mode 100644
index 0000000000..116a08e4c1
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function with closest-side</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse with the value closest-side and position for clipping of a
+    rectangle. On pass you should see a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 400px; height: 200px; padding-top: 200px; background-color: green; clip-path: ellipse(closest-side closest-side at top -100px left 50%) content-box;"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html
new file mode 100644
index 0000000000..39c07e98e4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function with position 001</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse with a position for clipping of a rectangle. On pass you should see
+    a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 400px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(200px closest-side at left center) content-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html
new file mode 100644
index 0000000000..ca23693c2c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function with position 002</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse with a position for clipping of a rectangle. On pass you should see
+    a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(farthest-side 50% at left center) content-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html
new file mode 100644
index 0000000000..560cfc0761
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and ellipse function with border-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-ellipse-001-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    ellipse with the keyword border-box for clipping of a rectangle. On pass
+    you should see a green horizontal ellipse.">
+</head>
+<body>
+  <p>The test passes if there is a green horizontal ellipse.</p>
+  <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(closest-side closest-side) border-box;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html
new file mode 100644
index 0000000000..6bfa2d39fd
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-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>CSS Masking: Reference for clip-path's inset function 001</title>
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 100px;
+      height: 100px;
+      border: solid green 40px;
+      background-color: green;
+      position: relative;
+      top: 10px;
+      left: 10px;
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green square not touching the edges</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html
new file mode 100644
index 0000000000..35eab0305c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.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>CSS Masking: Test clip-path property and inset function with 10px on all sides</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+  <link rel="match" href="clip-path-inset-001-ref.html">
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 100px;
+      height: 100px;
+      border: solid green 50px;
+      background-color: green;
+      clip-path: inset(10px);
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green square not touching the edges</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html
new file mode 100644
index 0000000000..7af06c8907
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and inset function with different insets on each side</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+  <link rel="match" href="clip-path-inset-001-ref.html">
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 120px;
+      height: 100px;
+      border: solid green 50px;
+      background-color: green;
+      clip-path: inset(10px 20px);
+      position: relative;
+      left: -10px;
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green square not touching the edges</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html
new file mode 100644
index 0000000000..81c016084c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and inset function with different insets for all 4 sides</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+  <link rel="match" href="clip-path-inset-001-ref.html">
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 110px;
+      height: 100px;
+      border: solid green 50px;
+      background-color: green;
+      clip-path: inset(5px 10px 15px 20px);
+      position: relative;
+      left: -10px;
+      top: 5px;
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green square not touching the edges</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html
new file mode 100644
index 0000000000..1c15399e3d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-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>CSS Masking: Reference for clip-path's inset function (with rounded corners) 002</title>
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 180px;
+      height: 180px;
+      background-color: green;
+      position: relative;
+      top: 10px;
+      left: 10px;
+      border-radius: 20px;
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html
new file mode 100644
index 0000000000..2ac95f1beb
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.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>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+  <link rel="match" href="clip-path-inset-002-ref.html">
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 100px;
+      height: 100px;
+      border: solid green 50px;
+      background-color: green;
+      clip-path: inset(10px round 20px);
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html
new file mode 100644
index 0000000000..1a87f8258a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.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>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+  <link rel="match" href="clip-path-inset-002-ref.html">
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 100px;
+      height: 100px;
+      border: solid green 50px;
+      background-color: green;
+      clip-path: inset(10px round 20px 20px 20px 20px);
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html
new file mode 100644
index 0000000000..01b60634f7
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.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>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+  <link rel="match" href="clip-path-inset-002-ref.html">
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 100px;
+      height: 100px;
+      border: solid green 50px;
+      background-color: green;
+      clip-path: inset(10px round 20px / 20px);
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green rect not touching the sides with rounded corners</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html
new file mode 100644
index 0000000000..faec64ce7c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-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>CSS Masking: Ref test for clip-path's inset function (with different rounded corners) 003</title>
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 180px;
+      height: 180px;
+      background-color: green;
+      position: relative;
+      top: 10px;
+      left: 10px;
+      border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px;
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html
new file mode 100644
index 0000000000..5c57c39239
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.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>CSS Masking: Test clip-path property and inset function with different rounded corners</title>
+  <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape">
+  <link rel="match" href="clip-path-inset-003-ref.html">
+  <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com">
+  <style type="text/css">
+    #square {
+      width: 100px;
+      height: 100px;
+      border: solid green 50px;
+      background-color: green;
+      clip-path: inset(10px round 10px 20px 30px 40px / 50px 60px 70px 80px);
+    }
+  </style>
+</head>
+<body>
+  <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p>
+  <div id="square"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html
new file mode 100644
index 0000000000..bd3093f15b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and polygon function with absolute values</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-rectangle-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    'polygon' for clipping. Test absolute value arguments. On pass you should
+    see a green square and no red.">
+</head>
+<body>
+  <p>The test passes if there is a green rectangle and no red.</p>
+  <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html
new file mode 100644
index 0000000000..b34a73228e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.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>CSS Masking: Test clip-path property and polygon function with percentage values</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-rectangle-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    'polygon' for clipping. Test percentage values for arguments. Percentage
+    values are relative to specified reference box. If no reference box was
+    specified, percentage values are relative to border-box. A number of
+    percentage values are specified as coordinates. On pass you should see a
+    green square and no red.">
+</head>
+<body>
+  <p>The test passes if there is a green rectangle and no red.</p>
+  <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html
new file mode 100644
index 0000000000..067a3f939a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and polygon function with absolute and percentage values</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-rectangle-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    'polygon' for clipping. Test absolute and percentage value arguments. On
+    pass you should see a green square and no red.">
+</head>
+<body>
+  <p>The test passes if there is a green rectangle and no red.</p>
+  <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html
new file mode 100644
index 0000000000..7c937ed3ea
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html
@@ -0,0 +1,25 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path property and polygon function with fill rule evenodd</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-rectangle-border-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape 'polygon' for clipping.
+    The point list for the polygon creates a 'whole' with the dimension of the background. With
+    the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background
+    of the parent div box visible.
+    On pass you should see a green box with a blue border.">
+</head>
+<body>
+  <p>The test passes if there is a green rectangle with a blue border.</p>
+  <div style="background-color: green; width: 250px;">
+    <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html
new file mode 100644
index 0000000000..5b141290fe
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.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>CSS Masking: Test clip-path property and polygon function with fill rule nonzero</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-rectangle-border-ref.html">
+  <meta name="assert" content="The clip-path property takes the basic shape
+    'polygon' for clipping. The point list for the polygon creates a 'hole'
+    with the dimension of the background of the clipped element. With the fill
+    rule 'nonzero', this hole is clipped out. The clipping makes the green
+    background of the parent div box visible. On pass you should see a green
+    square with a blue border.">
+</head>
+<body>
+  <p>The test passes if there is a green rectangle with a blue border.</p>
+  <div style="background-color: green; width: 250px;">
+    <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(nonzero, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 50px 50px, 50px 150px, 200px 150px, 200px 50px, 0 50px)"></div>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html
new file mode 100644
index 0000000000..cb345de91d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with padding-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-square-001-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box 'padding-box' for the polygon() function by mixing percentage
+    and absolute values as coordinates. On sucess you should see a green square
+    and no red.">
+</head>
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 50px;
+}
+</style>
+<body>
+  <p>The test passes if there is a green square and no red.</p>
+  <div style="clip-path: polygon(0% 0%, 100% 0%, 100px 100%, 0 100px) padding-box"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html
new file mode 100644
index 0000000000..9d3c2dc9c3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html
@@ -0,0 +1,34 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with border-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-stripes-001-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box 'border-box' for the polygon() function by mixing percentage
+    and absolute values as coordinates. On sucess you should see a green
+    vertical stripe next to a lime green vertical stripe. Both should be of equal
+    size.">
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 50px;
+  border-left: lime solid 50px;
+}
+</style>
+<body>
+  <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+  <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) border-box"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html
new file mode 100644
index 0000000000..04edaf5a5a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html
@@ -0,0 +1,35 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with margin-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-stripes-002-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box 'margin-box' for the polygon() function by mixing percentage
+    and absolute values as coordinates. On sucess you should see a green
+    vertical stripe next to a lime green vertical stripe. Both should be of equal
+    size.">
+</head>
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 25px;
+  border-left: lime solid 25px;
+}
+</style>
+<body>
+  <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+  <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html
new file mode 100644
index 0000000000..2debdc38e4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html
@@ -0,0 +1,33 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with content-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-square-002-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box 'content-box' for the polygon() function by mixing percentage
+    and absolute values as coordinates. On sucess you should see a green square
+    and no red.">
+</head>
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 25px;
+}
+</style>
+<body>
+  <p>The test passes if there is a green square and no red.</p>
+  <div style="clip-path: polygon(0% 0px, 50px 0%, 100% 50px, 0px 100%) content-box"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html
new file mode 100644
index 0000000000..c5656d134b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html
@@ -0,0 +1,36 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with fill-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-stripes-001-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box. 'fill-box' was specified but is not supported for HTML
+    elements. The used value should be 'border-box' for the polygon() function
+    instead. By mixing percentage and absolute values as coordinates we check
+    the correct used reference box. On sucess you should see a green
+    vertical stripe next to a lime green vertical stripe. Both should be of equal
+    size.">
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 50px;
+  border-left: lime solid 50px;
+}
+</style>
+<body>
+  <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+  <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) fill-box"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html
new file mode 100644
index 0000000000..f8a80ef2df
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html
@@ -0,0 +1,36 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with stroke-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-stripes-001-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box. 'stroke-box' was specified but is not supported for HTML
+    elements. The used value should be 'border-box' for the polygon() function
+    instead. By mixing percentage and absolute values as coordinates we check
+    the correct used reference box. On sucess you should see a green
+    vertical stripe next to a lime green vertical stripe. Both should be of equal
+    size.">
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 50px;
+  border-left: lime solid 50px;
+}
+</style>
+<body>
+  <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+  <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) stroke-box"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html
new file mode 100644
index 0000000000..dc48d662e5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html
@@ -0,0 +1,36 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with view-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-stripes-001-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box. 'view-box' was specified but is not supported for HTML
+    elements. The used value should be 'border-box' for the polygon() function
+    instead. By mixing percentage and absolute values as coordinates we check
+    the correct used reference box. On sucess you should see a green
+    vertical stripe next to a lime green vertical stripe. Both should be of equal
+    size.">
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 50px;
+  border-left: lime solid 50px;
+}
+</style>
+<body>
+  <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+  <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) view-box"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html
new file mode 100644
index 0000000000..203c7e1015
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html
@@ -0,0 +1,51 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon different units</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-stripes-003-ref.html">
+  <meta name="assert" content="Test the support of different units for
+    polygon coordinates. The test passes if you see a multiple green and blue
+    stripe pairs. For each pair, the blue and green stripe must be of same
+    length.">
+<style>
+div {
+  width: 100%;
+  height: 20px;
+  background-color: green;
+  padding: 0;
+  margin: 0;
+}
+div:nth-child(odd) {
+  margin-bottom: 5px;
+  background-color: blue;
+}
+</style>
+<body>
+  <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
+  <div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div>
+  <div style="width: 50%"></div>
+
+  <div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div>
+  <div style="width: 20em"></div>
+
+  <!-- Activate when SVG2 is supported.
+  <div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div>
+  <div style="width: 50vw"></div>
+
+  <div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div>
+  <div style="width: 40vh"></div>
+
+  <div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div>
+  <div style="width: calc(30% + 15px)"></div>-->
+
+  <div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div>
+  <div style="width: 30ex"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html
new file mode 100644
index 0000000000..2a9f65f163
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green rectangle with a blue border.</p>
+  <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html
new file mode 100644
index 0000000000..45bc902c3d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green rectangle and no red.</p>
+  <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html
new file mode 100644
index 0000000000..f0f26e065c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Reftest reference</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green square and no red.</p>
+  <div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html
new file mode 100644
index 0000000000..1831ecebae
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Reftest reference</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+  <p>The test passes if there is a green square and no red.</p>
+  <div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html
new file mode 100644
index 0000000000..6add82da00
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html
@@ -0,0 +1,39 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Test clip-path and polygon with border-box</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+  <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
+  <link rel="match" href="clip-path-stripes-001-ref.html">
+  <meta name="assert" content="The clip-path property allows specifying
+    basic shapes and reference boxes. This test checks the usage of the correct
+    reference box 'border-box' for the polygon() function by mixing percentage
+    and absolute values as coordinates. On sucess you should see a green
+    vertical stripe next to a lime green vertical stripe. Both should be of equal
+    size.">
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 50px;
+  border-left: lime solid 50px;
+}
+</style>
+<body>
+  <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+  <div style="clip-path: url(#c1)"></div>
+  <svg>
+    <clipPath id="c1">
+      <rect x="0" y="50" width="100" height="100"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html
new file mode 100644
index 0000000000..6a0132fb69
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Reftest reference</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<style>
+div {
+  width: 50px;
+  height: 50px;
+  background-color: green;
+  padding: 25px;
+  margin: 25px;
+  border: red solid 25px;
+  border-left: lime solid 25px;
+}
+</style>
+<body>
+  <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
+  <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div>
+  <svg>
+    <clipPath id="c1">
+      <rect x="0" y="50" width="50" height="50"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html
new file mode 100644
index 0000000000..731ff91533
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html
@@ -0,0 +1,63 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Masking: Reftest reference</title>
+  <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+<style>
+div {
+  height: 20px;
+  width: 100%;
+  background-color: green;
+  padding: 0;
+  margin: 0;
+}
+div:nth-child(odd) {
+  margin-bottom: 5px;
+  background-color: blue;
+}
+</style>
+<body>
+  <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
+  <div style="clip-path: url(#c1)"></div>
+  <div style="width: 50%"></div>
+
+  <div style="clip-path: url(#c2)"></div>
+  <div style="width: 20em"></div>
+
+  <!--<div style="clip-path: url(#c3)"></div>
+  <div style="width: 50vw"></div>
+
+  <div style="clip-path: url(#c4)"></div>
+  <div style="width: 40vh"></div>
+
+  <div style="clip-path: url(#c5)"></div>
+  <div style="width: calc(30% + 15px)"></div>-->
+
+  <div style="clip-path: url(#c6)"></div>
+  <div style="width: 30ex"></div>
+  <svg>
+    <clipPath id="c1" clipPathUnits="objectBoundingBox">
+      <rect width="0.5" height="1"/>
+    </clipPath>
+    <clipPath id="c2">
+      <rect width="20em" height="20"/>
+    </clipPath>
+    <!--<clipPath id="c3">
+      <rect width="50vw" height="20"/>
+    </clipPath>
+    <clipPath id="c4">
+      <rect width="40vh" height="20"/>
+    </clipPath>
+    <clipPath id="c5">
+      <rect width="calc(30% + 15px)" height="20"/>
+    </clipPath>-->
+    <clipPath id="c6">
+      <rect width="30ex" height="20"/>
+    </clipPath>
+  </svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html
new file mode 100644
index 0000000000..64d41f90c5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart.">
+    <g>
+      <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
+      <g>
+        <g>
+          <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect>
+        </g>
+        <g>
+          <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html
new file mode 100644
index 0000000000..30ddee2d56
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+</head>
+<body>
+  <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart.">
+    <defs id="defs">
+      <clipPath id="_ABSTRACT_RENDERER_ID_1">
+        <rect x="20" y="22" width="297" height="124"></rect>
+      </clipPath>
+    </defs>
+    <g>
+      <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect>
+      <g clip-path="url(#_ABSTRACT_RENDERER_ID_1)">
+        <g>
+          <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect>
+        </g>
+        <g>
+          <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html
new file mode 100644
index 0000000000..f4a0c48e93
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html
@@ -0,0 +1,5 @@
+<svg>
+    <g>
+        <circle cx="50" cy="50" r="50" style="fill: green;"></circle>
+    </g>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html
new file mode 100644
index 0000000000..44ec2997f2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html
@@ -0,0 +1,10 @@
+<svg>
+    <defs>
+        <clipPath id="clip" transform="translate(-50,0)">
+            <rect x="0" y="0" width="100" height="100" transform="translate(50,0)"></rect>
+        </clipPath>
+    </defs>
+    <g clip-path="url(#clip)">
+        <circle cx="50" cy="50" r="50" style="fill: green;"></circle>
+    </g>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clip-path/reftest.list b/layout/reftests/svg/svg-integration/clip-path/reftest.list
new file mode 100644
index 0000000000..914c4f6168
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clip-path/reftest.list
@@ -0,0 +1,61 @@
+# These tests verify that CSS clip-path behaves properly.
+# e.g. clip-path: polygon(nonzero, 3px 3px, 20% 20%)
+
+# Following tests adapted from W3C csswg-test repo
+== clip-path-polygon-001.html clip-path-rectangle-ref.html
+== clip-path-polygon-002.html clip-path-rectangle-ref.html
+== clip-path-polygon-003.html clip-path-rectangle-ref.html
+== clip-path-polygon-004.html clip-path-rectangle-border-ref.html
+== clip-path-polygon-005.html clip-path-rectangle-border-ref.html
+== clip-path-polygon-006.html clip-path-square-001-ref.html
+== clip-path-polygon-007.html clip-path-stripes-001-ref.html
+== clip-path-polygon-008.html clip-path-stripes-002-ref.html
+== clip-path-polygon-009.html clip-path-square-002-ref.html
+== clip-path-polygon-010.html clip-path-stripes-001-ref.html
+== clip-path-polygon-011.html clip-path-stripes-001-ref.html
+== clip-path-polygon-012.html clip-path-stripes-001-ref.html
+fuzzy(0-1,0-20) == clip-path-polygon-013.html clip-path-stripes-003-ref.html
+
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-001.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-002.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-003.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-004.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-005.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-006.html clip-path-circle-001-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-007.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-008.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-009.html clip-path-circle-003-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-010.html clip-path-circle-004-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-011.html clip-path-circle-005-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-012.html clip-path-circle-006-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-013.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-014.html clip-path-circle-007-ref.html
+fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-015.html clip-path-circle-008-ref.html
+fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-016.html clip-path-circle-009-ref.html
+fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-16,0-9) fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-017.html clip-path-circle-007-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-018.html clip-path-circle-010-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-019.html clip-path-circle-002-ref.html
+fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-020.html clip-path-circle-002-ref.html
+fuzzy-if(winWidget||cocoaWidget,0-1,0-5) == clip-path-circle-021.html clip-path-circle-021-ref.html
+
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-001.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-002.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-003.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-004.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-005.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-006.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-007.html clip-path-ellipse-001-ref.html
+fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-008.html clip-path-ellipse-001-ref.html
+
+== clip-path-inset-001a.html clip-path-inset-001-ref.html
+== clip-path-inset-001b.html clip-path-inset-001-ref.html
+== clip-path-inset-001c.html clip-path-inset-001-ref.html
+# Anti-aliasing behavior for masking and borders is different
+fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002a.html clip-path-inset-002-ref.html
+fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002b.html clip-path-inset-002-ref.html
+fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002c.html clip-path-inset-002-ref.html
+fuzzy-if(useDrawSnapshot,0-64,0-340) fuzzy-if(!useDrawSnapshot,0-1,0-60) == clip-path-inset-003.html clip-path-inset-003-ref.html
+
+fuzzy(0-1,0-17) == clip-path-stroke-001.html clip-path-stroke-001-ref.html
+
+== clip-path-transform-001.html clip-path-transform-001-ref.html
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml
new file mode 100644
index 0000000000..7751e5f1fb
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="position:absolute; top:0; left:0; clip-path: url(clipPath-html-01.xhtml#c1); width:500px; height:500px; background:lime;"></div>
+  <svg:svg height="0">
+    <!-- use an empty g to force clipPath-html-01.xhtml to load before onload -->
+    <svg:use xlink:href="clipPath-html-01.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg
new file mode 100644
index 0000000000..182b042172
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg
@@ -0,0 +1,8 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+ <rect x="250" y="0" width="250" height="500" fill="lime"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml
new file mode 100644
index 0000000000..d1f5135053
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:500px; height:500px; background:lime;"></div>
+  <svg:svg height="0">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+      <svg:rect x="0.5" y="0" width="0.5" height="1"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml
new file mode 100644
index 0000000000..433d5d471f
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(clipPath-html-02.xhtml#c1); width:500px; height:200px; background:lime;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:blue;"/>
+  </div>
+  <svg:svg height="0">
+    <!-- use an empty g to force clipPath-html-02.xhtml to load before onload -->
+    <svg:use xlink:href="clipPath-html-02.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg
new file mode 100644
index 0000000000..83065a0cd6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg
@@ -0,0 +1,9 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="0" y="0" width="500" height="200" fill="lime"/>
+  <rect x="0" y="200" width="500" height="120" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml
new file mode 100644
index 0000000000..8429e71c7a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:blue;"/>
+  </div>
+
+  <svg:svg height="0">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+      <svg:rect x="0" y="0" width="1" height="0.8"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml
new file mode 100644
index 0000000000..fb0d8e87cf
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(clipPath-html-03.xhtml#c1); width:500px; height:200px; background:lime;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:blue;"/>
+  </div>
+  <svg:svg height="0">
+    <!-- use an empty g to force clipPath-html-03.xhtml to load before onload -->
+    <svg:use xlink:href="clipPath-html-03.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg
new file mode 100644
index 0000000000..19cf5eb16b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg
@@ -0,0 +1,10 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="0" y="0" width="100" height="150" fill="lime"/>
+  <rect x="100" y="0" width="100" height="200" fill="lime"/>
+  <rect x="100" y="200" width="100" height="100" fill="blue"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml
new file mode 100644
index 0000000000..eb6a1edbcc
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:blue;"/>
+  </div>
+
+  <svg:svg height="0">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:clipPath id="c1">
+      <svg:rect x="0" y="0" width="100" height="150"/>
+      <svg:rect x="100" y="0" width="100" height="300"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml
new file mode 100644
index 0000000000..4f35f255bf
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+  <span class="unit"/><span class="unit"
+  /><span style="clip-path:url(clipPath-html-04.xhtml#c1); background:lime;"><span class="unit"/><span class="unit"
+  /></span>
+  <svg:svg height="0">
+    <!-- use an empty g to force clipPath-html-04.xhtml to load before onload -->
+    <svg:use xlink:href="clipPath-html-04.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml
new file mode 100644
index 0000000000..640997d4d2
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0; line-height:100px;">
+  <span style="display:inline-block; width:200px;"
+  /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span><br/>
+  <span style="display:inline-block; width:50px;"
+  /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml
new file mode 100644
index 0000000000..a516f1ff1e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml
@@ -0,0 +1,27 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+  <span class="unit"/><span class="unit"
+  /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit"
+  /></span>
+
+  <svg:svg height="0">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:clipPath id="c1">
+      <svg:rect x="50" y="0" width="200" height="200"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml
new file mode 100644
index 0000000000..6d4e7c8972
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+  <span class="unit"/><span class="unit"
+  /><span style="clip-path:url(clipPath-html-05.xhtml#c1); background:lime;"><span class="unit"/><span class="unit"
+  /></span>
+  <svg:svg height="0">
+    <!-- use an empty g to force clipPath-html-05.xhtml to load before onload -->
+    <svg:use xlink:href="clipPath-html-05.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml
new file mode 100644
index 0000000000..f6e7d26eca
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0; line-height:100px;">
+  <span style="display:inline-block; width:200px;"
+  /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span><br/>
+  <span style="display:inline-block; width:30px;"
+  /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml
new file mode 100644
index 0000000000..15a3be6b61
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml
@@ -0,0 +1,27 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:1px; }
+</style>
+</head>
+<body style="margin:0; width:350px; line-height:100px;">
+  <span class="unit"/><span class="unit"
+  /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit"
+  /></span>
+
+  <svg:svg height="0">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+      <svg:rect x="0.1" y="0" width="0.8" height="1"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
new file mode 100644
index 0000000000..339bc629a4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
@@ -0,0 +1,24 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:10px; }
+</style>
+</head>
+<body style="margin:0">
+  <span style="clip-path: url(clipPath-html-06.xhtml#c1);">
+    <span class="unit" style="background:lime;"></span>
+    <div style="height:200px; width:100px;"/>
+    <span class="unit" style="background:lime;"></span>
+  </span>
+  <svg:svg height="0" style="display: block">
+    <!-- use an empty g to force clipPath-html-06.xhtml to load before onload -->
+    <svg:use xlink:href="clipPath-html-06.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml
new file mode 100644
index 0000000000..747f8105ef
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:50px; height:10px; }
+</style>
+</head>
+<body style="margin:0">
+  <span>
+    <span class="unit"></span>
+    <div style="height:200px;"/>
+    <span class="unit" style="background:lime;"></span>
+  </span>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
new file mode 100644
index 0000000000..8008d576e5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
@@ -0,0 +1,29 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+.unit { display:inline-block; width:100px; height:10px; }
+</style>
+</head>
+<body style="margin:0">
+  <span style="clip-path: url(#c1);">
+    <span class="unit" style="background:lime;"></span>
+    <div style="height:200px; width:100px;"/>
+    <span class="unit" style="background:lime;"></span>
+  </span>
+
+  <svg:svg height="0" style="display: block">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+      <svg:rect x="0" y="0.5" width="0.5" height="0.5"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg
new file mode 100644
index 0000000000..4d7153968a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="100" y="100" width="100" height="100" fill="black"/>
+  <rect x="150" y="150" width="50" height="50" fill="yellow"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml
new file mode 100644
index 0000000000..8391ad01e6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+  <head>
+    <title>Test clip-path on outer-&lt;svg&gt; with border</title>
+    <style>
+
+html, body {
+  border: 0; margin: 0;
+}
+
+    </style>
+  </head>
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="200" height="200" clip-path="url(#cp)"
+         style="border: solid 100px black; margin: 50px;">
+
+      <clipPath id="cp">
+        <path d="M50,50 150,50 150,150 50,150 z"/>
+      </clipPath>
+
+      <rect width="100%" height="100%" fill="yellow"/>
+
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml
new file mode 100644
index 0000000000..3eb0dfa3c3
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+  <head>
+    <title>Test clip-path on &lt;div&gt; with border</title>
+    <style>
+
+html, body {
+  border: 0; margin: 0;
+}
+
+    </style>
+  </head>
+  <body>
+    <div style="clip-path: url(#cp); width: 200px; height: 200px; background: yellow; border: solid 100px black; margin: 50px;"></div>
+    <svg xmlns="http://www.w3.org/2000/svg" height="0">
+      <clipPath id="cp">
+        <path d="M50,50 150,50 150,150 50,150 z"/>
+      </clipPath>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml
new file mode 100644
index 0000000000..4f98941543
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:250px; height:250px; background:lime;"></div>
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
+      <svg:rect x="0.5" y="0" width="0.5" height="1"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml
new file mode 100644
index 0000000000..e1569f1f6c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml
@@ -0,0 +1,44 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test SVG clipPath clipping of transformed HTML elements</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 -->
+  <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 3px;
+  height: 3px;
+  transform: scale(100,100);
+  transform-origin: 0 0;
+}
+
+  </style>
+</head>
+<body bgcolor="lime">
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"
+       style="display:block; position:absolute;">
+    <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+      <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+    </clipPath>
+    <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+      <circle cx="0.5" cy="0.5" r="0.50" fill="white"/>
+    </clipPath>
+    <circle cx="150" cy="150" r="147" fill="red"/>
+  </svg>
+
+  <div style="background: red; clip-path: url(#cp1);"/>
+  <div style="background: lime; clip-path: url(#cp2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml
new file mode 100644
index 0000000000..a36782231e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml
@@ -0,0 +1,44 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test SVG clipPath clipping of transformed HTML elements</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 -->
+  <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+  position: absolute;
+  left: 50px;
+  top: 50px;
+  width: 150px;
+  height: 150px;
+  transform: scale(2,2);
+  transform-origin: 0 0;
+}
+
+  </style>
+</head>
+<body bgcolor="lime">
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"
+       style="display:block; position:absolute;">
+    <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+      <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+    </clipPath>
+    <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.01" fill="white"/>
+      <circle cx="0.5" cy="0.5" r="0.50" fill="white"/>
+    </clipPath>
+    <circle cx="200" cy="200" r="147" fill="red"/>
+  </svg>
+
+  <div style="background: red; clip-path: url(#cp1);"/>
+  <div style="background: lime; clip-path: url(#cp2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
new file mode 100644
index 0000000000..f28425ee07
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+  <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
+</head>
+<body>
+
+<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg systemLanguage="x"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
new file mode 100644
index 0000000000..e60477f112
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
@@ -0,0 +1,19 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+  <title>Test that using elements from conditional-failing outer 'svg' elements works</title>
+  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+  <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
+</head>
+<body>
+
+<svg:svg requiredExtensions="x"><svg:rect id="r" width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg><svg:use xlink:href="#r"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html b/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html
new file mode 100644
index 0000000000..5ca68b1f66
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+  <svg class="dark" width="400" height="110">
+    <rect width="300" height="100" style="fill:rgb(0,0,0);" />
+  </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html b/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html
new file mode 100644
index 0000000000..7b278d1b10
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .dark {
+      filter:  invert(1) url("#balance-color") ;
+    }
+  </style>
+</head>
+<body>
+
+  <svg class="dark" width="400" height="110">
+    <rect width="300" height="100" style="fill:rgb(255,255,255);" />
+  </svg>
+
+  <svg width="10" height="10">
+    <defs>
+      <filter id="balance-color">
+        <feColorMatrix type="matrix"
+        values="1 0 0 0 0   0 1 0 0 0   0 0 1 0 0   0 0 0 1 0">
+        </feColorMatrix>
+      </filter>
+    </defs>
+  </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
new file mode 100644
index 0000000000..213f713a59
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').setAttribute('requiredExtensions', 'x')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg id="a"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
new file mode 100644
index 0000000000..a2087c5da5
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').removeAttribute('requiredExtensions')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+<svg:svg id="a" requiredExtensions="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
new file mode 100644
index 0000000000..f042469e35
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').setAttribute('systemLanguage', 'x')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+<svg:svg id="a" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
new file mode 100644
index 0000000000..f82f3d510a
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
+  <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
+</head>
+<body onload="document.getElementById('a').setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')">
+
+<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
+<svg:svg id="a" requiredFeatures="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml
new file mode 100644
index 0000000000..cb6a72388e
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(filter-html-01.xhtml#f1)"/>
+  <svg:svg height="0">
+    <!-- use an empty g to force filter-html-01.xhtml to load before onload -->
+    <svg:use xlink:href="filter-html-01.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/filter-html-01-ref.svg b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg
new file mode 100644
index 0000000000..ecc3d4f9d6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg
@@ -0,0 +1,14 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <filter id="f1">
+    <feFlood flood-color="black" result="black"/>
+    <feComposite in="SourceAlpha" operator="in"/>
+    <feOffset dx="10" dy="10"/>
+    <feComposite in="SourceGraphic"/>
+  </filter>
+  <rect x="50" y="50" width="200" height="200" fill="lime" filter="url(#f1)"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/filter-html-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-01.xhtml
new file mode 100644
index 0000000000..8e048cb1ac
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-01.xhtml
@@ -0,0 +1,21 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+  <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(#f1)"/>
+  <svg:svg height="0">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:filter id="f1">
+      <svg:feFlood flood-color="black" result="black"/>
+      <svg:feComposite in="SourceAlpha" operator="in"/>
+      <svg:feOffset dx="10" dy="10"/>
+      <svg:feComposite in="SourceGraphic"/>
+    </svg:filter>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml b/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml
new file mode 100644
index 0000000000..1c222befa4
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+<style>
+  div{
+    left: 10px;
+    top: 10px;
+    position: absolute;
+    width : 100px;
+    height : 100px;
+    margin : 10px;
+    background : lime;
+  }
+</style>
+</head>
+<body style="margin:0">
+<div></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml
new file mode 100644
index 0000000000..7a6a4ab07c
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml
@@ -0,0 +1,35 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+<style>
+  div{
+    left: 10px;
+    top: 10px;
+    position: absolute;
+    width : 100px;
+    height : 100px;
+    margin : 10px;
+    background : red;
+    filter:url(#flood);
+ }
+</style>
+</head>
+<body style="margin:0">
+<script>
+  window.addEventListener('load',function(e){
+    var div = document.createElement('div');
+    document.body.appendChild(div);
+  },false);
+</script>
+
+<svg:svg width="0" height="0">
+  <svg:filter id="flood" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse">
+    <svg:feFlood flood-color="lime"/>
+  </svg:filter>
+</svg:svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml
new file mode 100644
index 0000000000..b84d4e9d74
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2">
+<body style="margin:0">
+  <div style="background:lime; width:100px; height:100px; margin:25px; filter:url(#f1)"/>
+  <svg:svg height="0">
+    <svg:filter id="f1">
+      <svg:feFlood flood-color="black" result="black"/>
+      <svg:feComposite in="SourceAlpha" operator="in"/>
+      <svg:feOffset dx="5" dy="5"/>
+      <svg:feComposite in="SourceGraphic"/>
+    </svg:filter>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml
new file mode 100644
index 0000000000..95d1a24588
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml
@@ -0,0 +1,14 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+  div {
+    width: 50px;
+    height: 100px;
+    background-color: rgba(0,0,255,0.5);
+  }
+</style>
+</head>
+<body>
+  <div/>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml
new file mode 100644
index 0000000000..d845463e01
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml
@@ -0,0 +1,20 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    mask: url(#m1);
+    background-color: blue;
+  }
+</style>
+</head>
+<body>
+  <div/>
+  <svg:svg height="0">
+    <svg:mask id="m1" style="mask-type:alpha">
+      <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff" fill-opacity="0.5"/>
+    </svg:mask>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml
new file mode 100644
index 0000000000..fc05430db0
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    opacity: 0.5;
+    mask:url(#m1);
+    background-color: blue;
+  }
+</style>
+</head>
+<body>
+  <div/>
+  <svg:svg height="0">
+    <svg:mask id="m1" style="mask-type:alpha">
+      <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff"/>
+    </svg:mask>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml
new file mode 100644
index 0000000000..e59812267d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    clip-path: url(#c1);
+    background-color: blue;
+    opacity: 0.5;
+  }
+</style>
+</head>
+<body>
+  <div/>
+  <svg:svg height="0">
+    <svg:clipPath id="c1">
+      <svg:rect x="0" y="0" width="50" height="100"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml
new file mode 100644
index 0000000000..e59812267d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml
@@ -0,0 +1,21 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    clip-path: url(#c1);
+    background-color: blue;
+    opacity: 0.5;
+  }
+</style>
+</head>
+<body>
+  <div/>
+  <svg:svg height="0">
+    <svg:clipPath id="c1">
+      <svg:rect x="0" y="0" width="50" height="100"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml
new file mode 100644
index 0000000000..83356f9336
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml
@@ -0,0 +1,25 @@
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    clip-path: url(#c1);
+    mask:url(#m1);
+    background-color: blue;
+    opacity: 0.5;
+  }
+</style>
+</head>
+<body>
+  <div/>
+  <svg:svg height="0">
+    <svg:mask id="m1" style="mask-type:alpha">
+      <svg:rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+    </svg:mask>
+    <svg:clipPath id="c1">
+      <svg:rect x="0" y="0" width="50" height="100"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml
new file mode 100644
index 0000000000..fba9fc4b0b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="mask: url(mask-html-01.xhtml#m1); width:500px; height:500px; background:lime;"></div>
+  <svg:svg height="0">
+    <!-- use an empty g to force mask-html-01.xhtml to load before onload -->
+    <svg:use xlink:href="mask-html-01.xhtml#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml
new file mode 100644
index 0000000000..1fc3ecf084
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml
@@ -0,0 +1,15 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="mask: url(mask-html-01-resource.svg#m1); width:500px; height:500px; background:lime;"></div>
+  <svg:svg height="0">
+    <!-- use an empty g to force mask-html-01-resource.svg to load before onload -->
+    <svg:use xlink:href="mask-html-01-resource.svg#empty" />
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-ref.svg b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg
new file mode 100644
index 0000000000..5afbf8f0c0
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg
@@ -0,0 +1,16 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <rect x="0" y="0" width="500" height="500" style="mask: url(#m1); fill: lime;"/>
+  <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+    <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+      <stop stop-color="white" offset="0"/>
+      <stop stop-color="white" stop-opacity="0" offset="1"/>
+    </linearGradient>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+    <rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/>
+  </mask>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01-resource.svg b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg
new file mode 100644
index 0000000000..5522555f80
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg
@@ -0,0 +1,33 @@
+<?xml-stylesheet
+   type="text/css"
+   href="data:text/css,circle { fill: white }" ?>
+<!-- test for javascript: execution: shouldn't happen -->
+<?xml-stylesheet
+   type="text/css"
+   href="javascript:'circle { fill: black }'" ?>
+<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+    /* XXXbz this should really be an external reference to mask-html-01.xhtml
+       but there's the little problem of "fill" not using nsReferencedElement
+       yet, so that's broken */
+    /* Test that media queries work on resource documents while we're here */
+    @media (min-resolution: 1dpi) {
+      rect { fill: url(#g); }
+    }
+  </style>
+  <!-- so that other documents can svg:use this one and force it to
+       load before onload -->
+  <g id="empty" />
+  <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+    <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+      <stop stop-color="white" offset="0"/>
+      <stop stop-color="white" stop-opacity="0" offset="1"/>
+    </linearGradient>
+    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="black"/>
+    <rect x="0.5" y="0" width="0.5" height="1" fill="black"/>
+  </mask>
+  <script type="application/ecmascript">
+    // Make sure scripts don't run
+    document.getElementById("m1").textContent = "";
+  </script>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/mask-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01.xhtml
new file mode 100644
index 0000000000..77c3b5c9c9
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-01.xhtml
@@ -0,0 +1,23 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<body style="margin:0">
+  <div style="mask: url(#m1); width:500px; height:500px; background:lime;"></div>
+  <svg:svg height="0">
+    <!-- so that other documents can svg:use this one and force it to
+         load before onload -->
+    <svg:g id="empty" />
+    <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+      <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+        <svg:stop stop-color="white" offset="0"/>
+        <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
+      </svg:linearGradient>
+      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+      <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/>
+    </svg:mask>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml
new file mode 100644
index 0000000000..bc89dfa723
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2">
+<body style="margin:0">
+  <div style="mask: url(#m1); width:250px; height:250px; background:lime;"></div>
+  <svg:svg height="0">
+    <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+      <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
+        <svg:stop stop-color="white" offset="0"/>
+        <svg:stop stop-color="white" stop-opacity="0" offset="1"/>
+      </svg:linearGradient>
+      <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/>
+      <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/>
+    </svg:mask>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml
new file mode 100644
index 0000000000..8e870b8627
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml
@@ -0,0 +1,15 @@
+<html reftest-zoom="2.0" xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<style>
+  div {
+    width: 50px;
+    height: 100px;
+    background-color: rgba(0,0,255,0.5);
+}
+</style>
+</head>
+<body>
+  <div/>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml
new file mode 100644
index 0000000000..b2df18034d
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml
@@ -0,0 +1,25 @@
+<html reftest-zoom="2.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<head>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    clip-path: url(#c1);
+    mask:url(#m1), url(#m1);
+    background-color: blue;
+    opacity: 0.5;
+  }
+</style>
+</head>
+<body>
+  <div/>
+  <svg:svg height="0">
+    <svg:mask id="m1" style="mask-type:alpha">
+      <svg:rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
+    </svg:mask>
+    <svg:clipPath id="c1">
+      <svg:rect x="0" y="0" width="50" height="100"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml
new file mode 100644
index 0000000000..1e1a2ed552
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml
@@ -0,0 +1,42 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test SVG masking of transformed HTML elements</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 -->
+  <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 3px;
+  height: 3px;
+  transform: scale(100,100);
+  transform-origin: 0 0;
+}
+
+  </style>
+</head>
+<body bgcolor="lime">
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"
+       style="display:block; position:absolute;">
+    <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+    </mask>
+    <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.5" fill="white"/>
+    </mask>
+    <circle cx="150" cy="150" r="147" fill="red"/>
+  </svg>
+
+  <div style="background: red; mask: url(#mask1);"/>
+  <div style="background: lime; mask: url(#mask2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml
new file mode 100644
index 0000000000..c83f5a3ea9
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml
@@ -0,0 +1,42 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test SVG masking of transformed HTML elements</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 -->
+  <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+div {
+  position: absolute;
+  left: 50px;
+  top: 50px;
+  width: 150px;
+  height: 150px;
+  transform: scale(2,2);
+  transform-origin: 0 0;
+}
+
+  </style>
+</head>
+<body bgcolor="lime">
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"
+       style="display:block; position:absolute;">
+    <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.48" fill="white"/>
+    </mask>
+    <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
+      <circle cx="0.5" cy="0.5" r="0.50" fill="white"/>
+    </mask>
+    <circle cx="200" cy="200" r="147" fill="red"/>
+  </svg>
+
+  <div style="background: red; mask: url(#mask1);"/>
+  <div style="background: lime; mask: url(#mask2);"/>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml
new file mode 100644
index 0000000000..66291d3bf6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml
@@ -0,0 +1,47 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test SVG patterning under transformed HTML elements</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 -->
+  <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+svg {
+  display: block;
+  position: absolute;
+}
+
+.scaled {
+  left: 1px;
+  top: 1px;
+  width: 3px;
+  height: 3px;
+  transform: scale(100,100);
+  transform-origin: 0 0;
+}
+
+  </style>
+</head>
+<body bgcolor="lime">
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+    <circle cx="151" cy="151" r="148" fill="red"/>
+  </svg>
+
+  <svg xmlns="http://www.w3.org/2000/svg" class="scaled">
+    <pattern id="redDot" width="1" height="1">
+      <circle cx="1.5" cy="1.5" r="1.48" fill="red"/>
+    </pattern>
+    <pattern id="limeDot" width="1" height="1">
+      <circle cx="1.5" cy="1.5" r="1.5" fill="lime"/>
+    </pattern>
+    <rect width="100%" height="100%" fill="url(#redDot)"/>
+    <rect width="100%" height="100%" fill="url(#limeDot)"/>
+  </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml
new file mode 100644
index 0000000000..f9182b272b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml
@@ -0,0 +1,47 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test SVG patterning under transformed HTML elements</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 -->
+  <style type="text/css">
+
+* { margin: 0; border: 0; padding: 0;}
+
+svg {
+  display: block;
+  position: absolute;
+}
+
+.scaled {
+  left: 50px;
+  top: 50px;
+  width: 150px;
+  height: 150px;
+  transform: scale(2,2);
+  transform-origin: 0 0;
+}
+
+  </style>
+</head>
+<body bgcolor="lime">
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350">
+    <circle cx="200" cy="200" r="147" fill="red"/>
+  </svg>
+
+  <svg xmlns="http://www.w3.org/2000/svg" class="scaled">
+    <pattern id="redDot" width="1" height="1">
+      <circle cx="75" cy="75" r="74" fill="red"/>
+    </pattern>
+    <pattern id="limeDot" width="1" height="1">
+      <circle cx="75" cy="75" r="75" fill="lime"/>
+    </pattern>
+    <rect width="100%" height="100%" fill="url(#redDot)"/>
+    <rect width="100%" height="100%" fill="url(#limeDot)"/>
+  </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/reftest.list b/layout/reftests/svg/svg-integration/reftest.list
new file mode 100644
index 0000000000..478a129aa6
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/reftest.list
@@ -0,0 +1,53 @@
+# clip-path tests
+include clip-path/reftest.list
+
+== clipPath-html-01.xhtml clipPath-html-01-ref.svg
+== clipPath-html-01-extref.xhtml clipPath-html-01-ref.svg
+== clipPath-html-02.xhtml clipPath-html-02-ref.svg
+== clipPath-html-02-extref.xhtml clipPath-html-02-ref.svg
+== clipPath-html-03.xhtml clipPath-html-03-ref.svg
+== clipPath-html-03-extref.xhtml clipPath-html-03-ref.svg
+== clipPath-html-04.xhtml clipPath-html-04-ref.xhtml
+== clipPath-html-04-extref.xhtml clipPath-html-04-ref.xhtml
+fuzzy(0-140,0-70) == clipPath-html-05.xhtml clipPath-html-05-ref.xhtml # Bug 776089
+fuzzy(0-140,0-70) == clipPath-html-05-extref.xhtml clipPath-html-05-ref.xhtml # Bug 776089
+fuzzy-if(Android,0-255,0-30) == clipPath-html-06.xhtml clipPath-html-06-ref.xhtml
+fuzzy-if(Android,0-255,0-30) == clipPath-html-06-extref.xhtml clipPath-html-06-ref.xhtml
+== clipPath-html-07.xhtml clipPath-html-07-ref.svg
+== clipPath-html-08.xhtml clipPath-html-07-ref.svg # reuse 07-ref.svg
+fails-if(useDrawSnapshot) == clipPath-html-zoomed-01.xhtml clipPath-html-01-ref.svg
+== clipPath-transformed-html-01.xhtml ../pass.svg
+== clipPath-transformed-html-02.xhtml ../pass.svg
+== css-and-svg-filter-01.html css-and-svg-filter-01-ref.html  
+== conditions-outer-svg-01.xhtml ../pass.svg
+== conditions-outer-svg-02.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-01.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-02.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-03.xhtml ../pass.svg
+== dynamic-conditions-outer-svg-04.xhtml ../pass.svg
+== filter-html-01.xhtml filter-html-01-ref.svg
+== filter-html-dynamic-01.xhtml filter-html-dynamic-01-ref.xhtml
+random-if(Android) == filter-html-01-extref.xhtml filter-html-01-ref.svg # Android: bug 1198380
+fails-if(useDrawSnapshot) == filter-html-zoomed-01.xhtml filter-html-01-ref.svg
+fuzzy(0-1,0-125414) == mask-html-01.xhtml mask-html-01-ref.svg
+fuzzy(0-1,0-125414) == mask-html-01-extref-01.xhtml mask-html-01-ref.svg
+== mask-html-01-extref-02.xhtml mask-html-01-ref.svg
+fuzzy(0-1,0-125414) fails-if(useDrawSnapshot) == mask-html-zoomed-01.xhtml mask-html-01-ref.svg
+== mask-transformed-html-01.xhtml ../pass.svg
+== mask-transformed-html-02.xhtml ../pass.svg
+fuzzy(0-1,0-5) == patterned-svg-under-transformed-html-01.xhtml ../pass.svg
+== patterned-svg-under-transformed-html-02.xhtml ../pass.svg
+
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01a.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01b.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01c.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01d.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-clipPath-opacity-01e.xhtml mask-clipPath-opacity-01-ref.xhtml
+fuzzy(0-1,0-5000) == mask-mask-clipPath-opacity-scale.xhtml mask-mask-clipPath-opacity-scale-ref.xhtml
+
+== transform-outer-svg-01.xhtml transform-outer-svg-01-ref.xhtml
+
+# box-decoration-break tests
+fuzzy-if(Android,0-4,0-10) == box-decoration-break-01.xhtml box-decoration-break-01-ref.xhtml
+fuzzy(0-119,0-16) == box-decoration-break-02.xhtml box-decoration-break-02-ref.xhtml
+fuzzy(0-67,0-238) == box-decoration-break-03.xhtml box-decoration-break-01-ref.xhtml
diff --git a/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml b/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml
new file mode 100644
index 0000000000..3fa609a94b
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test that the 'transform' attribute transforms our border too</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 -->
+</head>
+<body>
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="250" height="250">
+    <rect x="75" y="75" width="150" height="150" fill="none" stroke="black" stroke-width="50"/>
+    <rect x="125" y="125" width="50" height="50" fill="blue"/>
+  </svg>
+
+</body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml
new file mode 100644
index 0000000000..10484fbb97
--- /dev/null
+++ b/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml
@@ -0,0 +1,18 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Test that the 'transform' attribute transforms our border too</title>
+  <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 -->
+</head>
+<body>
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"
+       style="border: 50px solid black;" transform="translate(50,50)">
+    <rect x="25" y="25" width="50" height="50" fill="blue"/>
+  </svg>
+
+</body>
+</html>
-- 
cgit v1.2.3