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

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 layout/reftests/transform/1569215-1-ref.html       |  10 ++
 layout/reftests/transform/1569215-1.html           |  28 ++++
 layout/reftests/transform/601894-1.html            |  20 +++
 layout/reftests/transform/601894-2.html            |   8 +
 layout/reftests/transform/601894-ref.html          |   2 +
 layout/reftests/transform/830299-1-ref.html        |  34 ++++
 layout/reftests/transform/830299-1.html            |  46 ++++++
 layout/reftests/transform/abspos-1-ref.html        |  12 ++
 layout/reftests/transform/abspos-1a.html           |  12 ++
 layout/reftests/transform/abspos-1b.html           |  12 ++
 layout/reftests/transform/abspos-1c.html           |  12 ++
 layout/reftests/transform/abspos-1d.html           |  12 ++
 layout/reftests/transform/abspos-1e.html           |  12 ++
 layout/reftests/transform/abspos-1f.html           |  12 ++
 layout/reftests/transform/abspos-1g.html           |  12 ++
 .../animate-layer-scale-inherit-1-ref.html         |  24 +++
 .../transform/animate-layer-scale-inherit-1.html   |  27 ++++
 .../animate-layer-scale-inherit-2-ref.html         |  24 +++
 .../transform/animate-layer-scale-inherit-2.html   |  31 ++++
 .../transform/animate-layer-scale-inherit-3.html   |  51 ++++++
 .../animate-layer-scale-inherit-4-ref.html         |  23 +++
 .../transform/animate-layer-scale-inherit-4.html   |  27 ++++
 layout/reftests/transform/compound-1-fail.html     |  35 ++++
 layout/reftests/transform/compound-1-ref.html      |  36 +++++
 layout/reftests/transform/compound-1a.html         |  28 ++++
 layout/reftests/transform/descendant-1-ref.html    |  21 +++
 layout/reftests/transform/descendant-1.html        |  23 +++
 .../dynamic-add-without-change-cb-1-ref.html       |   8 +
 .../transform/dynamic-add-without-change-cb-1.html |  11 ++
 .../transform/dynamic-addremove-1-ref.html         |   8 +
 .../reftests/transform/dynamic-addremove-1a.html   |  15 ++
 .../reftests/transform/dynamic-addremove-1b.html   |  15 ++
 .../reftests/transform/dynamic-addremove-1c.html   |  17 ++
 .../transform/dynamic-addremove-2-ref.html         |   3 +
 layout/reftests/transform/dynamic-addremove-2.html |  17 ++
 .../reftests/transform/dynamic-inherit-1-ref.html  |  21 +++
 layout/reftests/transform/dynamic-inherit-1.html   |  21 +++
 layout/reftests/transform/iframe-1-ref.html        |  15 ++
 layout/reftests/transform/iframe-1.html            |  14 ++
 layout/reftests/transform/iframe-transform.html    |  16 ++
 layout/reftests/transform/inline-1-ref.html        |   2 +
 layout/reftests/transform/inline-1a.html           |   3 +
 .../transform/invalidate-svg-scale-1-ref.html      |  15 ++
 .../reftests/transform/invalidate-svg-scale-1.html |  24 +++
 .../transform/invalidate-transform-1-ref.html      |  21 +++
 .../reftests/transform/invalidate-transform-1.html |  49 ++++++
 layout/reftests/transform/matrix-1-ref.html        |   8 +
 layout/reftests/transform/matrix-1a.html           |   8 +
 layout/reftests/transform/matrix-2-ref.html        |   8 +
 layout/reftests/transform/matrix-2a.html           |   8 +
 layout/reftests/transform/matrix-3-ref.html        |   8 +
 layout/reftests/transform/matrix-3a.html           |   8 +
 layout/reftests/transform/matrix-4-ref.html        |   8 +
 layout/reftests/transform/matrix-4a.html           |   8 +
 layout/reftests/transform/matrix-5-ref.html        |   8 +
 layout/reftests/transform/matrix-5a.html           |   8 +
 layout/reftests/transform/matrix-6-ref.html        |   8 +
 layout/reftests/transform/matrix-6a.html           |   8 +
 layout/reftests/transform/matrix-7-ref.html        |   8 +
 layout/reftests/transform/matrix-7a.html           |   8 +
 layout/reftests/transform/matrix3d-1-ref.html      |  15 ++
 layout/reftests/transform/matrix3d-1.html          |  20 +++
 layout/reftests/transform/origin-1-ref.html        |   9 ++
 layout/reftests/transform/origin-1a.html           |   9 ++
 layout/reftests/transform/origin-1b.html           |   9 ++
 layout/reftests/transform/origin-2-ref.html        |   9 ++
 layout/reftests/transform/origin-2a.html           |   9 ++
 layout/reftests/transform/origin-2b.html           |   9 ++
 layout/reftests/transform/origin-2c.html           |   9 ++
 layout/reftests/transform/origin-name-1-ref.html   |   8 +
 layout/reftests/transform/origin-name-1a.html      |   8 +
 layout/reftests/transform/origin-name-1b.html      |   8 +
 layout/reftests/transform/origin-name-2-ref.html   |   8 +
 layout/reftests/transform/origin-name-2a.html      |   8 +
 layout/reftests/transform/origin-name-2b.html      |   8 +
 layout/reftests/transform/origin-name-2c.html      |   8 +
 layout/reftests/transform/origin-name-3-ref.html   |   8 +
 layout/reftests/transform/origin-name-3a.html      |   8 +
 layout/reftests/transform/origin-name-3b.html      |   8 +
 .../transform/partial-prerender-expansion-ref.html |  20 +++
 .../partial-prerender-expansion-rotate.html        |  42 +++++
 .../partial-prerender-expansion-translate.html     |  44 +++++
 ...tial-prerender-expansion-with-resolution-1.html |  52 ++++++
 ...tial-prerender-expansion-with-resolution-2.html |  74 +++++++++
 ...al-prerender-expansion-with-resolution-ref.html |  26 +++
 .../transform/partial-prerender-in-svg-1-ref.html  |  24 +++
 .../transform/partial-prerender-in-svg-1.html      |  43 +++++
 .../transform/partial-prerender-in-svg-2.html      |  44 +++++
 .../transform/partial-prerender-in-svg-3-ref.html  |  25 +++
 .../transform/partial-prerender-in-svg-3.html      |  44 +++++
 .../transform/partial-prerender-translate-1.html   |  54 +++++++
 .../partial-prerender-translate-10-ref.html        |  27 ++++
 .../transform/partial-prerender-translate-10.html  |  83 ++++++++++
 .../partial-prerender-translate-11-ref.html        |  27 ++++
 .../transform/partial-prerender-translate-11.html  |  48 ++++++
 .../transform/partial-prerender-translate-12.html  |  52 ++++++
 .../partial-prerender-translate-2-ref.html         |  29 ++++
 .../transform/partial-prerender-translate-2.html   |  56 +++++++
 .../partial-prerender-translate-3-ref.html         |  20 +++
 .../transform/partial-prerender-translate-3.html   |  54 +++++++
 .../transform/partial-prerender-translate-4.html   |  56 +++++++
 .../partial-prerender-translate-5-ref.html         |  35 ++++
 .../transform/partial-prerender-translate-5.html   |  58 +++++++
 .../partial-prerender-translate-6-ref.html         |  29 ++++
 .../transform/partial-prerender-translate-6.html   |  56 +++++++
 .../transform/partial-prerender-translate-7.html   |  53 ++++++
 .../partial-prerender-translate-8-ref.html         |  44 +++++
 .../transform/partial-prerender-translate-8.html   |  73 +++++++++
 .../transform/partial-prerender-translate-9.html   |  76 +++++++++
 layout/reftests/transform/pass.svg                 |   8 +
 layout/reftests/transform/percent-1-ref.html       |  14 ++
 layout/reftests/transform/percent-1a.html          |  14 ++
 layout/reftests/transform/percent-1b.html          |  14 ++
 layout/reftests/transform/percent-1c.html          |  14 ++
 layout/reftests/transform/percent-1d.html          |  14 ++
 layout/reftests/transform/percent-1e.html          |  14 ++
 layout/reftests/transform/percent-1f.html          |  14 ++
 layout/reftests/transform/percent-1g.html          |  14 ++
 .../transform/propagate-inherit-boolean-ref.html   |  32 ++++
 .../transform/propagate-inherit-boolean.html       |  31 ++++
 layout/reftests/transform/reftest.list             | 180 +++++++++++++++++++++
 layout/reftests/transform/rotate-1-ref.html        |   9 ++
 layout/reftests/transform/rotate-1a.html           |   9 ++
 layout/reftests/transform/rotate-1b.html           |   9 ++
 layout/reftests/transform/rotate-1c.html           |   9 ++
 layout/reftests/transform/rotate-1d.html           |   9 ++
 layout/reftests/transform/rotate-1e.html           |   9 ++
 layout/reftests/transform/rotate-1f.html           |   9 ++
 layout/reftests/transform/rotate-2-ref.html        |   9 ++
 layout/reftests/transform/rotate-2a.html           |   9 ++
 layout/reftests/transform/rotate-2b.html           |   9 ++
 layout/reftests/transform/scale-1-ref.html         |  16 ++
 layout/reftests/transform/scale-1a.html            |  17 ++
 layout/reftests/transform/scale-1b.html            |  17 ++
 layout/reftests/transform/scale-percent-1-ref.html |  17 ++
 layout/reftests/transform/scale-percent-1.html     |  18 +++
 .../reftests/transform/scaled-blend-mode-ref.html  |  25 +++
 layout/reftests/transform/scaled-blend-mode.html   |  25 +++
 layout/reftests/transform/scalex-1-ref.html        |  17 ++
 layout/reftests/transform/scalex-1.html            |  17 ++
 layout/reftests/transform/scaley-1-ref.html        |  17 ++
 layout/reftests/transform/scaley-1.html            |  17 ++
 layout/reftests/transform/singular-1a.html         |   9 ++
 layout/reftests/transform/skew-1-ref.html          |   8 +
 layout/reftests/transform/skew-1a.html             |   8 +
 layout/reftests/transform/skew-1b.html             |   8 +
 layout/reftests/transform/skew-2-ref.html          |   8 +
 layout/reftests/transform/skew-2a.html             |   8 +
 layout/reftests/transform/snapping-1-ref.html      |  18 +++
 layout/reftests/transform/snapping-1.html          |  19 +++
 layout/reftests/transform/square.html              |  20 +++
 layout/reftests/transform/stresstest-1-ref.html    |   7 +
 layout/reftests/transform/stresstest-1.html        |  27 ++++
 layout/reftests/transform/table-1-ref.html         |   7 +
 layout/reftests/transform/table-1a.html            |   5 +
 layout/reftests/transform/table-1b.html            |   5 +
 layout/reftests/transform/table-1c.html            |   7 +
 layout/reftests/transform/table-2-ref.html         |   6 +
 layout/reftests/transform/table-2a.html            |   5 +
 layout/reftests/transform/table-2b.html            |   5 +
 .../table-overflowed-by-animation-ref.html         |   7 +
 .../transform/table-overflowed-by-animation.html   |  29 ++++
 .../transform/transform-anon-block-1-ref.html      |  29 ++++
 .../reftests/transform/transform-anon-block-1.html |  29 ++++
 .../reftests/transform/transform-box-svg-1-ref.svg |   3 +
 layout/reftests/transform/transform-box-svg-1a.svg |  10 ++
 layout/reftests/transform/transform-box-svg-1b.svg |  11 ++
 .../reftests/transform/transform-box-svg-2-ref.svg |   3 +
 layout/reftests/transform/transform-box-svg-2a.svg |  10 ++
 layout/reftests/transform/transform-box-svg-2b.svg |  11 ++
 layout/reftests/transform/transform-box-svg-3a.svg |  64 ++++++++
 .../transform/transform-origin-svg-1-ref.svg       |   3 +
 .../reftests/transform/transform-origin-svg-1a.svg |   7 +
 .../reftests/transform/transform-origin-svg-1b.svg |   9 ++
 .../transform/transform-origin-svg-2-ref.svg       |   3 +
 .../reftests/transform/transform-origin-svg-2a.svg |   7 +
 .../reftests/transform/transform-origin-svg-2b.svg |   9 ++
 .../reftests/transform/transform-svg-1-ref.xhtml   |  12 ++
 layout/reftests/transform/transform-svg-1a.xhtml   |  20 +++
 layout/reftests/transform/transform-svg-1b.xhtml   |  20 +++
 .../reftests/transform/transform-svg-2-fail.xhtml  |  20 +++
 .../reftests/transform/transform-svg-2-ref.xhtml   |  20 +++
 layout/reftests/transform/transform-svg-2a.xhtml   |  20 +++
 layout/reftests/transform/translate-1-ref.html     |   9 ++
 layout/reftests/transform/translate-1a.html        |   9 ++
 layout/reftests/transform/translate-1b.html        |   9 ++
 layout/reftests/transform/translate-1c.html        |   9 ++
 layout/reftests/transform/translate-1d.html        |   9 ++
 layout/reftests/transform/translate-1e.html        |   9 ++
 layout/reftests/transform/translate-2-ref.html     |   9 ++
 layout/reftests/transform/translate-2a.html        |   9 ++
 layout/reftests/transform/translate-3-ref.html     |   8 +
 layout/reftests/transform/translate-3.html         |  18 +++
 .../reftests/transform/translate-rounding-1.html   |  18 +++
 .../reftests/transform/translate-rounding-2.html   |  20 +++
 .../reftests/transform/translate-rounding-3.html   |  17 ++
 .../reftests/transform/translate-rounding-ref.html |  18 +++
 .../transform/translate-rounding-viewport-ref.html |  18 +++
 layout/reftests/transform/translatex-1-ref-2.html  |  12 ++
 layout/reftests/transform/translatex-1-ref.html    |   9 ++
 layout/reftests/transform/translatex-1a.html       |   9 ++
 layout/reftests/transform/translatex-1b.html       |   9 ++
 layout/reftests/transform/translatex-1c.html       |   9 ++
 layout/reftests/transform/translatex-1d.html       |   9 ++
 layout/reftests/transform/translatex-1e.html       |   9 ++
 layout/reftests/transform/translatex-2.html        |   9 ++
 layout/reftests/transform/translatey-1-ref-2.html  |   9 ++
 layout/reftests/transform/translatey-1-ref.html    |   9 ++
 layout/reftests/transform/translatey-1a.html       |   9 ++
 layout/reftests/transform/translatey-1b.html       |   9 ++
 layout/reftests/transform/translatey-1c.html       |   9 ++
 layout/reftests/transform/translatey-1d.html       |   9 ++
 layout/reftests/transform/translatey-1e.html       |   9 ++
 layout/reftests/transform/translatey-2.html        |   9 ++
 214 files changed, 4075 insertions(+)
 create mode 100644 layout/reftests/transform/1569215-1-ref.html
 create mode 100644 layout/reftests/transform/1569215-1.html
 create mode 100644 layout/reftests/transform/601894-1.html
 create mode 100644 layout/reftests/transform/601894-2.html
 create mode 100644 layout/reftests/transform/601894-ref.html
 create mode 100644 layout/reftests/transform/830299-1-ref.html
 create mode 100644 layout/reftests/transform/830299-1.html
 create mode 100644 layout/reftests/transform/abspos-1-ref.html
 create mode 100644 layout/reftests/transform/abspos-1a.html
 create mode 100644 layout/reftests/transform/abspos-1b.html
 create mode 100644 layout/reftests/transform/abspos-1c.html
 create mode 100644 layout/reftests/transform/abspos-1d.html
 create mode 100644 layout/reftests/transform/abspos-1e.html
 create mode 100644 layout/reftests/transform/abspos-1f.html
 create mode 100644 layout/reftests/transform/abspos-1g.html
 create mode 100644 layout/reftests/transform/animate-layer-scale-inherit-1-ref.html
 create mode 100644 layout/reftests/transform/animate-layer-scale-inherit-1.html
 create mode 100644 layout/reftests/transform/animate-layer-scale-inherit-2-ref.html
 create mode 100644 layout/reftests/transform/animate-layer-scale-inherit-2.html
 create mode 100644 layout/reftests/transform/animate-layer-scale-inherit-3.html
 create mode 100644 layout/reftests/transform/animate-layer-scale-inherit-4-ref.html
 create mode 100644 layout/reftests/transform/animate-layer-scale-inherit-4.html
 create mode 100644 layout/reftests/transform/compound-1-fail.html
 create mode 100644 layout/reftests/transform/compound-1-ref.html
 create mode 100644 layout/reftests/transform/compound-1a.html
 create mode 100644 layout/reftests/transform/descendant-1-ref.html
 create mode 100644 layout/reftests/transform/descendant-1.html
 create mode 100644 layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html
 create mode 100644 layout/reftests/transform/dynamic-add-without-change-cb-1.html
 create mode 100644 layout/reftests/transform/dynamic-addremove-1-ref.html
 create mode 100644 layout/reftests/transform/dynamic-addremove-1a.html
 create mode 100644 layout/reftests/transform/dynamic-addremove-1b.html
 create mode 100644 layout/reftests/transform/dynamic-addremove-1c.html
 create mode 100644 layout/reftests/transform/dynamic-addremove-2-ref.html
 create mode 100644 layout/reftests/transform/dynamic-addremove-2.html
 create mode 100644 layout/reftests/transform/dynamic-inherit-1-ref.html
 create mode 100644 layout/reftests/transform/dynamic-inherit-1.html
 create mode 100644 layout/reftests/transform/iframe-1-ref.html
 create mode 100644 layout/reftests/transform/iframe-1.html
 create mode 100644 layout/reftests/transform/iframe-transform.html
 create mode 100644 layout/reftests/transform/inline-1-ref.html
 create mode 100644 layout/reftests/transform/inline-1a.html
 create mode 100644 layout/reftests/transform/invalidate-svg-scale-1-ref.html
 create mode 100644 layout/reftests/transform/invalidate-svg-scale-1.html
 create mode 100644 layout/reftests/transform/invalidate-transform-1-ref.html
 create mode 100644 layout/reftests/transform/invalidate-transform-1.html
 create mode 100644 layout/reftests/transform/matrix-1-ref.html
 create mode 100644 layout/reftests/transform/matrix-1a.html
 create mode 100644 layout/reftests/transform/matrix-2-ref.html
 create mode 100644 layout/reftests/transform/matrix-2a.html
 create mode 100644 layout/reftests/transform/matrix-3-ref.html
 create mode 100644 layout/reftests/transform/matrix-3a.html
 create mode 100644 layout/reftests/transform/matrix-4-ref.html
 create mode 100644 layout/reftests/transform/matrix-4a.html
 create mode 100644 layout/reftests/transform/matrix-5-ref.html
 create mode 100644 layout/reftests/transform/matrix-5a.html
 create mode 100644 layout/reftests/transform/matrix-6-ref.html
 create mode 100644 layout/reftests/transform/matrix-6a.html
 create mode 100644 layout/reftests/transform/matrix-7-ref.html
 create mode 100644 layout/reftests/transform/matrix-7a.html
 create mode 100644 layout/reftests/transform/matrix3d-1-ref.html
 create mode 100644 layout/reftests/transform/matrix3d-1.html
 create mode 100644 layout/reftests/transform/origin-1-ref.html
 create mode 100644 layout/reftests/transform/origin-1a.html
 create mode 100644 layout/reftests/transform/origin-1b.html
 create mode 100644 layout/reftests/transform/origin-2-ref.html
 create mode 100644 layout/reftests/transform/origin-2a.html
 create mode 100644 layout/reftests/transform/origin-2b.html
 create mode 100644 layout/reftests/transform/origin-2c.html
 create mode 100644 layout/reftests/transform/origin-name-1-ref.html
 create mode 100644 layout/reftests/transform/origin-name-1a.html
 create mode 100644 layout/reftests/transform/origin-name-1b.html
 create mode 100644 layout/reftests/transform/origin-name-2-ref.html
 create mode 100644 layout/reftests/transform/origin-name-2a.html
 create mode 100644 layout/reftests/transform/origin-name-2b.html
 create mode 100644 layout/reftests/transform/origin-name-2c.html
 create mode 100644 layout/reftests/transform/origin-name-3-ref.html
 create mode 100644 layout/reftests/transform/origin-name-3a.html
 create mode 100644 layout/reftests/transform/origin-name-3b.html
 create mode 100644 layout/reftests/transform/partial-prerender-expansion-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-expansion-rotate.html
 create mode 100644 layout/reftests/transform/partial-prerender-expansion-translate.html
 create mode 100644 layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html
 create mode 100644 layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html
 create mode 100644 layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-in-svg-1-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-in-svg-1.html
 create mode 100644 layout/reftests/transform/partial-prerender-in-svg-2.html
 create mode 100644 layout/reftests/transform/partial-prerender-in-svg-3-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-in-svg-3.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-1.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-10-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-10.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-11-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-11.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-12.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-2-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-2.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-3-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-3.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-4.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-5-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-5.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-6-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-6.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-7.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-8-ref.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-8.html
 create mode 100644 layout/reftests/transform/partial-prerender-translate-9.html
 create mode 100644 layout/reftests/transform/pass.svg
 create mode 100644 layout/reftests/transform/percent-1-ref.html
 create mode 100644 layout/reftests/transform/percent-1a.html
 create mode 100644 layout/reftests/transform/percent-1b.html
 create mode 100644 layout/reftests/transform/percent-1c.html
 create mode 100644 layout/reftests/transform/percent-1d.html
 create mode 100644 layout/reftests/transform/percent-1e.html
 create mode 100644 layout/reftests/transform/percent-1f.html
 create mode 100644 layout/reftests/transform/percent-1g.html
 create mode 100644 layout/reftests/transform/propagate-inherit-boolean-ref.html
 create mode 100644 layout/reftests/transform/propagate-inherit-boolean.html
 create mode 100644 layout/reftests/transform/reftest.list
 create mode 100644 layout/reftests/transform/rotate-1-ref.html
 create mode 100644 layout/reftests/transform/rotate-1a.html
 create mode 100644 layout/reftests/transform/rotate-1b.html
 create mode 100644 layout/reftests/transform/rotate-1c.html
 create mode 100644 layout/reftests/transform/rotate-1d.html
 create mode 100644 layout/reftests/transform/rotate-1e.html
 create mode 100644 layout/reftests/transform/rotate-1f.html
 create mode 100644 layout/reftests/transform/rotate-2-ref.html
 create mode 100644 layout/reftests/transform/rotate-2a.html
 create mode 100644 layout/reftests/transform/rotate-2b.html
 create mode 100644 layout/reftests/transform/scale-1-ref.html
 create mode 100644 layout/reftests/transform/scale-1a.html
 create mode 100644 layout/reftests/transform/scale-1b.html
 create mode 100644 layout/reftests/transform/scale-percent-1-ref.html
 create mode 100644 layout/reftests/transform/scale-percent-1.html
 create mode 100644 layout/reftests/transform/scaled-blend-mode-ref.html
 create mode 100644 layout/reftests/transform/scaled-blend-mode.html
 create mode 100644 layout/reftests/transform/scalex-1-ref.html
 create mode 100644 layout/reftests/transform/scalex-1.html
 create mode 100644 layout/reftests/transform/scaley-1-ref.html
 create mode 100644 layout/reftests/transform/scaley-1.html
 create mode 100644 layout/reftests/transform/singular-1a.html
 create mode 100644 layout/reftests/transform/skew-1-ref.html
 create mode 100644 layout/reftests/transform/skew-1a.html
 create mode 100644 layout/reftests/transform/skew-1b.html
 create mode 100644 layout/reftests/transform/skew-2-ref.html
 create mode 100644 layout/reftests/transform/skew-2a.html
 create mode 100644 layout/reftests/transform/snapping-1-ref.html
 create mode 100644 layout/reftests/transform/snapping-1.html
 create mode 100644 layout/reftests/transform/square.html
 create mode 100644 layout/reftests/transform/stresstest-1-ref.html
 create mode 100644 layout/reftests/transform/stresstest-1.html
 create mode 100644 layout/reftests/transform/table-1-ref.html
 create mode 100644 layout/reftests/transform/table-1a.html
 create mode 100644 layout/reftests/transform/table-1b.html
 create mode 100644 layout/reftests/transform/table-1c.html
 create mode 100644 layout/reftests/transform/table-2-ref.html
 create mode 100644 layout/reftests/transform/table-2a.html
 create mode 100644 layout/reftests/transform/table-2b.html
 create mode 100644 layout/reftests/transform/table-overflowed-by-animation-ref.html
 create mode 100644 layout/reftests/transform/table-overflowed-by-animation.html
 create mode 100644 layout/reftests/transform/transform-anon-block-1-ref.html
 create mode 100644 layout/reftests/transform/transform-anon-block-1.html
 create mode 100644 layout/reftests/transform/transform-box-svg-1-ref.svg
 create mode 100644 layout/reftests/transform/transform-box-svg-1a.svg
 create mode 100644 layout/reftests/transform/transform-box-svg-1b.svg
 create mode 100644 layout/reftests/transform/transform-box-svg-2-ref.svg
 create mode 100644 layout/reftests/transform/transform-box-svg-2a.svg
 create mode 100644 layout/reftests/transform/transform-box-svg-2b.svg
 create mode 100644 layout/reftests/transform/transform-box-svg-3a.svg
 create mode 100644 layout/reftests/transform/transform-origin-svg-1-ref.svg
 create mode 100644 layout/reftests/transform/transform-origin-svg-1a.svg
 create mode 100644 layout/reftests/transform/transform-origin-svg-1b.svg
 create mode 100644 layout/reftests/transform/transform-origin-svg-2-ref.svg
 create mode 100644 layout/reftests/transform/transform-origin-svg-2a.svg
 create mode 100644 layout/reftests/transform/transform-origin-svg-2b.svg
 create mode 100644 layout/reftests/transform/transform-svg-1-ref.xhtml
 create mode 100644 layout/reftests/transform/transform-svg-1a.xhtml
 create mode 100644 layout/reftests/transform/transform-svg-1b.xhtml
 create mode 100644 layout/reftests/transform/transform-svg-2-fail.xhtml
 create mode 100644 layout/reftests/transform/transform-svg-2-ref.xhtml
 create mode 100644 layout/reftests/transform/transform-svg-2a.xhtml
 create mode 100644 layout/reftests/transform/translate-1-ref.html
 create mode 100644 layout/reftests/transform/translate-1a.html
 create mode 100644 layout/reftests/transform/translate-1b.html
 create mode 100644 layout/reftests/transform/translate-1c.html
 create mode 100644 layout/reftests/transform/translate-1d.html
 create mode 100644 layout/reftests/transform/translate-1e.html
 create mode 100644 layout/reftests/transform/translate-2-ref.html
 create mode 100644 layout/reftests/transform/translate-2a.html
 create mode 100644 layout/reftests/transform/translate-3-ref.html
 create mode 100644 layout/reftests/transform/translate-3.html
 create mode 100644 layout/reftests/transform/translate-rounding-1.html
 create mode 100644 layout/reftests/transform/translate-rounding-2.html
 create mode 100644 layout/reftests/transform/translate-rounding-3.html
 create mode 100644 layout/reftests/transform/translate-rounding-ref.html
 create mode 100644 layout/reftests/transform/translate-rounding-viewport-ref.html
 create mode 100644 layout/reftests/transform/translatex-1-ref-2.html
 create mode 100644 layout/reftests/transform/translatex-1-ref.html
 create mode 100644 layout/reftests/transform/translatex-1a.html
 create mode 100644 layout/reftests/transform/translatex-1b.html
 create mode 100644 layout/reftests/transform/translatex-1c.html
 create mode 100644 layout/reftests/transform/translatex-1d.html
 create mode 100644 layout/reftests/transform/translatex-1e.html
 create mode 100644 layout/reftests/transform/translatex-2.html
 create mode 100644 layout/reftests/transform/translatey-1-ref-2.html
 create mode 100644 layout/reftests/transform/translatey-1-ref.html
 create mode 100644 layout/reftests/transform/translatey-1a.html
 create mode 100644 layout/reftests/transform/translatey-1b.html
 create mode 100644 layout/reftests/transform/translatey-1c.html
 create mode 100644 layout/reftests/transform/translatey-1d.html
 create mode 100644 layout/reftests/transform/translatey-1e.html
 create mode 100644 layout/reftests/transform/translatey-2.html

