From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 .../reftests/w3c-css/submitted/masking/blank.html  |   9 ++
 .../submitted/masking/clip-path-borderBox-1a.html  |  28 ++++++
 .../submitted/masking/clip-path-borderBox-1b.html  |  18 ++++
 .../submitted/masking/clip-path-borderBox-1c.html  |  30 ++++++
 .../submitted/masking/clip-path-contentBox-1a.html |  27 +++++
 .../submitted/masking/clip-path-contentBox-1b.html |  18 ++++
 .../submitted/masking/clip-path-contentBox-1c.html |  28 ++++++
 .../submitted/masking/clip-path-fillBox-1a.html    |  31 ++++++
 .../masking/clip-path-geometryBox-1-ref.html       |  14 +++
 .../masking/clip-path-geometryBox-2-ref.html       |  14 +++
 .../submitted/masking/clip-path-geometryBox-2.html |  27 +++++
 .../masking/clip-path-localRef-1-ref.html          |  27 +++++
 .../submitted/masking/clip-path-localRef-1.html    |  32 ++++++
 .../submitted/masking/clip-path-marginBox-1a.html  |  18 ++++
 .../masking/clip-path-mix-blend-mode-1-ref.html    |  29 ++++++
 .../masking/clip-path-mix-blend-mode-1.html        |  41 ++++++++
 .../submitted/masking/clip-path-paddingBox-1a.html |  27 +++++
 .../submitted/masking/clip-path-paddingBox-1b.html |  18 ++++
 .../submitted/masking/clip-path-paddingBox-1c.html |  29 ++++++
 .../submitted/masking/clip-path-strokeBox-1a.html  |  31 ++++++
 .../submitted/masking/clip-path-strokeBox-1b.html  |  17 ++++
 .../submitted/masking/clip-path-viewBox-1a.html    |  18 ++++
 .../submitted/masking/clip-path-viewBox-1b.html    |  18 ++++
 .../submitted/masking/clip-path-viewBox-1c.html    |  31 ++++++
 .../w3c-css/submitted/masking/mask-clip-1-ref.html |  42 ++++++++
 .../w3c-css/submitted/masking/mask-clip-1.html     |  57 +++++++++++
 .../submitted/masking/mask-composite-1-ref.html    |  33 ++++++
 .../submitted/masking/mask-composite-1a.html       |  51 ++++++++++
 .../submitted/masking/mask-composite-1b.html       |  51 ++++++++++
 .../submitted/masking/mask-composite-1c.html       |  56 +++++++++++
 .../submitted/masking/mask-composite-2-ref.html    |  39 +++++++
 .../submitted/masking/mask-composite-2a.html       |  51 ++++++++++
 .../submitted/masking/mask-composite-2b.html       |  51 ++++++++++
 .../submitted/masking/mask-composite-2c.html       |  59 +++++++++++
 .../submitted/masking/mask-image-1-ref.html        |  19 ++++
 .../w3c-css/submitted/masking/mask-image-1a.html   |  26 +++++
 .../w3c-css/submitted/masking/mask-image-1b.html   |  26 +++++
 .../w3c-css/submitted/masking/mask-image-1c.html   |  26 +++++
 .../w3c-css/submitted/masking/mask-image-1d.html   |  17 ++++
 .../submitted/masking/mask-image-2-ref.html        |  20 ++++
 .../w3c-css/submitted/masking/mask-image-2.html    |  31 ++++++
 .../submitted/masking/mask-image-3-ref.html        |  28 ++++++
 .../w3c-css/submitted/masking/mask-image-3a.html   |  33 ++++++
 .../w3c-css/submitted/masking/mask-image-3b.html   |  32 ++++++
 .../w3c-css/submitted/masking/mask-image-3c.html   |  32 ++++++
 .../w3c-css/submitted/masking/mask-image-3d.html   |  32 ++++++
 .../w3c-css/submitted/masking/mask-image-3e.html   |  42 ++++++++
 .../w3c-css/submitted/masking/mask-image-3f.html   |  35 +++++++
 .../w3c-css/submitted/masking/mask-image-3g.html   |  46 +++++++++
 .../w3c-css/submitted/masking/mask-image-3h.html   |  33 ++++++
 .../w3c-css/submitted/masking/mask-image-4a.html   |  26 +++++
 .../w3c-css/submitted/masking/mask-image-4b.html   |  31 ++++++
 .../submitted/masking/mask-image-5-ref.html        |  19 ++++
 .../w3c-css/submitted/masking/mask-image-5.html    |  26 +++++
 .../submitted/masking/mask-image-6-ref.html        |  25 +++++
 .../w3c-css/submitted/masking/mask-image-6.html    |  31 ++++++
 .../w3c-css/submitted/masking/mask-mode-a.html     |  60 +++++++++++
 .../w3c-css/submitted/masking/mask-mode-b.html     |  61 +++++++++++
 .../w3c-css/submitted/masking/mask-mode-ref.html   |  52 ++++++++++
 .../masking/mask-mode-to-mask-type-ref.html        |  63 ++++++++++++
 .../submitted/masking/mask-mode-to-mask-type.html  |  89 ++++++++++++++++
 .../submitted/masking/mask-opacity-1-ref.html      |  22 ++++
 .../w3c-css/submitted/masking/mask-opacity-1a.html |  28 ++++++
 .../w3c-css/submitted/masking/mask-opacity-1b.html |  32 ++++++
 .../w3c-css/submitted/masking/mask-opacity-1c.html |  27 +++++
 .../submitted/masking/mask-origin-1-ref.html       |  34 +++++++
 .../w3c-css/submitted/masking/mask-origin-1.html   |  48 +++++++++
 .../submitted/masking/mask-origin-2-ref.html       |  35 +++++++
 .../w3c-css/submitted/masking/mask-origin-2.html   |  77 ++++++++++++++
 .../submitted/masking/mask-position-1-ref.html     |  33 ++++++
 .../submitted/masking/mask-position-1a.html        |  39 +++++++
 .../submitted/masking/mask-position-1b.html        |  39 +++++++
 .../submitted/masking/mask-position-1c.html        |  39 +++++++
 .../submitted/masking/mask-position-2-ref.html     |  29 ++++++
 .../submitted/masking/mask-position-2a.html        |  34 +++++++
 .../submitted/masking/mask-position-2b.html        |  34 +++++++
 .../submitted/masking/mask-position-3-ref.html     |  29 ++++++
 .../submitted/masking/mask-position-3a.html        |  34 +++++++
 .../submitted/masking/mask-position-3b.html        |  34 +++++++
 .../submitted/masking/mask-position-4-ref.html     |  29 ++++++
 .../submitted/masking/mask-position-4a.html        |  34 +++++++
 .../submitted/masking/mask-position-4b.html        |  34 +++++++
 .../submitted/masking/mask-position-4c.html        |  34 +++++++
 .../submitted/masking/mask-position-4d.html        |  32 ++++++
 .../submitted/masking/mask-position-5-ref.html     |  38 +++++++
 .../w3c-css/submitted/masking/mask-position-5.html |  35 +++++++
 .../submitted/masking/mask-position-6-ref.html     |  30 ++++++
 .../w3c-css/submitted/masking/mask-position-6.html |  50 +++++++++
 .../submitted/masking/mask-position-7-ref.html     |  30 ++++++
 .../w3c-css/submitted/masking/mask-position-7.html |  50 +++++++++
 .../submitted/masking/mask-repeat-1-ref.html       |  49 +++++++++
 .../w3c-css/submitted/masking/mask-repeat-1.html   |  48 +++++++++
 .../submitted/masking/mask-repeat-2-ref.html       |  45 +++++++++
 .../w3c-css/submitted/masking/mask-repeat-2.html   |  43 ++++++++
 .../submitted/masking/mask-repeat-3-ref.html       |  40 ++++++++
 .../w3c-css/submitted/masking/mask-repeat-3.html   |  43 ++++++++
 .../submitted/masking/mask-size-auto-auto.html     |  35 +++++++
 .../masking/mask-size-auto-length-ref.html         |  27 +++++
 .../submitted/masking/mask-size-auto-length.html   |  34 +++++++
 .../submitted/masking/mask-size-auto-percent.html  |  34 +++++++
 .../submitted/masking/mask-size-auto-ref.html      |  27 +++++
 .../w3c-css/submitted/masking/mask-size-auto.html  |  35 +++++++
 .../masking/mask-size-contain-clip-border-ref.html |  27 +++++
 .../masking/mask-size-contain-clip-border.html     |  37 +++++++
 .../mask-size-contain-clip-padding-ref.html        |  35 +++++++
 .../masking/mask-size-contain-clip-padding.html    |  35 +++++++
 ...mask-size-contain-position-fifty-fifty-ref.html |  33 ++++++
 .../mask-size-contain-position-fifty-fifty.html    |  36 +++++++
 .../submitted/masking/mask-size-contain-ref.html   |  27 +++++
 .../submitted/masking/mask-size-contain.html       |  35 +++++++
 .../submitted/masking/mask-size-cover-ref.html     |  21 ++++
 .../w3c-css/submitted/masking/mask-size-cover.html |  29 ++++++
 .../submitted/masking/mask-size-length-auto.html   |  35 +++++++
 .../masking/mask-size-length-length-ref.html       |  27 +++++
 .../submitted/masking/mask-size-length-length.html |  35 +++++++
 .../masking/mask-size-length-percent-ref.html      |  27 +++++
 .../masking/mask-size-length-percent.html          |  35 +++++++
 .../submitted/masking/mask-size-length.html        |  35 +++++++
 .../submitted/masking/mask-size-percent-auto.html  |  35 +++++++
 .../masking/mask-size-percent-length.html          |  35 +++++++
 .../masking/mask-size-percent-percent-ref.html     |  27 +++++
 .../mask-size-percent-percent-stretch-ref.html     |  29 ++++++
 .../masking/mask-size-percent-percent-stretch.html |  35 +++++++
 .../masking/mask-size-percent-percent.html         |  35 +++++++
 .../submitted/masking/mask-size-percent.html       |  35 +++++++
 .../w3c-css/submitted/masking/reftest-stylo.list   |  85 ++++++++++++++++
 .../w3c-css/submitted/masking/reftest.list         | 112 +++++++++++++++++++++
 .../masking/support/50x100-opaque-blue.svg         |   4 +
 .../masking/support/50x50-opaque-blue.svg          |   4 +
 .../submitted/masking/support/blue-100x100.png     | Bin 0 -> 40279 bytes
 .../submitted/masking/support/blue-100x100.svg     |   4 +
 .../support/blue-100x50-transparent-100x50.png     | Bin 0 -> 237 bytes
 .../support/blue-100x50-transparent-100x50.svg     |   5 +
 .../masking/support/blue-luminance-100x100.svg     |   4 +
 .../submitted/masking/support/green-100x100.png    | Bin 0 -> 40279 bytes
 .../submitted/masking/support/green-100x100.svg    |   4 +
 .../masking/support/green-luminance-100x100.svg    |   4 +
 .../support/mask-half-transparent-100x100.svg      |   9 ++
 .../submitted/masking/support/red-100x100.png      | Bin 0 -> 40279 bytes
 .../submitted/masking/support/red-100x100.svg      |   4 +
 .../masking/support/red-luminance-100x100.svg      |   4 +
 .../support/transparent-100x50-blue-100x50.png     | Bin 0 -> 233 bytes
 .../support/transparent-100x50-blue-100x50.svg     |   5 +
 143 files changed, 4522 insertions(+)
 create mode 100644 layout/reftests/w3c-css/submitted/masking/blank.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-1d.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-2.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-3h.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-4a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-4b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-5.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-image-6.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-mode-a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-mode-b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-5.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-6.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-position-7.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-length.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
 create mode 100644 layout/reftests/w3c-css/submitted/masking/reftest-stylo.list
 create mode 100644 layout/reftests/w3c-css/submitted/masking/reftest.list
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/green-100x100.png
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/red-100x100.png
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png
 create mode 100644 layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg

