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-3d/1035611-1-ref.html    |  29 ++++++
 layout/reftests/transform-3d/1035611-1.html        |  38 ++++++++
 layout/reftests/transform-3d/1157984-1.html        |  32 +++++++
 layout/reftests/transform-3d/1245450-1.html        |  36 ++++++++
 layout/reftests/transform-3d/1271058-1-ref.html    |  12 +++
 layout/reftests/transform-3d/1271058-1.html        |  34 +++++++
 layout/reftests/transform-3d/1467277-1.html        |   9 ++
 layout/reftests/transform-3d/1544995-1-ref.html    |  25 +++++
 layout/reftests/transform-3d/1544995-1.html        |  31 +++++++
 layout/reftests/transform-3d/1637067-1-ref.html    |  32 +++++++
 layout/reftests/transform-3d/1637067-1.html        |  49 ++++++++++
 .../transform-3d/animate-backface-hidden.html      |  47 ++++++++++
 .../transform-3d/animate-cube-degrees-ref.html     |  46 ++++++++++
 .../animate-cube-degrees-zoom-ref.html             |  46 ++++++++++
 .../transform-3d/animate-cube-degrees-zoom.html    |  52 +++++++++++
 .../transform-3d/animate-cube-degrees.html         |  52 +++++++++++
 .../transform-3d/animate-cube-radians-ref.html     |  47 ++++++++++
 .../animate-cube-radians-zoom-ref.html             |  47 ++++++++++
 .../transform-3d/animate-cube-radians-zoom.html    |  53 +++++++++++
 .../transform-3d/animate-cube-radians.html         |  53 +++++++++++
 .../transform-3d/animate-preserve3d-child.html     |  57 ++++++++++++
 .../transform-3d/animate-preserve3d-parent.html    |  58 ++++++++++++
 .../transform-3d/animate-preserve3d-ref.html       |  33 +++++++
 .../transform-3d/backface-visibility-1a.html       |   9 ++
 .../transform-3d/backface-visibility-1b.html       |   9 ++
 .../transform-3d/backface-visibility-1c.html       |   9 ++
 .../transform-3d/backface-visibility-2-ref.html    |  43 +++++++++
 .../transform-3d/backface-visibility-2.html        |  45 +++++++++
 .../transform-3d/backface-visibility-3-ref.html    |  21 +++++
 .../transform-3d/backface-visibility-3.html        |  33 +++++++
 .../transform-3d/component-alpha-1-ref.html        |  27 ++++++
 .../reftests/transform-3d/component-alpha-1.html   |  30 ++++++
 layout/reftests/transform-3d/green-rect.html       |  14 +++
 .../reftests/transform-3d/intermediate-1-ref.html  |  43 +++++++++
 layout/reftests/transform-3d/intermediate-1.html   |  50 ++++++++++
 layout/reftests/transform-3d/mask-layer-1.html     |  29 ++++++
 layout/reftests/transform-3d/mask-layer-2.html     |  37 ++++++++
 layout/reftests/transform-3d/mask-layer-3.html     |  36 ++++++++
 layout/reftests/transform-3d/mask-layer-ref.html   |  28 ++++++
 layout/reftests/transform-3d/matrix3d-1-ref.html   |   9 ++
 layout/reftests/transform-3d/matrix3d-1a.html      |   9 ++
 layout/reftests/transform-3d/matrix3d-2-ref.html   |   9 ++
 layout/reftests/transform-3d/matrix3d-2a.html      |   9 ++
 .../transform-3d/nested-transform-1-ref.html       |  22 +++++
 .../reftests/transform-3d/nested-transform-1.html  |  26 ++++++
 .../transform-3d/opacity-preserve3d-1-ref.html     |  45 +++++++++
 .../transform-3d/opacity-preserve3d-1.html         |  45 +++++++++
 .../transform-3d/opacity-preserve3d-2-ref.html     |  28 ++++++
 .../transform-3d/opacity-preserve3d-2.html         |  31 +++++++
 .../transform-3d/opacity-preserve3d-3-ref.html     |  42 +++++++++
 .../transform-3d/opacity-preserve3d-3.html         |  42 +++++++++
 .../transform-3d/opacity-preserve3d-4-ref.html     |  38 ++++++++
 .../transform-3d/opacity-preserve3d-4.html         |  38 ++++++++
 .../transform-3d/opacity-preserve3d-5-ref.html     |  29 ++++++
 .../transform-3d/opacity-preserve3d-5.html         |  36 ++++++++
 .../transform-3d/overflow-hidden-1-ref.html        |  27 ++++++
 .../reftests/transform-3d/overflow-hidden-1a.html  |  27 ++++++
 .../transform-3d/perspective-clipping-1-ref.html   |  13 +++
 .../transform-3d/perspective-clipping-1.html       |  32 +++++++
 .../transform-3d/perspective-clipping-2-ref.html   |   6 ++
 .../transform-3d/perspective-clipping-2.html       |  12 +++
 .../transform-3d/perspective-origin-1a.html        |  11 +++
 .../transform-3d/perspective-origin-1b.html        |  11 +++
 .../transform-3d/perspective-origin-2-ref.html     |  31 +++++++
 .../transform-3d/perspective-origin-2a.html        |  31 +++++++
 .../transform-3d/perspective-origin-3-ref.html     |  41 +++++++++
 .../transform-3d/perspective-origin-3a.html        |  41 +++++++++
 .../transform-3d/perspective-origin-4-ref.html     |  20 ++++
 .../transform-3d/perspective-origin-4a.html        |  29 ++++++
 .../transform-3d/perspective-overflow-1-ref.html   |  28 ++++++
 .../transform-3d/perspective-overflow-1.html       |  36 ++++++++
 .../transform-3d/perspective-overflow-2-ref.html   |  29 ++++++
 .../transform-3d/perspective-overflow-2.html       |  30 ++++++
 .../transform-3d/perspective-zindex-2.html         |  36 ++++++++
 .../reftests/transform-3d/perspective-zindex.html  |  36 ++++++++
 layout/reftests/transform-3d/preserve3d-1-ref.html |   9 ++
 layout/reftests/transform-3d/preserve3d-1a.html    |  15 +++
 layout/reftests/transform-3d/preserve3d-1b.html    |  11 +++
 layout/reftests/transform-3d/preserve3d-2-ref.html |  27 ++++++
 layout/reftests/transform-3d/preserve3d-2a.html    |  28 ++++++
 layout/reftests/transform-3d/preserve3d-2b.html    |  28 ++++++
 layout/reftests/transform-3d/preserve3d-2c.html    |  28 ++++++
 layout/reftests/transform-3d/preserve3d-2d.html    |  30 ++++++
 layout/reftests/transform-3d/preserve3d-3-ref.html |   8 ++
 layout/reftests/transform-3d/preserve3d-3a.html    |   8 ++
 layout/reftests/transform-3d/preserve3d-4a.html    |   9 ++
 layout/reftests/transform-3d/preserve3d-5-ref.html |   3 +
 layout/reftests/transform-3d/preserve3d-5a.html    |  10 ++
 layout/reftests/transform-3d/preserve3d-6-ref.html |  12 +++
 layout/reftests/transform-3d/preserve3d-6a.html    |  12 +++
 layout/reftests/transform-3d/preserve3d-7-ref.html |  11 +++
 layout/reftests/transform-3d/preserve3d-7a.html    |   9 ++
 layout/reftests/transform-3d/preserve3d-8-ref.html |  11 +++
 layout/reftests/transform-3d/preserve3d-8.html     |  17 ++++
 .../reftests/transform-3d/preserve3d-clipped.html  |  10 ++
 .../transform-3d/preserve3d-scale-ref.html         |  28 ++++++
 layout/reftests/transform-3d/preserve3d-scale.html |  63 +++++++++++++
 .../transform-3d/preserve3d-table-ref.html         |   7 ++
 layout/reftests/transform-3d/preserve3d-table.html |   7 ++
 .../preserve3d-will-change-large-frame.html        |  14 +++
 .../transform-3d/preserve3d-will-change-ref.html   |   7 ++
 .../preserves3d-nested-filter-1-ref.html           |  36 ++++++++
 .../transform-3d/preserves3d-nested-filter-1.html  |  38 ++++++++
 .../transform-3d/preserves3d-nested-ref.html       |  44 +++++++++
 .../reftests/transform-3d/preserves3d-nested.html  |  46 ++++++++++
 layout/reftests/transform-3d/reftest.list          | 102 +++++++++++++++++++++
 layout/reftests/transform-3d/rotate3d-1a.html      |   9 ++
 layout/reftests/transform-3d/rotate3d-2a.html      |   9 ++
 layout/reftests/transform-3d/rotatex-1-ref.html    |   9 ++
 layout/reftests/transform-3d/rotatex-1a.html       |   9 ++
 .../transform-3d/rotatex-perspective-1a.html       |   9 ++
 .../transform-3d/rotatex-perspective-1b.html       |  11 +++
 .../transform-3d/rotatex-perspective-1c.html       |   9 ++
 .../transform-3d/rotatex-perspective-3-ref.html    |  33 +++++++
 .../transform-3d/rotatex-perspective-3a.html       |  34 +++++++
 .../rotatex-transformorigin-1-ref.html             |  11 +++
 .../transform-3d/rotatex-transformorigin-1a.html   |  11 +++
 layout/reftests/transform-3d/rotatey-1-ref.html    |   9 ++
 layout/reftests/transform-3d/rotatey-1a.html       |   9 ++
 layout/reftests/transform-3d/scale3d-1-ref.html    |   9 ++
 .../transform-3d/scale3d-all-separate.html         |   9 ++
 layout/reftests/transform-3d/scale3d-all.html      |   9 ++
 layout/reftests/transform-3d/scale3d-xz.html       |   9 ++
 layout/reftests/transform-3d/scale3d-z.html        |   9 ++
 layout/reftests/transform-3d/scalez-1-ref.html     |  10 ++
 layout/reftests/transform-3d/scalez-1a.html        |   9 ++
 .../reftests/transform-3d/scalezrotatex-1-ref.html |   9 ++
 layout/reftests/transform-3d/scalezrotatex-1.html  |   9 ++
 .../transform-3d/scroll-perspective-1-ref.html     |  12 +++
 .../transform-3d/scroll-perspective-1.html         |  10 ++
 .../transform-3d/snap-perspective-1-ref.html       |   5 +
 .../reftests/transform-3d/snap-perspective-1.html  |  12 +++
 layout/reftests/transform-3d/sorting-1-ref.html    |  35 +++++++
 layout/reftests/transform-3d/sorting-1a.html       |  35 +++++++
 layout/reftests/transform-3d/sorting-2-ref.html    |  21 +++++
 layout/reftests/transform-3d/sorting-2a.html       |  29 ++++++
 layout/reftests/transform-3d/sorting-2b.html       |  30 ++++++
 layout/reftests/transform-3d/sorting-3a.html       |  25 +++++
 .../transform-3d/split-intersect1-ref.html         |  41 +++++++++
 layout/reftests/transform-3d/split-intersect1.html |  43 +++++++++
 .../transform-3d/split-intersect2-ref.html         |  82 +++++++++++++++++
 layout/reftests/transform-3d/split-intersect2.html |  50 ++++++++++
 .../transform-3d/split-non-ortho1-ref.html         |  88 ++++++++++++++++++
 layout/reftests/transform-3d/split-non-ortho1.html |  54 +++++++++++
 .../transform-3d/transform-geometry-1-ref.html     |  45 +++++++++
 .../transform-3d/transform-geometry-1.html         |  45 +++++++++
 .../transform-3d/transform-style-flat-1-ref.html   |   6 ++
 .../transform-3d/transform-style-flat-1a.html      |   8 ++
 .../reftests/transform-3d/translate3d-1-ref.html   |   9 ++
 layout/reftests/transform-3d/translate3d-1a.html   |   9 ++
 layout/reftests/transform-3d/translatez-1-ref.html |   9 ++
 layout/reftests/transform-3d/translatez-1a.html    |   9 ++
 layout/reftests/transform-3d/translatez-1b.html    |   9 ++
 .../transform-3d/willchange-containing-block.html  |  43 +++++++++
 154 files changed, 4072 insertions(+)
 create mode 100644 layout/reftests/transform-3d/1035611-1-ref.html
 create mode 100644 layout/reftests/transform-3d/1035611-1.html
 create mode 100644 layout/reftests/transform-3d/1157984-1.html
 create mode 100644 layout/reftests/transform-3d/1245450-1.html
 create mode 100644 layout/reftests/transform-3d/1271058-1-ref.html
 create mode 100644 layout/reftests/transform-3d/1271058-1.html
 create mode 100644 layout/reftests/transform-3d/1467277-1.html
 create mode 100644 layout/reftests/transform-3d/1544995-1-ref.html
 create mode 100644 layout/reftests/transform-3d/1544995-1.html
 create mode 100644 layout/reftests/transform-3d/1637067-1-ref.html
 create mode 100644 layout/reftests/transform-3d/1637067-1.html
 create mode 100644 layout/reftests/transform-3d/animate-backface-hidden.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees-zoom.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians-zoom.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians.html
 create mode 100644 layout/reftests/transform-3d/animate-preserve3d-child.html
 create mode 100644 layout/reftests/transform-3d/animate-preserve3d-parent.html
 create mode 100644 layout/reftests/transform-3d/animate-preserve3d-ref.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-1a.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-1b.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-1c.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-2-ref.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-2.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-3-ref.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-3.html
 create mode 100644 layout/reftests/transform-3d/component-alpha-1-ref.html
 create mode 100644 layout/reftests/transform-3d/component-alpha-1.html
 create mode 100644 layout/reftests/transform-3d/green-rect.html
 create mode 100644 layout/reftests/transform-3d/intermediate-1-ref.html
 create mode 100644 layout/reftests/transform-3d/intermediate-1.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-1.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-2.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-3.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-ref.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-1a.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-2-ref.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-2a.html
 create mode 100644 layout/reftests/transform-3d/nested-transform-1-ref.html
 create mode 100644 layout/reftests/transform-3d/nested-transform-1.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-1.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-2.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-3.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-4.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-5.html
 create mode 100644 layout/reftests/transform-3d/overflow-hidden-1-ref.html
 create mode 100644 layout/reftests/transform-3d/overflow-hidden-1a.html
 create mode 100644 layout/reftests/transform-3d/perspective-clipping-1-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-clipping-1.html
 create mode 100644 layout/reftests/transform-3d/perspective-clipping-2-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-clipping-2.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-1a.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-1b.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-2-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-2a.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-3-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-3a.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-4-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-4a.html
 create mode 100644 layout/reftests/transform-3d/perspective-overflow-1-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-overflow-1.html
 create mode 100644 layout/reftests/transform-3d/perspective-overflow-2-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-overflow-2.html
 create mode 100644 layout/reftests/transform-3d/perspective-zindex-2.html
 create mode 100644 layout/reftests/transform-3d/perspective-zindex.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-1a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-1b.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2b.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2c.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2d.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-3-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-3a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-4a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-5-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-5a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-6-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-6a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-7-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-7a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-8-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-8.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-clipped.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-scale-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-scale.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-table-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-table.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-will-change-large-frame.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-will-change-ref.html
 create mode 100644 layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html
 create mode 100644 layout/reftests/transform-3d/preserves3d-nested-filter-1.html
 create mode 100644 layout/reftests/transform-3d/preserves3d-nested-ref.html
 create mode 100644 layout/reftests/transform-3d/preserves3d-nested.html
 create mode 100644 layout/reftests/transform-3d/reftest.list
 create mode 100644 layout/reftests/transform-3d/rotate3d-1a.html
 create mode 100644 layout/reftests/transform-3d/rotate3d-2a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-1-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatex-1a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-1a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-1b.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-1c.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-3-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-3a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatex-transformorigin-1a.html
 create mode 100644 layout/reftests/transform-3d/rotatey-1-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatey-1a.html
 create mode 100644 layout/reftests/transform-3d/scale3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scale3d-all-separate.html
 create mode 100644 layout/reftests/transform-3d/scale3d-all.html
 create mode 100644 layout/reftests/transform-3d/scale3d-xz.html
 create mode 100644 layout/reftests/transform-3d/scale3d-z.html
 create mode 100644 layout/reftests/transform-3d/scalez-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scalez-1a.html
 create mode 100644 layout/reftests/transform-3d/scalezrotatex-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scalezrotatex-1.html
 create mode 100644 layout/reftests/transform-3d/scroll-perspective-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scroll-perspective-1.html
 create mode 100644 layout/reftests/transform-3d/snap-perspective-1-ref.html
 create mode 100644 layout/reftests/transform-3d/snap-perspective-1.html
 create mode 100644 layout/reftests/transform-3d/sorting-1-ref.html
 create mode 100644 layout/reftests/transform-3d/sorting-1a.html
 create mode 100644 layout/reftests/transform-3d/sorting-2-ref.html
 create mode 100644 layout/reftests/transform-3d/sorting-2a.html
 create mode 100644 layout/reftests/transform-3d/sorting-2b.html
 create mode 100644 layout/reftests/transform-3d/sorting-3a.html
 create mode 100644 layout/reftests/transform-3d/split-intersect1-ref.html
 create mode 100644 layout/reftests/transform-3d/split-intersect1.html
 create mode 100644 layout/reftests/transform-3d/split-intersect2-ref.html
 create mode 100644 layout/reftests/transform-3d/split-intersect2.html
 create mode 100644 layout/reftests/transform-3d/split-non-ortho1-ref.html
 create mode 100644 layout/reftests/transform-3d/split-non-ortho1.html
 create mode 100644 layout/reftests/transform-3d/transform-geometry-1-ref.html
 create mode 100644 layout/reftests/transform-3d/transform-geometry-1.html
 create mode 100644 layout/reftests/transform-3d/transform-style-flat-1-ref.html
 create mode 100644 layout/reftests/transform-3d/transform-style-flat-1a.html
 create mode 100644 layout/reftests/transform-3d/translate3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/translate3d-1a.html
 create mode 100644 layout/reftests/transform-3d/translatez-1-ref.html
 create mode 100644 layout/reftests/transform-3d/translatez-1a.html
 create mode 100644 layout/reftests/transform-3d/translatez-1b.html
 create mode 100644 layout/reftests/transform-3d/willchange-containing-block.html