(limited to 'layout/reftests/transform')

diff --git a/layout/reftests/transform/1569215-1-ref.html b/layout/reftests/transform/1569215-1-ref.html
new file mode 100644
index 0000000000..de52ba1e8c
--- /dev/null
+++ b/layout/reftests/transform/1569215-1-ref.html
@@ -0,0 +1,10 @@
+<style>
+path {
+  stroke: #000;
+  fill: none;
+}
+</style>
+
+<svg width="500" height="500" viewBox="105 125 20 20">
+  <path id="pp" d="m 95,130 h 36" />
+</svg>
diff --git a/layout/reftests/transform/1569215-1.html b/layout/reftests/transform/1569215-1.html
new file mode 100644
index 0000000000..b1b199ab63
--- /dev/null
+++ b/layout/reftests/transform/1569215-1.html
@@ -0,0 +1,28 @@
+<style>
+path {
+  stroke: #000;
+  fill: none;
+}
+
+#pp {
+  animation: flyR 5s infinite;
+}
+
+@keyframes flyR {
+  from {
+    transform: translate(9px);
+  }
+
+  50% {
+    transform: translate(4.5px);
+  }
+
+  to {
+    transform: translate(0px);
+  }
+}
+</style>
+
+<svg width="500" height="500" viewBox="105 125 20 20">
+  <path id="pp" d="m 95,130 h 36" />
+</svg>
diff --git a/layout/reftests/transform/601894-1.html b/layout/reftests/transform/601894-1.html
new file mode 100644
index 0000000000..ae68117579
--- /dev/null
+++ b/layout/reftests/transform/601894-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <body style="background: linear-gradient(lime, lime) fixed; overflow: hidden;">
+    <div style="position: absolute; left: 21.0138px; top: 507.24px; z-index: 17567; transform: scale(8);">
+      <div style="height: 128px; left: -64px; position: absolute; top: -64px; visibility: visible; width: 128px;"></div>
+    </div>
+    <div style="position: absolute; left: 640.572px; top: 386.574px; transform: scale(1); z-index: -157863;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+    <div style="position: absolute; left: 568.346px; top: 582.669px; transform: scale(1); z-index: -62592;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+    <div style="position: absolute; left: 573.27px; top: 168.861px; transform: scale(1); z-index: -137632;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+    <div style="position: absolute; left: 519.063px; top: 182.9px; transform: scale(1); z-index: -50558;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/601894-2.html b/layout/reftests/transform/601894-2.html
new file mode 100644
index 0000000000..d805456c62
--- /dev/null
+++ b/layout/reftests/transform/601894-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body style="background: linear-gradient(lime, lime) fixed;">
+    <div style="position: absolute; left: 0; top: 0; transform: scale(1)">
+      <div style="position: absolute; width: 200px; height: 200px;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/601894-ref.html b/layout/reftests/transform/601894-ref.html
new file mode 100644
index 0000000000..f4e6cdae83
--- /dev/null
+++ b/layout/reftests/transform/601894-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<body style="background: lime;">
diff --git a/layout/reftests/transform/830299-1-ref.html b/layout/reftests/transform/830299-1-ref.html
new file mode 100644
index 0000000000..d5cf007103
--- /dev/null
+++ b/layout/reftests/transform/830299-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<title>Testcase, bug 830299</title>
+	<meta charset=UTF-8>
+	<style type="text/css">
+
+	html { margin: 1px; padding: 2px }
+	body { margin: 4px; padding: 8px }
+
+	#outer {
+		position: absolute;
+		top: 3px; left: 5px;
+		width: 200px; height: 200px;
+		background: yellow;
+	}
+	
+	#inner {
+		position: absolute;
+		top: 7px; left: 9px;
+		width: 100px; height: 100px;
+		background: aqua;
+	}
+
+	</style>
+</head>
+<body>
+
+<div id="outer">
+  <div id="inner">inner</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/830299-1.html b/layout/reftests/transform/830299-1.html
new file mode 100644
index 0000000000..3d7c799334
--- /dev/null
+++ b/layout/reftests/transform/830299-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-wait">
+<head>
+	<title>Testcase, bug 830299</title>
+	<meta charset=UTF-8>
+	<style type="text/css">
+
+	html { margin: 1px; padding: 2px }
+	body { margin: 4px; padding: 8px }
+
+	#outer {
+		position: absolute;
+		overflow: hidden;
+		transform: translateX(0px);
+		top: 3px; left: 5px;
+		width: 200px; height: 200px;
+		background: yellow;
+	}
+	
+	#inner {
+		position: fixed;
+		top: 7px; left: 9px;
+		width: 100px; height: 100px;
+		background: aqua;
+	}
+
+	</style>
+	<script type="text/javascript">
+
+	window.addEventListener("load", function(event) {
+	                        	setTimeout(function() {
+	                        	           	document.getElementById("inner").style.display = "";
+	                        	           	document.documentElement.removeAttribute("class");
+	                        	           }, 100);
+	                        });
+
+	</script>
+</head>
+<body>
+
+<div id="outer">
+  <div id="inner" style="display:none">inner</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1-ref.html b/layout/reftests/transform/abspos-1-ref.html
new file mode 100644
index 0000000000..337c849b51
--- /dev/null
+++ b/layout/reftests/transform/abspos-1-ref.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; position: relative; left: 50px; top: 50px; background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1a.html b/layout/reftests/transform/abspos-1a.html
new file mode 100644
index 0000000000..b8270222df
--- /dev/null
+++ b/layout/reftests/transform/abspos-1a.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; transform: translate(50px, 50px); background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1b.html b/layout/reftests/transform/abspos-1b.html
new file mode 100644
index 0000000000..c2a0a668c3
--- /dev/null
+++ b/layout/reftests/transform/abspos-1b.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1c.html b/layout/reftests/transform/abspos-1c.html
new file mode 100644
index 0000000000..536d2559cc
--- /dev/null
+++ b/layout/reftests/transform/abspos-1c.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; right: -150px; bottom: 0px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1d.html b/layout/reftests/transform/abspos-1d.html
new file mode 100644
index 0000000000..13f21e1ca2
--- /dev/null
+++ b/layout/reftests/transform/abspos-1d.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -150px; bottom: 0px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1e.html b/layout/reftests/transform/abspos-1e.html
new file mode 100644
index 0000000000..b6a90de489
--- /dev/null
+++ b/layout/reftests/transform/abspos-1e.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -151px; bottom: 0px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1f.html b/layout/reftests/transform/abspos-1f.html
new file mode 100644
index 0000000000..8139a9f194
--- /dev/null
+++ b/layout/reftests/transform/abspos-1f.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; transform: translate(50px, 50px); background-color: gold; display: table">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1g.html b/layout/reftests/transform/abspos-1g.html
new file mode 100644
index 0000000000..ac35376bc9
--- /dev/null
+++ b/layout/reftests/transform/abspos-1g.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;display: inline-table">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html
new file mode 100644
index 0000000000..3f2974597f
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+  will-change: transform;
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1.html b/layout/reftests/transform/animate-layer-scale-inherit-1.html
new file mode 100644
index 0000000000..b04c4a8fa9
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#outer { transform: scale(5) }
+#inner { animation: HoldTransform linear infinite 1s }
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+  from, to { transform: scale(0.2) }
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html
new file mode 100644
index 0000000000..714f6f2224
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+  opacity: 0.6;
+  will-change: transform, opacity;
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2.html b/layout/reftests/transform/animate-layer-scale-inherit-2.html
new file mode 100644
index 0000000000..f7297d1213
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#outer { transform: scale(5) }
+#inner { animation: HoldTransform linear infinite 1s,
+                    HoldOpacity   linear infinite 1s; }
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+  from, to { transform: scale(0.2) }
+}
+@keyframes HoldOpacity {
+  from, to { opacity: 0.6 }
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-3.html b/layout/reftests/transform/animate-layer-scale-inherit-3.html
new file mode 100644
index 0000000000..4badfbd825
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-3.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+/*
+ * We use step-end with reverse direction to paint the initial state
+ * on the first frame, and step to the last state on the next frame.
+ */
+#inner { animation: HoldTransform step-end 100s reverse }
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+  /* need to initially rasterize at non-identity transform to hit the
+   * bug at all
+   * NOTE: These keyframes will be used reverse direction.
+   */
+  0% { transform: none }
+  100% { transform: scale(0.2) }
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
+
+<script>
+
+document.getElementById("inner").addEventListener("animationstart", StartListener);
+
+function StartListener(event) {
+  // Animation should be zoomed to transform:none after the first frame.
+  requestAnimationFrame(RemoveReftestWait);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html
new file mode 100644
index 0000000000..16688d4def
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+  will-change: transform;
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-4.html b/layout/reftests/transform/animate-layer-scale-inherit-4.html
new file mode 100644
index 0000000000..8ab439fc7a
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-4.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1526847</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#outer { scale: 5 }
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+  animation: HoldTransform linear infinite 1s;
+}
+@keyframes HoldTransform {
+  from, to { scale: 0.5; transform: scale(0.4); }
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/compound-1-fail.html b/layout/reftests/transform/compound-1-fail.html
new file mode 100644
index 0000000000..d252d45c09
--- /dev/null
+++ b/layout/reftests/transform/compound-1-fail.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <style type="text/css">
+    div.test
+    {
+    background-color: gold;
+    width:200px;
+    height:100px;
+    border: 1px solid black;
+    }
+    div
+    {
+    transform-origin: top left;
+    }
+    html
+    {
+    scrollbar-width: none;
+    }
+  </style>
+</head>
+<body>
+  <div style="position:relative; left:400px; top:200px;">
+    <div style="transform: skew(15deg);">
+      <div style="transform: rotate(90deg);">
+	<div style="transform: scale(2);">
+	  <div style="transform: translate(100px);">
+	    <div class="test">
+	    </div>
+	  </div>
+	</div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/compound-1-ref.html b/layout/reftests/transform/compound-1-ref.html
new file mode 100644
index 0000000000..dcc45ef263
--- /dev/null
+++ b/layout/reftests/transform/compound-1-ref.html
@@ -0,0 +1,36 @@
+<html>
+<head>
+  <meta name="viewport" content="initial-scale=1">
+  <style type="text/css">
+    div.test
+    {
+    background-color: gold;
+    width:200px;
+    height:100px;
+    border: 1px solid black;
+    }
+    div
+    {
+    transform-origin: top left;
+    }
+    html
+    {
+    scrollbar-width: none;
+    }
+  </style>
+</head>
+<body>
+  <div style="position:relative; left:400px; top:200px;">
+    <div style="transform: translate(100px);">
+      <div style="transform: scale(2);">
+	<div style="transform: rotate(90deg);">
+	  <div style="transform: skew(15deg);">
+	    <div class="test">
+	    </div>
+	  </div>
+	</div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/compound-1a.html b/layout/reftests/transform/compound-1a.html
new file mode 100644
index 0000000000..ce36c58422
--- /dev/null
+++ b/layout/reftests/transform/compound-1a.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+  <meta name="viewport" content="initial-scale=1">
+  <style type="text/css">
+    div.test
+    {
+    background-color: gold;
+    width:200px;
+    height:100px;
+    border: 1px solid black;
+    }
+    div
+    {
+    transform-origin: top left;
+    }
+    html
+    {
+    scrollbar-width: none;
+    }
+  </style>
+</head>
+<body>
+  <div style="position:relative; left:400px; top:200px;">
+    <div class="test" style="transform: translate(100px) scale(2) rotate(90deg) skew(15deg);">
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/descendant-1-ref.html b/layout/reftests/transform/descendant-1-ref.html
new file mode 100644
index 0000000000..827090c7e7
--- /dev/null
+++ b/layout/reftests/transform/descendant-1-ref.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+  <style>
+    #div1 {
+      background: green;
+      height: 100px;
+      width: 100px;
+    }
+    span {
+      background: yellow;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <span style="position: relative; top: 150px; left: 20px">span 1</span>
+  </div>
+  <span>span 2</span>
+  
+</body>
+</html>
diff --git a/layout/reftests/transform/descendant-1.html b/layout/reftests/transform/descendant-1.html
new file mode 100644
index 0000000000..3ea83eb755
--- /dev/null
+++ b/layout/reftests/transform/descendant-1.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+  <style>
+    #div1 {
+      background: green;
+      height: 100px;
+      width: 100px;
+    }
+    span {
+      background: yellow;
+    }
+    #div1 div {transform: translate(20px, 150px);
+               transform-origin: 0% 0%;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <div><span>span 1</span></div>
+  </div>
+  <span>span 2</span>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html
new file mode 100644
index 0000000000..e2d067e1f6
--- /dev/null
+++ b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  The green square below should be centered.
+  <div style="width: 400px; height: 400px; position: absolute;
+              perspective: 600px; left: calc(50% - 200px);
+              top: calc(50% - 200px); background: green;">
+  </div>
+</html>
diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1.html b/layout/reftests/transform/dynamic-add-without-change-cb-1.html
new file mode 100644
index 0000000000..7b8307b4fb
--- /dev/null
+++ b/layout/reftests/transform/dynamic-add-without-change-cb-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  The green square below should be centered.
+  <div style="width: 400px; height: 400px; position: absolute;
+              perspective: 600px; left: 50%; top: 50%; background: green;">
+  </div>
+  <script>
+    document.body.offsetWidth;
+    document.querySelector("div").style.transform = "translate(-50%, -50%)";
+  </script>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1-ref.html b/layout/reftests/transform/dynamic-addremove-1-ref.html
new file mode 100644
index 0000000000..271b1a6470
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="position:absolute; left:80px; top:20px; width:100px; height:100px; background:yellow">
+  <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1a.html b/layout/reftests/transform/dynamic-addremove-1a.html
new file mode 100644
index 0000000000..580e0fd722
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+  <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+</div>
+<script>
+function doTest() {
+  document.getElementById("t").style.transform = "translate(80px,20px)";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1b.html b/layout/reftests/transform/dynamic-addremove-1b.html
new file mode 100644
index 0000000000..5c17bc073b
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+  <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+</div>
+<script>
+function doTest() {
+  document.getElementById("t").style.transform = "translate(80px,20px)";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1c.html b/layout/reftests/transform/dynamic-addremove-1c.html
new file mode 100644
index 0000000000..519fc19f20
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1c.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+  <div style="float:left;">
+    <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+  </div>
+</div>
+<script>
+function doTest() {
+  document.getElementById("t").style.transform = "translate(80px,20px)";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-2-ref.html b/layout/reftests/transform/dynamic-addremove-2-ref.html
new file mode 100644
index 0000000000..d92058201d
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-2-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html style="background: green">
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-2.html b/layout/reftests/transform/dynamic-addremove-2.html
new file mode 100644
index 0000000000..b6718b29a7
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html style="background: red">
+  <div style="transform: translate3d(0, 0, 0); position: absolute;
+              top: 0; left: 0; width: 100px; height: 100px">
+    <div style="position: absolute">
+      <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0;
+                  background: green">
+      </div>
+    </div>
+  </div>
+  <script>
+    onload = function() {
+      document.body.offsetWidth;
+      document.querySelector("div").style.transform = "none";
+    }
+  </script>
+</html>
diff --git a/layout/reftests/transform/dynamic-inherit-1-ref.html b/layout/reftests/transform/dynamic-inherit-1-ref.html
new file mode 100644
index 0000000000..02743d8c4a
--- /dev/null
+++ b/layout/reftests/transform/dynamic-inherit-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+<title>Test for bug 521720</title>
+<style type="text/css">
+
+p {
+  transform-origin: inherit;
+  transform: scale(2);
+  height: 10px;
+  width: 10px;
+  background: green;
+  margin: 50px;
+}
+
+</style>
+<head>
+<body>
+<div id="a">
+<p style="font-size: 10px"></p>
+</div>
+</body>
diff --git a/layout/reftests/transform/dynamic-inherit-1.html b/layout/reftests/transform/dynamic-inherit-1.html
new file mode 100644
index 0000000000..4c410e2441
--- /dev/null
+++ b/layout/reftests/transform/dynamic-inherit-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+<title>Test for bug 521720</title>
+<style type="text/css">
+
+p {
+  transform-origin: inherit;
+  transform: scale(2);
+  height: 10px;
+  width: 10px;
+  background: green;
+  margin: 50px;
+}
+
+</style>
+<head>
+<body onload="document.getElementById('a').style.removeProperty('transform-origin');">
+<div id="a" style="transform-origin: 10px 10px">
+<p style="font-size: 10px"></p>
+</div>
+</body>
diff --git a/layout/reftests/transform/iframe-1-ref.html b/layout/reftests/transform/iframe-1-ref.html
new file mode 100644
index 0000000000..43c76457a4
--- /dev/null
+++ b/layout/reftests/transform/iframe-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+  <head>
+    <style>
+      iframe {
+        overflow: hidden;
+        height: 200px;
+        width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe src="about:blank">
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/iframe-1.html b/layout/reftests/transform/iframe-1.html
new file mode 100644
index 0000000000..6a2b621df9
--- /dev/null
+++ b/layout/reftests/transform/iframe-1.html
@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <style>
+      iframe {
+        height: 200px;
+        width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe scrolling="no" src="iframe-transform.html">
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/iframe-transform.html b/layout/reftests/transform/iframe-transform.html
new file mode 100644
index 0000000000..5e644ea493
--- /dev/null
+++ b/layout/reftests/transform/iframe-transform.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <style>
+      div {
+        height: 200px;
+        width: 200px;
+        background: green;
+        transform: translate(500px, 500px);
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/inline-1-ref.html b/layout/reftests/transform/inline-1-ref.html
new file mode 100644
index 0000000000..84a2f6dd4a
--- /dev/null
+++ b/layout/reftests/transform/inline-1-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+This is some text<br>that is not transformed
diff --git a/layout/reftests/transform/inline-1a.html b/layout/reftests/transform/inline-1a.html
new file mode 100644
index 0000000000..823c1ac6b3
--- /dev/null
+++ b/layout/reftests/transform/inline-1a.html
@@ -0,0 +1,3 @@
+<!doctype html>
+This is some <span style="transform:rotate(180deg)">text<br>
+that is</span> not transformed
diff --git a/layout/reftests/transform/invalidate-svg-scale-1-ref.html b/layout/reftests/transform/invalidate-svg-scale-1-ref.html
new file mode 100644
index 0000000000..dde3a479aa
--- /dev/null
+++ b/layout/reftests/transform/invalidate-svg-scale-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Bug 1490518</title>
+</head>
+<body>
+<div style="position: absolute; top: 0px; left: 0px; transform: scale(2.0);">
+    <div style="position: absolute; top: 0px; left: 0px; width: 200px; background: green; height: 50px; will-change: opacity"></div>
+    <svg width="200" height="200" style="position: absolute; top: 50px; left: 0px;">
+        <rect x="0" y="0" width="200" height="200" fill="transparent"/>
+    </svg>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform/invalidate-svg-scale-1.html b/layout/reftests/transform/invalidate-svg-scale-1.html
new file mode 100644
index 0000000000..f1ef5fdf65
--- /dev/null
+++ b/layout/reftests/transform/invalidate-svg-scale-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Bug 1490518</title>
+</head>
+<body>
+<div style="position: absolute; top: 0px; left: 0px; transform: scale(2.0);">
+    <div style="position: absolute; top: 0px; left: 0px; width: 200px; background: green; height: 50px; will-change: opacity"></div>
+    <svg width="200" height="200" style="position: absolute; top: 50px; left: 0px;">
+        <rect x="0" y="0" width="200" height="200" fill="transparent"/>
+    	<rect x="0" y="0" width="200" height="200" fill="blue" id="rect"/>
+    </svg>
+</div>
+
+<script>
+function doTest() {
+  document.getElementById("rect").style.visibility = "hidden";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/invalidate-transform-1-ref.html b/layout/reftests/transform/invalidate-transform-1-ref.html
new file mode 100644
index 0000000000..6121847d70
--- /dev/null
+++ b/layout/reftests/transform/invalidate-transform-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title></title>
+</head>
+<style type="text/css">
+#green {
+  position: absolute;
+  top: 8px;
+  left: 208px;
+  width: 200px;
+  height: 200px;
+  background-color: green;
+  z-index: 1;
+}
+</style>
+<body>
+<div id="green"></div>
+</body>
+</html>
diff --git a/layout/reftests/transform/invalidate-transform-1.html b/layout/reftests/transform/invalidate-transform-1.html
new file mode 100644
index 0000000000..d4403630a3
--- /dev/null
+++ b/layout/reftests/transform/invalidate-transform-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="UTF-8">
+<title></title>
+</head>
+<style type="text/css">
+#parent {
+  width: 200px;
+  height: 200px;
+}
+
+#box {
+  width: 200px;
+  height: 200px;
+  background-color: red;
+  z-index: 0;
+}
+
+#green {
+  position: absolute;
+  top: 8px;
+  left: 208px;
+  width: 200px;
+  height: 200px;
+  background-color: green;
+  z-index: 1;
+}
+</style>
+<body>
+
+<div id="parent">
+	<div id="box"></div>
+</div>
+<div id="green"></div>
+
+<script type="text/javascript">
+function doTest() {
+  var element = document.getElementById("parent");
+  element.style.transform = "translate(200px, 0px)";
+  document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-1-ref.html b/layout/reftests/transform/matrix-1-ref.html
new file mode 100644
index 0000000000..475b6bbe5c
--- /dev/null
+++ b/layout/reftests/transform/matrix-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: translatex(100px); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-1a.html b/layout/reftests/transform/matrix-1a.html
new file mode 100644
index 0000000000..9a5ff58d33
--- /dev/null
+++ b/layout/reftests/transform/matrix-1a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: matrix(1, 0, 0, 1, 100, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-2-ref.html b/layout/reftests/transform/matrix-2-ref.html
new file mode 100644
index 0000000000..66d0d80b43
--- /dev/null
+++ b/layout/reftests/transform/matrix-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: translatey(100px); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-2a.html b/layout/reftests/transform/matrix-2a.html
new file mode 100644
index 0000000000..314f335b8f
--- /dev/null
+++ b/layout/reftests/transform/matrix-2a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: matrix(1, 0, 0, 1, 0, 100); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-3-ref.html b/layout/reftests/transform/matrix-3-ref.html
new file mode 100644
index 0000000000..0dbcfc2bf3
--- /dev/null
+++ b/layout/reftests/transform/matrix-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: translatex(47%); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-3a.html b/layout/reftests/transform/matrix-3a.html
new file mode 100644
index 0000000000..5277707912
--- /dev/null
+++ b/layout/reftests/transform/matrix-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: matrix(1, 0, 0, 1, 47, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-4-ref.html b/layout/reftests/transform/matrix-4-ref.html
new file mode 100644
index 0000000000..087d8c8a83
--- /dev/null
+++ b/layout/reftests/transform/matrix-4-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: translatey(23%); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-4a.html b/layout/reftests/transform/matrix-4a.html
new file mode 100644
index 0000000000..c7224096e6
--- /dev/null
+++ b/layout/reftests/transform/matrix-4a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: matrix(1, 0, 0, 1, 0, 23); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-5-ref.html b/layout/reftests/transform/matrix-5-ref.html
new file mode 100644
index 0000000000..52a89c6e52
--- /dev/null
+++ b/layout/reftests/transform/matrix-5-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: skewx(45deg); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-5a.html b/layout/reftests/transform/matrix-5a.html
new file mode 100644
index 0000000000..cfcc9ddb18
--- /dev/null
+++ b/layout/reftests/transform/matrix-5a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: matrix(1, 0, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-6-ref.html b/layout/reftests/transform/matrix-6-ref.html
new file mode 100644
index 0000000000..e97131cd34
--- /dev/null
+++ b/layout/reftests/transform/matrix-6-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: skewy(45deg); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-6a.html b/layout/reftests/transform/matrix-6a.html
new file mode 100644
index 0000000000..88650733c2
--- /dev/null
+++ b/layout/reftests/transform/matrix-6a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: matrix(1, 1, 0, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-7-ref.html b/layout/reftests/transform/matrix-7-ref.html
new file mode 100644
index 0000000000..dddab1a738
--- /dev/null
+++ b/layout/reftests/transform/matrix-7-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: scale(2, 4); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-7a.html b/layout/reftests/transform/matrix-7a.html
new file mode 100644
index 0000000000..46904f1b26
--- /dev/null
+++ b/layout/reftests/transform/matrix-7a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="transform: matrix(2, 0, 0, 4, 0, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix3d-1-ref.html b/layout/reftests/transform/matrix3d-1-ref.html
new file mode 100644
index 0000000000..d2f257d531
--- /dev/null
+++ b/layout/reftests/transform/matrix3d-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+  <style>
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix3d-1.html b/layout/reftests/transform/matrix3d-1.html
new file mode 100644
index 0000000000..6952333530
--- /dev/null
+++ b/layout/reftests/transform/matrix3d-1.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+  <!-- We do not support the 3d matrix yet, so this should do nothing -->
+  <style>
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      transform: matrix3d(1, 0, 100, 1, 10,
+                               1, 100, 1, 1, 10,
+                               1, 100, 2, 3, 12,
+                               12, 100, 3, 4, 5);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1-ref.html b/layout/reftests/transform/origin-1-ref.html
new file mode 100644
index 0000000000..5c1dae55c0
--- /dev/null
+++ b/layout/reftests/transform/origin-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg);">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1a.html b/layout/reftests/transform/origin-1a.html
new file mode 100644
index 0000000000..0234f4255e
--- /dev/null
+++ b/layout/reftests/transform/origin-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 0% 0%">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1b.html b/layout/reftests/transform/origin-1b.html
new file mode 100644
index 0000000000..e3c8289f67
--- /dev/null
+++ b/layout/reftests/transform/origin-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin:100% 50%">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2-ref.html b/layout/reftests/transform/origin-2-ref.html
new file mode 100644
index 0000000000..5c1dae55c0
--- /dev/null
+++ b/layout/reftests/transform/origin-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg);">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2a.html b/layout/reftests/transform/origin-2a.html
new file mode 100644
index 0000000000..79e49aa143
--- /dev/null
+++ b/layout/reftests/transform/origin-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 101px 51px;">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2b.html b/layout/reftests/transform/origin-2b.html
new file mode 100644
index 0000000000..70dbd361c8
--- /dev/null
+++ b/layout/reftests/transform/origin-2b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 101px 50%;">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2c.html b/layout/reftests/transform/origin-2c.html
new file mode 100644
index 0000000000..722b7bca74
--- /dev/null
+++ b/layout/reftests/transform/origin-2c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 50% 51px;">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1-ref.html b/layout/reftests/transform/origin-name-1-ref.html
new file mode 100644
index 0000000000..16af6cd062
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: 0% 0%;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1a.html b/layout/reftests/transform/origin-name-1a.html
new file mode 100644
index 0000000000..c49831cdff
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top left;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1b.html b/layout/reftests/transform/origin-name-1b.html
new file mode 100644
index 0000000000..381cb52fdc
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: left top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2-ref.html b/layout/reftests/transform/origin-name-2-ref.html
new file mode 100644
index 0000000000..d84b06737c
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: 50% 0%;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2a.html b/layout/reftests/transform/origin-name-2a.html
new file mode 100644
index 0000000000..f537c2dc9a
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2b.html b/layout/reftests/transform/origin-name-2b.html
new file mode 100644
index 0000000000..d76cffd576
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top center;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2c.html b/layout/reftests/transform/origin-name-2c.html
new file mode 100644
index 0000000000..ab462fab65
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2c.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: center top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3-ref.html b/layout/reftests/transform/origin-name-3-ref.html
new file mode 100644
index 0000000000..b98e1baf19
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: 100% 0%;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3a.html b/layout/reftests/transform/origin-name-3a.html
new file mode 100644
index 0000000000..c7210d3210
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top right;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3b.html b/layout/reftests/transform/origin-name-3b.html
new file mode 100644
index 0000000000..eddebf4ce3
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: right top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-ref.html b/layout/reftests/transform/partial-prerender-expansion-ref.html
new file mode 100644
index 0000000000..3c8eec7f69
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  background-color: green;
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+}
+</style>
+<div id="target"></div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-rotate.html b/layout/reftests/transform/partial-prerender-expansion-rotate.html
new file mode 100644
index 0000000000..a823989656
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-rotate.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  from { transform: translate(-50vw, -50vh) rotate(85deg); }
+  to { transform: translate(-50vw, -50vh) rotate(90deg); }
+}
+#target {
+  width: 200vw;
+  height: 200vh;
+  position: absolute;
+  transform-origin: 100vw 100vh;
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    Webrender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <rect fill="green" width="16" height="16"></rect>
+  </svg>
+</div>
+<script>
+// Waiting MozReftestInvalidate event makes this test fail for some reasons.
+// so we use window.onload instead.
+window.onload = () => {
+  target.style.animation = "anim 100s step-end reverse";
+  target.addEventListener("animationstart", () => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+};
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-translate.html b/layout/reftests/transform/partial-prerender-expansion-translate.html
new file mode 100644
index 0000000000..4b3ea595a9
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-translate.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  from { transform: translateX(0px); }
+}
+#target {
+  width: 200vw;
+  height: 100vh;
+  position: absolute;
+  /* Some part of this element needs to be visible initially so that  */
+  /* a display item for this element is generated, thus the transform */
+  /* animation runs on the compositor.                                */
+  transform: translateX(90vw);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    Webrender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <rect fill="green" width="16" height="16"></rect>
+  </svg>
+</div>
+<script>
+// Waiting MozReftestInvalidate event makes this test fail for some reasons.
+// so we use window.onload instead.
+window.onload = () => {
+  target.style.animation = "anim 100s step-end reverse";
+  target.addEventListener("animationstart", () => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+};
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html
new file mode 100644
index 0000000000..2421735b2e
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush" reftest-resolution="0.5">
+<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1">
+<!--
+  A test for a partial pre-rendered transform animation with <1.0 resolution.
+  -->
+<style>
+html {
+  scrollbar-width: none;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* The reftest window size is (800x1000) and it's scaled by 0.5             */
+  /* (= 1600x2000), which means the partial pre-render size is (2250x2250) so */
+  /* move to a position inside the pre-render area and away from the          */
+  /* pre-render right edge, translateX(-650px), so that we can avoid blurry   */
+  /* edges in comparison with the reference.                                  */
+  to { transform: translateX(-400px); }
+}
+#target {
+  width: 4000px;
+  height: 4000px;
+  position: absolute;
+  transform: translateX(0px);
+}
+</style>
+<div id="target">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4000 4000">
+    <rect fill="green" x="0"    width="1600" height="4000"></rect>
+    <rect fill="blue"  x="1600" width="650"  height="4000"></rect>
+    <rect fill="red"   x="2250" width="1750" height="4000"></rect>
+  </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 100s 1s step-start";
+  target.addEventListener("animationstart", () => {
+    // animtionstart event is fired just before requestAnimationFrame callbacks,
+    // so we need to wait two rAF to make sure the initial animation value is
+    // composited on the compositor.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        document.documentElement.classList.remove("reftest-wait");
+      });
+    });
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html
new file mode 100644
index 0000000000..9822296102
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush" reftest-resolution="0.5">
+<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1">
+<!--
+  A variant of partial-prerender-expansion-with-resolution-2.html, a partial
+  pre-rendered transform animation in an iframe with <1.0 resolution.
+  -->
+<style>
+html {
+  scrollbar-width: none;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+</style>
+<iframe style="width:1600px; height:2000px; border: 0"
+        srcdoc="<!DOCTYPE HTML>
+                <html>
+                <style>
+                html {
+                  scrollbar-width: none;
+                }
+                html, body {
+                  margin: 0;
+                  padding: 0;
+                }
+
+                @keyframes anim {
+                  /* The reftest window size is (800x1000) and it's scaled by */
+                  /* 0.5 (= 1600x2000), which means the partial pre-render    */
+                  /* size is (2250x2250) so move to a position inside the     */
+                  /* pre-render area and away from the pre-render right edge, */
+                  /* translateX(-650px), so that we can avoid blurry edges in */
+                  /* comparison with the reference.                           */
+                  to { transform: translateX(-400px); }
+                }
+                #target {
+                  width: 4000px;
+                  height: 4000px;
+                  position: absolute;
+                  transform: translateX(0px);
+                }
+                </style>
+                <div id='target'>
+                  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 4000'>
+                    <rect fill='green' x='0'    width='1600' height='4000'></rect>
+                    <rect fill='blue'  x='1600' width='650'  height='4000'></rect>
+                    <rect fill='red'   x='2250' width='1750' height='4000'></rect>
+                  </svg>
+                </div>
+                <script>
+                window.addEventListener('message', () => {
+                  if (event.data == 'start') {
+                    target.style.animation = 'anim 100s 1s step-start';
+                    target.addEventListener('animationstart', () => {
+                      parent.postMessage('animationstart', '*');
+                    });
+                  }
+                });
+                </script></html>">
+</iframe>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  document.querySelector("iframe").contentWindow.postMessage("start", "*");
+}, { once: true });
+
+window.addEventListener("message", event => {
+  if (event.data == "animationstart") {
+    document.documentElement.classList.remove('reftest-wait');
+  }
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html
new file mode 100644
index 0000000000..ae4b009596
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html reftest-resolution="0.5">
+<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1">
+<style>
+html {
+  scrollbar-width: none;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  width: 4000px;
+  height: 4000px;
+  position: absolute;
+  transform: translateX(-400px);
+}
+</style>
+<div id="target">
+  <svg xmlns="http://www.w3.org/4000/svg" viewBox="0 0 4000 4000">
+    <rect fill="green" x="0"    width="1600" height="4000"></rect>
+    <rect fill="blue"  x="1600" width="650"  height="4000"></rect>
+    <rect fill="red"   x="2250" width="1750" height="4000"></rect>
+  </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-1-ref.html b/layout/reftests/transform/partial-prerender-in-svg-1-ref.html
new file mode 100644
index 0000000000..61fb6553a4
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  transform: translateX(-725px);
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+  <g id="target">
+    <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+      <rect fill="green" x="0"    width="1125" height="400"></rect>
+      <rect fill="red"   x="1125" width="800"  height="400"></rect>
+    </svg>
+  </g>
+</svg>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-1.html b/layout/reftests/transform/partial-prerender-in-svg-1.html
new file mode 100644
index 0000000000..141cf4f68f
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* The reftest window size is (800x1000), which means the partial prerender */
+  /* area of (400x400) clipped target is (1125x400). Thus -725px(= 400 - 1125)*/
+  /* is the boundary where jank happens, so we choose a value close to -725px */
+  /* so that within a next couple of frames jank should happen. */
+  0% { transform: translateX(-724px); }
+  100% { transform: translateX(-2000px); }
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+  <g id="target">
+    <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+      <rect fill="green" x="0"    width="1125" height="400"></rect>
+      <rect fill="red"   x="1125" width="800"  height="400"></rect>
+    </svg>
+  </g>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  // A shorter animation-duration than we normally use (100s) because if we used
+  // the longer duration it may NOT fail this test even if any jank happens.
+  target.style.animation = "anim 10s 1s";
+  target.addEventListener("animationstart", () => {
+    // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+    // boundary (725px).
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 1000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-2.html b/layout/reftests/transform/partial-prerender-in-svg-2.html
new file mode 100644
index 0000000000..9595f82098
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-2.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* The reftest window size is (800x1000), which means the partial prerender */
+  /* area of (400x400) clipped target is (1125x400). Thus -725px(= 400 - 1125)*/
+  /* is the boundary where jank happens, so we choose a value close to -725px */
+  /* so that within a next couple of frames jank should happen. */
+  0% { transform: translateX(-724px); }
+  100% { transform: translateX(-2000px); }
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
+     style="overflow: scroll">
+  <g id="target">
+    <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+      <rect fill="green" x="0"    width="1125" height="400"></rect>
+      <rect fill="red"   x="1125" width="800"  height="400"></rect>
+    </svg>
+  </g>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  // A shorter animation-duration than we normally use (100s) because if we used
+  // the longer duration it may NOT fail this test even if any jank happens.
+  target.style.animation = "anim 10s 1s";
+  target.addEventListener("animationstart", () => {
+    // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+    // boundary (725px).
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 1000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-3-ref.html b/layout/reftests/transform/partial-prerender-in-svg-3-ref.html
new file mode 100644
index 0000000000..2de1ee211c
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  transform: translateX(-325px);
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
+     style="overflow: visible">
+  <g id="target">
+    <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+      <rect fill="green" x="0"    width="1125" height="400"></rect>
+      <rect fill="red"   x="1125" width="800"  height="400"></rect>
+    </svg>
+  </g>
+</svg>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-3.html b/layout/reftests/transform/partial-prerender-in-svg-3.html
new file mode 100644
index 0000000000..f6f4155b5f
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-3.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* The reftest window size is (800x1000), which means the partial prerender */
+  /* area is (1125x400). Thus -325px(= 800 - 1125) is the boundary where jank */
+  /* happens, so we choose a value close to -325px so that within a next      */
+  /* couple of frames jank should happen. */
+  0% { transform: translateX(-324px); }
+  100% { transform: translateX(-2000px); }
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
+     style="overflow: visible">
+  <g id="target">
+    <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+      <rect fill="green" x="0"    width="1125" height="400"></rect>
+      <rect fill="red"   x="1125" width="800"  height="400"></rect>
+    </svg>
+  </g>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  // A shorter animation-duration than we normally use (100s) because if we used
+  // the longer duration it may NOT fail this test even if any jank happens.
+  target.style.animation = "anim 10s 1s";
+  target.addEventListener("animationstart", () => {
+    // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+    // boundary (325px).
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 1000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-1.html b/layout/reftests/transform/partial-prerender-translate-1.html
new file mode 100644
index 0000000000..9cd8fd6441
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-1.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test for a partial pre-rendered transform animation moves to a place where
+  the whole area of the transform animation is out of the viewport.
+  We consider it jank, thus we report it to the main-thread, then we clear out
+  the initial green rectangle, thus the result should be a blank page.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* translate to a position the element is completely outside of the */
+  /* viewport                                                         */
+  to { transform: translateX(-300vw); }
+}
+#target {
+  width: 200vw;
+  height: 200vh;
+  position: absolute;
+  /* Some part of this element needs to be visible initially so that  */
+  /* a display item for this element is generated, thus the transform */
+  /* animation runs on the compositor.                                */
+  transform: translateX(-110vw);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <rect fill="green" width="16" height="16"></rect>
+  </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 100s 1s step-start";
+  target.addEventListener("animationstart", () => {
+    // Wait 100ms to make sure we can report the jank to the main-thread and
+    // in response to the report we can do a paint process on the main-thread.
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 100);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-10-ref.html b/layout/reftests/transform/partial-prerender-translate-10-ref.html
new file mode 100644
index 0000000000..c85aa22835
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-10-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  width: 1600px;
+  height: 1000px;
+  position: absolute;
+  left: -200px;
+  transform: translateX(0px);
+}
+</style>
+<div id="target">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
+    <rect fill="green" x="0"      width="800" height="1000"></rect>
+    <rect fill="blue"  x="800"    width="362.5" height="1000"></rect>
+    <rect fill="red"   x="1162.5" width="837.5" height="1000"></rect>
+  </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-10.html b/layout/reftests/transform/partial-prerender-translate-10.html
new file mode 100644
index 0000000000..3bf5c57dc7
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-10.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test case for a transform animation frame is positioned by specifying
+  left property (i.e. not transform property) so that if we didn't factor the
+  offset (from the reference frame) in the jank mechanism, the animation will
+  jank at wrong positions.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  0% { transform: translateX(0px); animation-timing-function: step-end; }
+  /* After 1s, translate to a position where it's still inside the pre-render */
+  /* area.                                                                    */
+  /* The right edge of the pre-render area is 1162.5px (see below for the     */
+  /* calculation) and there is `left: -200px` property, which mean            */
+  /* translateX(-162.5px) is the point where a jank happens.  But we don't    */
+  /* want to cause a jank at the edge since it results blurry boundary        */
+  /* between green and blue areas because the jank will happen at a point     */
+  /* very close to -162.5px, e.g. -162.4px.                                   */
+  /* So what we try to do here is that, compositing where jank will never     */
+  /* happen with the left property value, then trying to composite where a    */
+  /* jank will happen if the left (-200px) value is not properly handled in   */
+  /* the jank mechanism because the horizontal pre-render range is            */
+  /* [37.5px, 1162.5px] (see below the calculation)                           */
+  1% { transform: translateX(-150px); animation-timing-function: step-end; }
+  /* We have 100ms margin to avoid skipping this very keyframe */
+  1.1% { transform: translateX(-150px); animation-timing-function: step-start; }
+  /* Back to the original position where jank should NEVER happen if the left */
+  /* property is handled in the jank mechanism, jank should happen if the     */
+  /* property is NOT handled                                                  */
+  100% { transform: translateX(0px); }
+}
+#target {
+  width: 1600px;
+  height: 1000px;
+  position: absolute;
+  left: -200px;
+  transform: translateX(0px);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+
+    The pre-render area width is 1125px, thus the expanded area outside of the
+    visible area is 325px. The 325px width is expaned to both directions,
+    leftward and rightward. Meanwhile, the horizontal visible frame range is
+    [200px, 1000px] because of `left: -200px`, so the left edge of the
+    pre-render area is 37.5px (= 200 - 325/2), the right edge is 1162.5px
+    (= 1000 + 325/2).
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
+    <rect fill="green" x="0"      width="800" height="1000"></rect>
+    <rect fill="blue"  x="800"    width="362.5" height="1000"></rect>
+    <rect fill="red"   x="1162.5" width="837.5" height="1000"></rect>
+  </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  // We don't specify 1s delay here since the @keyframes rule has already
+  // a kind of like delay with step-end timing function, which means even if
+  // the animation was painted at 0.1s position due to a lag on the main-thread
+  // (it quite often happens on our CIs!), the initial animation value on the
+  // compositor should be still the first value translateX(0px).
+  target.style.animation = "anim 100s";
+  target.addEventListener("animationstart", () => {
+    // Wait two seconds to make sure we tried to composite translateX(0px).
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 2000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-11-ref.html b/layout/reftests/transform/partial-prerender-translate-11-ref.html
new file mode 100644
index 0000000000..4836be1142
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-11-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+}
+#target {
+  width: 30000px;
+  height: 100px;
+  transform: translateX(-2600px);
+}
+</style>
+<div style="width: 50%; overflow: hidden">
+  <div id="target">
+    <!--
+      Put an SVG element so that the transform display item has a blob on
+      WebRender which means this test properly fails without the proper fix.
+      -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 100">
+      <rect fill="green" x="2500" width="400" height="100"></rect>
+      <rect fill="blue" x="2900" width="100" height="100"></rect>
+    </svg>
+  </div>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-11.html b/layout/reftests/transform/partial-prerender-translate-11.html
new file mode 100644
index 0000000000..ecb6cf25d8
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-11.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test case that the nearest oveflow:hidden scroll frame is the clip frame
+  for the partial pre-render transform animation.
+  -->
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+}
+#target {
+  width: 30000px;
+  height: 100px;
+  transform: translateX(-2500px);
+  /*
+   * 1s delay so that we can avoid undesired composition, i.e. the first
+   * composition on the composition would be the final transition value.
+   */
+  transition: transform 100s step-start 1s;
+}
+</style>
+<div style="width: 50%; overflow: hidden">
+  <div id="target">
+    <!--
+      Put an SVG element so that the transform display item has a blob on
+      WebRender which means this test properly fails without the proper fix.
+      -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 100">
+      <rect fill="green" x="2500" width="400" height="100"></rect>
+      <rect fill="blue" x="2900" width="100" height="100"></rect>
+    </svg>
+  </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.transform = "translateX(-2600px)";
+  target.addEventListener("transitionstart", () => {
+    // Wait a second to make sure the transition has been composited on the
+    // compositor.
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 1000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-12.html b/layout/reftests/transform/partial-prerender-translate-12.html
new file mode 100644
index 0000000000..6fb2768284
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-12.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test for a partial pre-rendered transform animation moves to a place where
+  the partial pre-render area of the transform animation is out of the viewport,
+  but part of the element is still visible.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* jump to a position where the element is completely outside of the */
+  /* partial pre-render area but the element is still visible */
+  to { transform: translateX(-200vw); }
+}
+#target {
+  width: 400vw;
+  height: 400vh;
+  position: absolute;
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <rect fill="green" width="16" height="16"></rect>
+  </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 100s 1s step-start";
+  target.addEventListener("animationstart", () => {
+    // animtionstart event is fired just before requestAnimationFrame callbacks,
+    // so we need to wait two rAF to make sure the initial animation value is
+    // composited on the compositor.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        document.documentElement.classList.remove("reftest-wait");
+      });
+    });
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-2-ref.html b/layout/reftests/transform/partial-prerender-translate-2-ref.html
new file mode 100644
index 0000000000..98ee6a1f14
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  width: 2000px;
+  height: 2000px;
+  position: absolute;
+  transform: translateX(-325px);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <rect fill="green" x="0" width="1125" height="2000"></rect>
+    <rect fill="red" x="1125" width="875" height="2000"></rect>
+  </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-2.html b/layout/reftests/transform/partial-prerender-translate-2.html
new file mode 100644
index 0000000000..550a74084a
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-2.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test for a partial pre-rendered transform animation moves to a place where
+  jank happens.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* The reftest window size is (800x1000), which means the partial prerender */
+  /* area is (1125x1125). Thus -325px(= 800 - 1125) is the boundary where     */
+  /* jank happens, so we choose a value close to -325px so that within a next */
+  /* couple of frames jank should happen. */
+  0% { transform: translateX(-324px); }
+  100% { transform: translateX(-2000px); }
+}
+#target {
+  width: 2000px;
+  height: 2000px;
+  position: absolute;
+  transform: translateX(0px);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
+    <!-- green on the pre-render area -->
+    <rect fill="green" x="0" width="1125" height="2000"></rect>
+    <rect fill="red" x="1125" width="875" height="2000"></rect>
+  </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  // A shorter animation-duration than we normally use (100s) because if we used
+  // the longer duration it may NOT fail this test even if any jank happens.
+  target.style.animation = "anim 10s 1s";
+  target.addEventListener("animationstart", () => {
+    // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+    // boundary (325px).
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 1000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-3-ref.html b/layout/reftests/transform/partial-prerender-translate-3-ref.html
new file mode 100644
index 0000000000..d4941007bd
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-3-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  background-color: green;
+  width: 50vw;
+  height: 100vh;
+  position: absolute;
+}
+</style>
+<div id="target"></div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-3.html b/layout/reftests/transform/partial-prerender-translate-3.html
new file mode 100644
index 0000000000..6e4ad202b1
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test for a partial pre-rendered transform animation moves to a place where
+  the partial pre-rendered area is completely out of the viewport but still
+  there remains some amount of area of the entire transform element.
+  If we mis-recognize it as NOT a jank, checkerboading will happen.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* translate to a position the partial pre-rendered area is outside of the */
+  /* viewport but still there should remain visible area. */
+  to { transform: translateX(-150vw); }
+}
+#target {
+  width: 200vw;
+  height: 200vh;
+  position: absolute;
+  transform: translateX(0vw);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <rect fill="green" width="16" height="16"></rect>
+  </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 100s 1s step-start";
+  target.addEventListener("animationstart", () => {
+    // animtionstart event is fired just before requestAnimationFrame callbacks,
+    // so we need to wait two rAF to make sure the initial animation value is
+    // composited on the compositor.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        document.documentElement.classList.remove("reftest-wait");
+      });
+    });
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-4.html b/layout/reftests/transform/partial-prerender-translate-4.html
new file mode 100644
index 0000000000..11ff491b87
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-4.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test that a partial pre-rendered transform animation is transformed by an
+  ancestor transform value.
+  If we don't factor the ancestor's transform, we mis-recognize janks, which
+  means janked at the initial translateX(0vw) position, thus white blank area
+  will appears.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* translate to a position where the left edge of partial pre-rendered on */
+  /* the left edge of the viewport. */
+  to { transform: translateX(-50vw); }
+}
+#target {
+  width: 300vw;
+  height: 300vh;
+  transform: translateX(0vw);
+}
+</style>
+<div style="transform: translateX(50vw);">
+  <div id="target">
+    <!--
+      Put an SVG element so that the transform display item has a blob on
+      WebRender which means this test properly fails without the proper fix.
+      -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <rect fill="green" width="16" height="16"></rect>
+    </svg>
+  </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 100s 1s step-start";
+  target.addEventListener("animationstart", () => {
+    // animtionstart event is fired just before requestAnimationFrame callbacks,
+    // so we need to wait two rAF to make sure the initial animation value is
+    // composited on the compositor.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        document.documentElement.classList.remove("reftest-wait");
+      });
+    });
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-5-ref.html b/layout/reftests/transform/partial-prerender-translate-5-ref.html
new file mode 100644
index 0000000000..c2047502af
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-5-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="1000">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow-x: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  width: 800px;
+  height: 1600px;
+  transform: translateY(-500px);
+}
+</style>
+<div style="width: 800px; height: 2000px"><!-- spacer --></div>
+<div style="position: fixed; top: 400px">
+  <div id="target">
+    <!--
+      Put an SVG element so that the transform display item has a blob on
+      WebRender which means this test properly fails without the proper fix.
+      -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600">
+      <rect fill="green" y="0"    width="800" height="1000"></rect>
+      <rect fill="blue"  y="1000" width="800" height="125"></rect>
+      <rect fill="red"   y="1125" width="800" height="875"></rect>
+    </svg>
+  </div>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-5.html b/layout/reftests/transform/partial-prerender-translate-5.html
new file mode 100644
index 0000000000..6225b7de25
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-5.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush"
+      reftest-async-scroll
+      reftest-displayport-x="0" reftest-displayport-y="0"
+      reftest-displayport-w="800" reftest-displayport-h="2000"
+      reftest-async-scroll-x="0" reftest-async-scroll-y="1000">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test that a partial pre-rendered transform animation is in a position:fixed
+  layer.
+  -->
+<style>
+html {
+  overflow-x: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  to { transform: translateY(-500px); }
+}
+#target {
+  width: 800px;
+  height: 1600px;
+  transform: translateY(-400px);
+}
+</style>
+<div style="width: 800px; height: 2000px"><!-- spacer --></div>
+<div style="position: fixed; top: 400px">
+  <div id="target">
+    <!--
+      Put an SVG element so that the transform display item has a blob on
+      WebRender which means this test properly fails without the proper fix.
+      -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600">
+      <rect fill="green" y="0"    width="800" height="1000"></rect>
+      <rect fill="blue"  y="1000" width="800" height="125"></rect>
+      <rect fill="red"   y="1125" width="800" height="875"></rect>
+    </svg>
+  </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 100s 1s step-start";
+  target.addEventListener("animationstart", () => {
+    // animtionstart event is fired just before requestAnimationFrame callbacks,
+    // so we need to wait two rAF to make sure the initial animation value is
+    // composited on the compositor.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        document.documentElement.classList.remove("reftest-wait");
+      });
+    });
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-6-ref.html b/layout/reftests/transform/partial-prerender-translate-6-ref.html
new file mode 100644
index 0000000000..dece645afb
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-6-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+#target {
+  width: 1600px;
+  height: 900px;
+  position: absolute;
+  transform: translateX(-325px);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900">
+    <rect fill="green" x="0" width="1125" height="900"></rect>
+    <rect fill="red" x="1125" width="875" height="900"></rect>
+  </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-6.html b/layout/reftests/transform/partial-prerender-translate-6.html
new file mode 100644
index 0000000000..58b34c6cae
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-6.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* The reftest window size is (800x1000), which means the partial prerender */
+  /* area is (1125x900). Thus -325px(= 800 - 1125) is the boundary where jank */
+  /* happens, so we choose a value close to -325px so that within a next      */
+  /* couple of frames jank should happen. */
+  0% { transform: translateX(-324px); }
+  100% { transform: translateX(-2000px); }
+}
+#target {
+  width: 1600px;
+  /* Use a smallar value than the reftest window height to avoid bloating up  */
+  /* svg inside this element beyond the window height */
+  height: 900px;
+  position: absolute;
+  transform: translateX(0px);
+}
+</style>
+<div id="target">
+  <!--
+    Put an SVG element so that the transform display item has a blob on
+    WebRender which means this test properly fails without the proper fix.
+    Note: As SVG items get "webrenderized" this test won't work. For now
+    rounded rectangles go through the blob path.
+    -->
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900">
+    <!-- green on the pre-render area -->
+    <rect fill="green" x="0" width="1125" height="900" rx="0.1"></rect>
+    <rect fill="red" x="1125" width="875" height="900" rx="0.1"></rect>
+  </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  // A shorter animation-duration than we normally use (100s) because if we used
+  // the longer duration it may NOT fail this test even if any jank happens.
+  target.style.animation = "anim 10s 1s";
+  target.addEventListener("animationstart", () => {
+    // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+    // boundary (325px).
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 1000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-7.html b/layout/reftests/transform/partial-prerender-translate-7.html
new file mode 100644
index 0000000000..06c26c66fb
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-7.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  Another variant of partial-prerender-translate-2.html, but the transform
+  animation is scaled by the parent element.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+@keyframes anim {
+  /* translate to a position where the left edge of partial pre-rendered on */
+  /* the left edge of the viewport. */
+  0% { transform: translateX(-649px); }
+  100% { transform: translateX(-2000px); }
+}
+#target {
+  width: 4000px;
+  height: 2000px;
+  position: absolute;
+  transform: translateX(0);
+}
+</style>
+<div style="transform: scale(0.5); transform-origin: 0 0">
+  <div id="target">
+    <!--
+      Put an SVG element so that the transform display item has a blob on
+      WebRender which means this test properly fails without the proper fix.
+      -->
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4000 2000">
+      <rect fill="green" x="0" width="2250" height="2000"></rect>
+      <rect fill="red" x="2250" width="1750" height="2000"></rect>
+    </svg>
+  </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  target.style.animation = "anim 10s 1s";
+  target.addEventListener("animationstart", () => {
+    // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+    // boundary (650px).
+    setTimeout(() => {
+      document.documentElement.classList.remove("reftest-wait");
+    }, 1000);
+  });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-8-ref.html b/layout/reftests/transform/partial-prerender-translate-8-ref.html
new file mode 100644
index 0000000000..ddf5bda172
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-8-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A variant test of partial-prerender-translate-5.html but in this test the
+  position:fixed element is inside an iframe.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+</style>
+<iframe style="width:400px; height:1000px; border: 0"
+        srcdoc="<!DOCTYPE HTML>
+                <html>
+                <style>
+                html {
+                  overflow-x: hidden;
+                  scrollbar-width: none;
+                }
+                html, body {
+                  margin: 0;
+                  padding: 0;
+                }
+                #target {
+                  width: 1600px;
+                  height: 1000px;
+                  transform: translateX(-725px);
+                }
+                </style>
+                <div id='target'>
+                  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'>
+                    <rect fill='green' x='0'   width='800' height='1000'></rect>
+                    <rect fill='blue'  x='800' width='325' height='1000'></rect>
+                    <rect fill='red'   x='1125' width='675' height='1000'></rect>
+                  </svg>
+                </div>
+                </html>">
+</iframe>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-8.html b/layout/reftests/transform/partial-prerender-translate-8.html
new file mode 100644
index 0000000000..0fc633a532
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-8.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A test for a partial pre-rendered transform in an iframe, if the clip
+  rectangle of the transform animation were wrong, e.g. (800, 1000), the
+  transform animation janks at the initial position.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+</style>
+              <!-- a half width of the view port -->
+<iframe style="width:400px; height:1000px; border: 0"
+        srcdoc="<!DOCTYPE HTML>
+                <html>
+                <style>
+                html {
+                  overflow: hidden;
+                  scrollbar-width: none;
+                }
+                html, body {
+                  margin: 0;
+                  padding: 0;
+                }
+                @keyframes anim {
+                  /* the partial prerender area is (1125, 1000), thus         */
+                  /* translateX(-725px) is the position where the right edge  */
+                  /* of the partial prerender is positioned at the right edge */
+                  /* of the clip rect (400, 1000).                            */
+                  to { transform: translateX(-725px); }
+                }
+                #target {
+                  width: 1600px;
+                  height: 1000px;
+                  transform: translateX(0px);
+                }
+                </style>
+                <div id='target'>
+                  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'>
+                    <rect fill='green' x='0'   width='800' height='1000'></rect>
+                    <rect fill='blue'  x='800' width='325' height='1000'></rect>
+                    <rect fill='red'   x='1125' width='675' height='1000'></rect>
+                  </svg>
+                </div>
+                <script>
+                window.addEventListener('message', () => {
+                  if (event.data == 'start') {
+                    target.style.animation = 'anim 100s 1s step-start';
+                    target.addEventListener('animationstart', () => {
+                      parent.postMessage('animationstart', '*');
+                    });
+                  }
+                });
+                </script></html>">
+</iframe>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  document.querySelector("iframe").contentWindow.postMessage("start", "*");
+}, { once: true });
+
+window.addEventListener("message", event => {
+  if (event.data == "animationstart") {
+    document.documentElement.classList.remove('reftest-wait');
+  }
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-9.html b/layout/reftests/transform/partial-prerender-translate-9.html
new file mode 100644
index 0000000000..2c6af406cb
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-9.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html reftest-async-scroll class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+  A variant test of partial-prerender-translate-5.html but in this test the
+  position:fixed element is inside an iframe.
+  -->
+<style>
+html {
+  overflow: hidden;
+}
+body {
+  margin: 0px;
+  padding: 0px;
+}
+</style>
+<iframe style="width:800px; height:1000px; border: 0"
+        srcdoc="<!DOCTYPE HTML>
+                <html reftest-displayport-x='0' reftest-displayport-y='0'
+                      reftest-displayport-w='800' reftest-displayport-h='2000'
+                      reftest-async-scroll-x='0' reftest-async-scroll-y='1000'>
+                <style>
+                html {
+                  overflow-x: hidden;
+                }
+                html, body {
+                  margin: 0;
+                  padding: 0;
+                }
+                @keyframes anim {
+                  to { transform: translateY(-500px); }
+                }
+                #target {
+                  width: 800px;
+                  height: 1600px;
+                  transform: translateY(-400px);
+                }
+                </style>
+                <div style='width: 800px; height: 2000px'><!-- spacer --></div>
+                <div style='position: fixed; top: 400px'>
+                  <div id='target'>
+                    <!--
+                      Put an SVG element so that the transform display item has
+                      a blob on WebRender which means this test properly fails
+                      without the proper fix.
+                      -->
+                    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1600'>
+                      <rect fill='green' y='0'    width='800' height='1000'></rect>
+                      <rect fill='blue'  y='1000' width='800' height='125'></rect>
+                      <rect fill='red'   y='1125' width='800' height='875'></rect>
+                    </svg>
+                  </div>
+                </div>
+                <script>
+                window.addEventListener('message', () => {
+                  if (event.data == 'start') {
+                    target.style.animation = 'anim 100s 1s step-start';
+                    target.addEventListener('animationstart', () => {
+                      parent.postMessage('animationstart', '*');
+                    });
+                  }
+                });
+                </script></html>">
+</iframe>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+  document.querySelector("iframe").contentWindow.postMessage("start", "*");
+}, { once: true });
+
+window.addEventListener("message", event => {
+  if (event.data == "animationstart") {
+    document.documentElement.classList.remove('reftest-wait');
+  }
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/pass.svg b/layout/reftests/transform/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/transform/pass.svg
@@ -0,0 +1,8 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <title>Testcase reference file for generic pass condition</title>
+  <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/transform/percent-1-ref.html b/layout/reftests/transform/percent-1-ref.html
new file mode 100644
index 0000000000..52a1752bea
--- /dev/null
+++ b/layout/reftests/transform/percent-1-ref.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1a.html b/layout/reftests/transform/percent-1a.html
new file mode 100644
index 0000000000..3fcdf47ed6
--- /dev/null
+++ b/layout/reftests/transform/percent-1a.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1b.html b/layout/reftests/transform/percent-1b.html
new file mode 100644
index 0000000000..968225eaa1
--- /dev/null
+++ b/layout/reftests/transform/percent-1b.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1c.html b/layout/reftests/transform/percent-1c.html
new file mode 100644
index 0000000000..d84dbfc6ab
--- /dev/null
+++ b/layout/reftests/transform/percent-1c.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1d.html b/layout/reftests/transform/percent-1d.html
new file mode 100644
index 0000000000..9fda44acd0
--- /dev/null
+++ b/layout/reftests/transform/percent-1d.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1e.html b/layout/reftests/transform/percent-1e.html
new file mode 100644
index 0000000000..38bfcfc7d6
--- /dev/null
+++ b/layout/reftests/transform/percent-1e.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1f.html b/layout/reftests/transform/percent-1f.html
new file mode 100644
index 0000000000..3c20bd2bc2
--- /dev/null
+++ b/layout/reftests/transform/percent-1f.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1g.html b/layout/reftests/transform/percent-1g.html
new file mode 100644
index 0000000000..fab0c113a5
--- /dev/null
+++ b/layout/reftests/transform/percent-1g.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/propagate-inherit-boolean-ref.html b/layout/reftests/transform/propagate-inherit-boolean-ref.html
new file mode 100644
index 0000000000..a23b0a4f92
--- /dev/null
+++ b/layout/reftests/transform/propagate-inherit-boolean-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title></title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	p {
+		font-size: 20px;
+		margin: 0;
+		height: 0;
+		width: 100px;
+		transform: translateX(80px);
+	}
+
+	p#two {
+		font-size: 40px;
+		transform: translateX(160px);
+	}
+
+	</style>
+</head>
+<body>
+
+<p id="one">One</p>
+
+<p id="two">Two</p>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/propagate-inherit-boolean.html b/layout/reftests/transform/propagate-inherit-boolean.html
new file mode 100644
index 0000000000..47ba9bded1
--- /dev/null
+++ b/layout/reftests/transform/propagate-inherit-boolean.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title></title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	p {
+		font-size: 20px;
+		margin: 0;
+		height: 0;
+		width: 100px;
+		transform: translateX(4em);
+	}
+
+	p#two {
+		font-size: 40px;
+	}
+
+	</style>
+</head>
+<body>
+
+<p id="one">One</p>
+
+<p id="two">Two</p>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/reftest.list b/layout/reftests/transform/reftest.list
new file mode 100644
index 0000000000..86f8002ce1
--- /dev/null
+++ b/layout/reftests/transform/reftest.list
@@ -0,0 +1,180 @@
+# Transforms specifying singular matrices shouldn't display at all.
+# NOTE: Regressions might manifest themselves as reftest timeouts on
+# this test.
+== singular-1a.html about:blank
+# Multiple transforms should act identically to nested divs.
+fuzzy(0-1,0-27) pref(apz.allow_zooming,true) == compound-1a.html compound-1-ref.html
+!= compound-1a.html compound-1-fail.html
+== dynamic-inherit-1.html dynamic-inherit-1-ref.html
+== dynamic-addremove-1a.html dynamic-addremove-1-ref.html
+== dynamic-addremove-1b.html dynamic-addremove-1-ref.html
+== dynamic-addremove-1c.html dynamic-addremove-1-ref.html
+== dynamic-addremove-2.html dynamic-addremove-2-ref.html
+# translatex should act like position: relative
+== translatex-1a.html translatex-1-ref.html
+== translatex-1b.html translatex-1-ref.html
+== translatex-1c.html translatex-1-ref.html
+== translatex-1d.html translatex-1-ref.html
+== translatex-1e.html translatex-1-ref.html
+== translatex-1a.html translatex-1-ref-2.html
+# translatey should act like position: relative
+== translatey-1a.html translatey-1-ref.html
+== translatey-1b.html translatey-1-ref.html
+== translatey-1c.html translatey-1-ref.html
+== translatey-1d.html translatey-1-ref.html
+== translatey-1e.html translatey-1-ref.html
+# matrices defined to be translations should act like position: relative
+== translatex-2.html translatex-1-ref.html
+== translatey-2.html translatey-1-ref.html
+# translate should act like position: relative
+!= translate-1a.html translate-1-ref.html
+== translate-1b.html translate-1-ref.html
+== translate-1c.html translate-1-ref.html
+== translate-1d.html translate-1-ref.html
+== translate-1e.html translate-1-ref.html
+== translate-2a.html translate-2-ref.html
+== translate-3.html translate-3-ref.html
+# rotate: Several rotations of the same object should be idempotent.  These
+# tests are currently disabled because of subpixel (< 0.00001 gfx units)
+# rounding errors.
+random == rotate-1a.html rotate-1-ref.html
+random == rotate-1b.html rotate-1-ref.html
+random == rotate-1c.html rotate-1-ref.html
+random == rotate-1d.html rotate-1-ref.html
+random == rotate-1e.html rotate-1-ref.html
+random == rotate-1f.html rotate-1-ref.html
+# rotate: 90deg rotations should be indistinguishable from objects constructed
+# to look the same.
+== rotate-2a.html rotate-2-ref.html
+== rotate-2b.html rotate-2-ref.html
+# -transform-origin: We should NOT get the same images when using different
+# -transform-origins.
+!= origin-1a.html origin-1-ref.html
+!= origin-1b.html origin-1-ref.html
+# -transform-origin: We should get the same images when using equivalent
+# -transform-origins.
+== origin-2a.html origin-2-ref.html
+== origin-2b.html origin-2-ref.html
+== origin-2c.html origin-2-ref.html
+# "Translate" with percentages should be indistinguishable from translate with
+# equivalent values.
+== percent-1a.html percent-1-ref.html
+fuzzy(0-1,0-2) == percent-1b.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1c.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1d.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1e.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1f.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1g.html percent-1-ref.html
+# Transformed elements are abs-pos and fixed-pos containing blocks.
+== abspos-1a.html abspos-1-ref.html
+== abspos-1b.html abspos-1-ref.html
+== abspos-1c.html abspos-1-ref.html
+== abspos-1d.html abspos-1-ref.html
+!= abspos-1e.html abspos-1-ref.html
+== abspos-1f.html abspos-1-ref.html
+== abspos-1g.html abspos-1-ref.html
+# Origin can use "top" "right" etc.
+== origin-name-1a.html origin-name-1-ref.html
+fuzzy(0-1,0-19) == origin-name-1b.html origin-name-1-ref.html
+== origin-name-2a.html origin-name-2-ref.html
+== origin-name-2b.html origin-name-2-ref.html
+fuzzy(0-1,0-350) == origin-name-2c.html origin-name-2-ref.html
+== origin-name-3a.html origin-name-3-ref.html
+== origin-name-3b.html origin-name-3-ref.html
+# Snapping still applies after 90 degree rotations.
+== snapping-1.html snapping-1-ref.html
+# SVG effects should work on transforms.
+== transform-svg-1a.xhtml transform-svg-1-ref.xhtml
+fuzzy(0-2,0-500) == transform-svg-2a.xhtml transform-svg-2-ref.xhtml
+!= transform-svg-2a.xhtml transform-svg-2-fail.xhtml
+# skew should allow a mix of one and two parameters.
+fuzzy(0-1,0-20) == skew-1a.html skew-1-ref.html
+fuzzy(0-1,0-80) == skew-1b.html skew-1-ref.html
+fuzzy(0-1,0-250) == skew-2a.html skew-2-ref.html
+# matrix with values equal to other transforms should behave indistinguishably
+== matrix-1a.html matrix-1-ref.html
+== matrix-2a.html matrix-2-ref.html
+== matrix-3a.html matrix-3-ref.html
+== matrix-4a.html matrix-4-ref.html
+fuzzy(0-1,0-120) == matrix-5a.html matrix-5-ref.html
+fuzzy(0-1,0-110) == matrix-6a.html matrix-6-ref.html
+== matrix-7a.html matrix-7-ref.html
+# ensure matrix 3d does not break us - should do nothing
+== matrix3d-1.html matrix3d-1-ref.html
+# Test that complex transform can be reversed
+fuzzy(0-2,0-5) == stresstest-1.html stresstest-1-ref.html
+# Test scale transforms
+== scalex-1.html scalex-1-ref.html
+== scaley-1.html scaley-1-ref.html
+== scale-1a.html scale-1-ref.html
+== scale-1b.html scale-1-ref.html
+== scale-percent-1.html scale-percent-1-ref.html
+== scaled-blend-mode.html scaled-blend-mode-ref.html
+# Some simple checks that it obeys selector operations
+== descendant-1.html descendant-1-ref.html
+== propagate-inherit-boolean.html propagate-inherit-boolean-ref.html
+# Ensure you can't move outside an iframe
+== iframe-1.html iframe-1-ref.html
+# Bugs
+== 601894-1.html 601894-ref.html
+== 601894-2.html 601894-ref.html
+== 830299-1.html 830299-1-ref.html
+# Bug 722777
+== table-1a.html table-1-ref.html
+== table-1b.html table-1-ref.html
+== table-1c.html table-1-ref.html
+== table-2a.html table-2-ref.html
+== table-2b.html table-2-ref.html
+# Bug 722463
+== inline-1a.html inline-1-ref.html
+== transform-box-svg-1a.svg transform-box-svg-1-ref.svg
+== transform-box-svg-1b.svg transform-box-svg-1-ref.svg
+== transform-box-svg-2a.svg transform-box-svg-2-ref.svg
+== transform-box-svg-2b.svg transform-box-svg-2-ref.svg
+== transform-box-svg-3a.svg pass.svg
+== transform-origin-svg-1a.svg transform-origin-svg-1-ref.svg
+== transform-origin-svg-1b.svg transform-origin-svg-1-ref.svg
+== transform-origin-svg-2a.svg transform-origin-svg-2-ref.svg
+== transform-origin-svg-2b.svg transform-origin-svg-2-ref.svg
+# Bug 1122526
+== animate-layer-scale-inherit-1.html animate-layer-scale-inherit-1-ref.html
+fuzzy(0-145,0-10000) == animate-layer-scale-inherit-2.html animate-layer-scale-inherit-2-ref.html
+== animate-layer-scale-inherit-3.html animate-layer-scale-inherit-1-ref.html
+# Bug 1301500
+== dynamic-add-without-change-cb-1.html dynamic-add-without-change-cb-1-ref.html
+skip-if(useDrawSnapshot) fuzzy(0-26,0-208) == table-overflowed-by-animation.html table-overflowed-by-animation-ref.html # Bug 1715402 for useDrawSnapshot&&webrender
+== translate-rounding-1.html translate-rounding-ref.html
+== translate-rounding-2.html translate-rounding-ref.html
+fails == translate-rounding-3.html translate-rounding-viewport-ref.html # bug 1397146
+== invalidate-transform-1.html invalidate-transform-1-ref.html
+== invalidate-svg-scale-1.html invalidate-svg-scale-1-ref.html
+# Bug 1526847
+pref(layout.css.individual-transform.enabled,true) == animate-layer-scale-inherit-4.html animate-layer-scale-inherit-4-ref.html
+fuzzy-if(winWidget,0-1,0-1000) == 1569215-1.html 1569215-1-ref.html
+
+== transform-anon-block-1.html transform-anon-block-1-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) == partial-prerender-expansion-translate.html partial-prerender-expansion-ref.html
+test-pref(layout.animation.prerender.partial,true) == partial-prerender-translate-1.html about:blank
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-59,0-1800) fuzzy-if(Android,0-255,0-7000) == partial-prerender-translate-2.html partial-prerender-translate-2-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") random == partial-prerender-translate-3.html partial-prerender-translate-3-ref.html # bug 1642575
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism doesn't properly handle ancestor's transform values
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-4.html partial-prerender-expansion-ref.html
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism does inproperly handle position:fixed scroll target
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-5.html partial-prerender-translate-5-ref.html
+skip-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-46,0-1250) fuzzy-if(Android,0-255,0-9900) random-if(gtkWidget&&isDebugBuild) random-if(useDrawSnapshot) == partial-prerender-translate-6.html partial-prerender-translate-6-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-4,0-1200) == partial-prerender-translate-7.html partial-prerender-translate-2-ref.html
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism doesn't properly clip transform in iframes.
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-8.html partial-prerender-translate-8-ref.html
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism does inproperly handle position:fixed scroll target
+fails-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-9.html partial-prerender-translate-5-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-10.html partial-prerender-translate-10-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-11.html partial-prerender-translate-11-ref.html
+skip test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-12.html partial-prerender-translate-2-ref.html # bug 1666692 for WebRender
+# This reftest heavily depends on layout.animation.prerender.viewport-ratio-limit
+# and reftest viewport size (800, 1000).
+skip-if(Android) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy-if(!layersGPUAccelerated,0-75,0-2683) == partial-prerender-expansion-rotate.html partial-prerender-expansion-ref.html
+skip-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,true) == partial-prerender-expansion-with-resolution-1.html partial-prerender-expansion-with-resolution-ref.html
+skip test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,true) == partial-prerender-expansion-with-resolution-2.html partial-prerender-expansion-with-resolution-ref.html # bug 1650039 for WebRender
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy-if(Android,0-255,0-400) == partial-prerender-in-svg-1.html partial-prerender-in-svg-1-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-in-svg-2.html partial-prerender-in-svg-1-ref.html # Reuse partial-prerender-in-svg-1-ref.html since the result should look same as partial-prerender-in-svg-1.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-62,0-400) fuzzy-if(Android,0-255,0-2000) == partial-prerender-in-svg-3.html partial-prerender-in-svg-3-ref.html
diff --git a/layout/reftests/transform/rotate-1-ref.html b/layout/reftests/transform/rotate-1-ref.html
new file mode 100644
index 0000000000..539308724d
--- /dev/null
+++ b/layout/reftests/transform/rotate-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1a.html b/layout/reftests/transform/rotate-1a.html
new file mode 100644
index 0000000000..75e9b95b5a
--- /dev/null
+++ b/layout/reftests/transform/rotate-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate(45deg) rotate(360deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1b.html b/layout/reftests/transform/rotate-1b.html
new file mode 100644
index 0000000000..adb9181589
--- /dev/null
+++ b/layout/reftests/transform/rotate-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate(45deg) rotate(400grad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1c.html b/layout/reftests/transform/rotate-1c.html
new file mode 100644
index 0000000000..40631422df
--- /dev/null
+++ b/layout/reftests/transform/rotate-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1d.html b/layout/reftests/transform/rotate-1d.html
new file mode 100644
index 0000000000..810efa13ec
--- /dev/null
+++ b/layout/reftests/transform/rotate-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate(-45deg) rotate(100grad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1e.html b/layout/reftests/transform/rotate-1e.html
new file mode 100644
index 0000000000..b1d293050b
--- /dev/null
+++ b/layout/reftests/transform/rotate-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate(-135deg) rotate(3.1415926535897932384626433rad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1f.html b/layout/reftests/transform/rotate-1f.html
new file mode 100644
index 0000000000..684762ef73
--- /dev/null
+++ b/layout/reftests/transform/rotate-1f.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate(0.125turn); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2-ref.html b/layout/reftests/transform/rotate-2-ref.html
new file mode 100644
index 0000000000..51be5f08c3
--- /dev/null
+++ b/layout/reftests/transform/rotate-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black;">
+
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2a.html b/layout/reftests/transform/rotate-2a.html
new file mode 100644
index 0000000000..1034862ede
--- /dev/null
+++ b/layout/reftests/transform/rotate-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:100px;height:200px;transform: translate(50px, -50px) rotate(-90deg); border: 1px solid black;">
+
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2b.html b/layout/reftests/transform/rotate-2b.html
new file mode 100644
index 0000000000..6d29dc198a
--- /dev/null
+++ b/layout/reftests/transform/rotate-2b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:100px;height:200px;transform: translate(50px, -50px) rotate(-0.25turn); border: 1px solid black;">
+
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1-ref.html b/layout/reftests/transform/scale-1-ref.html
new file mode 100644
index 0000000000..7c39dd8505
--- /dev/null
+++ b/layout/reftests/transform/scale-1-ref.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    #test {
+      background: green;
+      width: 50px;
+      height: 50px;
+      margin: 25px;
+    }
+  </style>
+<body>
+  <div id="test">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1a.html b/layout/reftests/transform/scale-1a.html
new file mode 100644
index 0000000000..c5842292ed
--- /dev/null
+++ b/layout/reftests/transform/scale-1a.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    #test {
+      background: green;
+      width: 100px;
+      height: 100px;
+      transform: scale(0.5, 0.5);
+    }
+  </style>
+</head>
+<body>
+  <div id="test">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1b.html b/layout/reftests/transform/scale-1b.html
new file mode 100644
index 0000000000..cab7fb1090
--- /dev/null
+++ b/layout/reftests/transform/scale-1b.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    #test {
+      background: green;
+      width: 100px;
+      height: 100px;
+      transform: scale(0.5);
+    }
+  </style>
+</head>
+<body>
+  <div id="test">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-percent-1-ref.html b/layout/reftests/transform/scale-percent-1-ref.html
new file mode 100644
index 0000000000..e5923793b6
--- /dev/null
+++ b/layout/reftests/transform/scale-percent-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      transform: scale(0.5, 0.75);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-percent-1.html b/layout/reftests/transform/scale-percent-1.html
new file mode 100644
index 0000000000..2cdba843fd
--- /dev/null
+++ b/layout/reftests/transform/scale-percent-1.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+  <!-- Percent values should function the same as their equivalent numeric values: e.g. (50% == 0.5) -->
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      transform: scale(50%, 75%);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaled-blend-mode-ref.html b/layout/reftests/transform/scaled-blend-mode-ref.html
new file mode 100644
index 0000000000..85ce12cd14
--- /dev/null
+++ b/layout/reftests/transform/scaled-blend-mode-ref.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      width: 200px;
+      height: 200px;
+    }
+    #scale {
+      transform: scale(2);
+      transform-origin: top left;
+    }
+    #blend {
+      mix-blend-mode: multiply;
+    }
+  </style>
+</head>
+<body>
+  <div id="blend">
+    <div id="scale">
+      Hello
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaled-blend-mode.html b/layout/reftests/transform/scaled-blend-mode.html
new file mode 100644
index 0000000000..100be8126a
--- /dev/null
+++ b/layout/reftests/transform/scaled-blend-mode.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      width: 200px;
+      height: 200px;
+    }
+    #scale {
+      transform: scale(2);
+      transform-origin: top left;
+    }
+    #blend {
+      mix-blend-mode: multiply;
+    }
+  </style>
+</head>
+<body>
+  <div id="scale">
+    <div id="blend">
+      Hello
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scalex-1-ref.html b/layout/reftests/transform/scalex-1-ref.html
new file mode 100644
index 0000000000..b95fa2a46e
--- /dev/null
+++ b/layout/reftests/transform/scalex-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 50px;
+      height: 100px;
+      margin-left: 25px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scalex-1.html b/layout/reftests/transform/scalex-1.html
new file mode 100644
index 0000000000..6fbe7aecfc
--- /dev/null
+++ b/layout/reftests/transform/scalex-1.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      transform: scalex(0.5);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaley-1-ref.html b/layout/reftests/transform/scaley-1-ref.html
new file mode 100644
index 0000000000..58a01d1958
--- /dev/null
+++ b/layout/reftests/transform/scaley-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 50px;
+      margin-top: 25px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaley-1.html b/layout/reftests/transform/scaley-1.html
new file mode 100644
index 0000000000..14f331a3ae
--- /dev/null
+++ b/layout/reftests/transform/scaley-1.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      transform: scaley(0.5);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/singular-1a.html b/layout/reftests/transform/singular-1a.html
new file mode 100644
index 0000000000..4087b36f93
--- /dev/null
+++ b/layout/reftests/transform/singular-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: matrix(1, 1, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+    This shouldn't be visible.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/skew-1-ref.html b/layout/reftests/transform/skew-1-ref.html
new file mode 100644
index 0000000000..98d97522cf
--- /dev/null
+++ b/layout/reftests/transform/skew-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skewx(10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-1a.html b/layout/reftests/transform/skew-1a.html
new file mode 100644
index 0000000000..4d68d1dca3
--- /dev/null
+++ b/layout/reftests/transform/skew-1a.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skew(10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-1b.html b/layout/reftests/transform/skew-1b.html
new file mode 100644
index 0000000000..f1d5e89672
--- /dev/null
+++ b/layout/reftests/transform/skew-1b.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skew(10deg, 0deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-2-ref.html b/layout/reftests/transform/skew-2-ref.html
new file mode 100644
index 0000000000..fbd24a03d6
--- /dev/null
+++ b/layout/reftests/transform/skew-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skewy(10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-2a.html b/layout/reftests/transform/skew-2a.html
new file mode 100644
index 0000000000..78f4fedc01
--- /dev/null
+++ b/layout/reftests/transform/skew-2a.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skew(0deg, 10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/snapping-1-ref.html b/layout/reftests/transform/snapping-1-ref.html
new file mode 100644
index 0000000000..99006901b3
--- /dev/null
+++ b/layout/reftests/transform/snapping-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div { 
+  background: red;
+  position: relative;
+  left: 0.5px;
+  top: 100px;
+  height: 100px;
+  width: 100px;
+}
+</style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/transform/snapping-1.html b/layout/reftests/transform/snapping-1.html
new file mode 100644
index 0000000000..d8198cf958
--- /dev/null
+++ b/layout/reftests/transform/snapping-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div { 
+  background: red;
+  margin-left: 100.5px;
+  height: 100px;
+  width: 100px;
+  transform-origin: bottom left;
+  transform: rotate(-90deg) translate(-100px, 0);
+  transform-origin: bottom left;
+  transform: rotate(-90deg) translate(-100px, 0);
+}
+</style>
+</head>
+<body>
+  <div></div>
+</html>
diff --git a/layout/reftests/transform/square.html b/layout/reftests/transform/square.html
new file mode 100644
index 0000000000..2f6e4950bc
--- /dev/null
+++ b/layout/reftests/transform/square.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <style>
+      div {
+        background: green;
+        width: 100px;
+        height: 100px;
+      }
+      span {
+        background: yellow;
+        width: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <span></span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/stresstest-1-ref.html b/layout/reftests/transform/stresstest-1-ref.html
new file mode 100644
index 0000000000..a84cff23db
--- /dev/null
+++ b/layout/reftests/transform/stresstest-1-ref.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <iframe src="square.html" style="height: 200px; width: 300px" id="test">
+      test
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/stresstest-1.html b/layout/reftests/transform/stresstest-1.html
new file mode 100644
index 0000000000..3429ab87bc
--- /dev/null
+++ b/layout/reftests/transform/stresstest-1.html
@@ -0,0 +1,27 @@
+<html class="reftest-wait">
+  <head>
+      <script type="application/javascript">
+        function runtest() {
+          var iframe = document.getElementById("test");
+          var style = iframe.getAttribute("style");
+          // We depend on the transform being the last rule so clip the ending ';'
+          style = style.substring(0, style.length-1);
+
+          // Here, we add transform functions to explicitly undo the effects of
+          // each already-applied transform.  This should leave us with an
+          // effectively-untransformed iframe.
+          style = style + " scale(0.5, 0.25) translatex(-50px) rotate(-45deg) translate(-50px, -50px) skewx(135deg);"
+          iframe.setAttribute("style", style);
+          document.documentElement.className = "";
+        }
+      </script>
+  </head>
+  <body>
+    <iframe
+      src="square.html"
+      style="height: 200px; width: 300px; transform: skewx(45deg) translate(50px, 50px) rotate(45deg) translatex(50px) scale(2.0, 4.0);"
+      id="test"
+      onload="runtest();">
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/table-1-ref.html b/layout/reftests/transform/table-1-ref.html
new file mode 100644
index 0000000000..05c86fc719
--- /dev/null
+++ b/layout/reftests/transform/table-1-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div style="transform:translate(200px) rotate(180deg);transform-origin:left">
+<table>
+<caption>Hello</caption>
+<tr><td>there!
+</table>
+</div>
diff --git a/layout/reftests/transform/table-1a.html b/layout/reftests/transform/table-1a.html
new file mode 100644
index 0000000000..9bdfa8dea5
--- /dev/null
+++ b/layout/reftests/transform/table-1a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="transform:translate(200px) rotate(180deg);transform-origin:left">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
diff --git a/layout/reftests/transform/table-1b.html b/layout/reftests/transform/table-1b.html
new file mode 100644
index 0000000000..7789da42bc
--- /dev/null
+++ b/layout/reftests/transform/table-1b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="display:inline-table;transform:translate(200px) rotate(180deg);transform-origin:left">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
diff --git a/layout/reftests/transform/table-1c.html b/layout/reftests/transform/table-1c.html
new file mode 100644
index 0000000000..a4be031172
--- /dev/null
+++ b/layout/reftests/transform/table-1c.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div style="transform:translateX(200px) rotate(180deg) translateY(-100%);transform-origin:left">
+<table style="transform:translateY(100%)">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
+</div>
diff --git a/layout/reftests/transform/table-2-ref.html b/layout/reftests/transform/table-2-ref.html
new file mode 100644
index 0000000000..7e4059a487
--- /dev/null
+++ b/layout/reftests/transform/table-2-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<div style="transform:translate(200px) rotate(180deg);transform-origin:left">
+<table>
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-2a.html b/layout/reftests/transform/table-2a.html
new file mode 100644
index 0000000000..b3343b326d
--- /dev/null
+++ b/layout/reftests/transform/table-2a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="transform:translate(200px) rotate(180deg);transform-origin:left">
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-2b.html b/layout/reftests/transform/table-2b.html
new file mode 100644
index 0000000000..1ab20b11d4
--- /dev/null
+++ b/layout/reftests/transform/table-2b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="display:inline-table;transform:translate(200px) rotate(180deg);transform-origin:left">
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-overflowed-by-animation-ref.html b/layout/reftests/transform/table-overflowed-by-animation-ref.html
new file mode 100644
index 0000000000..242dc53506
--- /dev/null
+++ b/layout/reftests/transform/table-overflowed-by-animation-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<table style="width: 100px; height: 100px;">
+  <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);">
+  </td>
+</table>
+</html>
diff --git a/layout/reftests/transform/table-overflowed-by-animation.html b/layout/reftests/transform/table-overflowed-by-animation.html
new file mode 100644
index 0000000000..b7bd80b5e4
--- /dev/null
+++ b/layout/reftests/transform/table-overflowed-by-animation.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+@keyframes anim {
+  /*
+   * We need to use different transform functions to produce
+   * UpdatePostTransformOverflow change hint, also these functions have to be
+   * the same matrix to being the same position while running reftest.
+   */
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+</style>
+<table id="test" style="width: 100px; height: 100px; animation: anim 1s infinite;">
+  <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);">
+  </td>
+</table>
+<script>
+document.getElementById("test").addEventListener("animationstart", () => {
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/transform-anon-block-1-ref.html b/layout/reftests/transform/transform-anon-block-1-ref.html
new file mode 100644
index 0000000000..a6b89ab863
--- /dev/null
+++ b/layout/reftests/transform/transform-anon-block-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta charset="UTF-8">
+    <style>
+    .parent {
+        border: none;
+        transform-style: preserve-3d;
+        background: red;
+        display: inline-block;
+    }
+
+    .child {
+        width: 100px;
+        height: 100px;
+        background: blue;
+        transform: rotate(45deg);
+    }
+    </style>
+</head>
+
+<body>
+    <div class="parent">
+        <div class="child"></div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-anon-block-1.html b/layout/reftests/transform/transform-anon-block-1.html
new file mode 100644
index 0000000000..0a45ec8804
--- /dev/null
+++ b/layout/reftests/transform/transform-anon-block-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta charset="UTF-8">
+    <style>
+    .parent {
+        border: none;
+        transform-style: preserve-3d;
+        background: red;
+        padding: 0px;
+    }
+
+    .child {
+        width: 100px;
+        height: 100px;
+        background: blue;
+        transform: rotate(45deg);
+    }
+    </style>
+</head>
+
+<body>
+    <button class="parent">
+        <div class="child"></div>
+    </button>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-box-svg-1-ref.svg b/layout/reftests/transform/transform-box-svg-1-ref.svg
new file mode 100644
index 0000000000..8f748b73d7
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue'/>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-1a.svg b/layout/reftests/transform/transform-box-svg-1a.svg
new file mode 100644
index 0000000000..e74989823d
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1a.svg
@@ -0,0 +1,10 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's paint bbox when transform-box is set to 'fill-box'
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:0px 100px;
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-1b.svg b/layout/reftests/transform/transform-box-svg-1b.svg
new file mode 100644
index 0000000000..84d0da992b
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1b.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's fill bbox when transform-box is set to 'fill-box', with
+       percentage values resolved against the size of the fill bbox.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px);
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2-ref.svg b/layout/reftests/transform/transform-box-svg-2-ref.svg
new file mode 100644
index 0000000000..905fafcca7
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2a.svg b/layout/reftests/transform/transform-box-svg-2a.svg
new file mode 100644
index 0000000000..7ae4cfe0b4
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2a.svg
@@ -0,0 +1,10 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's paint bbox when transform-box is set to 'fill-box'
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:0px 100px;
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2b.svg b/layout/reftests/transform/transform-box-svg-2b.svg
new file mode 100644
index 0000000000..8b14744820
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2b.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's fill bbox when transform-box is set to 'fill-box', with
+       percentage values resolved against the size of the fill bbox.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px);
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-3a.svg b/layout/reftests/transform/transform-box-svg-3a.svg
new file mode 100644
index 0000000000..625294038c
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-3a.svg
@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">
+  <style>
+    /* <![CDATA[ */
+    .ref {
+      fill: red;
+    }
+    .test {
+      fill: lime;
+    }
+    /* ]]> */
+  </style>
+  <rect width="100%" height="100%" fill="lime"/>
+  <!-- all rect.test rects should be covered by the corresponded rest.ref rect-->
+  <!-- 1st row: transform-box only. -->
+  <rect class="ref"
+        x="11" y="11" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: view-box"
+        x="10" y="10" width="10" height="10"/>
+  <rect class="ref"
+        x="26" y="11" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: fill-box"
+        x="25" y="10" width="10" height="10"/>
+  <rect class="ref"
+        x="41" y="11" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: border-box"
+        x="40" y="10" width="10" height="10"/>
+
+  <!-- 2nd row: transform-box plus transform-origin. -->
+  <rect class="ref"
+        x="11" y="26" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: view-box; transform-origin: 40% 60%"
+        x="10" y="25" width="10" height="10"/>
+  <rect class="ref"
+        x="26" y="26" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: fill-box; transform-origin: 20px 10px"
+        x="25" y="25" width="10" height="10"/>
+  <rect class="ref"
+        x="41" y="26" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: border-box; transform-origin: 40% 60%"
+        x="40" y="25" width="10" height="10"/>
+
+  <!-- 3rd row: transform-box, transform-origin and transform. -->
+  <rect class="ref"
+        x="11" y="46" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: fill-box; transform-origin: 0% 0%; transform: scale(2);"
+        x="10" y="45" width="5" height="5"/>
+  <rect class="ref"
+        x="26" y="46" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: fill-box; transform-origin: 50% 50%; transform:rotate(45deg);"
+        x="24" y="44" width="12" height="12"/>
+  <rect class="ref"
+        x="41" y="46" width="8" height="8"/>
+  <rect class="test"
+        style="transform-box: border-box; transform-origin: 100% 100%; transform: scale(1);"
+        x="40" y="45" width="10" height="10"/>
+</svg>
\ No newline at end of file
diff --git a/layout/reftests/transform/transform-origin-svg-1-ref.svg b/layout/reftests/transform/transform-origin-svg-1-ref.svg
new file mode 100644
index 0000000000..8f748b73d7
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue'/>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-1a.svg b/layout/reftests/transform/transform-origin-svg-1a.svg
new file mode 100644
index 0000000000..c1591e65b6
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1a.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:10px 110px;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-1b.svg b/layout/reftests/transform/transform-origin-svg-1b.svg
new file mode 100644
index 0000000000..ca4eead39e
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1b.svg
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space with percentages
+       resolved against the nearest viewport's dimensions.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2-ref.svg b/layout/reftests/transform/transform-origin-svg-2-ref.svg
new file mode 100644
index 0000000000..905fafcca7
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2a.svg b/layout/reftests/transform/transform-origin-svg-2a.svg
new file mode 100644
index 0000000000..46de3c4806
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2a.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:10px 110px;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2b.svg b/layout/reftests/transform/transform-origin-svg-2b.svg
new file mode 100644
index 0000000000..29d4187aa5
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2b.svg
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space with percentages
+       resolved against the nearest viewport's dimensions.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-svg-1-ref.xhtml b/layout/reftests/transform/transform-svg-1-ref.xhtml
new file mode 100644
index 0000000000..1d303d1ada
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1-ref.xhtml
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body style="margin:0">
+  <div style="position: relative; left:100px; top:100px; width:300px; height:300px; background:lime;">
+    <div style="height:200px;"/>
+    <div style="height:100px; background:blue;"/>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-1a.xhtml b/layout/reftests/transform/transform-svg-1a.xhtml
new file mode 100644
index 0000000000..af1f03b04f
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1a.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:200px; background:lime; transform: translate(100px, 100px);">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:blue;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:rect x="0" y="0" width="300" height="300"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-1b.xhtml b/layout/reftests/transform/transform-svg-1b.xhtml
new file mode 100644
index 0000000000..56dd523324
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1b.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; transform: rotate(135deg);">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:rect x="0" y="0" width="300" height="300"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2-fail.xhtml b/layout/reftests/transform/transform-svg-2-fail.xhtml
new file mode 100644
index 0000000000..b3fe934e28
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2-fail.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:circle cx="100" cy="100" r="200"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2-ref.xhtml b/layout/reftests/transform/transform-svg-2-ref.xhtml
new file mode 100644
index 0000000000..7d3da096db
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2-ref.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; position: relative; left:100px; top:100px;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:circle cx="200" cy="200" r="200"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2a.xhtml b/layout/reftests/transform/transform-svg-2a.xhtml
new file mode 100644
index 0000000000..5e89a581ad
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2a.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; transform: translate(100px, 100px);">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:circle cx="200" cy="200" r="200"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1-ref.html b/layout/reftests/transform/translate-1-ref.html
new file mode 100644
index 0000000000..bdd2a30e70
--- /dev/null
+++ b/layout/reftests/transform/translate-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position: relative; left: 50px; top: 50px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1a.html b/layout/reftests/transform/translate-1a.html
new file mode 100644
index 0000000000..c6944e49b2
--- /dev/null
+++ b/layout/reftests/transform/translate-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate(50px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1b.html b/layout/reftests/transform/translate-1b.html
new file mode 100644
index 0000000000..4d2f1efd16
--- /dev/null
+++ b/layout/reftests/transform/translate-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate(50px, 50px) rotate(360deg);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1c.html b/layout/reftests/transform/translate-1c.html
new file mode 100644
index 0000000000..0545c027b7
--- /dev/null
+++ b/layout/reftests/transform/translate-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate(25px, 25px) translate(25px, 25px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1d.html b/layout/reftests/transform/translate-1d.html
new file mode 100644
index 0000000000..bba4c6e96f
--- /dev/null
+++ b/layout/reftests/transform/translate-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate(25px, 25px); position:relative; top:25px; left:25px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1e.html b/layout/reftests/transform/translate-1e.html
new file mode 100644
index 0000000000..09378a0f4a
--- /dev/null
+++ b/layout/reftests/transform/translate-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate(50px) translate(-100px) translate(150px) translate(-50px) translate(0px, 50px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-2-ref.html b/layout/reftests/transform/translate-2-ref.html
new file mode 100644
index 0000000000..bc05a774a4
--- /dev/null
+++ b/layout/reftests/transform/translate-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position: relative; left: 50px; top: 0px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-2a.html b/layout/reftests/transform/translate-2a.html
new file mode 100644
index 0000000000..c6944e49b2
--- /dev/null
+++ b/layout/reftests/transform/translate-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate(50px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-3-ref.html b/layout/reftests/transform/translate-3-ref.html
new file mode 100644
index 0000000000..458932b60b
--- /dev/null
+++ b/layout/reftests/transform/translate-3-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<style>
+div {
+  width: 100px; height: 100px;
+  background: green;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/transform/translate-3.html b/layout/reftests/transform/translate-3.html
new file mode 100644
index 0000000000..ea326324a3
--- /dev/null
+++ b/layout/reftests/transform/translate-3.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+div {
+  width: 100px; height: 100px;
+}
+#outer {
+  background: green;
+  overflow: hidden;
+}
+#inner {
+  background: red;
+  transform: translateX(calc(100px));
+}
+</style>
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/translate-rounding-1.html b/layout/reftests/transform/translate-rounding-1.html
new file mode 100644
index 0000000000..a77f71dd59
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1392161 - Transform translate rounding (em)</title>
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        background: blue;
+        font-size: 10px;
+        transform: scale(100000) translate(0.0001em) scale(0.00001);
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-2.html b/layout/reftests/transform/translate-rounding-2.html
new file mode 100644
index 0000000000..d22d6071fc
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1392161 - Transform translate rounding (rem)</title>
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        background: blue;
+        transform: scale(100000) translate(0.0001rem) scale(0.00001);
+      }
+      html {
+        font-size: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-3.html b/layout/reftests/transform/translate-rounding-3.html
new file mode 100644
index 0000000000..2d0e92e6a1
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-3.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1392161 - Transform translate rounding (viewport size)</title>
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        background: blue;
+        transform: scale(100000) translate(0.0005vw) scale(0.00001);
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-ref.html b/layout/reftests/transform/translate-rounding-ref.html
new file mode 100644
index 0000000000..8cf29dd1a9
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1392161 - Translate rounding reference</title>
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        background: blue;
+        position: relative;
+        left: 100px;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-viewport-ref.html b/layout/reftests/transform/translate-rounding-viewport-ref.html
new file mode 100644
index 0000000000..da2051d3b3
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-viewport-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Bug 1392161 - Translate rounding reference (viewport)</title>
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        background: blue;
+        position: relative;
+        left: 50vw;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/translatex-1-ref-2.html b/layout/reftests/transform/translatex-1-ref-2.html
new file mode 100644
index 0000000000..5f242f1850
--- /dev/null
+++ b/layout/reftests/transform/translatex-1-ref-2.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 50px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+  <div style="position:relative; left:50px; height:10px;">
+    <!-- make the body overflow by 50px horizontally -->
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1-ref.html b/layout/reftests/transform/translatex-1-ref.html
new file mode 100644
index 0000000000..4b35ca823c
--- /dev/null
+++ b/layout/reftests/transform/translatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position:relative; left:50px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1a.html b/layout/reftests/transform/translatex-1a.html
new file mode 100644
index 0000000000..fe9c4f4eb0
--- /dev/null
+++ b/layout/reftests/transform/translatex-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatex(50px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1b.html b/layout/reftests/transform/translatex-1b.html
new file mode 100644
index 0000000000..c4c9fb654b
--- /dev/null
+++ b/layout/reftests/transform/translatex-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatex(50px) rotate(360deg);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1c.html b/layout/reftests/transform/translatex-1c.html
new file mode 100644
index 0000000000..2f0ff89029
--- /dev/null
+++ b/layout/reftests/transform/translatex-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatex(25px) translatex(25px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1d.html b/layout/reftests/transform/translatex-1d.html
new file mode 100644
index 0000000000..fdd7e28cbe
--- /dev/null
+++ b/layout/reftests/transform/translatex-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatex(25px); position:relative; left:25px; top:0px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1e.html b/layout/reftests/transform/translatex-1e.html
new file mode 100644
index 0000000000..c09fd49ef9
--- /dev/null
+++ b/layout/reftests/transform/translatex-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatex(50px) translatex(-100px) translatex(150px) translatex(-50px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-2.html b/layout/reftests/transform/translatex-2.html
new file mode 100644
index 0000000000..7d7e504994
--- /dev/null
+++ b/layout/reftests/transform/translatex-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: matrix(1, 0, 0, 1, 50, 0);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1-ref-2.html b/layout/reftests/transform/translatey-1-ref-2.html
new file mode 100644
index 0000000000..49c42165f0
--- /dev/null
+++ b/layout/reftests/transform/translatey-1-ref-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-top: 50px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1-ref.html b/layout/reftests/transform/translatey-1-ref.html
new file mode 100644
index 0000000000..a898e3385e
--- /dev/null
+++ b/layout/reftests/transform/translatey-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position:relative; top:50px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1a.html b/layout/reftests/transform/translatey-1a.html
new file mode 100644
index 0000000000..b3cf76916d
--- /dev/null
+++ b/layout/reftests/transform/translatey-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatey(50px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1b.html b/layout/reftests/transform/translatey-1b.html
new file mode 100644
index 0000000000..d5ea622d12
--- /dev/null
+++ b/layout/reftests/transform/translatey-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatey(50px) rotate(360deg);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1c.html b/layout/reftests/transform/translatey-1c.html
new file mode 100644
index 0000000000..d8283aaa02
--- /dev/null
+++ b/layout/reftests/transform/translatey-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatey(25px) translatey(25px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1d.html b/layout/reftests/transform/translatey-1d.html
new file mode 100644
index 0000000000..f0e6bac6bc
--- /dev/null
+++ b/layout/reftests/transform/translatey-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatey(25px); position:relative; top:25px; left:0px;">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1e.html b/layout/reftests/transform/translatey-1e.html
new file mode 100644
index 0000000000..1b73e3a401
--- /dev/null
+++ b/layout/reftests/transform/translatey-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatey(50px) translatey(-100px) translatey(150px) translatey(-50px);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-2.html b/layout/reftests/transform/translatey-2.html
new file mode 100644
index 0000000000..a894c94288
--- /dev/null
+++ b/layout/reftests/transform/translatey-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: matrix(1, 0, 0, 1, 0, 50);">
+    <div style="background-color: green; width: 20px; height: 20px">
+  </div>
+</body>
+</html>
-- 
cgit v1.2.3