(limited to 'layout/reftests/w3c-css/submitted/masking')

diff --git a/layout/reftests/w3c-css/submitted/masking/blank.html b/layout/reftests/w3c-css/submitted/masking/blank.html
new file mode 100644
index 000000000..abb1b5472
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/blank.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>Blank document</title>
+  <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<body>
+</body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html
new file mode 100644
index 000000000..ee48c8001
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path border-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an HTML element.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html
new file mode 100644
index 000000000..2c18099ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path border-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 15px; top: 10px;">
+      <rect x="35" y="40" width="100" height="100" fill="blue"
+            clip-path="circle(50%) border-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html
new file mode 100644
index 000000000..0eec4cc22
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-borderBox-1c.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path border-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path border-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) border-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html
new file mode 100644
index 000000000..fcbae31ac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path content-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an HTML element.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        width: 100px;
+        height: 100px;
+        padding: 40px;
+        clip-path: circle(farthest-side) content-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html
new file mode 100644
index 000000000..eab70f987
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path content-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path content-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <rect x="50" y="50" width="100" height="100" fill="blue"
+            clip-path="circle(50%) content-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html
new file mode 100644
index 000000000..16622dca8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-contentBox-1c.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path content-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path content-box works correctly or not.">
+  </head>
+  <style type="text/css">
+    svg {
+      position: absolute;
+      left: 10px;
+      top: 10px;
+      width: 100px;
+      height: 100px;
+      padding: 40px;
+      clip-path: circle(farthest-side) content-box;
+    }
+  </style>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html
new file mode 100644
index 000000000..ca850ec8b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-fillBox-1a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path fill-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path fill-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        margin: 10px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) fill-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue">
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html
new file mode 100644
index 000000000..add81e8df
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path geometry box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <circle cx="100" cy="100" r="50" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html
new file mode 100644
index 000000000..b9ee9ab63
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path geometry box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <polygon points="100,50 150,100 150,150 50,150 50,100" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html
new file mode 100644
index 000000000..4b93657e6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-geometryBox-2.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path margin-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-2-ref.html">
+    <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        background-color: blue;
+        width: 100px;
+        height: 100px;
+        margin: 50px;
+        clip-path: polygon(0% 75%, 50% 25%, 100% 75%) margin-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html
new file mode 100644
index 000000000..d605e046f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Reference for clip-path linked to local-ref URL</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <svg height="0" width="0">
+      <defs>
+        <clipPath id="c1">
+          <circle cy="110" cx="137" r="90" />
+        </clipPath>
+      </defs>
+    </svg>
+    <style>
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+        clip-path: url(#c1);
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html
new file mode 100644
index 000000000..e24afbcd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-localRef-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <head>
+    <base href="http://example.com">
+    <meta charset="utf-8">
+    <title>Testcase for clip-path linked to local-ref URL</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-localRef-1-ref.html">
+    <meta name="assert" content="Test checks after changing base URL, whether fragment URLs works correctly or not.">
+    <svg height="0" width="0">
+      <defs>
+        <clipPath id="c1">
+          <circle cy="110" cx="137" r="90" />
+        </clipPath>
+      </defs>
+    </svg>
+    <style>
+      div {
+        width: 300px;
+        height: 300px;
+        background-color: blue;
+        clip-path: url(#c1);
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html
new file mode 100644
index 000000000..6634c93f6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-marginBox-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path margin-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path margin-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 10px; top: 15px;">
+      <rect x="40" y="35" width="100" height="100" fill="blue"
+            clip-path="circle(50%) margin-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html
new file mode 100644
index 000000000..55e6fe2f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS clip-path reference</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.foreground {
+        position: absolute;
+        background-color: rgb(0,0,255);
+        z-index: 100;
+        width: 50px;
+        height: 50px;
+      }
+
+      div.background {
+        position: absolute;
+        background-color: rgb(0,255,255);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="foreground"></div>
+    <div class="background"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html
new file mode 100644
index 000000000..c895cdffc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-mix-blend-mode-1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path with mix-blend-mode</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-mix-blend-mode-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path works with mix-blend-mode correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.foreground {
+        background-color: rgb(255,0,255);
+        clip-path: url(#top_left);
+        z-index: 100;
+        mix-blend-mode: multiply;
+      }
+
+      div.background {
+        background-color: rgb(0,255,255);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="foreground"></div>
+    <div class="background"></div>
+    <svg height="0" width="0">
+      <defs>
+        <clipPath id="top_left">
+          <rect x="0" y="0" width="50" height="50"/>
+        </clipPath>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html
new file mode 100644
index 000000000..4dc5e1714
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path padding-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an HTML element.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 50px;
+        height: 50px;
+        padding: 25px;
+        clip-path: circle(farthest-side) padding-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html
new file mode 100644
index 000000000..717a6bfe1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path padding-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG element.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <rect x="50" y="50" width="100" height="100" fill="blue"
+            clip-path="circle(50%) padding-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html
new file mode 100644
index 000000000..0ec021634
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-paddingBox-1c.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path padding-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path padding-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 50px;
+        top: 50px;
+        background-color: blue;
+        width: 50px;
+        height: 50px;
+        padding: 25px;
+        clip-path: circle(farthest-side) padding-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html
new file mode 100644
index 000000000..a72f8b00e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path stroke-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        margin: 10px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) stroke-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html
new file mode 100644
index 000000000..ba81b5df7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-strokeBox-1b.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path stroke-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path stroke-box works correctly or not.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 0px; top: 0px;">
+      <rect x="60" y="60" width="80" height="80" fill="blue" stroke="blue" stroke-width="20" clip-path="circle(50%) stroke-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html
new file mode 100644
index 000000000..f1f816b2f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1a.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path view-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path view-box works correctly or not.">
+  </head>
+  <body>
+    <svg width="200" height="200" style="position: absolute; left: 10px; top: 10px;">
+      <rect x="20" y="20" width="135" height="135" fill="blue"
+            clip-path="circle(25% at calc(50% - 10px) calc(50% - 10px)) view-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html
new file mode 100644
index 000000000..08c91b84b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1b.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path view-box with viewbox</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path view-box with viewbox works correctly or not.">
+  </head>
+  <body>
+    <svg width="200" height="200" viewBox="50 50 100 100" preserveAspectRatio="none" style="position: absolute; left: 10px; top: 10px;">
+      <rect x="0" y="0" width="200" height="200" fill="blue"
+            clip-path="circle(25% at calc(50% - 5px) calc(50% - 5px)) view-box"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html
new file mode 100644
index 000000000..dd3cae8ef
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/clip-path-viewBox-1c.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path: clip path view-box</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path">
+    <link rel="match" href="clip-path-geometryBox-1-ref.html">
+    <meta name="assert" content="Test checks whether clip-path view-box works correctly or not. This test is for clip-path applied to an SVG  SVG element.">
+    <style type="text/css">
+      svg {
+        position: absolute;
+        left: 40px;
+        top: 40px;
+        background-color: blue;
+        width: 30px;
+        height: 30px;
+        margin: 10px;
+        padding: 10px;
+        border: solid blue 25px;
+        clip-path: circle(farthest-side) view-box;
+      }
+    </style>
+  </head>
+  <body>
+    <svg width="200" height="200">
+      <rect x="0" y="0" width="200" height="200" fill="blue"/>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
new file mode 100644
index 000000000..0f9197e1f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-clip reference</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        top: 10px;
+        background-color: purple;
+      }
+
+      div.border {
+        left: 10px;
+        margin: 1px 4px;
+        width: 60px;
+        height: 25px;
+      }
+
+      div.padding {
+        left: 110px;
+        margin: 9px 10px;
+        width: 52px;
+        height: 17px;
+      }
+
+      div.content {
+        left: 210px;
+        margin: 15px 13px;
+        width: 40px;
+        height: 11px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="color border"></div>
+    <div class="color padding"></div>
+    <div class="color content"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
new file mode 100644
index 000000000..c981536b8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-clip-1.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-clip: clip mask image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip">
+    <link rel="match" href="mask-clip-1-ref.html">
+    <meta name="assert" content="border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.">
+    <style type="text/css">
+      div {
+        /*
+         * content box: 40 x 20
+         * padding box: 52 x 38
+         * border  box: 60 x 50
+         * margin  box: 66 x 54
+         */
+        background-color: purple;
+        position: absolute;
+        top: 10px;
+        margin: 1px 2px 3px 4px;
+        border: solid transparent;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 40px;
+        height: 20px;
+      }
+
+      div.mask {
+        mask-size: 100% 100%;
+        mask-origin: border-box;
+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+      }
+
+      div.border {
+        left: 10px;
+        mask-clip: border-box;
+      }
+
+      div.padding {
+        left: 110px;
+        mask-clip: padding-box;
+      }
+
+      div.content {
+        left: 210px;
+        mask-clip: content-box;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer mask border"></div>
+    <div class="outer mask padding"></div>
+    <div class="outer mask content"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html
new file mode 100644
index 000000000..9249622cc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-composite reference</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.add {
+        left: 10px;
+        background-image: url(support/blue-100x50-transparent-100x50.svg);
+      }
+
+      div.intersect {
+        left: 230px;
+        background-image: url(support/blue-100x50-transparent-100x50.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="intersect"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html
new file mode 100644
index 000000000..795e52b8a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1a.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose vector image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-1-ref.html">
+    <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.svg),
+                    url(support/blue-100x50-transparent-100x50.svg);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html
new file mode 100644
index 000000000..be158c923
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose raster image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-1-ref.html">
+    <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.png),
+                    url(support/blue-100x50-transparent-100x50.png);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html
new file mode 100644
index 000000000..0eb098d1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-1c.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose svg mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-1-ref.html">
+    <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+    <svg height="0">
+      <mask id="rectMask" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(#rectMask),
+                    url(#rectMask);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html
new file mode 100644
index 000000000..cbf91daad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-composite reference</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.add {
+        left: 10px;
+        background-color: blue;
+      }
+
+      div.subtract {
+        left: 120px;
+        background-image: url(support/blue-100x50-transparent-100x50.svg);
+      }
+
+      div.exclude {
+        left: 340px;
+        background-color: blue;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html
new file mode 100644
index 000000000..7db800814
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2a.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose vector image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-2-ref.html">
+    <meta name="assert" content="Test checks that vector-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.svg),
+                    url(support/transparent-100x50-blue-100x50.svg);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html
new file mode 100644
index 000000000..3fd983fb1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2b.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose raster image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-2-ref.html">
+    <meta name="assert" content="Test checks that raster-mask-image can be composed correctly by different mask-composite value.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(support/blue-100x50-transparent-100x50.png),
+                    url(support/transparent-100x50-blue-100x50.png);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html b/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html
new file mode 100644
index 000000000..2b26e9ac6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-composite-2c.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-composite: compose SVG mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-composite">
+    <link rel="match" href="mask-composite-2-ref.html">
+    <meta name="assert" content="Test checks that svg-mask can be composed correctly by different mask-composite value.">
+    <svg height="0">
+      <mask id="rectMask1" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="50" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="rectMask2" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="0" width="100" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top:10px;
+        mask-image: url(#rectMask1),
+                    url(#rectMask2);
+      }
+
+      div.add {
+        left: 10px;
+        mask-composite: add;
+      }
+
+      div.subtract {
+        left: 120px;
+        mask-composite: subtract;
+      }
+
+      div.intersect {
+        left: 230px;
+        mask-composite: intersect;
+      }
+
+      div.exclude {
+        left: 340px;
+        mask-composite: exclude;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="add"></div>
+    <div class="subtract"></div>
+    <div class="intersect"></div>
+    <div class="exclude"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
new file mode 100644
index 000000000..280084406
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
new file mode 100644
index 000000000..62e00660a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether image as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-png {
+        mask-image: url(support/transparent-100x50-blue-100x50.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-png"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
new file mode 100644
index 000000000..9bf74102f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether SVG image as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-svg {
+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-svg"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
new file mode 100644
index 000000000..1328d06c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask element as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-svg-mask {
+        mask-image: url(support/mask-half-transparent-100x100.svg#mask);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-svg-mask"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html
new file mode 100644
index 000000000..11f0ae7d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1d.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-1-ref.html">
+    <meta name="assert" content="Test checks whether treat unresolvable mask as no-mask for a SVG element embedded in HTML document.">
+  </head>
+  <body>
+    <svg width="100" height="100">
+      <rect x="0" y="0" width="100" height="50" fill="purple" mask="url(#foo)"/>
+    </svg>
+  </body>
+</html>
\ No newline at end of file
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
new file mode 100644
index 000000000..db949934e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-image: linear-gradient(rgba(128,0,128,0), rgba(128,0,128,1));
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
new file mode 100644
index 000000000..a071cff3f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-2-ref.html">
+    <meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-gradient-1 {
+        mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */
+      }
+
+      div.mask-by-gradient-2 {
+        mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-gradient-1"></div>
+    <div class="mask-by-gradient-2"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
new file mode 100644
index 000000000..ec29e333c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: multiple SVG masks</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <svg height="0">
+      <mask id="mask" x="0" y="0" width="1" height="1">
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask: url(#mask);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
new file mode 100644
index 000000000..b3a6d3965
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3a.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: multiple SVG masks</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(#mask1), url(#mask2);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
new file mode 100644
index 000000000..bd805cde9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3b.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+        mask-repeat: no-repeat, repeat;
+        mask-position: 0 0, 0 0;
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
new file mode 100644
index 000000000..32bd4454d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3c.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(#mask1), url(support/50x50-opaque-blue.svg);
+        mask-repeat: repeat-x, no-repeat;
+        mask-position: 0 0, 0 0;
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
new file mode 100644
index 000000000..f1ef1be70
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3d.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="10%" y="10%" width="0.8" height="0.8" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask: url(#mask1), url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat, no-repeat;
+        mask-position: 0 0, 0 0;
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
new file mode 100644
index 000000000..15223e34d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3e.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: interleave SVG mask with image mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask and image as mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <circle cx="50" cy="50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div.outter {
+        margin: 0px;
+        padding: 0px;
+        width: 200px;
+        height: 200px;
+        transform: translate(-10px, -10px);
+      }
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg), url(#mask1);
+        mask-repeat: no-repeat, repeat;
+        mask-position: 0 0, 0 0;
+        /*mask: url(#mask1);*/
+        width: 100px;
+        height: 100px;
+        transform: translate(10px, 10px);
+      }
+    </style>
+
+  </head>
+  <body>
+    <div class="outter">
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
new file mode 100644
index 000000000..e925105ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3f.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether SVG mask layer can be positioned on box-shadow area correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: red;
+        mask-image: url(#mask1), url(#mask2);
+        box-shadow: 0 0 0 100px purple;
+        width: 100px;
+        height: 100px;
+        position: relative;
+        left: 100px;
+        top: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
new file mode 100644
index 000000000..1236c0c33
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3g.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: SVG masks apply on border area</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether apply transfrom to a SVG mask layer works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <rect x="-100" y="-100" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="-100" y="-100" width="300" height="300" maskUnits="userSpaceOnUse">
+        <circle cx="-50" cy="-50" r="25" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div.outter {
+        margin: 0px;
+        padding: 0px;
+        width: 200px;
+        height: 200px;
+        transform: translate(-10px, -20px);
+      }
+      div.inner {
+        background-color: red;
+        mask-image: url(#mask1), url(#mask2);
+        mask-repeat: no-repeat, no-repeat;
+        box-shadow: 0 0 0 100px purple;
+        position: relative;
+        width: 100px;
+        height: 100px;
+        left: 100px;
+        top: 100px;
+        transform: translate(10px, 20px);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outter">
+      <div class="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html b/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html
new file mode 100644
index 000000000..37608bfe2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-3h.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: clip-path in SVG mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-3-ref.html">
+    <meta name="assert" content="Test checks whether clip-path in SVG mask works correctly or not.">
+    <svg height="0">
+      <mask id="mask1" x="0" y="0" width="1" height="1" >
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+      <mask id="mask2" x="0" y="0" width="1" height="1" >
+        <rect x="25" y="25" width="50" height="50" style="stroke:none; fill: #ffffff" clip-path="circle(50% at 50% 50%)"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        mask-image: url(#mask1), url(#mask2);
+        width: 100px;
+        height: 100px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html
new file mode 100644
index 000000000..ae3ad76a2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-4a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: unresovlable mask url</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="blank.html">
+    <meta name="assert" content="Test checks non-existent url should be counted as an image layer of transparent black.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-png {
+        mask-image: url(non-existent.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-png"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html
new file mode 100644
index 000000000..ed0022a4c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-4b.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: unresovlable mask url</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="blank.html">
+    <meta name="assert" content="Test checks a mask reference to a none-mask SVG element should be counted as an image layer of transparent black.">
+    <svg height="0">
+      <clipPath id="clip1">
+        <circle cx="50" cy="50" r="25"/>
+      </clipPath>
+    </svg>
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.mask-by-reference {
+        mask-image: url(#clip1);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-reference"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html
new file mode 100644
index 000000000..19a251ef0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-5-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: data url mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 50px;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div/>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-5.html b/layout/reftests/w3c-css/submitted/masking/mask-image-5.html
new file mode 100644
index 000000000..d98ddf8de
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-5.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: data url mask</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-5-ref.html">
+    <meta name="assert" content="Test checks handling data url mask correctly.">
+    <style type="text/css">
+      div {
+        background-color: purple;
+        width: 50px;
+        height: 50px;
+      }
+      div.mask-by-data-url {
+        /* a 50x50 opaque blue rect */
+        mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjAiIHk9IjAiICB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIGZpbGw9ImJsdWUiIGZpbGwtb3BhY2l0eT0iMSIvPgo8L3N2Zz4K");
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-data-url"/>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html
new file mode 100644
index 000000000..d85e075fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-6-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask on inline element</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+        font-size: 100px;
+        line-height: 100px;
+      }
+
+      div.mask-by-png {
+        mask-image: url(support/transparent-100x50-blue-100x50.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="mask-by-png">A</div>
+    <div class="mask-by-png">B</div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-6.html b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
new file mode 100644
index 000000000..ac31e4cf4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask on inline element</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-image-6-ref.html">
+    <meta name="assert" content="Test checks whether mask on inline elemnt works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+      span {
+        font-size: 100px;
+        line-height: 100px;
+        mask-image: url(support/transparent-100x50-blue-100x50.png);
+        mask-position: center;
+        mask-repeat: repeat;
+      }
+
+    </style>
+  </head>
+  <body>
+    <div>
+      <span>A B</span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html
new file mode 100644
index 000000000..38977a0aa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-a.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-mode with vector image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+    <link rel="match" href="mask-mode-ref.html">
+    <meta name="assert" content="Test checks that mask an SVG image referenced by mask-image is correct with different mask mode.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.auto {
+        left: 10px;
+        mask-mode: match-source;
+        mask-image: url(support/blue-100x100.svg);
+      }
+
+      div.alpha {
+        left: 120px;
+        mask-mode: alpha;
+        mask-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance1 {
+        left: 230px;
+        mask-mode: luminance;
+        mask-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance2 {
+        left: 340px;
+        mask-mode: luminance;
+        mask-image: url(support/red-100x100.svg);
+      }
+
+      div.luminance3 {
+        left: 450px;
+        mask-mode: luminance;
+        mask-image: url(support/green-100x100.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="auto"></div>
+    <div class="alpha"></div>
+    <div class="luminance1"></div>
+    <div class="luminance2"></div>
+    <div class="luminance3"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html
new file mode 100644
index 000000000..e5c11e9bf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-b.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-mode with raster image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+    <link rel="match" href="mask-mode-ref.html">
+    <meta name="assert" content="Test checks that mask a PNG image referenced by mask-image is correct with different mask mode.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.auto {
+        left: 10px;
+        mask-mode: match-source;
+        mask-image: url(support/blue-100x100.png);
+      }
+
+      div.alpha {
+        left: 120px;
+        mask-mode: alpha;
+        mask-image: url(support/blue-100x100.png);
+      }
+
+      div.luminance1 {
+        left: 230px;
+        mask-mode: luminance;
+        mask-image: url(support/blue-100x100.png);
+      }
+
+      div.luminance2 {
+        left: 340px;
+        mask-mode: luminance;
+        mask-image: url(support/red-100x100.png);
+      }
+
+      div.luminance3 {
+        left: 450px;
+        mask-mode: luminance;
+        mask-image: url(support/green-100x100.png);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="auto"></div>
+    <div class="alpha"></div>
+    <div class="luminance1"></div>
+    <div class="luminance2"></div>
+    <div class="luminance3"></div>
+  </body>
+</html>
+
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html
new file mode 100644
index 000000000..0f7dbd571
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-mode reference</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: white;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.auto {
+        left: 10px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.alpha {
+        left: 120px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance1 {
+        left: 230px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.luminance2 {
+        left: 340px;
+        background-image: url(support/red-luminance-100x100.svg);
+      }
+
+      div.luminance3 {
+        left: 450px;
+        background-image: url(support/green-luminance-100x100.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="auto"></div>
+    <div class="alpha"></div>
+    <div class="luminance1"></div>
+    <div class="luminance2"></div>
+    <div class="luminance3"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html
new file mode 100644
index 000000000..2b5e1fd3e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS mask-mode reference</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.match-luminance {
+        left: 10px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.match-alpha {
+        left: 120px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.luminance-luminance {
+        top: 120px;
+        left: 10px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.luminance-alpha {
+        top: 120px;
+        left: 120px;
+        background-image: url(support/blue-luminance-100x100.svg);
+      }
+
+      div.alpha-luminance {
+        top: 230px;
+        left: 10px;
+        background-image: url(support/blue-100x100.svg);
+      }
+
+      div.alpha-alpha {
+        top: 230px;
+        left: 120px;
+        background-image: url(support/blue-100x100.svg);
+      }
+    </style>
+
+  </head>
+  <body>
+    <div class="match-luminance"></div>
+    <div class="match-alpha"></div>
+    <div class="luminance-luminance"></div>
+    <div class="luminance-alpha"></div>
+    <div class="alpha-luminance"></div>
+    <div class="alpha-alpha"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html
new file mode 100644
index 000000000..5c75ce71d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-mode-to-mask-type.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-mode with vector image</title>
+    <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#propdef-mask-mode">
+    <link rel="match" href="mask-mode-to-mask-type-ref.html">
+    <meta name="assert" content="Test checks the fallback logic between mask-mode and mask-type.">
+    <style type="text/css">
+      div {
+        background-color: blue;
+        position: absolute;
+        margin: 0px;
+        padding: 0px;
+        width: 100px;
+        height: 100px;
+        top: 10px;
+      }
+
+      div.match-luminance {
+        left: 10px;
+        mask-mode: match-source;
+        mask-image: url("#svg-luminance");
+      }
+
+      div.match-alpha {
+        left: 120px;
+        mask-mode: match-source;
+        mask-image: url("#svg-alpha");
+      }
+
+      div.luminance-luminance {
+        top: 120px;
+        left: 10px;
+        mask-mode: luminance;
+        mask-image: url("#svg-luminance");
+      }
+
+      div.luminance-alpha {
+        top: 120px;
+        left: 120px;
+        mask-mode: luminance;
+        mask-image: url("#svg-alpha");
+      }
+
+      div.alpha-luminance {
+        top: 230px;
+        left: 10px;
+        mask-mode: alpha;
+        mask-image: url("#svg-luminance");
+      }
+
+      div.alpha-alpha {
+        top: 230px;
+        left: 120px;
+        mask-mode: alpha;
+        mask-image: url("#svg-alpha");
+      }
+
+      #svg-luminance {
+        mask-type: luminance;
+      }
+
+      #svg-alpha {
+        mask-type: alpha;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="match-luminance"></div>
+    <div class="match-alpha"></div>
+    <div class="luminance-luminance"></div>
+    <div class="luminance-alpha"></div>
+    <div class="alpha-luminance"></div>
+    <div class="alpha-alpha"></div>
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <mask id="svg-luminance">
+          <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
+        </mask>
+        <mask id="svg-alpha">
+          <rect x="0" y="0" width="100%" height="100%" fill="blue"/>
+        </mask>
+      </defs>
+    </svg>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html
new file mode 100644
index 000000000..5def84f06
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask with opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 60px;
+        background-color: rgba(0,0,255,0.5);
+        width: 100px;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html
new file mode 100644
index 000000000..1bd42abfb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1a.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask with filter and opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-opacity-1-ref.html">
+    <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        background-color: rgb(255,255,0);
+        width: 100px;
+        height: 100px;
+        filter: invert(100%);
+        mask-image: url(support/blue-100x50-transparent-100x50.png);
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html
new file mode 100644
index 000000000..0de78f761
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1b.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: mask with opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-opacity-1-ref.html">
+    <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+    <svg height="0">
+      <mask id="myMask" x="0" y="0" width="100" height="100" >
+        <rect x="0" y="0" width="50" height="50" style="stroke:none; fill: #ffffff"/>
+      </mask>
+    </svg>
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        background-color: rgb(0,0,255);
+        width: 100px;
+        height: 100px;
+        mask-image: url(support/blue-100x50-transparent-100x50.png);
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html
new file mode 100644
index 000000000..1673d7c4e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-opacity-1c.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-image: filter with opacity</title>
+    <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
+    <link rel="match" href="mask-opacity-1-ref.html">
+    <meta name="assert" content="Test checks whether apply opacity to masked element correctly or not.">
+    <style type="text/css">
+      div {
+        position: absolute;
+        left: 10px;
+        top: 60px;
+        background-color: rgb(255,255,0);
+        width: 100px;
+        height: 50px;
+        filter: invert(100%);
+        opacity: 0.5;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
new file mode 100644
index 000000000..df7e684d2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+        position: relative;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+        position: absolute;
+      }
+
+      #border { left: 4px; top: 1px; }
+      #padding { left: 10px; top: 9px; }
+      #content { left: 13px; top: 15px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="padding"></div></div>
+    <div class="outer"><div class="inner" id="content"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
new file mode 100644
index 000000000..3788a5591
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
+    <link rel="match" href="mask-origin-1-ref.html">
+    <meta name="assert" content="Test checks whether setting mask position area works correctly or not.">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      div.inner {
+        /*
+         * content box: 60 x 60
+         * padding box: 72 x 78
+         * border  box: 80 x 90
+         * margin  box: 86 x 94
+         */
+        margin: 1px 2px 3px 4px;
+        border: solid transparent;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 60px;
+        height: 60px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+      }
+
+      #border { mask-origin: border-box; }
+      #padding { mask-origin: padding-box; }
+      #content { mask-origin: content-box; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner" id="border"></div></div>
+    <div class="outer"><div class="inner" id="padding"></div></div>
+    <div class="outer"><div class="inner" id="content"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
new file mode 100644
index 000000000..bbb5ef2c4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 125px;
+        height: 125px;
+        position: relative;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+        position: absolute;
+      }
+
+      #pos-left-auto { left: 0px; top: 22px; }
+      #pos-left-bottom { left: 0px; top: 44px; }
+      #pos-right-top { left: 36px; top: 0px; }
+      #pos-right-bottom { left: 36px; top: 44px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="pos-left-auto"></div></div>
+    <div class="outer"><div class="inner" id="pos-left-bottom"></div></div>
+    <div class="outer"><div class="inner" id="pos-right-top"></div></div>
+    <div class="outer"><div class="inner" id="pos-right-bottom"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
new file mode 100644
index 000000000..90ee89b15
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-origin-2.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-origin: mask positioning area</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
+    <link rel="match" href="mask-origin-2-ref.html">
+    <meta name="assert" content="Test checks whether setting mask origin to margin-box works correctly or not.">
+    <style type="text/css">
+      div.outer {
+        border: 1px solid black;
+        width: 125px;
+        height: 125px;
+      }
+
+      div.inner {
+        /*
+         * content box: 60 x 60
+         * padding box: 72 x 78
+         * border  box: 80 x 90
+         * margin  box: 86 x 94
+         */
+        margin: 1px 2px 3px 4px;
+        border: solid red;
+        border-width: 8px 2px 4px 6px;
+        padding: 6px 9px 12px 3px;
+        width: 60px;
+        height: 60px;
+        position: relative;
+        background-color: blue;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-origin: margin-box;
+      }
+
+      div.overflow {
+        position: absolute;
+        left: -10px;
+        top: -9px;
+        border: solid transparent;
+        border-width: 15px 13px 19px 13px;
+        width: 60px;
+        height: 60px;
+        background-color: purple;
+      }
+
+      #pos-left-auto { mask-position: left; }
+      #pos-left-bottom { mask-position: left bottom; }
+      #pos-right-top { mask-position: right top; }
+      #pos-right-bottom { mask-position: right bottom; }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner" id="pos-left-auto">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-left-bottom">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-right-top">
+        <div class="overflow"></div>
+      </div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-right-bottom">
+        <div class="overflow"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
new file mode 100644
index 000000000..e323bd352
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        border: 1px solid black;
+      }
+
+      div.inner {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+
+      #inner1 { right: 10px; bottom: 35px; }
+      #inner2 { right: 30px; bottom: 25px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
new file mode 100644
index 000000000..cee15ee71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1a.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: right 20% bottom 70%; }
+      #inner2 { mask-position: bottom 70% right 20%; }
+      #inner3 { mask-position: right 30px bottom 25px; }
+      #inner4 { mask-position: bottom 25px right 30px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
new file mode 100644
index 000000000..669810e61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1b.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: left 40px top 15px; }
+      #inner2 { mask-position: top 30% left 80%; }
+      #inner3 { mask-position: left 20px top 25px }
+      #inner4 { mask-position: top 25px left 20px; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
new file mode 100644
index 000000000..9a1671c3d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-1c.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-1-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 { mask-position: left 80% bottom 70%; }
+      #inner2 { mask-position: right 20% top 30%; }
+      #inner3 { mask-position: bottom 50% left 40%; }
+      #inner4 { mask-position: right 60% top 50%; }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="inner1"></div></div>
+    <div class="outer"><div class="inner" id="inner2"></div></div>
+    <div class="outer"><div class="inner" id="inner3"></div></div>
+    <div class="outer"><div class="inner" id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
new file mode 100644
index 000000000..46be4b8b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 20px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
new file mode 100644
index 000000000..d8427338d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-2-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left 40% bottom 60%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
new file mode 100644
index 000000000..b5f7b3105
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-2b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-2-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: 40% 40%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
new file mode 100644
index 000000000..dd2630356
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 25px;
+        margin-top: 10px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
new file mode 100644
index 000000000..724a1e3ab
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-3-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: center bottom 80%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
new file mode 100644
index 000000000..742a65ea1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-3b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-3-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: center 20%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
new file mode 100644
index 000000000..7ddf68b28
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      #inner {
+        margin-left: 0px;
+        margin-top: 25px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
new file mode 100644
index 000000000..9d17692e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4a.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left center;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
new file mode 100644
index 000000000..9b46546d3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
new file mode 100644
index 000000000..70959c098
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4c.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: left bottom 50%;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html b/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
new file mode 100644
index 000000000..e5dce03b4
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-4d.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-4-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask: url(support/50x50-opaque-blue.svg) left no-repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
new file mode 100644
index 000000000..dc8c9ecb9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-5-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 120px;
+        height: 120px;
+      }
+
+      #inner1 {
+        margin-left: 35px;
+        margin-top: 0px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+
+      #inner2 {
+        margin-left: 35px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner1"></div>
+      <div id="inner2"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-5.html b/layout/reftests/w3c-css/submitted/masking/mask-position-5.html
new file mode 100644
index 000000000..295402263
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-5.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-5-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 120px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-position: top, bottom;
+        mask-repeat: no-repeat, no-repeat;
+        mask-image: url(support/50x50-opaque-blue.svg),
+                    url(support/50x50-opaque-blue.svg);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
new file mode 100644
index 000000000..b94527eb0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-6-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      .inner {
+        margin-left: 20px;
+        margin-top: 50px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-6.html b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
new file mode 100644
index 000000000..e1d9eca55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-6.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-6-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      .outer {
+        border: 1px solid black;
+      }
+
+      .outer > div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 {
+        mask-position: left 20px bottom;
+      }
+
+      #inner2 {
+        mask-position: left 40% bottom;
+      }
+
+      #inner3 {
+        mask-position: right 60% bottom;
+      }
+
+      #inner4 {
+        mask-position: right 30px bottom;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div id="inner1"></div></div>
+    <div class="outer"><div id="inner2"></div></div>
+    <div class="outer"><div id="inner3"></div></div>
+    <div class="outer"><div id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
new file mode 100644
index 000000000..c3c8d85eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-7-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: position mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      .outer {
+        border: 1px solid black;
+        width: 100px;
+        height: 100px;
+      }
+
+      .inner {
+        margin-left: 50px;
+        margin-top: 20px;
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-position-7.html b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
new file mode 100644
index 000000000..30e9a7581
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-position-7.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-position: mask positioning</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">
+    <link rel="match" href="mask-position-7-ref.html">
+    <meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 100px;
+        height: 100px;
+      }
+
+      .outer {
+        border: 1px solid black;
+      }
+
+      .outer > div {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+      }
+
+      #inner1 {
+        mask-position: right top 40%;
+      }
+
+      #inner2 {
+        mask-position: right top 20px;
+      }
+
+      #inner3 {
+        mask-position: right bottom 60%;
+      }
+
+      #inner4 {
+        mask-position: right bottom 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div id="inner1"></div></div>
+    <div class="outer"><div id="inner2"></div></div>
+    <div class="outer"><div id="inner3"></div></div>
+    <div class="outer"><div id="inner4"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
new file mode 100644
index 000000000..01ed86d12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 128px;
+        height: 128px;
+        position: relative;
+        border: 1px solid black;
+      }
+
+      .color {
+        background-color: purple;
+      }
+
+      #default {
+        position: absolute;
+        width: 50px; height: 50px;
+      }
+
+      #repeat-x {
+        position: absolute;
+        width: 100%; height: 50px;
+      }
+
+      #repeat-y {
+        position: absolute;
+        width: 50px; height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer color"></div>
+    <div class="outer">
+      <div class="color" id="default"></div>
+    </div>
+    <div class="outer color"></div>
+    <div class="outer">
+      <div class="color" id="repeat-x"></div>
+    </div>
+    <div class="outer">
+      <div class="color" id="repeat-y"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
new file mode 100644
index 000000000..a7fc586fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-1-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 128px;
+        height: 128px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-position: left top;
+      }
+
+      #no-repeat {
+        mask-repeat: no-repeat no-repeat;
+      }
+      #repeat {
+        mask-repeat: repeat repeat;
+      }
+      #repeat-x {
+        mask-repeat: repeat no-repeat;
+      }
+      #repeat-y {
+        mask-repeat: no-repeat repeat;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner"></div></div>
+    <div class="outer"><div class="inner" id="no-repeat"></div></div>
+    <div class="outer"><div class="inner" id="repeat"></div></div>
+    <div class="outer"><div class="inner" id="repeat-x"></div></div>
+    <div class="outer"><div class="inner" id="repeat-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
new file mode 100644
index 000000000..fa386cdac
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 128px;
+        height: 128px;
+        position: relative;
+        border: 1px solid black;
+      }
+
+      div.inner {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        background-color: purple;
+      }
+
+      #pos-top-left { left: 0; top: 0; }
+      #pos-top-right { right: 0; top: 0; }
+      #pos-bottom-left { left: 0; bottom: 0; }
+      #pos-bottom-right { right: 0; bottom: 0; }
+    </style>
+  </head>
+  <body>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+      <div class="inner" id="pos-bottom-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-top-right"></div>
+    </div>
+    <div class="outer">
+      <div class="inner" id="pos-top-left"></div>
+      <div class="inner" id="pos-bottom-left"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
new file mode 100644
index 000000000..e349239fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-2-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 128px;
+        height: 128px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-position: left top;
+      }
+
+      #space {
+        mask-repeat: space;
+      }
+      #space-x {
+        mask-repeat: space no-repeat;
+      }
+      #space-y {
+        mask-repeat: no-repeat space;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="space"></div></div>
+    <div class="outer"><div class="inner" id="space-x"></div></div>
+    <div class="outer"><div class="inner" id="space-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
new file mode 100644
index 000000000..4d4b869ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div.outer {
+        width: 150px;
+        height: 150px;
+        border: 1px solid black;
+      }
+
+      .color {
+        background-color: purple;
+      }
+
+      #round {
+        width: 150px;
+        height: 150px;
+      }
+
+      #round-x {
+        width: 150px;
+        height: 50px;
+      }
+
+      #round-y {
+        width: 50px;
+        height: 150px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="color" id="round"></div></div>
+    <div class="outer"><div class="color" id="round-x"></div></div>
+    <div class="outer"><div class="color" id="round-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
new file mode 100644
index 000000000..cb950d4f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-repeat-3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-repeat: repeated mask layer image</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-repeat">
+    <link rel="match" href="mask-repeat-3-ref.html">
+    <meta name="assert" content="Test checks whether repeated mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 150px;
+        height: 150px;
+      }
+
+      div.outer {
+        border: 1px solid black;
+      }
+
+      div.inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-position: left top;
+      }
+
+      #round {
+        mask-repeat: round;
+      }
+      #round-x {
+        mask-repeat: round no-repeat;
+      }
+      #round-y {
+        mask-repeat: no-repeat round;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="outer"><div class="inner" id="round"></div></div>
+    <div class="outer"><div class="inner" id="round-x"></div></div>
+    <div class="outer"><div class="inner" id="round-y"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
new file mode 100644
index 000000000..01d55f962
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html
new file mode 100644
index 000000000..aa2123192
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 20px;
+        height: 20px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
new file mode 100644
index 000000000..5ef49cc61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-length.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
new file mode 100644
index 000000000..f2644bb1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-percent.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto 15.625%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html
new file mode 100644
index 000000000..73e3df270
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 50px;
+        height: 50px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
new file mode 100644
index 000000000..6560a81ee
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-auto-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html
new file mode 100644
index 000000000..afbeb72f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
new file mode 100644
index 000000000..a04557639
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-border.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-clip-border-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        border: 20px solid transparent;
+        width: 24px;
+        height: 88px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-clip: border-box;
+        mask-origin: border-box;
+        mask-size: contain;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html
new file mode 100644
index 000000000..041e48d03
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        border: 20px solid white;
+        width: 24px;
+        height: 88px;
+      }
+
+      #innermost {
+        width: 24px;
+        height: 24px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner">
+        <div id="innermost"></div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
new file mode 100644
index 000000000..4f321d9c5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-clip-padding.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-clip-padding-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        background-color: purple;
+        border: 20px solid transparent;
+        width: 24px;
+        height: 88px;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-clip: padding-box;
+        mask-origin: padding-box;
+        mask-size: contain;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"><div id="inner"></div></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html
new file mode 100644
index 000000000..50ab373eb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner1 {
+        width: 64px;
+        height: 32px;
+      }
+
+      #inner2 {
+        width: 64px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner1"></div>
+      <div id="inner2"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html
new file mode 100644
index 000000000..fcae5ba0e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-position-fifty-fifty.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-position-fifty-fifty-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: contain;
+        mask-position: 50% 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html
new file mode 100644
index 000000000..a7346bfcb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 10px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 64px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
new file mode 100644
index 000000000..19fc42d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-contain.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-contain-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: contain;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html
new file mode 100644
index 000000000..961019bf1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-cover-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 10px solid transparent;
+        width: 64px;
+        height: 128px;
+        background-clip: content-box;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
new file mode 100644
index 000000000..171e11805
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-cover.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-cover-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      #outer {
+        border: 10px solid black;
+        width: 64px;
+        height: 128px;
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-origin: content-box;
+        mask-clip: content-box;
+        mask-size: cover;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer"></div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
new file mode 100644
index 000000000..7152f6ff9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 32px auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html
new file mode 100644
index 000000000..5411da9f8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 32px;
+        height: 64px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
new file mode 100644
index 000000000..f9cf2cb6b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-length.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 32px 64px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html
new file mode 100644
index 000000000..26195541d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 16px;
+        height: 32px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
new file mode 100644
index 000000000..ba5bbbc55
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length-percent.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 16px 25%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-length.html
new file mode 100644
index 000000000..961357e12
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-length.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-length-length-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x100-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
new file mode 100644
index 000000000..603346d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-auto.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50% auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
new file mode 100644
index 000000000..4ac9c8e81
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-length.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50% 32px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html
new file mode 100644
index 000000000..96a3d1bdc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      #outer {
+        border: 1px solid black;
+        width: 64px;
+        height: 128px;
+      }
+
+      #inner {
+        width: 32px;
+        height: 32px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html
new file mode 100644
index 000000000..2c023ec13
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <style type="text/css">
+      div {
+        width: 60px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        height: 60px;
+        background-color: purple;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html
new file mode 100644
index 000000000..69f89b8a9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent-stretch.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-stretch-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 60px;
+        height: 120px;
+      }
+
+      #outer {
+        border: 10px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 100% 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
new file mode 100644
index 000000000..7b04d9b6d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent-percent.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50% 25%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
new file mode 100644
index 000000000..2e056df52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/mask-size-percent.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Masking: mask-size: mask layer size</title>
+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-size">
+    <link rel="match" href="mask-size-percent-percent-ref.html">
+    <meta name="assert" content="Test checks whether sizing mask layer works correctly or not.">
+    <style type="text/css">
+      div {
+        width: 64px;
+        height: 128px;
+      }
+
+      #outer {
+        border: 1px solid black;
+      }
+
+      #inner {
+        background-color: purple;
+        mask-image: url(support/50x50-opaque-blue.svg);
+        mask-repeat: no-repeat;
+        mask-position: left top;
+        mask-size: 50%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="outer">
+      <div id="inner"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list
new file mode 100644
index 000000000..bc897987e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/reftest-stylo.list
@@ -0,0 +1,85 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# All mask properties test cases are meant to be failed
+# until bug 1251161 is fixed, which means enabling mask shorthand.
+# To enable it in compile time, refer to bug 1243734
+
+# mask-composite test cases
+== mask-composite-1a.html mask-composite-1a.html
+== mask-composite-1b.html mask-composite-1b.html
+== mask-composite-1c.html mask-composite-1c.html
+== mask-composite-2a.html mask-composite-2a.html
+== mask-composite-2b.html mask-composite-2b.html
+== mask-composite-2c.html mask-composite-2c.html
+
+# mask-mode test cases
+== mask-mode-a.html mask-mode-a.html
+== mask-mode-b.html mask-mode-b.html
+== mask-mode-to-mask-type.html mask-mode-to-mask-type.html
+
+# mask-image test cases
+== mask-image-1a.html mask-image-1a.html
+== mask-image-1b.html mask-image-1b.html
+== mask-image-1c.html mask-image-1c.html
+== mask-image-2.html mask-image-2.html
+== mask-image-3a.html mask-image-3a.html
+== mask-image-3b.html mask-image-3b.html
+== mask-image-3c.html mask-image-3c.html
+== mask-image-3d.html mask-image-3d.html
+== mask-image-3e.html mask-image-3e.html
+== mask-image-3f.html mask-image-3f.html
+== mask-image-3g.html mask-image-3g.html
+== mask-image-4a.html mask-image-4a.html
+== mask-image-4b.html mask-image-4b.html
+
+# mask-clip test cases
+== mask-clip-1.html mask-clip-1.html
+
+# mask-position test cases
+== mask-position-1a.html mask-position-1a.html
+== mask-position-1b.html mask-position-1b.html
+== mask-position-1c.html mask-position-1c.html
+== mask-position-2a.html mask-position-2a.html
+== mask-position-2b.html mask-position-2b.html
+== mask-position-3a.html mask-position-3a.html
+== mask-position-3b.html mask-position-3b.html
+== mask-position-4a.html mask-position-4a.html
+== mask-position-4b.html mask-position-4b.html
+== mask-position-4c.html mask-position-4c.html
+== mask-position-4d.html mask-position-4d.html
+== mask-position-5.html mask-position-5.html
+== mask-position-6.html mask-position-6.html
+== mask-position-7.html mask-position-7.html
+
+# mask-repeat test cases
+== mask-repeat-1.html mask-repeat-1.html
+# bug 1258623
+== mask-repeat-2.html mask-repeat-2.html
+# bug 1258626
+== mask-repeat-3.html mask-repeat-3.html
+# bug 1258626
+
+# mask-origin test cases
+== mask-origin-1.html mask-origin-1.html
+# bug 1258286
+== mask-origin-2.html mask-origin-2.html
+# bug 1260094
+
+# mask-size test cases
+== mask-size-auto.html mask-size-auto.html
+== mask-size-auto-auto.html mask-size-auto-auto.html
+== mask-size-auto-length.html mask-size-auto-length.html
+== mask-size-auto-percent.html mask-size-auto-percent.html
+== mask-size-contain-clip-border.html mask-size-contain-clip-border.html
+== mask-size-contain-clip-padding.html mask-size-contain-clip-padding.html
+== mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty.html
+== mask-size-contain.html mask-size-contain.html
+== mask-size-cover.html mask-size-cover.html
+== mask-size-length.html mask-size-length.html
+== mask-size-length-auto.html mask-size-length-auto.html
+== mask-size-length-length.html mask-size-length-length.html
+== mask-size-length-percent.html mask-size-length-percent.html
+== mask-size-percent.html mask-size-percent.html
+== mask-size-percent-auto.html mask-size-percent-auto.html
+== mask-size-percent-length.html mask-size-percent-length.html
+== mask-size-percent-percent.html mask-size-percent-percent.html
+== mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch.html
diff --git a/layout/reftests/w3c-css/submitted/masking/reftest.list b/layout/reftests/w3c-css/submitted/masking/reftest.list
new file mode 100644
index 000000000..0cb5611c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
@@ -0,0 +1,112 @@
+# For those test items with failure type fuzzy-if added, please refer to bug 1231643#c10.
+
+# mask-composite test cases
+fails == mask-composite-1a.html mask-composite-1-ref.html
+fails == mask-composite-1b.html mask-composite-1-ref.html
+fails == mask-composite-1c.html mask-composite-1-ref.html
+fails == mask-composite-2a.html mask-composite-2-ref.html
+fails == mask-composite-2b.html mask-composite-2-ref.html
+fails == mask-composite-2c.html mask-composite-2-ref.html
+
+# mask-mode test cases
+fails == mask-mode-a.html mask-mode-ref.html
+fails == mask-mode-b.html mask-mode-ref.html
+fails == mask-mode-to-mask-type.html mask-mode-to-mask-type-ref.html
+
+# mask-image test cases
+fails == mask-image-1a.html mask-image-1-ref.html
+fails == mask-image-1b.html mask-image-1-ref.html
+fails == mask-image-1c.html mask-image-1-ref.html
+== mask-image-1d.html mask-image-1-ref.html
+fails == mask-image-2.html mask-image-2-ref.html
+fails == mask-image-3a.html mask-image-3-ref.html
+fails == mask-image-3b.html mask-image-3-ref.html
+fails == mask-image-3c.html mask-image-3-ref.html
+fails == mask-image-3d.html mask-image-3-ref.html
+fails == mask-image-3e.html mask-image-3-ref.html
+fails == mask-image-3f.html mask-image-3-ref.html
+fails == mask-image-3g.html mask-image-3-ref.html
+fails == mask-image-3h.html mask-image-3-ref.html
+fails == mask-image-4a.html blank.html
+fails == mask-image-4b.html blank.html
+== mask-image-5.html mask-image-5-ref.html
+== mask-image-6.html mask-image-6-ref.html
+
+# mask-clip test cases
+fails == mask-clip-1.html mask-clip-1-ref.html
+
+# mask-position test cases
+fails == mask-position-1a.html mask-position-1-ref.html
+fails == mask-position-1b.html mask-position-1-ref.html
+fails == mask-position-1c.html mask-position-1-ref.html
+fails == mask-position-2a.html mask-position-2-ref.html
+fails == mask-position-2b.html mask-position-2-ref.html
+fails == mask-position-3a.html mask-position-3-ref.html
+fails == mask-position-3b.html mask-position-3-ref.html
+fails == mask-position-4a.html mask-position-4-ref.html
+fails == mask-position-4b.html mask-position-4-ref.html
+fails == mask-position-4c.html mask-position-4-ref.html
+fails == mask-position-4d.html mask-position-4-ref.html
+fails == mask-position-5.html mask-position-5-ref.html
+fails == mask-position-6.html mask-position-6-ref.html
+fails == mask-position-7.html mask-position-7-ref.html
+
+# mask-repeat test cases
+fails == mask-repeat-1.html mask-repeat-1-ref.html
+fails == mask-repeat-2.html mask-repeat-2-ref.html
+fails == mask-repeat-3.html mask-repeat-3-ref.html
+
+# mask-origin test cases
+fails == mask-origin-1.html mask-origin-1-ref.html
+fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094
+
+# mask-size test cases
+fails == mask-size-auto.html mask-size-auto-ref.html
+fails == mask-size-auto-auto.html mask-size-auto-ref.html
+fails == mask-size-auto-length.html mask-size-auto-length-ref.html
+fails == mask-size-auto-percent.html mask-size-auto-length-ref.html
+fails == mask-size-contain-clip-border.html mask-size-contain-clip-border-ref.html
+fails == mask-size-contain-clip-padding.html mask-size-contain-clip-padding-ref.html
+fails == mask-size-contain-position-fifty-fifty.html mask-size-contain-position-fifty-fifty-ref.html
+fails == mask-size-contain.html mask-size-contain-ref.html
+fails == mask-size-cover.html mask-size-cover-ref.html
+fails == mask-size-length.html mask-size-length-length-ref.html
+fails == mask-size-length-auto.html mask-size-length-length-ref.html
+fails == mask-size-length-length.html mask-size-length-length-ref.html
+fails == mask-size-length-percent.html mask-size-length-percent-ref.html
+fails == mask-size-percent.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-auto.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-length.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-percent.html mask-size-percent-percent-ref.html
+fails == mask-size-percent-percent-stretch.html mask-size-percent-percent-stretch-ref.html
+
+default-preferences pref(layout.css.clip-path-shapes.enabled,true)
+
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-contentBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-paddingBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-borderBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-borderBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-borderBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-marginBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-fillBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-strokeBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-strokeBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-viewBox-1a.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,1,21) == clip-path-viewBox-1b.html clip-path-geometryBox-1-ref.html
+fuzzy(64,370) == clip-path-viewBox-1c.html clip-path-geometryBox-1-ref.html
+fuzzy-if(winWidget,9,98) == clip-path-geometryBox-2.html clip-path-geometryBox-2-ref.html
+
+== clip-path-localRef-1.html clip-path-localRef-1-ref.html
+
+default-preferences
+
+# mask with opacity test cases
+fails == mask-opacity-1a.html mask-opacity-1-ref.html
+fails == mask-opacity-1b.html mask-opacity-1-ref.html
+fuzzy(1,5000) == mask-opacity-1c.html mask-opacity-1-ref.html
+
+== clip-path-mix-blend-mode-1.html clip-path-mix-blend-mode-1-ref.html
diff --git a/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
new file mode 100644
index 000000000..c9a82b493
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/50x100-opaque-blue.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="50" height="100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0"  width="50" height="100" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg b/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
new file mode 100644
index 000000000..a68a1fa5b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/50x50-opaque-blue.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0"  width="50" height="50" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png
new file mode 100644
index 000000000..3b72d5ce5
Binary files /dev/null and b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.png differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg
new file mode 100644
index 000000000..38cae60fc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png
new file mode 100644
index 000000000..65b1e88a5
Binary files /dev/null and b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.png differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
new file mode 100644
index 000000000..459f21d5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect x="0" y="0"  width="100%" height="50%" fill="blue" fill-opacity="0"/>
+  <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg
new file mode 100644
index 000000000..5b79155b6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="RGB(238,238,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png
new file mode 100644
index 000000000..d65838b7f
Binary files /dev/null and b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.png differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg
new file mode 100644
index 000000000..87fd691a0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="lime" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg
new file mode 100644
index 000000000..795bd7e5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/green-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="RGB(73,73,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
new file mode 100644
index 000000000..78f699355
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <mask id="mask" mask-type="alpha">
+      <rect x="0" y="0"  width="100" height="50" fill-opacity="1"/>
+      <rect x="0" y="50" width="100" height="50" fill-opacity="0"/>
+    </mask>
+  </defs>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png
new file mode 100644
index 000000000..43b8e542a
Binary files /dev/null and b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.png differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg
new file mode 100644
index 000000000..0ba285bf0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="red" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg
new file mode 100644
index 000000000..05075f521
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/red-luminance-100x100.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100%" height="100%" fill="RGB(201,201,255)" fill-opacity="1"/>
+</svg>
diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png
new file mode 100644
index 000000000..f45174665
Binary files /dev/null and b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.png differ
diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
new file mode 100644
index 000000000..658aed9f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect x="0" y="0"  width="100%" height="50%" fill="blue" fill-opacity="1"/>
+  <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/>
+</svg>
-- 
cgit v1.2.3