(limited to 'layout/reftests/transform-3d')

diff --git a/layout/reftests/transform-3d/1035611-1-ref.html b/layout/reftests/transform-3d/1035611-1-ref.html
new file mode 100644
index 0000000000..4c79af3e43
--- /dev/null
+++ b/layout/reftests/transform-3d/1035611-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<title>Testcase, bug 1035611</title>
+	<meta charset=UTF-8>
+	<style type="text/css">
+
+	#outer {
+	  width: 500px;
+	  height: 100px;
+	  overflow:hidden;
+	  background: orange;
+	}
+
+	#inner {
+	  width: 36px;
+	  height: 100px;
+	  background: blue;
+	}
+	
+	</style>
+</head>
+<body>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1035611-1.html b/layout/reftests/transform-3d/1035611-1.html
new file mode 100644
index 0000000000..2d7e787077
--- /dev/null
+++ b/layout/reftests/transform-3d/1035611-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US" reftest-zoom="1.0">
+<head>
+	<title>Testcase, bug 1035611</title>
+	<meta charset=UTF-8>
+	<style type="text/css">
+
+	#outer1 {
+	  width: 500px;
+	  height: 100px;
+	  overflow:hidden;
+	  background: blue;
+	}
+
+	#outer2 {
+	  width: 250px;
+	  height: 100px;
+	  perspective: 125px;
+	}
+
+	#inner {
+	  transform-origin: 0px 0px 70px;
+	  transform: rotate3d(0, 1, 0, -54deg);
+	  width: 128px;
+	  height: 128px;
+	  background: orange;
+	}
+	</style>
+</head>
+<body>
+<div id="outer1">
+  <div id="outer2">
+    <div id="inner"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1157984-1.html b/layout/reftests/transform-3d/1157984-1.html
new file mode 100644
index 0000000000..be0f6526aa
--- /dev/null
+++ b/layout/reftests/transform-3d/1157984-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US" reftest-zoom="1.0">
+<head>
+  <title>Testcase, bug 1157984</title>
+  <meta charset=UTF-8>
+  <style type="text/css">
+
+  #outer {
+    position:absolute;
+    width: 60px;
+    height: 60px;
+    perspective-origin: 300px 300px;
+    perspective: 300px;
+    overflow: hidden;
+  }
+
+  #inner {
+    position:absolute;
+    background-color: green;
+    width: 600px;
+    height: 600px;
+    transform-origin: 300px 300px 0px;
+    transform: translateZ(300px) rotateY(-2rad) translateZ(300px);
+  }
+  </style>
+</head>
+<body>
+  <div id="outer">
+    <div id="inner"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1245450-1.html b/layout/reftests/transform-3d/1245450-1.html
new file mode 100644
index 0000000000..59c7b67d8c
--- /dev/null
+++ b/layout/reftests/transform-3d/1245450-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style type="text/css">
+  .scene {
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    transform: rotateY(0deg);
+  }
+
+  .card {
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    width: 100px;
+    height: 100px;
+  }
+
+  .front {
+    transform: rotateY(0deg);
+    background-color: #00FF00;
+  }
+
+  .back {
+    transform: rotateY(180deg);
+    background-color: #FF0000;
+  }
+</style>
+</head>
+<body>
+  <div class="scene">
+    <div class="card front"></div>
+    <div class="card back"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1271058-1-ref.html b/layout/reftests/transform-3d/1271058-1-ref.html
new file mode 100644
index 0000000000..fc56c22e0a
--- /dev/null
+++ b/layout/reftests/transform-3d/1271058-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<body>
+<canvas id="canvas" width="200" height="200"></canvas>
+</body>
+<script>
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = "green";
+    ctx.fillRect(0, 0, 200, 200);
+</script>
+</html>
diff --git a/layout/reftests/transform-3d/1271058-1.html b/layout/reftests/transform-3d/1271058-1.html
new file mode 100644
index 0000000000..845785d591
--- /dev/null
+++ b/layout/reftests/transform-3d/1271058-1.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 300px;
+        height: 300px;
+        position:absolute;
+        transform: translateZ(0px);
+        background-color: red;
+        top: -220px;
+        left: -20px;
+    }
+</style>
+</head><body>
+
+<canvas id="canvas" width="200" height="200"></canvas>
+<div class="preserve">
+    <div class="preserve" style="opacity:0.0001">
+        <div class="leaf"></div>
+    </div>
+</div>
+
+</body>
+<script>
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = "green";
+    ctx.fillRect(0, 0, 200, 200);
+</script>
+</html>
+
diff --git a/layout/reftests/transform-3d/1467277-1.html b/layout/reftests/transform-3d/1467277-1.html
new file mode 100644
index 0000000000..ae6c4ccc33
--- /dev/null
+++ b/layout/reftests/transform-3d/1467277-1.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate3d(1e50, 0, 0, 45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1544995-1-ref.html b/layout/reftests/transform-3d/1544995-1-ref.html
new file mode 100644
index 0000000000..091725c02a
--- /dev/null
+++ b/layout/reftests/transform-3d/1544995-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+  .scene {
+    transform-style: preserve-3d;
+  }
+  .hidden {
+    backface-visibility: hidden;
+  }
+  #inner {
+    width: 20px;
+    height: 20px;
+    box-shadow: rgb(255, 205, 31) 0px 0px 0px 3px;
+  }
+</style>
+</head>
+<body>
+<div class="scene">
+    <div class="hidden">
+        <div id="inner">
+        </div>
+    </div>
+</div
+</body>
diff --git a/layout/reftests/transform-3d/1544995-1.html b/layout/reftests/transform-3d/1544995-1.html
new file mode 100644
index 0000000000..260231deb0
--- /dev/null
+++ b/layout/reftests/transform-3d/1544995-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+  .scene {
+    transform-style: preserve-3d;
+  }
+  .hidden {
+    backface-visibility: hidden;
+  }
+  #inner {
+    width: 20px;
+    height: 20px;
+  }
+</style>
+<script type="text/javascript">
+  function doTest() {
+    document.getElementById("inner").style.boxShadow = "rgb(255, 205, 31) 0px 0px 0px 3px";
+    document.documentElement.removeAttribute('class');
+  }
+  window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+<div class="scene">
+    <div class="hidden">
+        <div id="inner">
+        </div>
+    </div>
+</div
+</body>
diff --git a/layout/reftests/transform-3d/1637067-1-ref.html b/layout/reftests/transform-3d/1637067-1-ref.html
new file mode 100644
index 0000000000..e46b352f07
--- /dev/null
+++ b/layout/reftests/transform-3d/1637067-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+.text {
+  position: absolute;
+  top: 100px;
+  left: 45px;
+  height: 400px;
+  width: 400px;
+}
+
+.thing {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 512px;
+  height: 512px;
+  background: url('data:image/svg+xml;utf8,<svg width="512" height="200" viewBox="0 0 512 512" fill="black" xmlns="http://www.w3.org/2000/svg"><text x="0" y="400" font-size="100">some text</text></svg>');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+</style>
+</head>
+<body>
+<div class='text'>
+<div class="thing"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1637067-1.html b/layout/reftests/transform-3d/1637067-1.html
new file mode 100644
index 0000000000..0f2b125082
--- /dev/null
+++ b/layout/reftests/transform-3d/1637067-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+@keyframes rotate {
+  100% {
+    transform: rotatey(1800deg);
+  }
+}
+
+@keyframes rotate2 {
+  100% {
+    transform: rotatey(2800deg);
+  }
+}
+
+
+.text {
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  height: 400px;
+  width: 400px;
+  transform-style: preserve-3d;
+  transform: rotatey(271deg);
+  /*animation: rotate 30s linear infinite reverse;*/
+}
+
+.thing {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 512px;
+  height: 512px;
+  background: url('data:image/svg+xml;utf8,<svg width="512" height="200" viewBox="0 0 512 512" fill="black" xmlns="http://www.w3.org/2000/svg"><text x="0" y="400" font-size="100">some text</text></svg>');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transform: rotatey(89deg) translatez(117.04394px);
+}
+
+</style>
+</head>
+<body>
+<div class='text'>
+<div class="thing"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/animate-backface-hidden.html b/layout/reftests/transform-3d/animate-backface-hidden.html
new file mode 100644
index 0000000000..f52b912f66
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-backface-hidden.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait reftest-no-flush">
+<title>Testcase, bug 1186061</title>
+<style>
+
+html { overflow: hidden }
+
+body { padding: 50px }
+
+@keyframes flip {
+  0%, 85% { transform: rotateX(170deg); }
+  90%, 100% { transform: rotateX(10deg); }
+}
+
+#test {
+  background: blue;
+  height: 200px; width: 200px;
+  backface-visibility: hidden;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: flip 100s -99.9s linear 2 paused;
+}
+
+</style>
+
+<div id="test">
+</div>
+
+<script>
+
+document.getElementById("test")
+        .addEventListener("animationstart", StartListener);
+
+function StartListener(event) {
+  var test = document.getElementById("test");
+  test.style.animationPlayState = 'running';
+  test.addEventListener("animationiteration", IterationListener);
+}
+
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees-ref.html b/layout/reftests/transform-3d/animate-cube-degrees-ref.html
new file mode 100644
index 0000000000..bbaa9d0b8b
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  transform: rotateY(-120deg) rotateX(60deg);
+  transform-style: preserve-3d;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html b/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html
new file mode 100644
index 0000000000..aff04d5c9e
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.5">
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  transform: rotateY(-120deg) rotateX(60deg);
+  transform-style: preserve-3d;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees-zoom.html b/layout/reftests/transform-3d/animate-cube-degrees-zoom.html
new file mode 100644
index 0000000000..26c989a540
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees-zoom.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.5">
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+@keyframes HoldTransform {
+  from, to {
+    transform: rotateY(-120deg) rotateX(60deg);
+  }
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  transform-style: preserve-3d;
+  animation: 10s HoldTransform infinite;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees.html b/layout/reftests/transform-3d/animate-cube-degrees.html
new file mode 100644
index 0000000000..d2d80b5202
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+@keyframes HoldTransform {
+  from, to {
+    transform: rotateY(-120deg) rotateX(60deg);
+  }
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  transform-style: preserve-3d;
+  animation: 10s HoldTransform infinite;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-cube-radians-ref.html b/layout/reftests/transform-3d/animate-cube-radians-ref.html
new file mode 100644
index 0000000000..fe15a3729e
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html>
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  /* approximately rotateY(-120deg) rotateX(60deg); */
+  transform: rotateY(-2.0944rad) rotateX(1.0472rad);
+  transform-style: preserve-3d;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html b/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html
new file mode 100644
index 0000000000..01eb930494
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.5">
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  /* approximately rotateY(-120deg) rotateX(60deg); */
+  transform: rotateY(-2.0944rad) rotateX(1.0472rad);
+  transform-style: preserve-3d;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-cube-radians-zoom.html b/layout/reftests/transform-3d/animate-cube-radians-zoom.html
new file mode 100644
index 0000000000..b7075f3283
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians-zoom.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html reftest-zoom="1.5">
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+@keyframes HoldTransform {
+  from, to {
+    /* approximately rotateY(-120deg) rotateX(60deg); */
+    transform: rotateY(-2.0944rad) rotateX(1.0472rad);
+  }
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  transform-style: preserve-3d;
+  animation: 10s HoldTransform infinite;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-cube-radians.html b/layout/reftests/transform-3d/animate-cube-radians.html
new file mode 100644
index 0000000000..5a8f61ec3d
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<title>Reftest, bug 1156456</title>
+<style>
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: white;
+  perspective: 1000px;
+}
+
+div, div::before, div::after {
+  width: 200px; height: 200px;
+}
+
+@keyframes HoldTransform {
+  from, to {
+    /* approximately rotateY(-120deg) rotateX(60deg); */
+    transform: rotateY(-2.0944rad) rotateX(1.0472rad);
+  }
+}
+
+div {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+  transform-origin: 50% 50% 100px;
+  background: #006;
+  transform-style: preserve-3d;
+  animation: 10s HoldTransform infinite;
+}
+
+div::before, div::after {
+  position: absolute;
+  top: 0; left: 0;
+  content: "";
+}
+
+div::before {
+  background: #00f;
+  transform: translate3D(100px, 0, 100px) rotateY(90deg);
+}
+
+div::after {
+  background: #00c;
+  transform: translate3D(0, -100px, 100px) rotateX(90deg);
+}
+
+</style>
+<div></div>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-child.html b/layout/reftests/transform-3d/animate-preserve3d-child.html
new file mode 100644
index 0000000000..5ac5f290cf
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-child.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Testcase, bug 1176969</title>
+<style>
+
+body { padding: 50px }
+
+#grandparent { perspective: 400px }
+
+@keyframes spin {
+  0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
+}
+
+#parent {
+  background: blue;
+  height: 200px; width: 200px;
+  border: 1px solid black;
+  transform-style: preserve-3d;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2;
+}
+
+@keyframes noop {
+  from, to { transform: translateZ(15px) }
+}
+
+#child {
+  height: 100px; width: 100px; margin: 50px;
+  background: yellow;
+  box-shadow: 3px 3px olive;
+  animation: noop infinite 10s linear;
+}
+
+</style>
+
+<div id="grandparent">
+  <div id="parent">
+    <div id="child">
+    </div>
+  </div>
+</div>
+
+<script>
+
+document.getElementById("parent")
+        .addEventListener("animationiteration", IterationListener);
+
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-parent.html b/layout/reftests/transform-3d/animate-preserve3d-parent.html
new file mode 100644
index 0000000000..9aa8816d3f
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-parent.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Testcase, bug 1176969</title>
+<style>
+
+body { padding: 50px }
+
+#grandparent { perspective: 400px }
+
+@keyframes spin {
+  0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
+}
+
+#parent {
+  background: blue;
+  height: 200px; width: 200px;
+  border: 1px solid black;
+  transform-style: preserve-3d;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2 paused;
+}
+
+#child {
+  transform: translateZ(15px);
+  height: 100px; width: 100px; margin: 50px;
+  background: yellow;
+  box-shadow: 3px 3px olive;
+}
+
+</style>
+
+<div id="grandparent">
+  <div id="parent">
+    <div id="child">
+    </div>
+  </div>
+</div>
+
+<script>
+
+document.getElementById("parent").addEventListener("animationstart", StartListener);
+
+function StartListener(event) {
+  var test = document.getElementById("parent");
+  test.style.animationPlayState = 'running';
+  test.addEventListener("animationiteration", IterationListener);
+}
+
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-ref.html b/layout/reftests/transform-3d/animate-preserve3d-ref.html
new file mode 100644
index 0000000000..60c560804b
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<title>Testcase, bug 1176969</title>
+<style>
+
+body { padding: 50px }
+
+#grandparent { perspective: 400px }
+
+#parent {
+  background: blue;
+  height: 200px; width: 200px;
+  border: 1px solid black;
+  transform-style: preserve-3d;
+  transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg);
+  will-change: transform;
+}
+
+#child {
+  transform: translateZ(15px);
+  height: 100px; width: 100px; margin: 50px;
+  background: yellow;
+  box-shadow: 3px 3px olive;
+}
+
+</style>
+
+<div id="grandparent">
+  <div id="parent">
+    <div id="child">
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/transform-3d/backface-visibility-1a.html b/layout/reftests/transform-3d/backface-visibility-1a.html
new file mode 100644
index 0000000000..b491051ba8
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(180deg); backface-visibility: visible; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/backface-visibility-1b.html b/layout/reftests/transform-3d/backface-visibility-1b.html
new file mode 100644
index 0000000000..26fdfd649e
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(180deg); backface-visibility: hidden; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/backface-visibility-1c.html b/layout/reftests/transform-3d/backface-visibility-1c.html
new file mode 100644
index 0000000000..8047462a7d
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(180deg); backface-visibility: hidden; width: 100px; height: 100px; display: table">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/backface-visibility-2-ref.html b/layout/reftests/transform-3d/backface-visibility-2-ref.html
new file mode 100644
index 0000000000..47db3e64f2
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-2-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<body>
+	<style>
+	#container {
+		position: relative;
+		margin: 10px auto;
+		width: 450px;
+		height: 281px;
+		z-index: 1;
+		perspective: 1000px;
+	}
+	#card {
+		width: 100%;
+		height: 100%;
+		transform-style: preserve-3d;
+        transform: rotateY(165deg);
+	}
+	.face {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+    backface-visibility: hidden;
+    background: red;
+	}
+	.face.back {
+		display: block;
+		transform: rotateY(180deg);
+		box-sizing: border-box;
+		padding: 10px;
+		color: white;
+		text-align: center;
+		background: green;
+	}
+	</style>
+	
+	<div id="container" class="hover">
+		<div id="card">
+			<div class="back face">
+			</div>
+  		</div>
+    </div>
+</body></html>
diff --git a/layout/reftests/transform-3d/backface-visibility-2.html b/layout/reftests/transform-3d/backface-visibility-2.html
new file mode 100644
index 0000000000..1c48f2545d
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-2.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<body>
+	<style>
+	#container {
+		position: relative;
+		margin: 10px auto;
+		width: 450px;
+		height: 281px;
+		z-index: 1;
+		perspective: 1000px;
+	}
+	#card {
+		width: 100%;
+		height: 100%;
+		transform-style: preserve-3d;
+        transform: rotateY(165deg);
+	}
+	.face {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+        backface-visibility: hidden;
+        background: red;
+	}
+	.face.back {
+		display: block;
+		transform: rotateY(180deg);
+		box-sizing: border-box;
+		padding: 10px;
+		color: white;
+		text-align: center;
+		background: green;
+	}
+	</style>
+	
+	<div id="container" class="hover">
+		<div id="card">
+			<div class="front face">
+			</div>
+			<div class="back face">
+			</div>
+  		</div>
+    </div>
+</body></html>
diff --git a/layout/reftests/transform-3d/backface-visibility-3-ref.html b/layout/reftests/transform-3d/backface-visibility-3-ref.html
new file mode 100644
index 0000000000..b75cb6def5
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-3-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style type='text/css'>
+    div {
+      position: absolute;
+      display: block;
+      width: 160px;
+      height: 160px;
+      background: red;
+      top:108px;
+      left:308px;
+    }
+  </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
+
+
diff --git a/layout/reftests/transform-3d/backface-visibility-3.html b/layout/reftests/transform-3d/backface-visibility-3.html
new file mode 100644
index 0000000000..ec8d648de9
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style type='text/css'>
+    body {
+      overflow: hidden;
+    }
+    #test {
+      transform-origin: 0 0;
+      transform: scale(2) translateX(100px);
+      transform-style: preserve-3d;
+    }
+    #test div {
+      position: absolute;
+      display: block;
+      width: 80px;
+      height: 80px;
+      background: red;
+      top:50px;
+      left:50px;
+
+     backface-visibility: hidden;
+    }
+  </style>
+</head>
+<body>
+  <div id="test">
+    <div></div>
+  </div>
+</body>
+</html>
+
+
diff --git a/layout/reftests/transform-3d/component-alpha-1-ref.html b/layout/reftests/transform-3d/component-alpha-1-ref.html
new file mode 100644
index 0000000000..3ec2905742
--- /dev/null
+++ b/layout/reftests/transform-3d/component-alpha-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>red box</title>
+<style>
+
+#wrapper {
+}
+
+#shape {
+  background-color: red;
+
+  width: 200px;
+  height: 200px;
+}
+</style>
+
+</head>
+<body>
+<div id="wrapper">
+  <div id="shape">foo</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/component-alpha-1.html b/layout/reftests/transform-3d/component-alpha-1.html
new file mode 100644
index 0000000000..3726a4fbca
--- /dev/null
+++ b/layout/reftests/transform-3d/component-alpha-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>red box</title>
+<style>
+
+#wrapper {
+  perspective: 0px;
+}
+
+#shape {
+  background-color: red;
+
+  width: 200px;
+  height: 200px;
+
+  transform: rotateX(0deg);
+}
+</style>
+
+</head>
+<body>
+<div id="wrapper">
+  <div id="shape">foo</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/green-rect.html b/layout/reftests/transform-3d/green-rect.html
new file mode 100644
index 0000000000..4e6d13e951
--- /dev/null
+++ b/layout/reftests/transform-3d/green-rect.html
@@ -0,0 +1,14 @@
+<html>
+    <head>
+        <style type="text/css">
+        #parent {
+            width: 100px;
+            height: 100px;
+            background-color: #00FF00;
+        }
+        </style>
+    </head>
+    <body>
+        <div id="parent"></div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/intermediate-1-ref.html b/layout/reftests/transform-3d/intermediate-1-ref.html
new file mode 100644
index 0000000000..53f8045c87
--- /dev/null
+++ b/layout/reftests/transform-3d/intermediate-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="UTF-8">
+<style type="text/css">
+
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+
+.opacity {
+  opacity: 0.99;
+}
+
+.green {
+  background-color: green;
+}
+
+.red {
+  width: 300px;
+  height: 100px;
+  background-color: red;
+}
+
+.translate {
+  transform: translateX(100px);
+}
+
+</style>
+</head>
+
+<body>
+<div class="red"></div>
+<div class="green">
+  <div class="translate opacity green">
+    <div class="translate green"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/intermediate-1.html b/layout/reftests/transform-3d/intermediate-1.html
new file mode 100644
index 0000000000..cfc822f4b2
--- /dev/null
+++ b/layout/reftests/transform-3d/intermediate-1.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="UTF-8">
+<style type="text/css">
+
+div {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+}
+
+.opacity {
+  opacity: 0.99;
+}
+
+.green {
+  transform-style: preserve-3d;
+  background-color: green;
+}
+
+.flat {
+  transform: translateZ(0px);
+}
+
+.red {
+  width: 300px;
+  height: 100px;
+  background-color: red;
+}
+
+.translate {
+  transform: translateX(100px);
+}
+
+</style>
+</head>
+
+<body>
+<div class="red"></div>
+<div class="green">
+  <div class="flat">
+    <div class="translate opacity green">
+      <div class="translate green"> </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/mask-layer-1.html b/layout/reftests/transform-3d/mask-layer-1.html
new file mode 100644
index 0000000000..834ed44633
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>border-radius should work correctly for elements with perspective</title>
+
+<style>
+
+#a {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: red;
+  perspective: 1000px;
+}
+
+#b {
+  position: relative;
+  background: green;
+  height: 100%;
+  width: 10000px;
+  transform: translateX(0px);
+}
+</style>
+
+<div id="a">
+  <div id="b"></div>
+</div>
diff --git a/layout/reftests/transform-3d/mask-layer-2.html b/layout/reftests/transform-3d/mask-layer-2.html
new file mode 100644
index 0000000000..23315e2249
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>border-radius should work correctly for elements with perspective and preserve-3d</title>
+
+<style>
+
+#a {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: red;
+  perspective: 1000px;
+}
+
+#b {
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: rotateX(90deg);
+}
+
+#c {
+  position: relative;
+  background: green;
+  height: 100%;
+  width: 10000px;
+  transform: rotateX(90deg);
+}
+</style>
+
+<div id="a">
+  <div id="b">
+    <div id="c"></div>
+  </div>
+</div>
diff --git a/layout/reftests/transform-3d/mask-layer-3.html b/layout/reftests/transform-3d/mask-layer-3.html
new file mode 100644
index 0000000000..58a04a45ab
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-3.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>border-radius should work correctly for elements with preserve-3d</title>
+
+<style>
+
+#a {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: red;
+}
+
+#b {
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: rotateX(90deg);
+}
+
+#c {
+  position: relative;
+  background: green;
+  height: 100%;
+  width: 10000px;
+  transform: rotateX(90deg);
+}
+</style>
+
+<div id="a">
+  <div id="b">
+    <div id="c"></div>
+  </div>
+</div>
diff --git a/layout/reftests/transform-3d/mask-layer-ref.html b/layout/reftests/transform-3d/mask-layer-ref.html
new file mode 100644
index 0000000000..bc4f963e63
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>border-radius should work correctly for transformed elements</title>
+
+<style>
+
+#a {
+  position: relative;
+  width: 300px;
+  height: 300px;
+  border-radius: 10px;
+  overflow: hidden;
+  background: red;
+}
+
+#b {
+  position: relative;
+  background: green;
+  height: 100%;
+  width: 10000px;
+  transform: translateZ(1px);
+}
+</style>
+
+<div id="a">
+  <div id="b"></div>
+</div>
diff --git a/layout/reftests/transform-3d/matrix3d-1-ref.html b/layout/reftests/transform-3d/matrix3d-1-ref.html
new file mode 100644
index 0000000000..5cd503b432
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: matrix(1,2,3,4,5,6); width: 100px; height: 100px; background: gold;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/matrix3d-1a.html b/layout/reftests/transform-3d/matrix3d-1a.html
new file mode 100644
index 0000000000..235f0ae592
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: matrix3d(1,2,0,0,3,4,0,0,0,0,1,0,5,6,0,1); width: 100px; height: 100px; background: gold;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/matrix3d-2-ref.html b/layout/reftests/transform-3d/matrix3d-2-ref.html
new file mode 100644
index 0000000000..b781a00017
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate3d(4px,5px,6px) scale3d(1,2,3); width: 100px; height: 100px; background: gold;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/matrix3d-2a.html b/layout/reftests/transform-3d/matrix3d-2a.html
new file mode 100644
index 0000000000..65f8d6bc87
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: matrix3d(1,0,0,0,0,2,0,0,0,0,3,0,4,5,6,1); width: 100px; height: 100px; background: gold;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/nested-transform-1-ref.html b/layout/reftests/transform-3d/nested-transform-1-ref.html
new file mode 100644
index 0000000000..294ef4bd8b
--- /dev/null
+++ b/layout/reftests/transform-3d/nested-transform-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title></title>
+
+<style type="text/css">
+div {
+  position: absolute;
+  margin: 0 0;
+}
+</style>
+</head>
+
+<body>
+<div style="left: 58px;">
+  <div style="width: 100px; height: 100px; background-color: red;"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/nested-transform-1.html b/layout/reftests/transform-3d/nested-transform-1.html
new file mode 100644
index 0000000000..f0264a4e00
--- /dev/null
+++ b/layout/reftests/transform-3d/nested-transform-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title></title>
+
+<style type="text/css">
+div {
+  position: absolute;
+  margin: 0 0;
+}
+</style>
+</head>
+
+<body>
+<div style="transform-style: preserve-3d;">
+  <div style="left: 50px; transform-style: flat;">
+    <div style="transform: rotateX(0.1deg); transform-style: flat;">
+      <div style="transform: rotateX(0.1deg); width: 100px; height: 100px; background-color: red;"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
new file mode 100644
index 0000000000..8a42fa3c98
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 60px;
+    }
+    .second {
+        transform: translateZ(5px);
+        background-color: green;
+        top: 40px;
+    }
+    .third {
+        transform: translateZ(-5px);
+        background-color: yellow;
+        top: 20px;
+    }
+    .fourth {
+        transform: translateZ(-10px);
+        background-color: red;
+    }
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div class="preserve">
+    <div class="leaf first"></div>
+    <div style="opacity:0.5">
+        <div class="leaf second"></div>
+        <div class="leaf fourth"></div>
+    </div>
+    <div class="leaf third"></div>
+</div>
+
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1.html b/layout/reftests/transform-3d/opacity-preserve3d-1.html
new file mode 100644
index 0000000000..b73be49238
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 60px;
+    }
+    .second {
+        transform: translateZ(5px);
+        background-color: green;
+        top: 40px;
+    }
+    .third {
+        transform: translateZ(-5px);
+        background-color: yellow;
+        top: 20px;
+    }
+    .fourth {
+        transform: translateZ(-10px);
+        background-color: red;
+    }
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div class="preserve">
+    <div class="leaf first"></div>
+    <div class="preserve" style="opacity:0.5">
+        <div class="leaf second"></div>
+        <div class="leaf fourth"></div>
+    </div>
+    <div class="leaf third"></div>
+</div>
+
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
new file mode 100644
index 0000000000..80336b5cf5
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 50px;
+    }
+    .second {
+        transform: translateZ(5px);
+        background-color: green;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div style="opacity:0.5; transform:translateX(0px)">
+    <div class="leaf first"></div>
+    <div class="leaf second"></div>
+</div>
+
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2.html b/layout/reftests/transform-3d/opacity-preserve3d-2.html
new file mode 100644
index 0000000000..a04b998291
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 50px;
+    }
+    .second {
+        transform: translateZ(5px);
+        background-color: green;
+    }
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div class="preserve" style="opacity:0.5">
+    <div class="leaf first"></div>
+    <div class="leaf second"></div>
+</div>
+
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
new file mode 100644
index 0000000000..ffacd8277b
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 0px;
+    }
+    .second {
+        background-color: green;
+        top: 40px;
+    }
+    .third {
+        top: 80px;
+    }
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div class="preserve">
+    <div style="opacity:0.5; transform:translateX(0px)">
+        <div class="leaf first"></div>
+        <div class="leaf second"></div>
+        <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas>
+    </div>
+</div>
+<script>
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = "red";
+    ctx.fillRect(0, 0, 100, 100);
+</script>
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3.html b/layout/reftests/transform-3d/opacity-preserve3d-3.html
new file mode 100644
index 0000000000..f7bbf2da88
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-3.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 0px;
+    }
+    .second {
+        background-color: green;
+        top: 40px;
+    }
+    .third {
+        top: 80px;
+    }
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div class="preserve">
+    <div class="preserve" style="opacity:0.5">
+        <div class="leaf first"></div>
+        <div class="leaf second"></div>
+        <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas>
+    </div>
+</div>
+<script>
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = "red";
+    ctx.fillRect(0, 0, 100, 100);
+</script>
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
new file mode 100644
index 0000000000..9fe799b61a
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 0px;
+    }
+    .second {
+        background-color: green;
+        top: 40px;
+    }
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div class="preserve">
+    <div style="opacity:0.5">
+        <div class="leaf first"></div>
+        <canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas>
+    </div>
+</div>
+<script>
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = "red";
+    ctx.fillRect(0, 0, 100, 100);
+</script>
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4.html b/layout/reftests/transform-3d/opacity-preserve3d-4.html
new file mode 100644
index 0000000000..9fd6728644
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-4.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+    .first {
+        transform: translateZ(10px);
+        background-color: blue;
+        top: 0px;
+    }
+    .second {
+        background-color: green;
+        top: 40px;
+    }
+    .preserve {
+        transform-style: preserve-3d;
+    }
+    .leaf {
+        width: 100px;
+        height: 100px;
+        position:absolute;
+    }
+</style>
+</head><body>
+
+<div class="preserve">
+    <div class="preserve" style="opacity:0.5">
+        <div class="leaf first"></div>
+        <canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas>
+    </div>
+</div>
+<script>
+    var canvas = document.getElementById("canvas");
+    var ctx = canvas.getContext("2d");
+    ctx.fillStyle = "red";
+    ctx.fillRect(0, 0, 100, 100);
+</script>
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
new file mode 100644
index 0000000000..ab64e1e9da
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    .outer {
+        transform-style: preserve-3d;
+        width: 200px;
+        height: 200px;
+        opacity: 0.7;
+    }
+    .inner {
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: green;
+        position:relative;
+        width: 200px;
+        height: 200px;
+    }
+</style>
+</head>
+<body>
+
+<div id="outer" class="outer">
+    <div class="inner">
+    </div>
+</div>
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5.html b/layout/reftests/transform-3d/opacity-preserve3d-5.html
new file mode 100644
index 0000000000..37808dd581
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-5.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+    .outer {
+        transform-style: preserve-3d;
+        width: 200px;
+        height: 200px;
+    }
+    .inner {
+        top: 50%;
+        transform: translateY(-50%);
+        background-color: green;
+        position:relative;
+        width: 200px;
+        height: 200px;
+    }
+</style>
+</head>
+<body>
+
+<div id="outer" class="outer">
+    <div class="inner">
+    </div>
+</div>
+<script>
+  function doTest() {
+    document.getElementById("outer").style.opacity = 0.7;
+    document.documentElement.removeAttribute("class");
+  }
+    
+  window.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/overflow-hidden-1-ref.html b/layout/reftests/transform-3d/overflow-hidden-1-ref.html
new file mode 100644
index 0000000000..6f62611d71
--- /dev/null
+++ b/layout/reftests/transform-3d/overflow-hidden-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html><head>
+<style type="text/css">
+	.stage{
+		perspective:  700px;
+		overflow: hidden;
+		width: 260px;
+		height: 260px;
+		display: block;
+	}
+	
+	.box {
+		width: 170px;
+		height: 170px;
+		background-color: red;
+		display:  block;
+		transform: rotate3d(0,1,0, 50deg) translatey(20px);
+	}
+	
+	</style>
+</head>
+
+<body id="body">
+	<div class="stage">
+		<div class="box"></div>
+	</div>
+</body></html>
diff --git a/layout/reftests/transform-3d/overflow-hidden-1a.html b/layout/reftests/transform-3d/overflow-hidden-1a.html
new file mode 100644
index 0000000000..6f62611d71
--- /dev/null
+++ b/layout/reftests/transform-3d/overflow-hidden-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html><head>
+<style type="text/css">
+	.stage{
+		perspective:  700px;
+		overflow: hidden;
+		width: 260px;
+		height: 260px;
+		display: block;
+	}
+	
+	.box {
+		width: 170px;
+		height: 170px;
+		background-color: red;
+		display:  block;
+		transform: rotate3d(0,1,0, 50deg) translatey(20px);
+	}
+	
+	</style>
+</head>
+
+<body id="body">
+	<div class="stage">
+		<div class="box"></div>
+	</div>
+</body></html>
diff --git a/layout/reftests/transform-3d/perspective-clipping-1-ref.html b/layout/reftests/transform-3d/perspective-clipping-1-ref.html
new file mode 100644
index 0000000000..78411f4cbc
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-1-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>#inner should not be clipped</title>
+
+<style>
+
+body {
+  margin: 0;
+  background: lime;
+}
+
+</style>
diff --git a/layout/reftests/transform-3d/perspective-clipping-1.html b/layout/reftests/transform-3d/perspective-clipping-1.html
new file mode 100644
index 0000000000..90ffcf528a
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-1.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>#inner should not be clipped</title>
+
+<style>
+
+body {
+  margin: 0;
+  background: red;
+}
+
+#perspective {
+  perspective: 300px;
+  perspective-origin: top left;
+}
+
+#inner {
+  height: 100vh;
+  transform-origin: top left;
+  transform: translateZ(-300px) scale(2);
+  z-index: 2;
+  background: lime;
+  border: 1px solid lime;
+  box-sizing: border-box;
+}
+
+</style>
+
+<div id="perspective">
+  <div id="inner"></div>
+</div>
diff --git a/layout/reftests/transform-3d/perspective-clipping-2-ref.html b/layout/reftests/transform-3d/perspective-clipping-2-ref.html
new file mode 100644
index 0000000000..026b95bdd0
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+    <div style="width:100px; height:200px; background-color:green"></div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-clipping-2.html b/layout/reftests/transform-3d/perspective-clipping-2.html
new file mode 100644
index 0000000000..466b52c3a1
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-2.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:100px; height:100px; background-color:green"></div>
+  <div style="width:100px; height:100px; overflow:hidden">
+    <div style="transform: translateY(-100px) perspective(1px); will-change:transform">
+        <div style="background-color:red; width:100px; height:100px"></div>
+        <div style="background-color:green; width:100px; height:100px"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-1a.html b/layout/reftests/transform-3d/perspective-origin-1a.html
new file mode 100644
index 0000000000..ccd0073abf
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1a.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="perspective: 1000px; perspective-origin: 0 0;">
+    <div style="transform: rotatex(45deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-1b.html b/layout/reftests/transform-3d/perspective-origin-1b.html
new file mode 100644
index 0000000000..2cee0ec606
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="perspective: 1000px; perspective-origin: top left;">
+    <div style="transform: rotatex(45deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-2-ref.html b/layout/reftests/transform-3d/perspective-origin-2-ref.html
new file mode 100644
index 0000000000..51f813b115
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-2-ref.html
@@ -0,0 +1,31 @@
+<html>
+</head>
+<style type="text/css">
+	.stage{
+		perspective: 100px;
+        perspective-origin: 30px 30px;
+        height:100px;
+        width:100px;
+        margin:5px;
+        padding:5px;
+        border:5px solid gray;
+	}
+	
+	.box {
+        transform:rotateX(45deg);
+        height:70px;
+        width:70px;
+        background:green;
+        margin:5px;
+        padding:5px;
+        border:5px solid black;
+	}
+	
+	</style>
+</head>
+<body>
+    <div class="stage">
+        <div class="box"></div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-2a.html b/layout/reftests/transform-3d/perspective-origin-2a.html
new file mode 100644
index 0000000000..c96af6b91d
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-2a.html
@@ -0,0 +1,31 @@
+<html>
+</head>
+<style type="text/css">
+	.stage{
+		perspective: 100px;
+        perspective-origin: 25% 25%;
+        height:100px;
+        width:100px;
+        margin:5px;
+        padding:5px;
+        border:5px solid gray;
+	}
+	
+	.box {
+        transform:rotateX(45deg);
+        height:70px;
+        width:70px;
+        background:green;
+        margin:5px;
+        padding:5px;
+        border:5px solid black;
+	}
+	
+	</style>
+</head>
+<body>
+    <div class="stage">
+        <div class="box"></div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-3-ref.html b/layout/reftests/transform-3d/perspective-origin-3-ref.html
new file mode 100644
index 0000000000..06378b11b4
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-3-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <style type="text/css">
+
+.parentWithPerspective {
+  perspective: 100px;
+  perspective-origin: 150px 150px;
+  -webkit-perspective: 100px;
+  -webkit-perspective-origin: 150px 150px;
+  /* Changing width/height to 500px should not change the rendering. */
+  height:100%;
+}
+
+.parentWithPerspective > div {
+  position:absolute;
+  top:100px;
+  left:100px;
+  width:100px;
+  height:100px;
+}
+
+.notTransformed {
+  outline: 1px solid black;
+}
+
+.transformed {
+  background:blue;
+  transform-origin: 0% 0%;
+  transform: rotateY(45deg);
+  -webkit-transform-origin: 0% 0%;
+  -webkit-transform: rotateY(45deg);
+}
+
+  </style>
+  <body>
+    <div class="parentWithPerspective">
+      <div class="notTransformed"></div>
+      <div class="transformed"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-3a.html b/layout/reftests/transform-3d/perspective-origin-3a.html
new file mode 100644
index 0000000000..1cc3d03b09
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-3a.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <style type="text/css">
+
+.parentWithPerspective {
+  perspective: 100px;
+  perspective-origin: 150px 150px;
+  -webkit-perspective: 100px;
+  -webkit-perspective-origin: 150px 150px;
+  /* Changing width/height to 500px should not change the rendering. */
+  height:500px;
+}
+
+.parentWithPerspective > div {
+  position:absolute;
+  top:100px;
+  left:100px;
+  width:100px;
+  height:100px;
+}
+
+.notTransformed {
+  outline: 1px solid black;
+}
+
+.transformed {
+  background:blue;
+  transform-origin: 0% 0%;
+  transform: rotateY(45deg);
+  -webkit-transform-origin: 0% 0%;
+  -webkit-transform: rotateY(45deg);
+}
+
+  </style>
+  <body>
+    <div class="parentWithPerspective">
+      <div class="notTransformed"></div>
+      <div class="transformed"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-4-ref.html b/layout/reftests/transform-3d/perspective-origin-4-ref.html
new file mode 100644
index 0000000000..087e572b79
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-4-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Testcase for bug 770629</title>
+  <style>
+
+div {
+  position: absolute;
+  left: 125px;
+  width: 50px;
+  height: 100px;
+  background: blue;
+}
+
+  </style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-4a.html b/layout/reftests/transform-3d/perspective-origin-4a.html
new file mode 100644
index 0000000000..ee2a0fabfa
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-4a.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Testcase for bug 770629</title>
+  <style>
+
+.outer {
+  position: absolute;
+  left: 100px;
+  transform: scale(0.5,1);
+  perspective: 200px; 
+  perspective-origin: 50% 0px;
+}
+
+.inner {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  transform: rotateY(0deg);
+}
+
+  </style>
+</head>
+<body>
+  <div class="outer"> 
+    <div class="inner"></div> 
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-1-ref.html b/layout/reftests/transform-3d/perspective-overflow-1-ref.html
new file mode 100644
index 0000000000..424a7993bb
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Testcase for bug 1483659</title>
+<style>
+
+#container {
+  position: absolute;
+  top: 400px;
+  left: 200px;
+  perspective: 100px;
+}
+
+#content {
+  width: 300px;
+  height: 300px;
+  background-color: green;
+  transform: rotateY(60deg);
+}
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="content"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-1.html b/layout/reftests/transform-3d/perspective-overflow-1.html
new file mode 100644
index 0000000000..178e3d2e28
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- Use reftest-snapshot-all as a workaround for bug 1485705 -->
+<html class="reftest-wait reftest-snapshot-all">
+<head>
+<meta charset="UTF-8">
+<title>Testcase for bug 1483659</title>
+<style>
+#container {
+  position: absolute;
+  top: 400px;
+  left: 200px;
+  perspective: 100px;
+}
+
+#content {
+  width: 300px;
+  height: 300px;
+  background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="content"></div>
+</div>
+<script>
+function doTest() {
+  var e = document.getElementById("content");
+  e.style.transform = "rotateY(60deg)";
+
+  document.documentElement.classList.remove("reftest-wait");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-2-ref.html b/layout/reftests/transform-3d/perspective-overflow-2-ref.html
new file mode 100644
index 0000000000..45116d2195
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Transform Overflow Bug</title>
+    <style>
+    .container {
+        width: 100px;
+        height: 100px;
+        overflow: scroll;
+        scrollbar-width: none;
+        perspective: 1px;
+    }
+
+    .inner {
+        background-color: red;
+        width: 200px;
+        height: 200px;
+    }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <p class="inner"></p>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-2.html b/layout/reftests/transform-3d/perspective-overflow-2.html
new file mode 100644
index 0000000000..f4eefe1572
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Transform Overflow Bug</title>
+    <style>
+    .container {
+        width: 100px;
+        height: 100px;
+        overflow: scroll;
+        scrollbar-width: none;
+        perspective: 1px;
+    }
+
+    .inner {
+        will-change: transform;
+        background-color: red;
+        width: 200px;
+        height: 200px;
+    }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <p class="inner"></p>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-zindex-2.html b/layout/reftests/transform-3d/perspective-zindex-2.html
new file mode 100644
index 0000000000..92b884ab26
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-zindex-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>z-index should work correctly for elements with perspective</title>
+
+<style>
+
+#perspective {
+  z-index: 2;
+  position: relative;
+  perspective: 300px;
+  perspective-origin: top left;
+}
+
+#front {
+  width: 100px;
+  height: 100px;
+  background-color: #00FF00;
+  transform: translateX(0px);
+}
+
+#back {
+  z-index: 1;
+  width: 100px;
+  height: 100px;
+  background-color: #FF0000;
+  transform: translateY(-100px);
+  position: relative;
+}
+
+</style>
+
+<div id="perspective">
+  <div id="front"></div>
+</div>
+<div id="back"></div>
diff --git a/layout/reftests/transform-3d/perspective-zindex.html b/layout/reftests/transform-3d/perspective-zindex.html
new file mode 100644
index 0000000000..877f50898a
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-zindex.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>z-index should work correctly for elements with perspective</title>
+
+<style>
+
+#perspective {
+  perspective: 300px;
+  perspective-origin: top left;
+}
+
+#front {
+  z-index: 2;
+  width: 100px;
+  height: 100px;
+  background-color: #00FF00;
+  transform: translateX(0px);
+  position: relative;
+}
+
+#back {
+  z-index: 1;
+  width: 100px;
+  height: 100px;
+  background-color: #FF0000;
+  transform: translateY(-100px);
+  position: relative;
+}
+
+</style>
+
+<div id="perspective">
+  <div id="front"></div>
+  <div id="back"></div>
+</div>
diff --git a/layout/reftests/transform-3d/preserve3d-1-ref.html b/layout/reftests/transform-3d/preserve3d-1-ref.html
new file mode 100644
index 0000000000..c577cca6f8
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(180deg); width: 100px; height: 100px; background-color: white;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-1a.html b/layout/reftests/transform-3d/preserve3d-1a.html
new file mode 100644
index 0000000000..a5d3182302
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1a.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+    <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+      <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+        <div style="transform: rotatex(45deg); width: 100px; height: 100px; background-color: white;">
+          Test Text
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-1b.html b/layout/reftests/transform-3d/preserve3d-1b.html
new file mode 100644
index 0000000000..203bdaa13d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(90deg);">
+    <div style="transform: rotatex(90deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-2-ref.html b/layout/reftests/transform-3d/preserve3d-2-ref.html
new file mode 100644
index 0000000000..fd9063760d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2-ref.html
@@ -0,0 +1,27 @@
+<html>
+    <head>
+        <style type="text/css">
+        #grandparent {
+            transform-style: preserve-3d;
+        }
+        #parent {
+            transform-style: preserve-3d;
+        }
+
+        #child {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatex(0px);
+        }
+
+        </style>
+    </head>
+    <body>
+        <div id="grandparent">
+            <div id="parent">
+                <div id="child"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-2a.html b/layout/reftests/transform-3d/preserve3d-2a.html
new file mode 100644
index 0000000000..e3a421ec8f
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2a.html
@@ -0,0 +1,28 @@
+<html>
+    <head>
+        <style type="text/css">
+        #grandparent {
+          transform-style: preserve-3d;
+          margin-left: 200px
+        }
+        #parent {
+          transform-style: preserve-3d;
+        }
+
+        #child {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatex(-200px);
+        }
+
+        </style>
+    </head>
+    <body>
+        <div id="grandparent">
+            <div id="parent">
+                <div id="child"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-2b.html b/layout/reftests/transform-3d/preserve3d-2b.html
new file mode 100644
index 0000000000..c54a59406c
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2b.html
@@ -0,0 +1,28 @@
+<html>
+    <head>
+        <style type="text/css">
+        #grandparent {
+          transform-style: preserve-3d;
+        }
+        #parent {
+          transform-style: preserve-3d;
+          margin-left: 200px
+        }
+
+        #child {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatex(-200px);
+        }
+
+        </style>
+    </head>
+    <body>
+        <div id="grandparent">
+            <div id="parent">
+                <div id="child"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-2c.html b/layout/reftests/transform-3d/preserve3d-2c.html
new file mode 100644
index 0000000000..40843b907c
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2c.html
@@ -0,0 +1,28 @@
+<html>
+    <head>
+        <style type="text/css">
+        #grandparent {
+          transform-style: preserve-3d;
+        }
+        #parent {
+          transform-style: preserve-3d;
+        }
+
+        #child {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatex(-200px);
+          margin-left: 200px
+        }
+
+        </style>
+    </head>
+    <body>
+        <div id="grandparent">
+            <div id="parent">
+                <div id="child"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-2d.html b/layout/reftests/transform-3d/preserve3d-2d.html
new file mode 100644
index 0000000000..50bf6edc7f
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2d.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <style type="text/css">
+        #grandparent {
+          width: 100px;
+          height: 100px;
+          transform-style: preserve-3d;
+          transform: translatex(200%);
+        }
+        #parent {
+          transform-style: preserve-3d;
+        }
+
+        #child {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatex(-200px);
+        }
+
+        </style>
+    </head>
+    <body>
+        <div id="grandparent">
+            <div id="parent">
+                <div id="child"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-3-ref.html b/layout/reftests/transform-3d/preserve3d-3-ref.html
new file mode 100644
index 0000000000..55027ea925
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); width: 100px; height: 100px; background:red;">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-3a.html b/layout/reftests/transform-3d/preserve3d-3a.html
new file mode 100644
index 0000000000..7fa00da003
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px; height: 100px; background:red;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-4a.html b/layout/reftests/transform-3d/preserve3d-4a.html
new file mode 100644
index 0000000000..d1b093e53e
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-4a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+    <div style="transform: rotatex(90deg); transform-style: preserve-3d; opacity: 0.9999;">
+        <div style="transform: rotatex(90deg); width: 100px; height: 100px; background-color: #00FF00"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-5-ref.html b/layout/reftests/transform-3d/preserve3d-5-ref.html
new file mode 100644
index 0000000000..2bdd5c539f
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-5-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<div style="width: 100px; height: 100px; background: lime;
+border-style: solid; border-width: 0 2px 2px 0"></div>
diff --git a/layout/reftests/transform-3d/preserve3d-5a.html b/layout/reftests/transform-3d/preserve3d-5a.html
new file mode 100644
index 0000000000..925a267be0
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-5a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 110px;">
+  <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 110px;">
+    <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 110px;">
+      <div style="transform: rotatex(45deg); width: 100px; height: 100px;
+      background: lime; border-style: solid; border-width: 2px 2px 0 0">
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/layout/reftests/transform-3d/preserve3d-6-ref.html b/layout/reftests/transform-3d/preserve3d-6-ref.html
new file mode 100644
index 0000000000..f24abbe730
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-6-ref.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+    <div style="perspective:100px;">
+        <div style="transform-style: preserve-3d">
+            <div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);">
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-6a.html b/layout/reftests/transform-3d/preserve3d-6a.html
new file mode 100644
index 0000000000..0b604ba5d5
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-6a.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+    <div style="perspective:100px; transform-style: preserve-3d;">
+        <div style="transform-style: preserve-3d">
+            <div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);">
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-7-ref.html b/layout/reftests/transform-3d/preserve3d-7-ref.html
new file mode 100644
index 0000000000..cb17ddba5a
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-7-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="opacity:0.5">
+    <div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px;">
+      <div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-7a.html b/layout/reftests/transform-3d/preserve3d-7a.html
new file mode 100644
index 0000000000..d962d4fd4f
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-7a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px; opacity:0.5">
+    <div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-8-ref.html b/layout/reftests/transform-3d/preserve3d-8-ref.html
new file mode 100644
index 0000000000..afddf05d4d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-8-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body style="width:100px">
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(180deg)">
+    <g>
+      <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect>
+    </g>
+  </svg>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-8.html b/layout/reftests/transform-3d/preserve3d-8.html
new file mode 100644
index 0000000000..76e9c10c33
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-8.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+    <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+      <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(45deg)">
+          <g>
+            <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect>
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-clipped.html b/layout/reftests/transform-3d/preserve3d-clipped.html
new file mode 100644
index 0000000000..60d49c77ff
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-clipped.html
@@ -0,0 +1,10 @@
+<html>
+  <body>
+    <div style="transform-style: preserve-3d; transform:rotatex(90deg); overflow:hidden;">
+      <div style="transform:rotatex(90deg)">
+        x
+      </div>
+    </div>
+  </body>
+</html>
+
diff --git a/layout/reftests/transform-3d/preserve3d-scale-ref.html b/layout/reftests/transform-3d/preserve3d-scale-ref.html
new file mode 100644
index 0000000000..243e88fdda
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-scale-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- This was just "drawn by hand" well after the original test landed to look
+     like the proper rendering of the test file without any transforms or
+     preserve3d. It's not identical, but a fuzzy match should be a good test
+     considering the original test just checked that it wasn't rendering blank
+-->
+<html>
+  <style>
+    div {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <svg width="600px" height="600px">
+
+      <polygon fill="#DAD6CC" points="57, 51 114, 84 66, 124 10, 91"/>
+      <ellipse fill="#F8F1E5" cx="62" cy="88" rx="27" ry="19"/>
+
+      <polygon fill="#DAD6CC" points="57, -1 114, 32 66, 72 10, 39"/>
+      <ellipse fill="#F8F1E5" cx="62" cy="36" rx="27" ry="19"/>
+
+    </svg>
+  </div>
+</body></html>
diff --git a/layout/reftests/transform-3d/preserve3d-scale.html b/layout/reftests/transform-3d/preserve3d-scale.html
new file mode 100644
index 0000000000..099ef078de
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-scale.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <style>
+    svg{
+      display: block;
+      margin: auto;
+      -webkit-transform-origin: top center;
+      -webkit-transform: scale(1.5);
+    }
+    #cube{
+      position: absolute;
+      left: 25px;
+      top: 25px;
+      width: 74px;
+      height: 74px;
+      backface-visibility: visible;
+      -webkit-transform-style: preserve-3d;
+      -webkit-transform-origin: center center;
+      -webkit-backface-visibility: visible;
+      -webkit-transform: rotateX(-45deg) rotateY(50deg);
+      -webkit-transition: -webkit-transform 1s;
+    }
+
+    .side{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 74px;
+      height: 74px;
+      backface-visibility: visible;
+      -webkit-transform-origin: center center;
+      -webkit-backface-visibility: visible;
+    }
+
+    #cube .side:nth-child(1) {
+	    -webkit-transform: translateY(37px) rotateX(90deg);
+	    transform: translateY(37px) rotateX(90deg);
+    }
+
+    #cube .side:nth-child(2) {
+	    -webkit-transform: translateY(-37px) rotateX(-90deg);
+	    transform: translateY(-37px) rotateX(-90deg);
+
+    }
+  </style>
+</head>
+<body>
+  <div id="cube">
+    <svg class="side" width="100px" height="100px">
+    <rect fill="#DAD6CC" width="74" height="74"></rect>
+    <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle>
+    <g>
+    </g>
+    </svg>
+    <svg class="side" width="100px" height="100px">
+    <rect fill="#DAD6CC" width="74" height="74"></rect>
+    <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle>
+    <g>
+    </g>
+    </svg>
+
+  </div>
+</body></html>
diff --git a/layout/reftests/transform-3d/preserve3d-table-ref.html b/layout/reftests/transform-3d/preserve3d-table-ref.html
new file mode 100644
index 0000000000..94b660b747
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-table-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<table>
+  <tbody>
+    <tr><td>RISK-184</td></tr>
+  </tbody>
+</table>
+
diff --git a/layout/reftests/transform-3d/preserve3d-table.html b/layout/reftests/transform-3d/preserve3d-table.html
new file mode 100644
index 0000000000..b4b0a78df5
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-table.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<table style="transform-style: preserve-3d">
+  <tbody style="transform: translate3d(0, 0, 0)">
+    <tr><td>RISK-184</td></tr>
+  </tbody>
+</table>
+
diff --git a/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html
new file mode 100644
index 0000000000..964b11e0e6
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style>
+  .transform {
+    will-change: transform;
+    transform-style: preserve-3d;
+  }
+</style>
+<body>
+  <div class="transform">
+    <div>TEST PAGE</div>
+    <div style="text-indent: -9999em">TEST PAGE</div>
+  </div>
+</body>
diff --git a/layout/reftests/transform-3d/preserve3d-will-change-ref.html b/layout/reftests/transform-3d/preserve3d-will-change-ref.html
new file mode 100644
index 0000000000..4ee913bd22
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-will-change-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<body>
+  <div style="transform-style: preserve-3d">
+    <div>TEST PAGE</div>
+  </div>
+</body>
diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html
new file mode 100644
index 0000000000..836525d876
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Green square</title>
+<style>
+.filter {
+  filter: brightness(0.75);
+}
+
+.container {
+  width: 200px;
+  height: 200px;
+
+  background-color: green;
+}
+
+.square {
+  position: absolute;
+
+  width: 200px;
+  height: 200px;
+
+  background-color: green;
+}
+</style>
+</head>
+<body>
+
+<div class="filter">
+  <div class="container">
+    <div class="square"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html
new file mode 100644
index 0000000000..d25df6169c
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Green square</title>
+<style>
+.filter {
+  filter: brightness(0.75);
+}
+
+.container {
+  width: 200px;
+  height: 200px;
+
+  transform-style: preserve-3d;
+  background-color: red;
+}
+
+.square {
+  position: absolute;
+
+  width: 200px;
+  height: 200px;
+
+  transform-style: preserve-3d;
+  background-color: green;
+}
+</style>
+</head>
+<body>
+
+<div class="filter">
+  <div class="container">
+    <div class="square"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserves3d-nested-ref.html b/layout/reftests/transform-3d/preserves3d-nested-ref.html
new file mode 100644
index 0000000000..b8a744eb76
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<title>preserve-3d consequence nested context</title>
+<style>
+.rect {
+  width: 100px;
+  height: 100px;
+}
+
+#outeri {
+  transform-style: preserve-3d;
+  transform: rotateX(45deg);
+}
+
+#rect1 {
+  background-color: green;
+}
+
+#rect2 {
+  transform: translate(50px, 50px);
+  background-color: pink;
+}
+
+#inneri {
+  transform: rotateX(45deg);
+}
+
+#rect3 {
+  background-color: red;
+}
+
+</style>
+<body>
+  <div id="outer">
+    <div id="outeri">
+      <div id="rect1" class="rect"></div>
+      <div id="rect2" class="rect"></div>
+      <div id="inner">
+	<div id="inneri">
+	  <div id="rect3" class="rect"></div>
+	</div>
+      </div>
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/transform-3d/preserves3d-nested.html b/layout/reftests/transform-3d/preserves3d-nested.html
new file mode 100644
index 0000000000..673a982e99
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<title>preserve-3d consequence nested context</title>
+<style>
+.rect {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+#outeri {
+  transform-style: preserve-3d;
+  transform: rotateX(45deg);
+}
+
+#inner {
+  transform: rotateX(0deg);
+}
+
+#inneri {
+  transform-style: preserve-3d;
+  transform: rotateX(45deg);
+}
+
+#rect2 {
+  transform: translate(50px, 50px);
+  background-color: pink;
+}
+
+#rect3 {
+  background-color: red;
+}
+
+</style>
+<body>
+  <div id="outer">
+    <div id="outeri">
+      <div id="rect1" class="rect"></div>
+      <div id="rect2" class="rect"></div>
+      <div id="inner">
+	<div id="inneri">
+	  <div id="rect3" class="rect"></div>
+	</div>
+      </div>
+    </div>
+  </div>
+</body>
diff --git a/layout/reftests/transform-3d/reftest.list b/layout/reftests/transform-3d/reftest.list
new file mode 100644
index 0000000000..12587f51a8
--- /dev/null
+++ b/layout/reftests/transform-3d/reftest.list
@@ -0,0 +1,102 @@
+== scalez-1a.html scalez-1-ref.html
+fuzzy(0-1,0-6) == rotatey-1a.html rotatey-1-ref.html
+== rotatex-1a.html rotatex-1-ref.html
+# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg)
+== scalezrotatex-1.html scalezrotatex-1-ref.html
+# Check that the perspectve() transform function results in some visual changes
+!= rotatex-perspective-1a.html rotatex-1-ref.html
+# Check that perspective results in visual changes to child transformed elements
+!= rotatex-perspective-1b.html rotatex-1-ref.html
+# perspective should only apply to child elements
+== rotatex-perspective-1c.html rotatex-1-ref.html
+== rotatex-perspective-3a.html rotatex-perspective-3-ref.html
+== scalez-1a.html scalez-1-ref.html
+fuzzy(0-16,0-346) fuzzy-if(cocoaWidget,0-200,0-310) fuzzy-if(winWidget,0-175,0-250) == preserve3d-1a.html preserve3d-1-ref.html
+== preserve3d-1b.html about:blank
+== preserve3d-clipped.html about:blank
+== preserve3d-2a.html preserve3d-2-ref.html
+== preserve3d-2b.html preserve3d-2-ref.html
+== preserve3d-2c.html preserve3d-2-ref.html
+== preserve3d-2d.html preserve3d-2-ref.html
+== preserve3d-3a.html preserve3d-3-ref.html
+== preserve3d-4a.html about:blank
+fuzzy(0-16,0-100) == preserve3d-5a.html preserve3d-5-ref.html
+== preserve3d-6a.html preserve3d-6-ref.html
+== preserve3d-table.html preserve3d-table-ref.html
+== scale3d-z.html scalez-1-ref.html
+fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == scale3d-all.html scale3d-1-ref.html # subpixel AA
+fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == scale3d-all-separate.html scale3d-1-ref.html # subpixel AA
+== scale3d-xz.html scale3d-1-ref.html
+== translatez-1a.html translatez-1-ref.html
+!= translatez-1b.html translatez-1-ref.html
+== translate3d-1a.html translate3d-1-ref.html
+fuzzy(0-1,0-4) == matrix3d-1a.html matrix3d-1-ref.html
+== matrix3d-2a.html matrix3d-2-ref.html
+== rotate3d-1a.html rotatex-1-ref.html
+== 1467277-1.html rotatex-1-ref.html
+fuzzy(0-1,0-6) == rotate3d-2a.html rotatey-1-ref.html
+!= backface-visibility-1a.html about:blank
+== backface-visibility-1b.html about:blank
+== backface-visibility-1c.html about:blank
+fuzzy-if(winWidget&&!layersGPUAccelerated,0-1,0-251) fuzzy-if(useDrawSnapshot,64-64,1438-1438) == backface-visibility-2.html backface-visibility-2-ref.html
+== backface-visibility-3.html backface-visibility-3-ref.html
+== perspective-clipping-1.html perspective-clipping-1-ref.html
+== perspective-clipping-2.html perspective-clipping-2-ref.html
+!= perspective-origin-1a.html rotatex-perspective-1a.html
+fuzzy(0-1,0-3) == perspective-origin-1b.html perspective-origin-1a.html
+fuzzy(0-3,0-99) random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2-ref.html # subpixel AA, bug 732568
+fuzzy-if(winWidget&&!layersGPUAccelerated,0-1,0-61) == perspective-origin-3a.html perspective-origin-3-ref.html
+== perspective-origin-4a.html perspective-origin-4-ref.html
+== perspective-zindex.html green-rect.html
+== perspective-zindex-2.html green-rect.html
+!= sorting-1a.html sorting-1-ref.html
+# Parallel planes, different z depth
+== sorting-2a.html sorting-2-ref.html
+# Parallel planes, same z depth (shouldn't be sorted!)
+== sorting-2b.html sorting-2-ref.html
+== sorting-3a.html green-rect.html
+# Different, but equivalent (for the given transform) transform origins
+fuzzy(0-1,0-4) == rotatex-transformorigin-1a.html rotatex-transformorigin-1-ref.html
+fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),0-1,0-86) == overflow-hidden-1a.html overflow-hidden-1-ref.html
+== transform-style-flat-1a.html transform-style-flat-1-ref.html
+== willchange-containing-block.html?willchange willchange-containing-block.html?ref
+!= willchange-containing-block.html?willchange willchange-containing-block.html?noblock
+fuzzy(0-3,0-304) == scroll-perspective-1.html scroll-perspective-1-ref.html
+# Bugs
+fails-if(!layersGPUAccelerated) fails-if(useDrawSnapshot) fuzzy-if(!useDrawSnapshot,0-60,0-826) == 1035611-1.html 1035611-1-ref.html # Bug 1072898 for !layersGPUAccelerated failures
+random-if(swgl&&Android) != 1157984-1.html about:blank # Bug 1157984
+fuzzy(0-220,0-660) == animate-cube-radians.html animate-cube-radians-ref.html # subpixel AA
+fuzzy(0-240,0-400) == animate-cube-radians-zoom.html animate-cube-radians-zoom-ref.html
+!= animate-cube-radians-ref.html animate-cube-radians-zoom-ref.html
+fuzzy(0-240,0-660) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA
+fuzzy(0-240,0-400) fails-if(useDrawSnapshot) == animate-cube-degrees-zoom.html animate-cube-degrees-zoom-ref.html
+!= animate-cube-degrees-ref.html animate-cube-degrees-zoom-ref.html
+fuzzy-if(gtkWidget,0-128,0-100) fuzzy-if(Android||(gtkWidget&&layersGPUAccelerated),0-143,0-100) fuzzy-if(winWidget||OSX,0-141,0-100) == preserves3d-nested.html preserves3d-nested-ref.html
+fuzzy(0-255,0-153) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac
+fuzzy(0-255,0-153) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac, bug 1461311 for Android
+== animate-backface-hidden.html about:blank
+== 1245450-1.html green-rect.html
+fuzzy(0-1,0-2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html
+fuzzy(0-1,0-15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html
+fuzzy(0-1,0-10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html
+fuzzy(0-1,0-10000) == opacity-preserve3d-4.html opacity-preserve3d-4-ref.html
+== opacity-preserve3d-5.html opacity-preserve3d-5-ref.html
+== snap-perspective-1.html snap-perspective-1-ref.html
+fuzzy(0-120,0-590) == mask-layer-1.html mask-layer-ref.html
+fuzzy(0-120,0-590) == mask-layer-2.html mask-layer-ref.html
+fuzzy(0-120,0-590) == mask-layer-3.html mask-layer-ref.html
+== split-intersect1.html split-intersect1-ref.html
+fuzzy(0-255,0-150) fails-if(useDrawSnapshot) == split-intersect2.html split-intersect2-ref.html
+fuzzy(0-255,0-100) fails-if(useDrawSnapshot) == split-non-ortho1.html split-non-ortho1-ref.html
+fuzzy-if(winWidget,0-150,0-120) == component-alpha-1.html component-alpha-1-ref.html
+== nested-transform-1.html nested-transform-1-ref.html
+fuzzy-if(winWidget,0-4,0-51) == transform-geometry-1.html transform-geometry-1-ref.html
+== intermediate-1.html intermediate-1-ref.html
+== preserves3d-nested-filter-1.html preserves3d-nested-filter-1-ref.html
+!= preserve3d-scale.html about:blank
+fuzzy(0-52,0-1600) == preserve3d-scale.html preserve3d-scale-ref.html
+fuzzy(0-50,0-22) == perspective-overflow-1.html perspective-overflow-1-ref.html
+== perspective-overflow-2.html perspective-overflow-2-ref.html
+== 1544995-1.html 1544995-1-ref.html
+== preserve3d-will-change-large-frame.html preserve3d-will-change-ref.html
+fuzzy(0-6,0-3117) fuzzy-if(useDrawSnapshot,4-4,13-13) == 1637067-1.html 1637067-1-ref.html
diff --git a/layout/reftests/transform-3d/rotate3d-1a.html b/layout/reftests/transform-3d/rotate3d-1a.html
new file mode 100644
index 0000000000..c4d20fd789
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate3d(1, 0, 0, 45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotate3d-2a.html b/layout/reftests/transform-3d/rotate3d-2a.html
new file mode 100644
index 0000000000..2e593e6df1
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotate3d(0, 1, 0, 45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-1-ref.html b/layout/reftests/transform-3d/rotatex-1-ref.html
new file mode 100644
index 0000000000..446d2896c7
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-1a.html b/layout/reftests/transform-3d/rotatex-1a.html
new file mode 100644
index 0000000000..c7897f2b90
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg) rotatey(360deg) rotatex(360deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-1a.html b/layout/reftests/transform-3d/rotatex-perspective-1a.html
new file mode 100644
index 0000000000..db89219a8c
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-1b.html b/layout/reftests/transform-3d/rotatex-perspective-1b.html
new file mode 100644
index 0000000000..440f14c1e3
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="perspective: 1000px;">
+    <div style="transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-1c.html b/layout/reftests/transform-3d/rotatex-perspective-1c.html
new file mode 100644
index 0000000000..0c7be0fb31
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); perspective: 1000px; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-3-ref.html b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html
new file mode 100644
index 0000000000..028193ce1c
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html
@@ -0,0 +1,33 @@
+<html>
+<head>
+  <style type="text/css">
+    #container {
+      position: relative;
+      height: 300px;
+      width: 300px;
+      margin: 50px 100px;
+      border: 2px solid blue;
+      
+      perspective: 500px;
+  }
+
+  #parent {
+      margin: 10px;
+      width: 280px;
+      height: 280px;
+      background-color: #844BCA;
+      
+      transform: rotateY(40deg);
+  }
+    
+  </style>
+</head>
+<body>
+
+  <div id="container">
+    <div id="parent">
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-3a.html b/layout/reftests/transform-3d/rotatex-perspective-3a.html
new file mode 100644
index 0000000000..957c2b32b1
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-3a.html
@@ -0,0 +1,34 @@
+<html>
+<head>
+  <style type="text/css">
+    #container {
+      position: relative;
+      height: 300px;
+      width: 300px;
+      margin: 50px 100px;
+      border: 2px solid blue;
+      
+      perspective: 500px;
+      opacity: 0.9999;
+  }
+
+  #parent {
+      margin: 10px;
+      width: 280px;
+      height: 280px;
+      background-color: #844BCA;
+      
+      transform: rotateY(40deg);
+  }
+    
+  </style>
+</head>
+<body>
+
+  <div id="container">
+    <div id="parent">
+    </div>
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html
new file mode 100644
index 0000000000..3b35c1b7c8
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="perspective: 1000px;">
+    <div style="transform: rotatex(45deg); transform-origin: top right; width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1a.html b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html
new file mode 100644
index 0000000000..c9cff65925
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="perspective: 1000px;">
+    <div style="transform: rotatex(45deg); transform-origin: top left; width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatey-1-ref.html b/layout/reftests/transform-3d/rotatey-1-ref.html
new file mode 100644
index 0000000000..f1850c7f74
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatey(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatey-1a.html b/layout/reftests/transform-3d/rotatey-1a.html
new file mode 100644
index 0000000000..97f56c740f
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatey(45deg) rotatey(360deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scale3d-1-ref.html b/layout/reftests/transform-3d/scale3d-1-ref.html
new file mode 100644
index 0000000000..a9229a050b
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: scaleX(2) scaleY(2); transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scale3d-all-separate.html b/layout/reftests/transform-3d/scale3d-all-separate.html
new file mode 100644
index 0000000000..409d911795
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-all-separate.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: scaleX(2) scaleY(2) scaleZ(2); transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scale3d-all.html b/layout/reftests/transform-3d/scale3d-all.html
new file mode 100644
index 0000000000..97ae36bbf5
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-all.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: scale3D(2,2,2); transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scale3d-xz.html b/layout/reftests/transform-3d/scale3d-xz.html
new file mode 100644
index 0000000000..14e7edb1cc
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-xz.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(90deg) scale3D(2,1,2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scale3d-z.html b/layout/reftests/transform-3d/scale3d-z.html
new file mode 100644
index 0000000000..f9062d9507
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-z.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(90deg) scale3D(1,1,2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scalez-1-ref.html b/layout/reftests/transform-3d/scalez-1-ref.html
new file mode 100644
index 0000000000..54068fb5d5
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1-ref.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: scaleY(2); transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
+
diff --git a/layout/reftests/transform-3d/scalez-1a.html b/layout/reftests/transform-3d/scalez-1a.html
new file mode 100644
index 0000000000..13e7e7640c
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(90deg) scaleZ(2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scalezrotatex-1-ref.html b/layout/reftests/transform-3d/scalezrotatex-1-ref.html
new file mode 100644
index 0000000000..a2d81bf9bd
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: scaleY(-1); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scalezrotatex-1.html b/layout/reftests/transform-3d/scalezrotatex-1.html
new file mode 100644
index 0000000000..2149755091
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(180deg) scaleZ(-1); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scroll-perspective-1-ref.html b/layout/reftests/transform-3d/scroll-perspective-1-ref.html
new file mode 100644
index 0000000000..b314133f85
--- /dev/null
+++ b/layout/reftests/transform-3d/scroll-perspective-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll">
+  <div id="t" style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:0"></div>
+  <div style="height:4000px"></div>
+</div>
+<script>
+s.scrollTop = 3000;
+var tr = t.getBoundingClientRect();
+t.style.height = "300px";
+</script>
diff --git a/layout/reftests/transform-3d/scroll-perspective-1.html b/layout/reftests/transform-3d/scroll-perspective-1.html
new file mode 100644
index 0000000000..2c17c02543
--- /dev/null
+++ b/layout/reftests/transform-3d/scroll-perspective-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll">
+  <div style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:300px;"></div>
+  <div style="height:4000px"></div>
+</div>
+<script>
+s.scrollTop = 3000;
+</script>
diff --git a/layout/reftests/transform-3d/snap-perspective-1-ref.html b/layout/reftests/transform-3d/snap-perspective-1-ref.html
new file mode 100644
index 0000000000..ca84e9e738
--- /dev/null
+++ b/layout/reftests/transform-3d/snap-perspective-1-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+  <div style="width: 100px; height: 100px; background-color:red"><div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/snap-perspective-1.html b/layout/reftests/transform-3d/snap-perspective-1.html
new file mode 100644
index 0000000000..a5bd65f084
--- /dev/null
+++ b/layout/reftests/transform-3d/snap-perspective-1.html
@@ -0,0 +1,12 @@
+<html>
+<body>
+  <div style="perspective:1000px">
+      <div style="transform: translateX(-100.2px)">
+          <div style="width: 300px; height: 300px; overflow:hidden">
+              <div style="transform: translateX(100.2px); background-color:red; width: 100px; height: 100px; will-change: transform;">
+              </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-1-ref.html b/layout/reftests/transform-3d/sorting-1-ref.html
new file mode 100644
index 0000000000..8028e4fd43
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-1-ref.html
@@ -0,0 +1,35 @@
+<html>
+    <head>
+        <style type="text/css">
+        #stage {
+          perspective: 1000px;
+        }
+
+        #parent {
+          transform-style: preserve-3d;
+        }
+
+        #big {
+          width: 1000px;
+          height: 1000px;
+          background-color: #995C7F;
+          transform: rotatey(45deg);
+        }
+        
+        #small {
+          width: 100px;
+          height: 100px;
+          background-color: #995C7F;
+          transform: translate3d(600px, 200px, 0px);
+        }
+        </style>
+    </head>
+    <body>
+        <div id="stage">
+            <div id="parent">
+                <div id="small"></div>
+                <div id="big"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-1a.html b/layout/reftests/transform-3d/sorting-1a.html
new file mode 100644
index 0000000000..1aa878d2c1
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-1a.html
@@ -0,0 +1,35 @@
+<html>
+    <head>
+        <style type="text/css">
+        #stage {
+          perspective: 1000px;
+        }
+
+        #parent {
+          transform-style: preserve-3d;
+        }
+
+        #big {
+          width: 1000px;
+          height: 1000px;
+          background-color: #995C7F;
+          transform: rotatey(45deg);
+        }
+
+        #small {
+          width: 100px;
+          height: 100px;
+          background-color: #835A99;
+          transform: translate3d(600px, 200px, 0px);
+        }
+        </style>
+    </head>
+    <body>
+        <div id="stage">
+            <div id="parent">
+                <div id="small"></div>
+                <div id="big"></div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-2-ref.html b/layout/reftests/transform-3d/sorting-2-ref.html
new file mode 100644
index 0000000000..cb34eaf4ed
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2-ref.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <style type="text/css">
+        #one {
+          width: 100px;
+          height: 100px;
+          background-color: #00FF00;
+        }
+
+        #two {
+          width: 100px;
+          height: 50px;
+          background-color: red;
+        }
+        </style>
+    </head>
+    <body>
+        <div id="one"></div>
+        <div id="two"></div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-2a.html b/layout/reftests/transform-3d/sorting-2a.html
new file mode 100644
index 0000000000..6c5ba56f98
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2a.html
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <style type="text/css">
+        #parent {
+            transform-style: preserve-3d;
+        }
+
+        #one {
+          width: 100px;
+          height: 100px;
+          background-color: #00FF00;
+          transform: translatez(10px);
+        }
+
+        #two {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatez(-10px) translatey(-50px);
+        }
+        </style>
+    </head>
+    <body>
+        <div id="parent">
+                <div id="one"></div>
+                <div id="two"></div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-2b.html b/layout/reftests/transform-3d/sorting-2b.html
new file mode 100644
index 0000000000..bb553dd862
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2b.html
@@ -0,0 +1,30 @@
+<html>
+    <head>
+        <style type="text/css">
+        #parent {
+            transform-style: preserve-3d;
+            transform: rotatex(180deg);
+        }
+
+        #one {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatez(10px) translatey(50px);
+        }
+
+        #two {
+          width: 100px;
+          height: 100px;
+          background-color: #00FF00;
+          transform: translatez(10px);
+        }
+        </style>
+    </head>
+    <body>
+        <div id="parent">
+                <div id="one"></div>
+                <div id="two"></div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-3a.html b/layout/reftests/transform-3d/sorting-3a.html
new file mode 100644
index 0000000000..c408df587c
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-3a.html
@@ -0,0 +1,25 @@
+<html>
+    <head>
+        <style type="text/css">
+        #parent {
+            transform-style: preserve-3d;
+            transform: rotateX(180deg);
+            width: 100px;
+            height: 100px;
+            background-color: #00FF00;
+        }
+
+        #child {
+          width: 100px;
+          height: 100px;
+          background-color: red;
+          transform: translatez(10px);
+        }
+        </style>
+    </head>
+    <body>
+        <div id="parent">
+            <div id="child"></div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect1-ref.html b/layout/reftests/transform-3d/split-intersect1-ref.html
new file mode 100644
index 0000000000..c30c35615f
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 1 ref</title>
+
+<style>
+.container {
+  margin: 0 0;
+  width: 400px;
+  height: 400px;
+}
+
+.shape {
+  margin: 0 0;
+  position: absolute;
+
+  width: 50px;
+  height: 100px;
+}
+
+.first {
+  background-color: rgba(255,0,0,1);
+  left: 58px;
+}
+
+.second {
+  background-color: rgba(0,255,0,1);
+}
+</style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="shape first"></div>
+    <div class="shape second"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect1.html b/layout/reftests/transform-3d/split-intersect1.html
new file mode 100644
index 0000000000..73dc67f12b
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 1</title>
+
+<style>
+.container {
+  margin: 0 0;
+  width: 400px;
+  height: 400px;
+
+  transform-style: preserve-3d;
+}
+
+.shape {
+  margin: 0 0;
+  position: absolute;
+
+  width: 100px;
+  height: 100px;
+}
+
+.first {
+  background-color: rgba(255,0,0,1);
+}
+
+.second {
+  background-color: rgba(0,255,0,1);
+  transform: rotateY(0.1deg);
+}
+</style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="shape first"></div>
+    <div class="shape second"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect2-ref.html b/layout/reftests/transform-3d/split-intersect2-ref.html
new file mode 100644
index 0000000000..5a19840c17
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect2-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 2 ref</title>
+
+<style>
+.container {
+  margin: 0 0;
+  width: 400px;
+  height: 400px;
+}
+
+.shape {
+  margin: 0 0;
+  position: absolute;
+}
+
+.red {
+  background-color: rgba(255,0,0,1);
+
+  width: 100px;
+  height: 15px;
+
+  top: 150.5px;
+  left: 73px;
+}
+
+.green1 {
+  background-color: rgba(0,255,0,1);
+
+  width: 30px;
+  height: 42.5px;
+
+  top: 108px;
+  left: 88px;
+}
+
+.green2 {
+  background-color: rgba(0,255,0,1);
+
+  width: 30px;
+  height: 50px;
+
+  top: 158px;
+  left: 88px;
+}
+
+.blue1 {
+  background-color: rgba(0,0,255,1);
+
+  top: 108px;
+  left: 128px;
+
+  width: 30px;
+  height: 42.5px;
+}
+
+.blue2 {
+  background-color: rgba(0,0,255,1);
+
+  width: 30px;
+  height: 50px;
+
+  top: 158px;
+  left: 128px;
+}
+</style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="shape red"></div>
+    <div class="shape green1"></div>
+    <div class="shape green2"></div>
+    <div class="shape blue1"></div>
+    <div class="shape blue2"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect2.html b/layout/reftests/transform-3d/split-intersect2.html
new file mode 100644
index 0000000000..345e4a5630
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect2.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 2</title>
+
+<style>
+.container {
+  margin: 0 0;
+  width: 400px;
+  height: 400px;
+
+  transform-style: preserve-3d;
+}
+
+.shape {
+  margin: 0 0;
+  position: absolute;
+
+  width: 30px;
+  height: 100px;
+}
+
+.red {
+  background-color: rgba(255,0,0,1);
+  transform: translate(100px, 100px) rotateZ(90deg) rotateY(60deg);
+}
+
+.green {
+  background-color: rgba(0,255,0,1);
+  transform: translate(80px, 100px);
+}
+
+.blue {
+  background-color: rgba(0,0,255,1);
+  transform: translate(120px, 100px);
+}
+</style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="shape red"></div>
+    <div class="shape green"></div>
+    <div class="shape blue"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-non-ortho1-ref.html b/layout/reftests/transform-3d/split-non-ortho1-ref.html
new file mode 100644
index 0000000000..d519431de6
--- /dev/null
+++ b/layout/reftests/transform-3d/split-non-ortho1-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split non-orthogonal 1 ref</title>
+
+<style>
+.container {
+  margin: 0 0;
+  width: 400px;
+  height: 400px;
+
+  position: absolute;
+  transform-style: preserve-3d;
+}
+
+.shape {
+  margin: 0 0;
+  position: absolute;
+}
+
+.red-square-back {
+  background-color: rgba(255,0,0,1);
+
+  width: 100px;
+  height: 100px;
+
+  top: 50px;
+  left: 50px;
+}
+
+.green-square-back {
+  background-color: rgba(0,255,0,1);
+
+  width: 150px;
+  height: 150px;
+
+  top: 50px;
+  left: 50px;
+
+  transform: rotateZ(45deg);
+}
+
+.red-square-front {
+  background-color: rgba(255,0,0,1);
+
+  width: 50px;
+  height: 50px;
+
+  top: 100px;
+  left: 100px;
+}
+
+.green-square-front {
+  background-color: rgba(0,255,0,1);
+
+  width: 72px;
+  height: 72px;
+
+  top: 63.5px;
+  left: 63.5px;
+
+  transform: rotateZ(45deg);
+}
+
+#canvas {
+  width: 100px
+  height: 100px;
+
+  top: 100px;
+  left: 100px;
+}
+
+</style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="shape red-square-back"></div>
+    <div class="shape green-square-back"></div>
+    <div class="shape red-square-front"></div>
+    <div class="shape green-square-front"></div>
+  </div>
+</body>
+
+</html>
diff --git a/layout/reftests/transform-3d/split-non-ortho1.html b/layout/reftests/transform-3d/split-non-ortho1.html
new file mode 100644
index 0000000000..4612e0b9ff
--- /dev/null
+++ b/layout/reftests/transform-3d/split-non-ortho1.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split non-orthogonal 1</title>
+
+<style>
+.container {
+  margin: 0 0;
+  width: 400px;
+  height: 400px;
+
+  position: absolute;
+  transform-style: preserve-3d;
+}
+
+.shape {
+  margin: 0 0;
+  position: absolute;
+}
+
+.first {
+  background-color: rgba(255,0,0,1);
+
+  width: 100px;
+  height: 100px;
+
+  top: 50px;
+  left: 50px;
+}
+
+.second {
+  background-color: rgba(0,255,0,1);
+
+  width: 150px;
+  height: 150px;
+
+  top: 50px;
+  left: 50px;
+
+  transform: rotateZ(45deg) rotateY(0.1deg);
+}
+</style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="shape second"></div>
+    <div class="shape first"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-geometry-1-ref.html b/layout/reftests/transform-3d/transform-geometry-1-ref.html
new file mode 100644
index 0000000000..c9c03ece43
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-geometry-1-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+<style type="text/css">
+#parent {
+  width: 400px;
+  height: 400px;
+  transform-style: flat;
+}
+
+#child {
+  width: 400px;
+  height: 400px;
+  overflow: scroll;
+}
+
+.box {
+  width: 400px;
+  height: 300px;
+  background-color: red;
+}
+</style>
+
+</head>
+<body>
+
+<div id="parent">
+  <div id="child">
+    <div class="box"></div>
+    <div class="box"></div>
+  </div>
+</div>
+
+<script>
+function doTest() {
+  document.documentElement.removeAttribute("class");
+  document.getElementById("child").scrollTop = 200;
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-geometry-1.html b/layout/reftests/transform-3d/transform-geometry-1.html
new file mode 100644
index 0000000000..0ee592e3ee
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-geometry-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+<style type="text/css">
+#parent {
+  width: 400px;
+  height: 400px;
+  transform-style: preserve-3d;
+}
+
+#child {
+  width: 400px;
+  height: 400px;
+  overflow: scroll;
+}
+
+.box {
+  width: 400px;
+  height: 300px;
+  background-color: red;
+}
+</style>
+
+</head>
+<body>
+
+<div id="parent">
+  <div id="child">
+    <div class="box"></div>
+    <div class="box"></div>
+  </div>
+</div>
+
+<script>
+function doTest() {
+  document.documentElement.removeAttribute("class");
+  document.getElementById("child").scrollTop = 200;
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-style-flat-1-ref.html b/layout/reftests/transform-3d/transform-style-flat-1-ref.html
new file mode 100644
index 0000000000..e73834bb64
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-style-flat-1-ref.html
@@ -0,0 +1,6 @@
+<html>
+    <body>
+        <div style="height: 100px; width: 100px; background: lime">
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-style-flat-1a.html b/layout/reftests/transform-3d/transform-style-flat-1a.html
new file mode 100644
index 0000000000..1e7f2a00c8
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-style-flat-1a.html
@@ -0,0 +1,8 @@
+<html>
+    <body>
+        <div style="transform: rotatex(45deg); transform-origin: top">
+            <div style="transform: rotatex(-45deg); transform-origin: top; height: 200px; width: 100px; background: lime">
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/layout/reftests/transform-3d/translate3d-1-ref.html b/layout/reftests/transform-3d/translate3d-1-ref.html
new file mode 100644
index 0000000000..4a4b2b95ad
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); transform-origin: 10px 30px -10px; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translate3d-1a.html b/layout/reftests/transform-3d/translate3d-1a.html
new file mode 100644
index 0000000000..2eae430836
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translate3d(10px, 30px, -10px) rotatex(45deg) translate3d(-10px, -30px, 10px); transform-origin: 0 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translatez-1-ref.html b/layout/reftests/transform-3d/translatez-1-ref.html
new file mode 100644
index 0000000000..413ce3b027
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: rotatex(45deg); transform-origin: 0 0 -10px; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translatez-1a.html b/layout/reftests/transform-3d/translatez-1a.html
new file mode 100644
index 0000000000..e721bde209
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatez(-10px) rotatex(45deg) translatez(10px); transform-origin: 0 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translatez-1b.html b/layout/reftests/transform-3d/translatez-1b.html
new file mode 100644
index 0000000000..78987b8858
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="transform: translatez(-20px) rotatex(45deg) translatez(20px); transform-origin: 0 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/willchange-containing-block.html b/layout/reftests/transform-3d/willchange-containing-block.html
new file mode 100644
index 0000000000..95de2c74d0
--- /dev/null
+++ b/layout/reftests/transform-3d/willchange-containing-block.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<style>
+body {
+  padding: 100px;
+  width: 5000px;
+  height: 5000px;
+  overflow: scroll;
+}
+div {
+}
+#parent {
+  background:red;
+  width: 64px;
+  height: 64px;
+}
+#child {
+  background:green;
+  position:fixed;
+  width: 32px;
+  height: 32px;
+}
+</style>
+<div id="parent">
+<div id="child">
+
+</div>
+</div>
+<script type="application/javascript">
+
+if (document.location.search == '?willchange') {
+  document.getElementById("parent").style.willChange = "transform";
+} else if (document.location.search == '?ref') {
+  document.getElementById("parent").style.transform = "translateZ(1px)";
+} else if (document.location.search == '?noblock') {
+}
+
+document.documentElement.scrollTop = 10;
+document.documentElement.scrollLeft = 10;
+</script>
+</body>
+</html>
-- 
cgit v1.2.3