summaryrefslogtreecommitdiffstats
path: root/layout/reftests/transform
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--layout/reftests/transform-3d/1035611-1-ref.html29
-rw-r--r--layout/reftests/transform-3d/1035611-1.html38
-rw-r--r--layout/reftests/transform-3d/1157984-1.html32
-rw-r--r--layout/reftests/transform-3d/1245450-1.html36
-rw-r--r--layout/reftests/transform-3d/1271058-1-ref.html12
-rw-r--r--layout/reftests/transform-3d/1271058-1.html34
-rw-r--r--layout/reftests/transform-3d/1467277-1.html9
-rw-r--r--layout/reftests/transform-3d/1544995-1-ref.html25
-rw-r--r--layout/reftests/transform-3d/1544995-1.html31
-rw-r--r--layout/reftests/transform-3d/1637067-1-ref.html32
-rw-r--r--layout/reftests/transform-3d/1637067-1.html49
-rw-r--r--layout/reftests/transform-3d/animate-backface-hidden.html47
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees-ref.html46
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html46
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees-zoom.html52
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees.html52
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians-ref.html47
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html47
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians-zoom.html53
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians.html53
-rw-r--r--layout/reftests/transform-3d/animate-preserve3d-child.html57
-rw-r--r--layout/reftests/transform-3d/animate-preserve3d-parent.html58
-rw-r--r--layout/reftests/transform-3d/animate-preserve3d-ref.html33
-rw-r--r--layout/reftests/transform-3d/backface-visibility-1a.html9
-rw-r--r--layout/reftests/transform-3d/backface-visibility-1b.html9
-rw-r--r--layout/reftests/transform-3d/backface-visibility-1c.html9
-rw-r--r--layout/reftests/transform-3d/backface-visibility-2-ref.html43
-rw-r--r--layout/reftests/transform-3d/backface-visibility-2.html45
-rw-r--r--layout/reftests/transform-3d/backface-visibility-3-ref.html21
-rw-r--r--layout/reftests/transform-3d/backface-visibility-3.html33
-rw-r--r--layout/reftests/transform-3d/component-alpha-1-ref.html27
-rw-r--r--layout/reftests/transform-3d/component-alpha-1.html30
-rw-r--r--layout/reftests/transform-3d/green-rect.html14
-rw-r--r--layout/reftests/transform-3d/intermediate-1-ref.html43
-rw-r--r--layout/reftests/transform-3d/intermediate-1.html50
-rw-r--r--layout/reftests/transform-3d/mask-layer-1.html29
-rw-r--r--layout/reftests/transform-3d/mask-layer-2.html37
-rw-r--r--layout/reftests/transform-3d/mask-layer-3.html36
-rw-r--r--layout/reftests/transform-3d/mask-layer-ref.html28
-rw-r--r--layout/reftests/transform-3d/matrix3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/matrix3d-1a.html9
-rw-r--r--layout/reftests/transform-3d/matrix3d-2-ref.html9
-rw-r--r--layout/reftests/transform-3d/matrix3d-2a.html9
-rw-r--r--layout/reftests/transform-3d/nested-transform-1-ref.html22
-rw-r--r--layout/reftests/transform-3d/nested-transform-1.html26
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-1-ref.html45
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-1.html45
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-2-ref.html28
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-2.html31
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-3-ref.html42
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-3.html42
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-4-ref.html38
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-4.html38
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-5-ref.html29
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-5.html36
-rw-r--r--layout/reftests/transform-3d/overflow-hidden-1-ref.html27
-rw-r--r--layout/reftests/transform-3d/overflow-hidden-1a.html27
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-1-ref.html13
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-1.html32
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-2-ref.html6
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-2.html12
-rw-r--r--layout/reftests/transform-3d/perspective-origin-1a.html11
-rw-r--r--layout/reftests/transform-3d/perspective-origin-1b.html11
-rw-r--r--layout/reftests/transform-3d/perspective-origin-2-ref.html31
-rw-r--r--layout/reftests/transform-3d/perspective-origin-2a.html31
-rw-r--r--layout/reftests/transform-3d/perspective-origin-3-ref.html41
-rw-r--r--layout/reftests/transform-3d/perspective-origin-3a.html41
-rw-r--r--layout/reftests/transform-3d/perspective-origin-4-ref.html20
-rw-r--r--layout/reftests/transform-3d/perspective-origin-4a.html29
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-1-ref.html28
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-1.html36
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-2-ref.html29
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-2.html30
-rw-r--r--layout/reftests/transform-3d/perspective-zindex-2.html36
-rw-r--r--layout/reftests/transform-3d/perspective-zindex.html36
-rw-r--r--layout/reftests/transform-3d/preserve3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/preserve3d-1a.html15
-rw-r--r--layout/reftests/transform-3d/preserve3d-1b.html11
-rw-r--r--layout/reftests/transform-3d/preserve3d-2-ref.html27
-rw-r--r--layout/reftests/transform-3d/preserve3d-2a.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-2b.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-2c.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-2d.html30
-rw-r--r--layout/reftests/transform-3d/preserve3d-3-ref.html8
-rw-r--r--layout/reftests/transform-3d/preserve3d-3a.html8
-rw-r--r--layout/reftests/transform-3d/preserve3d-4a.html9
-rw-r--r--layout/reftests/transform-3d/preserve3d-5-ref.html3
-rw-r--r--layout/reftests/transform-3d/preserve3d-5a.html10
-rw-r--r--layout/reftests/transform-3d/preserve3d-6-ref.html12
-rw-r--r--layout/reftests/transform-3d/preserve3d-6a.html12
-rw-r--r--layout/reftests/transform-3d/preserve3d-7-ref.html11
-rw-r--r--layout/reftests/transform-3d/preserve3d-7a.html9
-rw-r--r--layout/reftests/transform-3d/preserve3d-8-ref.html11
-rw-r--r--layout/reftests/transform-3d/preserve3d-8.html17
-rw-r--r--layout/reftests/transform-3d/preserve3d-clipped.html10
-rw-r--r--layout/reftests/transform-3d/preserve3d-scale-ref.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-scale.html63
-rw-r--r--layout/reftests/transform-3d/preserve3d-table-ref.html7
-rw-r--r--layout/reftests/transform-3d/preserve3d-table.html7
-rw-r--r--layout/reftests/transform-3d/preserve3d-will-change-large-frame.html14
-rw-r--r--layout/reftests/transform-3d/preserve3d-will-change-ref.html7
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html36
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested-filter-1.html38
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested-ref.html44
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested.html46
-rw-r--r--layout/reftests/transform-3d/reftest.list102
-rw-r--r--layout/reftests/transform-3d/rotate3d-1a.html9
-rw-r--r--layout/reftests/transform-3d/rotate3d-2a.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-1a.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-1a.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-1b.html11
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-1c.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-3-ref.html33
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-3a.html34
-rw-r--r--layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html11
-rw-r--r--layout/reftests/transform-3d/rotatex-transformorigin-1a.html11
-rw-r--r--layout/reftests/transform-3d/rotatey-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/rotatey-1a.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-all-separate.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-all.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-xz.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-z.html9
-rw-r--r--layout/reftests/transform-3d/scalez-1-ref.html10
-rw-r--r--layout/reftests/transform-3d/scalez-1a.html9
-rw-r--r--layout/reftests/transform-3d/scalezrotatex-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/scalezrotatex-1.html9
-rw-r--r--layout/reftests/transform-3d/scroll-perspective-1-ref.html12
-rw-r--r--layout/reftests/transform-3d/scroll-perspective-1.html10
-rw-r--r--layout/reftests/transform-3d/snap-perspective-1-ref.html5
-rw-r--r--layout/reftests/transform-3d/snap-perspective-1.html12
-rw-r--r--layout/reftests/transform-3d/sorting-1-ref.html35
-rw-r--r--layout/reftests/transform-3d/sorting-1a.html35
-rw-r--r--layout/reftests/transform-3d/sorting-2-ref.html21
-rw-r--r--layout/reftests/transform-3d/sorting-2a.html29
-rw-r--r--layout/reftests/transform-3d/sorting-2b.html30
-rw-r--r--layout/reftests/transform-3d/sorting-3a.html25
-rw-r--r--layout/reftests/transform-3d/split-intersect1-ref.html41
-rw-r--r--layout/reftests/transform-3d/split-intersect1.html43
-rw-r--r--layout/reftests/transform-3d/split-intersect2-ref.html82
-rw-r--r--layout/reftests/transform-3d/split-intersect2.html50
-rw-r--r--layout/reftests/transform-3d/split-non-ortho1-ref.html88
-rw-r--r--layout/reftests/transform-3d/split-non-ortho1.html54
-rw-r--r--layout/reftests/transform-3d/transform-geometry-1-ref.html45
-rw-r--r--layout/reftests/transform-3d/transform-geometry-1.html45
-rw-r--r--layout/reftests/transform-3d/transform-style-flat-1-ref.html6
-rw-r--r--layout/reftests/transform-3d/transform-style-flat-1a.html8
-rw-r--r--layout/reftests/transform-3d/translate3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/translate3d-1a.html9
-rw-r--r--layout/reftests/transform-3d/translatez-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/translatez-1a.html9
-rw-r--r--layout/reftests/transform-3d/translatez-1b.html9
-rw-r--r--layout/reftests/transform-3d/willchange-containing-block.html43
-rw-r--r--layout/reftests/transform/1569215-1-ref.html10
-rw-r--r--layout/reftests/transform/1569215-1.html28
-rw-r--r--layout/reftests/transform/601894-1.html20
-rw-r--r--layout/reftests/transform/601894-2.html8
-rw-r--r--layout/reftests/transform/601894-ref.html2
-rw-r--r--layout/reftests/transform/830299-1-ref.html34
-rw-r--r--layout/reftests/transform/830299-1.html46
-rw-r--r--layout/reftests/transform/abspos-1-ref.html12
-rw-r--r--layout/reftests/transform/abspos-1a.html12
-rw-r--r--layout/reftests/transform/abspos-1b.html12
-rw-r--r--layout/reftests/transform/abspos-1c.html12
-rw-r--r--layout/reftests/transform/abspos-1d.html12
-rw-r--r--layout/reftests/transform/abspos-1e.html12
-rw-r--r--layout/reftests/transform/abspos-1f.html12
-rw-r--r--layout/reftests/transform/abspos-1g.html12
-rw-r--r--layout/reftests/transform/animate-layer-scale-inherit-1-ref.html24
-rw-r--r--layout/reftests/transform/animate-layer-scale-inherit-1.html27
-rw-r--r--layout/reftests/transform/animate-layer-scale-inherit-2-ref.html24
-rw-r--r--layout/reftests/transform/animate-layer-scale-inherit-2.html31
-rw-r--r--layout/reftests/transform/animate-layer-scale-inherit-3.html51
-rw-r--r--layout/reftests/transform/animate-layer-scale-inherit-4-ref.html23
-rw-r--r--layout/reftests/transform/animate-layer-scale-inherit-4.html27
-rw-r--r--layout/reftests/transform/compound-1-fail.html35
-rw-r--r--layout/reftests/transform/compound-1-ref.html36
-rw-r--r--layout/reftests/transform/compound-1a.html28
-rw-r--r--layout/reftests/transform/descendant-1-ref.html21
-rw-r--r--layout/reftests/transform/descendant-1.html23
-rw-r--r--layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html8
-rw-r--r--layout/reftests/transform/dynamic-add-without-change-cb-1.html11
-rw-r--r--layout/reftests/transform/dynamic-addremove-1-ref.html8
-rw-r--r--layout/reftests/transform/dynamic-addremove-1a.html15
-rw-r--r--layout/reftests/transform/dynamic-addremove-1b.html15
-rw-r--r--layout/reftests/transform/dynamic-addremove-1c.html17
-rw-r--r--layout/reftests/transform/dynamic-addremove-2-ref.html3
-rw-r--r--layout/reftests/transform/dynamic-addremove-2.html17
-rw-r--r--layout/reftests/transform/dynamic-inherit-1-ref.html21
-rw-r--r--layout/reftests/transform/dynamic-inherit-1.html21
-rw-r--r--layout/reftests/transform/iframe-1-ref.html15
-rw-r--r--layout/reftests/transform/iframe-1.html14
-rw-r--r--layout/reftests/transform/iframe-transform.html16
-rw-r--r--layout/reftests/transform/inline-1-ref.html2
-rw-r--r--layout/reftests/transform/inline-1a.html3
-rw-r--r--layout/reftests/transform/invalidate-svg-scale-1-ref.html15
-rw-r--r--layout/reftests/transform/invalidate-svg-scale-1.html24
-rw-r--r--layout/reftests/transform/invalidate-transform-1-ref.html21
-rw-r--r--layout/reftests/transform/invalidate-transform-1.html49
-rw-r--r--layout/reftests/transform/matrix-1-ref.html8
-rw-r--r--layout/reftests/transform/matrix-1a.html8
-rw-r--r--layout/reftests/transform/matrix-2-ref.html8
-rw-r--r--layout/reftests/transform/matrix-2a.html8
-rw-r--r--layout/reftests/transform/matrix-3-ref.html8
-rw-r--r--layout/reftests/transform/matrix-3a.html8
-rw-r--r--layout/reftests/transform/matrix-4-ref.html8
-rw-r--r--layout/reftests/transform/matrix-4a.html8
-rw-r--r--layout/reftests/transform/matrix-5-ref.html8
-rw-r--r--layout/reftests/transform/matrix-5a.html8
-rw-r--r--layout/reftests/transform/matrix-6-ref.html8
-rw-r--r--layout/reftests/transform/matrix-6a.html8
-rw-r--r--layout/reftests/transform/matrix-7-ref.html8
-rw-r--r--layout/reftests/transform/matrix-7a.html8
-rw-r--r--layout/reftests/transform/matrix3d-1-ref.html15
-rw-r--r--layout/reftests/transform/matrix3d-1.html20
-rw-r--r--layout/reftests/transform/origin-1-ref.html9
-rw-r--r--layout/reftests/transform/origin-1a.html9
-rw-r--r--layout/reftests/transform/origin-1b.html9
-rw-r--r--layout/reftests/transform/origin-2-ref.html9
-rw-r--r--layout/reftests/transform/origin-2a.html9
-rw-r--r--layout/reftests/transform/origin-2b.html9
-rw-r--r--layout/reftests/transform/origin-2c.html9
-rw-r--r--layout/reftests/transform/origin-name-1-ref.html8
-rw-r--r--layout/reftests/transform/origin-name-1a.html8
-rw-r--r--layout/reftests/transform/origin-name-1b.html8
-rw-r--r--layout/reftests/transform/origin-name-2-ref.html8
-rw-r--r--layout/reftests/transform/origin-name-2a.html8
-rw-r--r--layout/reftests/transform/origin-name-2b.html8
-rw-r--r--layout/reftests/transform/origin-name-2c.html8
-rw-r--r--layout/reftests/transform/origin-name-3-ref.html8
-rw-r--r--layout/reftests/transform/origin-name-3a.html8
-rw-r--r--layout/reftests/transform/origin-name-3b.html8
-rw-r--r--layout/reftests/transform/partial-prerender-expansion-ref.html20
-rw-r--r--layout/reftests/transform/partial-prerender-expansion-rotate.html42
-rw-r--r--layout/reftests/transform/partial-prerender-expansion-translate.html44
-rw-r--r--layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html52
-rw-r--r--layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html74
-rw-r--r--layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html26
-rw-r--r--layout/reftests/transform/partial-prerender-in-svg-1-ref.html24
-rw-r--r--layout/reftests/transform/partial-prerender-in-svg-1.html43
-rw-r--r--layout/reftests/transform/partial-prerender-in-svg-2.html44
-rw-r--r--layout/reftests/transform/partial-prerender-in-svg-3-ref.html25
-rw-r--r--layout/reftests/transform/partial-prerender-in-svg-3.html44
-rw-r--r--layout/reftests/transform/partial-prerender-translate-1.html54
-rw-r--r--layout/reftests/transform/partial-prerender-translate-10-ref.html27
-rw-r--r--layout/reftests/transform/partial-prerender-translate-10.html83
-rw-r--r--layout/reftests/transform/partial-prerender-translate-11-ref.html27
-rw-r--r--layout/reftests/transform/partial-prerender-translate-11.html48
-rw-r--r--layout/reftests/transform/partial-prerender-translate-12.html52
-rw-r--r--layout/reftests/transform/partial-prerender-translate-2-ref.html29
-rw-r--r--layout/reftests/transform/partial-prerender-translate-2.html56
-rw-r--r--layout/reftests/transform/partial-prerender-translate-3-ref.html20
-rw-r--r--layout/reftests/transform/partial-prerender-translate-3.html54
-rw-r--r--layout/reftests/transform/partial-prerender-translate-4.html56
-rw-r--r--layout/reftests/transform/partial-prerender-translate-5-ref.html35
-rw-r--r--layout/reftests/transform/partial-prerender-translate-5.html58
-rw-r--r--layout/reftests/transform/partial-prerender-translate-6-ref.html29
-rw-r--r--layout/reftests/transform/partial-prerender-translate-6.html56
-rw-r--r--layout/reftests/transform/partial-prerender-translate-7.html53
-rw-r--r--layout/reftests/transform/partial-prerender-translate-8-ref.html44
-rw-r--r--layout/reftests/transform/partial-prerender-translate-8.html73
-rw-r--r--layout/reftests/transform/partial-prerender-translate-9.html76
-rw-r--r--layout/reftests/transform/pass.svg8
-rw-r--r--layout/reftests/transform/percent-1-ref.html14
-rw-r--r--layout/reftests/transform/percent-1a.html14
-rw-r--r--layout/reftests/transform/percent-1b.html14
-rw-r--r--layout/reftests/transform/percent-1c.html14
-rw-r--r--layout/reftests/transform/percent-1d.html14
-rw-r--r--layout/reftests/transform/percent-1e.html14
-rw-r--r--layout/reftests/transform/percent-1f.html14
-rw-r--r--layout/reftests/transform/percent-1g.html14
-rw-r--r--layout/reftests/transform/propagate-inherit-boolean-ref.html32
-rw-r--r--layout/reftests/transform/propagate-inherit-boolean.html31
-rw-r--r--layout/reftests/transform/reftest.list184
-rw-r--r--layout/reftests/transform/rotate-1-ref.html9
-rw-r--r--layout/reftests/transform/rotate-1a.html9
-rw-r--r--layout/reftests/transform/rotate-1b.html9
-rw-r--r--layout/reftests/transform/rotate-1c.html9
-rw-r--r--layout/reftests/transform/rotate-1d.html9
-rw-r--r--layout/reftests/transform/rotate-1e.html9
-rw-r--r--layout/reftests/transform/rotate-1f.html9
-rw-r--r--layout/reftests/transform/rotate-2-ref.html9
-rw-r--r--layout/reftests/transform/rotate-2a.html9
-rw-r--r--layout/reftests/transform/rotate-2b.html9
-rw-r--r--layout/reftests/transform/scale-1-ref.html16
-rw-r--r--layout/reftests/transform/scale-1a.html17
-rw-r--r--layout/reftests/transform/scale-1b.html17
-rw-r--r--layout/reftests/transform/scale-percent-1-ref.html17
-rw-r--r--layout/reftests/transform/scale-percent-1.html18
-rw-r--r--layout/reftests/transform/scaled-blend-mode-ref.html25
-rw-r--r--layout/reftests/transform/scaled-blend-mode.html25
-rw-r--r--layout/reftests/transform/scalex-1-ref.html17
-rw-r--r--layout/reftests/transform/scalex-1.html17
-rw-r--r--layout/reftests/transform/scaley-1-ref.html17
-rw-r--r--layout/reftests/transform/scaley-1.html17
-rw-r--r--layout/reftests/transform/singular-1a.html9
-rw-r--r--layout/reftests/transform/skew-1-ref.html8
-rw-r--r--layout/reftests/transform/skew-1a.html8
-rw-r--r--layout/reftests/transform/skew-1b.html8
-rw-r--r--layout/reftests/transform/skew-2-ref.html8
-rw-r--r--layout/reftests/transform/skew-2a.html8
-rw-r--r--layout/reftests/transform/snapping-1-ref.html18
-rw-r--r--layout/reftests/transform/snapping-1.html19
-rw-r--r--layout/reftests/transform/square.html20
-rw-r--r--layout/reftests/transform/stresstest-1-ref.html7
-rw-r--r--layout/reftests/transform/stresstest-1.html27
-rw-r--r--layout/reftests/transform/table-1-ref.html7
-rw-r--r--layout/reftests/transform/table-1a.html5
-rw-r--r--layout/reftests/transform/table-1b.html5
-rw-r--r--layout/reftests/transform/table-1c.html7
-rw-r--r--layout/reftests/transform/table-2-ref.html6
-rw-r--r--layout/reftests/transform/table-2a.html5
-rw-r--r--layout/reftests/transform/table-2b.html5
-rw-r--r--layout/reftests/transform/table-overflowed-by-animation-ref.html7
-rw-r--r--layout/reftests/transform/table-overflowed-by-animation.html29
-rw-r--r--layout/reftests/transform/transform-anon-block-1-ref.html29
-rw-r--r--layout/reftests/transform/transform-anon-block-1.html29
-rw-r--r--layout/reftests/transform/transform-box-svg-1-ref.svg3
-rw-r--r--layout/reftests/transform/transform-box-svg-1a.svg10
-rw-r--r--layout/reftests/transform/transform-box-svg-1b.svg11
-rw-r--r--layout/reftests/transform/transform-box-svg-2-ref.svg3
-rw-r--r--layout/reftests/transform/transform-box-svg-2a.svg10
-rw-r--r--layout/reftests/transform/transform-box-svg-2b.svg11
-rw-r--r--layout/reftests/transform/transform-box-svg-3a.svg64
-rw-r--r--layout/reftests/transform/transform-origin-svg-1-ref.svg3
-rw-r--r--layout/reftests/transform/transform-origin-svg-1a.svg7
-rw-r--r--layout/reftests/transform/transform-origin-svg-1b.svg9
-rw-r--r--layout/reftests/transform/transform-origin-svg-2-ref.svg3
-rw-r--r--layout/reftests/transform/transform-origin-svg-2a.svg7
-rw-r--r--layout/reftests/transform/transform-origin-svg-2b.svg9
-rw-r--r--layout/reftests/transform/transform-svg-1-ref.xhtml12
-rw-r--r--layout/reftests/transform/transform-svg-1a.xhtml20
-rw-r--r--layout/reftests/transform/transform-svg-1b.xhtml20
-rw-r--r--layout/reftests/transform/transform-svg-2-fail.xhtml20
-rw-r--r--layout/reftests/transform/transform-svg-2-ref.xhtml20
-rw-r--r--layout/reftests/transform/transform-svg-2a.xhtml20
-rw-r--r--layout/reftests/transform/translate-1-ref.html9
-rw-r--r--layout/reftests/transform/translate-1a.html9
-rw-r--r--layout/reftests/transform/translate-1b.html9
-rw-r--r--layout/reftests/transform/translate-1c.html9
-rw-r--r--layout/reftests/transform/translate-1d.html9
-rw-r--r--layout/reftests/transform/translate-1e.html9
-rw-r--r--layout/reftests/transform/translate-2-ref.html9
-rw-r--r--layout/reftests/transform/translate-2a.html9
-rw-r--r--layout/reftests/transform/translate-3-ref.html8
-rw-r--r--layout/reftests/transform/translate-3.html18
-rw-r--r--layout/reftests/transform/translate-rounding-1.html18
-rw-r--r--layout/reftests/transform/translate-rounding-2.html20
-rw-r--r--layout/reftests/transform/translate-rounding-3.html17
-rw-r--r--layout/reftests/transform/translate-rounding-ref.html18
-rw-r--r--layout/reftests/transform/translate-rounding-viewport-ref.html18
-rw-r--r--layout/reftests/transform/translatex-1-ref-2.html12
-rw-r--r--layout/reftests/transform/translatex-1-ref.html9
-rw-r--r--layout/reftests/transform/translatex-1a.html9
-rw-r--r--layout/reftests/transform/translatex-1b.html9
-rw-r--r--layout/reftests/transform/translatex-1c.html9
-rw-r--r--layout/reftests/transform/translatex-1d.html9
-rw-r--r--layout/reftests/transform/translatex-1e.html9
-rw-r--r--layout/reftests/transform/translatex-2.html9
-rw-r--r--layout/reftests/transform/translatey-1-ref-2.html9
-rw-r--r--layout/reftests/transform/translatey-1-ref.html9
-rw-r--r--layout/reftests/transform/translatey-1a.html9
-rw-r--r--layout/reftests/transform/translatey-1b.html9
-rw-r--r--layout/reftests/transform/translatey-1c.html9
-rw-r--r--layout/reftests/transform/translatey-1d.html9
-rw-r--r--layout/reftests/transform/translatey-1e.html9
-rw-r--r--layout/reftests/transform/translatey-2.html9
-rw-r--r--layout/reftests/transform/zoom-hack-1.html10
-rw-r--r--layout/reftests/transform/zoom-hack-2.html10
-rw-r--r--layout/reftests/transform/zoom-hack-ref.html9
371 files changed, 8180 insertions, 0 deletions
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..0c1d0a3a64
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(180deg); -moz-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..8590a6f600
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(180deg); -moz-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..6129b443e0
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(180deg); -moz-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..bc5146dbef
--- /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;
+ -moz-perspective: 1000px;
+ }
+ #card {
+ width: 100%;
+ height: 100%;
+ -moz-transform-style: preserve-3d;
+ -moz-transform: rotateY(165deg);
+ }
+ .face {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -moz-backface-visibility: hidden;
+ background: red;
+ }
+ .face.back {
+ display: block;
+ -moz-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..d55a8c9b41
--- /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;
+ -moz-perspective: 1000px;
+ }
+ #card {
+ width: 100%;
+ height: 100%;
+ -moz-transform-style: preserve-3d;
+ -moz-transform: rotateY(165deg);
+ }
+ .face {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -moz-backface-visibility: hidden;
+ background: red;
+ }
+ .face.back {
+ display: block;
+ -moz-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..ef27cb984b
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..38b98b2740
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..ac665fb66d
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..222dd6a82a
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..f78592e8db
--- /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{
+ -moz-perspective: 700px;
+ overflow: hidden;
+ width: 260px;
+ height: 260px;
+ display: block;
+ }
+
+ .box {
+ width: 170px;
+ height: 170px;
+ background-color: red;
+ display: block;
+ -moz-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..f78592e8db
--- /dev/null
+++ b/layout/reftests/transform-3d/overflow-hidden-1a.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html><head>
+<style type="text/css">
+ .stage{
+ -moz-perspective: 700px;
+ overflow: hidden;
+ width: 260px;
+ height: 260px;
+ display: block;
+ }
+
+ .box {
+ width: 170px;
+ height: 170px;
+ background-color: red;
+ display: block;
+ -moz-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..c918e05baf
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1a.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-perspective: 1000px; -moz-perspective-origin: 0 0;">
+ <div style="-moz-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..ee934dec13
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-perspective: 1000px; -moz-perspective-origin: top left;">
+ <div style="-moz-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..7c9e0d58ae
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-2-ref.html
@@ -0,0 +1,31 @@
+<html>
+</head>
+<style type="text/css">
+ .stage{
+ -moz-perspective: 100px;
+ -moz-perspective-origin: 30px 30px;
+ height:100px;
+ width:100px;
+ margin:5px;
+ padding:5px;
+ border:5px solid gray;
+ }
+
+ .box {
+ -moz-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..ff80938167
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-2a.html
@@ -0,0 +1,31 @@
+<html>
+</head>
+<style type="text/css">
+ .stage{
+ -moz-perspective: 100px;
+ -moz-perspective-origin: 25% 25%;
+ height:100px;
+ width:100px;
+ margin:5px;
+ padding:5px;
+ border:5px solid gray;
+ }
+
+ .box {
+ -moz-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..8271d2d3e4
--- /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 {
+ -moz-perspective: 100px;
+ -moz-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;
+ -moz-transform-origin: 0% 0%;
+ -moz-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..345db2c7f1
--- /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 {
+ -moz-perspective: 100px;
+ -moz-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;
+ -moz-transform-origin: 0% 0%;
+ -moz-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..800756ebb1
--- /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;
+ -moz-transform: scale(0.5,1);
+ -moz-perspective: 200px;
+ -moz-perspective-origin: 50% 0px;
+}
+
+.inner {
+ width: 100px;
+ height: 100px;
+ background: blue;
+ -moz-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..9d7bf6434d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..005ec797a7
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1a.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;">
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;">
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;">
+ <div style="-moz-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..ef535fcce6
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(90deg);">
+ <div style="-moz-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..1a396bcc80
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2-ref.html
@@ -0,0 +1,27 @@
+<html>
+ <head>
+ <style type="text/css">
+ #grandparent {
+ -moz-transform-style: preserve-3d;
+ }
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #child {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-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..3bdd7ab8d2
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2a.html
@@ -0,0 +1,28 @@
+<html>
+ <head>
+ <style type="text/css">
+ #grandparent {
+ -moz-transform-style: preserve-3d;
+ margin-left: 200px
+ }
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #child {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-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..36d1827dee
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2b.html
@@ -0,0 +1,28 @@
+<html>
+ <head>
+ <style type="text/css">
+ #grandparent {
+ -moz-transform-style: preserve-3d;
+ }
+ #parent {
+ -moz-transform-style: preserve-3d;
+ margin-left: 200px
+ }
+
+ #child {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-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..cc8ff8a0a4
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2c.html
@@ -0,0 +1,28 @@
+<html>
+ <head>
+ <style type="text/css">
+ #grandparent {
+ -moz-transform-style: preserve-3d;
+ }
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #child {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-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..6cfe1e3bde
--- /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;
+ -moz-transform-style: preserve-3d;
+ -moz-transform: translatex(200%);
+ }
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #child {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-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..2590d9df31
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..a28f814e9e
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); -moz-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..0bf0cbe4c7
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-4a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(90deg); -moz-transform-style: preserve-3d; opacity: 0.9999;">
+ <div style="-moz-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..03e9e7ed0d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-5a.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;">
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;">
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;">
+ <div style="-moz-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..4647fd56d6
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-clipped.html
@@ -0,0 +1,10 @@
+<html>
+ <body>
+ <div style="-moz-transform-style: preserve-3d; -moz-transform:rotatex(90deg); overflow:hidden;">
+ <div style="-moz-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..5a3694fa1a
--- /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);
+ -moz-transform: translateY(37px) rotateX(90deg);
+ }
+
+ #cube .side:nth-child(2) {
+ -webkit-transform: translateY(-37px) rotateX(-90deg);
+ -moz-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..4eea36e102
--- /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 -moz-perspective results in visual changes to child transformed elements
+!= rotatex-perspective-1b.html rotatex-1-ref.html
+# -moz-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
+!= 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) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,0-16,0-6) == 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..ba2d222e46
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..edf3c1be4b
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..0ee28cfe80
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..f0c6b01838
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..0b8671e7a0
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..d8be199534
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-perspective: 1000px;">
+ <div style="-moz-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..9cae306962
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); -moz-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..c0691b77f8
--- /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;
+
+ -moz-perspective: 500px;
+ }
+
+ #parent {
+ margin: 10px;
+ width: 280px;
+ height: 280px;
+ background-color: #844BCA;
+
+ -moz-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..593ca82bb3
--- /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;
+
+ -moz-perspective: 500px;
+ opacity: 0.9999;
+ }
+
+ #parent {
+ margin: 10px;
+ width: 280px;
+ height: 280px;
+ background-color: #844BCA;
+
+ -moz-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..11a2dcf2d0
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-perspective: 1000px;">
+ <div style="-moz-transform: rotatex(45deg); -moz-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..2c54cef326
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-perspective: 1000px;">
+ <div style="-moz-transform: rotatex(45deg); -moz-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..0b3339824c
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..359105b01e
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..664d1d4f35
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: scaleX(2) scaleY(2); -moz-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..1c0fe50145
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-all-separate.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: scaleX(2) scaleY(2) scaleZ(2); -moz-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..afe4639aa3
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-all.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: scale3D(2,2,2); -moz-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..81d0909794
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-xz.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(90deg) scale3D(2,1,2) rotatex(-90deg); -moz-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..e168dabc24
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-z.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(90deg) scale3D(1,1,2) rotatex(-90deg); -moz-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..6efdc2681b
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1-ref.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: scaleY(2); -moz-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..5661addc16
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(90deg) scaleZ(2) rotatex(-90deg); -moz-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..2f250fd786
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..2cc10c8405
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-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..340d2eb0bb
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-1-ref.html
@@ -0,0 +1,35 @@
+<html>
+ <head>
+ <style type="text/css">
+ #stage {
+ -moz-perspective: 1000px;
+ }
+
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #big {
+ width: 1000px;
+ height: 1000px;
+ background-color: #995C7F;
+ -moz-transform: rotatey(45deg);
+ }
+
+ #small {
+ width: 100px;
+ height: 100px;
+ background-color: #995C7F;
+ -moz-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..98414f843b
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-1a.html
@@ -0,0 +1,35 @@
+<html>
+ <head>
+ <style type="text/css">
+ #stage {
+ -moz-perspective: 1000px;
+ }
+
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #big {
+ width: 1000px;
+ height: 1000px;
+ background-color: #995C7F;
+ -moz-transform: rotatey(45deg);
+ }
+
+ #small {
+ width: 100px;
+ height: 100px;
+ background-color: #835A99;
+ -moz-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..988ba323c2
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2a.html
@@ -0,0 +1,29 @@
+<html>
+ <head>
+ <style type="text/css">
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #one {
+ width: 100px;
+ height: 100px;
+ background-color: #00FF00;
+ -moz-transform: translatez(10px);
+ }
+
+ #two {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-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..5828be845e
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2b.html
@@ -0,0 +1,30 @@
+<html>
+ <head>
+ <style type="text/css">
+ #parent {
+ -moz-transform-style: preserve-3d;
+ -moz-transform: rotatex(180deg);
+ }
+
+ #one {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-transform: translatez(10px) translatey(50px);
+ }
+
+ #two {
+ width: 100px;
+ height: 100px;
+ background-color: #00FF00;
+ -moz-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..00c62b5ce6
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-3a.html
@@ -0,0 +1,25 @@
+<html>
+ <head>
+ <style type="text/css">
+ #parent {
+ -moz-transform-style: preserve-3d;
+ -moz-transform: rotateX(180deg);
+ width: 100px;
+ height: 100px;
+ background-color: #00FF00;
+ }
+
+ #child {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-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..946dc28a31
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-style-flat-1a.html
@@ -0,0 +1,8 @@
+<html>
+ <body>
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top">
+ <div style="-moz-transform: rotatex(-45deg); -moz-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..d3b919e992
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); -moz-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..418d127869
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate3d(10px, 30px, -10px) rotatex(45deg) translate3d(-10px, -30px, 10px); -moz-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..e4a00aca15
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); -moz-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..a19a128b26
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatez(-10px) rotatex(45deg) translatez(10px); -moz-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..7e6f1dead1
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatez(-20px) rotatex(45deg) translatez(20px); -moz-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>
diff --git a/layout/reftests/transform/1569215-1-ref.html b/layout/reftests/transform/1569215-1-ref.html
new file mode 100644
index 0000000000..de52ba1e8c
--- /dev/null
+++ b/layout/reftests/transform/1569215-1-ref.html
@@ -0,0 +1,10 @@
+<style>
+path {
+ stroke: #000;
+ fill: none;
+}
+</style>
+
+<svg width="500" height="500" viewBox="105 125 20 20">
+ <path id="pp" d="m 95,130 h 36" />
+</svg>
diff --git a/layout/reftests/transform/1569215-1.html b/layout/reftests/transform/1569215-1.html
new file mode 100644
index 0000000000..b1b199ab63
--- /dev/null
+++ b/layout/reftests/transform/1569215-1.html
@@ -0,0 +1,28 @@
+<style>
+path {
+ stroke: #000;
+ fill: none;
+}
+
+#pp {
+ animation: flyR 5s infinite;
+}
+
+@keyframes flyR {
+ from {
+ transform: translate(9px);
+ }
+
+ 50% {
+ transform: translate(4.5px);
+ }
+
+ to {
+ transform: translate(0px);
+ }
+}
+</style>
+
+<svg width="500" height="500" viewBox="105 125 20 20">
+ <path id="pp" d="m 95,130 h 36" />
+</svg>
diff --git a/layout/reftests/transform/601894-1.html b/layout/reftests/transform/601894-1.html
new file mode 100644
index 0000000000..a45c66847b
--- /dev/null
+++ b/layout/reftests/transform/601894-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <body style="background: linear-gradient(lime, lime) fixed; overflow: hidden;">
+ <div style="position: absolute; left: 21.0138px; top: 507.24px; z-index: 17567; -moz-transform: scale(8);">
+ <div style="height: 128px; left: -64px; position: absolute; top: -64px; visibility: visible; width: 128px;"></div>
+ </div>
+ <div style="position: absolute; left: 640.572px; top: 386.574px; -moz-transform: scale(1); z-index: -157863;">
+ <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+ </div>
+ <div style="position: absolute; left: 568.346px; top: 582.669px; -moz-transform: scale(1); z-index: -62592;">
+ <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+ </div>
+ <div style="position: absolute; left: 573.27px; top: 168.861px; -moz-transform: scale(1); z-index: -137632;">
+ <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+ </div>
+ <div style="position: absolute; left: 519.063px; top: 182.9px; -moz-transform: scale(1); z-index: -50558;">
+ <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/601894-2.html b/layout/reftests/transform/601894-2.html
new file mode 100644
index 0000000000..396064777c
--- /dev/null
+++ b/layout/reftests/transform/601894-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ <body style="background: linear-gradient(lime, lime) fixed;">
+ <div style="position: absolute; left: 0; top: 0; -moz-transform: scale(1)">
+ <div style="position: absolute; width: 200px; height: 200px;"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/601894-ref.html b/layout/reftests/transform/601894-ref.html
new file mode 100644
index 0000000000..f4e6cdae83
--- /dev/null
+++ b/layout/reftests/transform/601894-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<body style="background: lime;">
diff --git a/layout/reftests/transform/830299-1-ref.html b/layout/reftests/transform/830299-1-ref.html
new file mode 100644
index 0000000000..d5cf007103
--- /dev/null
+++ b/layout/reftests/transform/830299-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+ <title>Testcase, bug 830299</title>
+ <meta charset=UTF-8>
+ <style type="text/css">
+
+ html { margin: 1px; padding: 2px }
+ body { margin: 4px; padding: 8px }
+
+ #outer {
+ position: absolute;
+ top: 3px; left: 5px;
+ width: 200px; height: 200px;
+ background: yellow;
+ }
+
+ #inner {
+ position: absolute;
+ top: 7px; left: 9px;
+ width: 100px; height: 100px;
+ background: aqua;
+ }
+
+ </style>
+</head>
+<body>
+
+<div id="outer">
+ <div id="inner">inner</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/830299-1.html b/layout/reftests/transform/830299-1.html
new file mode 100644
index 0000000000..3d7c799334
--- /dev/null
+++ b/layout/reftests/transform/830299-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-wait">
+<head>
+ <title>Testcase, bug 830299</title>
+ <meta charset=UTF-8>
+ <style type="text/css">
+
+ html { margin: 1px; padding: 2px }
+ body { margin: 4px; padding: 8px }
+
+ #outer {
+ position: absolute;
+ overflow: hidden;
+ transform: translateX(0px);
+ top: 3px; left: 5px;
+ width: 200px; height: 200px;
+ background: yellow;
+ }
+
+ #inner {
+ position: fixed;
+ top: 7px; left: 9px;
+ width: 100px; height: 100px;
+ background: aqua;
+ }
+
+ </style>
+ <script type="text/javascript">
+
+ window.addEventListener("load", function(event) {
+ setTimeout(function() {
+ document.getElementById("inner").style.display = "";
+ document.documentElement.removeAttribute("class");
+ }, 100);
+ });
+
+ </script>
+</head>
+<body>
+
+<div id="outer">
+ <div id="inner" style="display:none">inner</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1-ref.html b/layout/reftests/transform/abspos-1-ref.html
new file mode 100644
index 0000000000..337c849b51
--- /dev/null
+++ b/layout/reftests/transform/abspos-1-ref.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; position: relative; left: 50px; top: 50px; background-color: gold;">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1a.html b/layout/reftests/transform/abspos-1a.html
new file mode 100644
index 0000000000..a999bee745
--- /dev/null
+++ b/layout/reftests/transform/abspos-1a.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px); background-color: gold;">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1b.html b/layout/reftests/transform/abspos-1b.html
new file mode 100644
index 0000000000..54c37fdf65
--- /dev/null
+++ b/layout/reftests/transform/abspos-1b.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1c.html b/layout/reftests/transform/abspos-1c.html
new file mode 100644
index 0000000000..d3cc9a4c25
--- /dev/null
+++ b/layout/reftests/transform/abspos-1c.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; right: -150px; bottom: 0px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1d.html b/layout/reftests/transform/abspos-1d.html
new file mode 100644
index 0000000000..47ac1b9dc2
--- /dev/null
+++ b/layout/reftests/transform/abspos-1d.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -150px; bottom: 0px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1e.html b/layout/reftests/transform/abspos-1e.html
new file mode 100644
index 0000000000..310d33e4b5
--- /dev/null
+++ b/layout/reftests/transform/abspos-1e.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -151px; bottom: 0px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1f.html b/layout/reftests/transform/abspos-1f.html
new file mode 100644
index 0000000000..2b9d954e60
--- /dev/null
+++ b/layout/reftests/transform/abspos-1f.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px); background-color: gold; display: table">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1g.html b/layout/reftests/transform/abspos-1g.html
new file mode 100644
index 0000000000..32cf19e0cb
--- /dev/null
+++ b/layout/reftests/transform/abspos-1g.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;display: inline-table">
+ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+ <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;">
+ 0 1 2 3 4 5 6 7 8 9
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html
new file mode 100644
index 0000000000..3f2974597f
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+ display: inline-block;
+ background: white;
+ color: black;
+}
+
+#inner {
+ vertical-align: top;
+ height: 100px;
+ width: 100px;
+ background: repeating-linear-gradient(to top left, yellow, blue 10px);
+ will-change: transform;
+}
+
+</style>
+
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1.html b/layout/reftests/transform/animate-layer-scale-inherit-1.html
new file mode 100644
index 0000000000..b04c4a8fa9
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+ display: inline-block;
+ background: white;
+ color: black;
+}
+#outer { transform: scale(5) }
+#inner { animation: HoldTransform linear infinite 1s }
+#inner {
+ vertical-align: top;
+ height: 100px;
+ width: 100px;
+ background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+ from, to { transform: scale(0.2) }
+}
+
+</style>
+
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html
new file mode 100644
index 0000000000..714f6f2224
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+ display: inline-block;
+ background: white;
+ color: black;
+}
+#inner {
+ vertical-align: top;
+ height: 100px;
+ width: 100px;
+ background: repeating-linear-gradient(to top left, yellow, blue 10px);
+ opacity: 0.6;
+ will-change: transform, opacity;
+}
+
+</style>
+
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2.html b/layout/reftests/transform/animate-layer-scale-inherit-2.html
new file mode 100644
index 0000000000..f7297d1213
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+ display: inline-block;
+ background: white;
+ color: black;
+}
+#outer { transform: scale(5) }
+#inner { animation: HoldTransform linear infinite 1s,
+ HoldOpacity linear infinite 1s; }
+#inner {
+ vertical-align: top;
+ height: 100px;
+ width: 100px;
+ background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+ from, to { transform: scale(0.2) }
+}
+@keyframes HoldOpacity {
+ from, to { opacity: 0.6 }
+}
+
+</style>
+
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-3.html b/layout/reftests/transform/animate-layer-scale-inherit-3.html
new file mode 100644
index 0000000000..4badfbd825
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-3.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+ display: inline-block;
+ background: white;
+ color: black;
+}
+/*
+ * We use step-end with reverse direction to paint the initial state
+ * on the first frame, and step to the last state on the next frame.
+ */
+#inner { animation: HoldTransform step-end 100s reverse }
+#inner {
+ vertical-align: top;
+ height: 100px;
+ width: 100px;
+ background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+ /* need to initially rasterize at non-identity transform to hit the
+ * bug at all
+ * NOTE: These keyframes will be used reverse direction.
+ */
+ 0% { transform: none }
+ 100% { transform: scale(0.2) }
+}
+
+</style>
+
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
+
+<script>
+
+document.getElementById("inner").addEventListener("animationstart", StartListener);
+
+function StartListener(event) {
+ // Animation should be zoomed to transform:none after the first frame.
+ requestAnimationFrame(RemoveReftestWait);
+}
+
+function RemoveReftestWait() {
+ document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html
new file mode 100644
index 0000000000..16688d4def
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+ display: inline-block;
+ background: white;
+ color: black;
+}
+#inner {
+ vertical-align: top;
+ height: 100px;
+ width: 100px;
+ background: repeating-linear-gradient(to top left, yellow, blue 10px);
+ will-change: transform;
+}
+
+</style>
+
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-4.html b/layout/reftests/transform/animate-layer-scale-inherit-4.html
new file mode 100644
index 0000000000..8ab439fc7a
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-4.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1526847</title>
+<style>
+
+#outer, #inner {
+ display: inline-block;
+ background: white;
+ color: black;
+}
+#outer { scale: 5 }
+#inner {
+ vertical-align: top;
+ height: 100px;
+ width: 100px;
+ background: repeating-linear-gradient(to top left, yellow, blue 10px);
+ animation: HoldTransform linear infinite 1s;
+}
+@keyframes HoldTransform {
+ from, to { scale: 0.5; transform: scale(0.4); }
+}
+
+</style>
+
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/layout/reftests/transform/compound-1-fail.html b/layout/reftests/transform/compound-1-fail.html
new file mode 100644
index 0000000000..52e37d6f09
--- /dev/null
+++ b/layout/reftests/transform/compound-1-fail.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+ <style type="text/css">
+ div.test
+ {
+ background-color: gold;
+ width:200px;
+ height:100px;
+ border: 1px solid black;
+ }
+ div
+ {
+ -moz-transform-origin: top left;
+ }
+ html
+ {
+ scrollbar-width: none;
+ }
+ </style>
+</head>
+<body>
+ <div style="position:relative; left:400px; top:200px;">
+ <div style="-moz-transform: skew(15deg);">
+ <div style="-moz-transform: rotate(90deg);">
+ <div style="-moz-transform: scale(2);">
+ <div style="-moz-transform: translate(100px);">
+ <div class="test">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/compound-1-ref.html b/layout/reftests/transform/compound-1-ref.html
new file mode 100644
index 0000000000..c701028867
--- /dev/null
+++ b/layout/reftests/transform/compound-1-ref.html
@@ -0,0 +1,36 @@
+<html>
+<head>
+ <meta name="viewport" content="initial-scale=1">
+ <style type="text/css">
+ div.test
+ {
+ background-color: gold;
+ width:200px;
+ height:100px;
+ border: 1px solid black;
+ }
+ div
+ {
+ -moz-transform-origin: top left;
+ }
+ html
+ {
+ scrollbar-width: none;
+ }
+ </style>
+</head>
+<body>
+ <div style="position:relative; left:400px; top:200px;">
+ <div style="-moz-transform: translate(100px);">
+ <div style="-moz-transform: scale(2);">
+ <div style="-moz-transform: rotate(90deg);">
+ <div style="-moz-transform: skew(15deg);">
+ <div class="test">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/compound-1a.html b/layout/reftests/transform/compound-1a.html
new file mode 100644
index 0000000000..1962b74023
--- /dev/null
+++ b/layout/reftests/transform/compound-1a.html
@@ -0,0 +1,28 @@
+<html>
+<head>
+ <meta name="viewport" content="initial-scale=1">
+ <style type="text/css">
+ div.test
+ {
+ background-color: gold;
+ width:200px;
+ height:100px;
+ border: 1px solid black;
+ }
+ div
+ {
+ -moz-transform-origin: top left;
+ }
+ html
+ {
+ scrollbar-width: none;
+ }
+ </style>
+</head>
+<body>
+ <div style="position:relative; left:400px; top:200px;">
+ <div class="test" style="-moz-transform: translate(100px) scale(2) rotate(90deg) skew(15deg);">
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/descendant-1-ref.html b/layout/reftests/transform/descendant-1-ref.html
new file mode 100644
index 0000000000..827090c7e7
--- /dev/null
+++ b/layout/reftests/transform/descendant-1-ref.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+ <style>
+ #div1 {
+ background: green;
+ height: 100px;
+ width: 100px;
+ }
+ span {
+ background: yellow;
+ }
+ </style>
+</head>
+<body>
+ <div id="div1">
+ <span style="position: relative; top: 150px; left: 20px">span 1</span>
+ </div>
+ <span>span 2</span>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/descendant-1.html b/layout/reftests/transform/descendant-1.html
new file mode 100644
index 0000000000..6de49fc5f0
--- /dev/null
+++ b/layout/reftests/transform/descendant-1.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+ <style>
+ #div1 {
+ background: green;
+ height: 100px;
+ width: 100px;
+ }
+ span {
+ background: yellow;
+ }
+ #div1 div {-moz-transform: translate(20px, 150px);
+ -moz-transform-origin: 0% 0%;
+ }
+ </style>
+</head>
+<body>
+ <div id="div1">
+ <div><span>span 1</span></div>
+ </div>
+ <span>span 2</span>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html
new file mode 100644
index 0000000000..e2d067e1f6
--- /dev/null
+++ b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+ The green square below should be centered.
+ <div style="width: 400px; height: 400px; position: absolute;
+ perspective: 600px; left: calc(50% - 200px);
+ top: calc(50% - 200px); background: green;">
+ </div>
+</html>
diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1.html b/layout/reftests/transform/dynamic-add-without-change-cb-1.html
new file mode 100644
index 0000000000..7b8307b4fb
--- /dev/null
+++ b/layout/reftests/transform/dynamic-add-without-change-cb-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+ The green square below should be centered.
+ <div style="width: 400px; height: 400px; position: absolute;
+ perspective: 600px; left: 50%; top: 50%; background: green;">
+ </div>
+ <script>
+ document.body.offsetWidth;
+ document.querySelector("div").style.transform = "translate(-50%, -50%)";
+ </script>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1-ref.html b/layout/reftests/transform/dynamic-addremove-1-ref.html
new file mode 100644
index 0000000000..271b1a6470
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="position:absolute; left:80px; top:20px; width:100px; height:100px; background:yellow">
+ <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1a.html b/layout/reftests/transform/dynamic-addremove-1a.html
new file mode 100644
index 0000000000..580e0fd722
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+ <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+</div>
+<script>
+function doTest() {
+ document.getElementById("t").style.transform = "translate(80px,20px)";
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1b.html b/layout/reftests/transform/dynamic-addremove-1b.html
new file mode 100644
index 0000000000..5c17bc073b
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+ <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+</div>
+<script>
+function doTest() {
+ document.getElementById("t").style.transform = "translate(80px,20px)";
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1c.html b/layout/reftests/transform/dynamic-addremove-1c.html
new file mode 100644
index 0000000000..519fc19f20
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1c.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+ <div style="float:left;">
+ <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+ </div>
+</div>
+<script>
+function doTest() {
+ document.getElementById("t").style.transform = "translate(80px,20px)";
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-2-ref.html b/layout/reftests/transform/dynamic-addremove-2-ref.html
new file mode 100644
index 0000000000..d92058201d
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-2-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html style="background: green">
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-2.html b/layout/reftests/transform/dynamic-addremove-2.html
new file mode 100644
index 0000000000..b6718b29a7
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html style="background: red">
+ <div style="transform: translate3d(0, 0, 0); position: absolute;
+ top: 0; left: 0; width: 100px; height: 100px">
+ <div style="position: absolute">
+ <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0;
+ background: green">
+ </div>
+ </div>
+ </div>
+ <script>
+ onload = function() {
+ document.body.offsetWidth;
+ document.querySelector("div").style.transform = "none";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/transform/dynamic-inherit-1-ref.html b/layout/reftests/transform/dynamic-inherit-1-ref.html
new file mode 100644
index 0000000000..f0f7eae474
--- /dev/null
+++ b/layout/reftests/transform/dynamic-inherit-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+<title>Test for bug 521720</title>
+<style type="text/css">
+
+p {
+ -moz-transform-origin: inherit;
+ -moz-transform: scale(2);
+ height: 10px;
+ width: 10px;
+ background: green;
+ margin: 50px;
+}
+
+</style>
+<head>
+<body>
+<div id="a">
+<p style="font-size: 10px"></p>
+</div>
+</body>
diff --git a/layout/reftests/transform/dynamic-inherit-1.html b/layout/reftests/transform/dynamic-inherit-1.html
new file mode 100644
index 0000000000..e04512a6fa
--- /dev/null
+++ b/layout/reftests/transform/dynamic-inherit-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+<title>Test for bug 521720</title>
+<style type="text/css">
+
+p {
+ -moz-transform-origin: inherit;
+ -moz-transform: scale(2);
+ height: 10px;
+ width: 10px;
+ background: green;
+ margin: 50px;
+}
+
+</style>
+<head>
+<body onload="document.getElementById('a').style.removeProperty('-moz-transform-origin');">
+<div id="a" style="-moz-transform-origin: 10px 10px">
+<p style="font-size: 10px"></p>
+</div>
+</body>
diff --git a/layout/reftests/transform/iframe-1-ref.html b/layout/reftests/transform/iframe-1-ref.html
new file mode 100644
index 0000000000..43c76457a4
--- /dev/null
+++ b/layout/reftests/transform/iframe-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+ <head>
+ <style>
+ iframe {
+ overflow: hidden;
+ height: 200px;
+ width: 300px;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="about:blank">
+ </iframe>
+ </body>
+</html>
diff --git a/layout/reftests/transform/iframe-1.html b/layout/reftests/transform/iframe-1.html
new file mode 100644
index 0000000000..6a2b621df9
--- /dev/null
+++ b/layout/reftests/transform/iframe-1.html
@@ -0,0 +1,14 @@
+<html>
+ <head>
+ <style>
+ iframe {
+ height: 200px;
+ width: 300px;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe scrolling="no" src="iframe-transform.html">
+ </iframe>
+ </body>
+</html>
diff --git a/layout/reftests/transform/iframe-transform.html b/layout/reftests/transform/iframe-transform.html
new file mode 100644
index 0000000000..ffe15e78dc
--- /dev/null
+++ b/layout/reftests/transform/iframe-transform.html
@@ -0,0 +1,16 @@
+<html>
+ <head>
+ <style>
+ div {
+ height: 200px;
+ width: 200px;
+ background: green;
+ -moz-transform: translate(500px, 500px);
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/inline-1-ref.html b/layout/reftests/transform/inline-1-ref.html
new file mode 100644
index 0000000000..84a2f6dd4a
--- /dev/null
+++ b/layout/reftests/transform/inline-1-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+This is some text<br>that is not transformed
diff --git a/layout/reftests/transform/inline-1a.html b/layout/reftests/transform/inline-1a.html
new file mode 100644
index 0000000000..fab499d72c
--- /dev/null
+++ b/layout/reftests/transform/inline-1a.html
@@ -0,0 +1,3 @@
+<!doctype html>
+This is some <span style="-moz-transform:rotate(180deg)">text<br>
+that is</span> not transformed
diff --git a/layout/reftests/transform/invalidate-svg-scale-1-ref.html b/layout/reftests/transform/invalidate-svg-scale-1-ref.html
new file mode 100644
index 0000000000..dde3a479aa
--- /dev/null
+++ b/layout/reftests/transform/invalidate-svg-scale-1-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Bug 1490518</title>
+</head>
+<body>
+<div style="position: absolute; top: 0px; left: 0px; transform: scale(2.0);">
+ <div style="position: absolute; top: 0px; left: 0px; width: 200px; background: green; height: 50px; will-change: opacity"></div>
+ <svg width="200" height="200" style="position: absolute; top: 50px; left: 0px;">
+ <rect x="0" y="0" width="200" height="200" fill="transparent"/>
+ </svg>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform/invalidate-svg-scale-1.html b/layout/reftests/transform/invalidate-svg-scale-1.html
new file mode 100644
index 0000000000..f1ef5fdf65
--- /dev/null
+++ b/layout/reftests/transform/invalidate-svg-scale-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>Bug 1490518</title>
+</head>
+<body>
+<div style="position: absolute; top: 0px; left: 0px; transform: scale(2.0);">
+ <div style="position: absolute; top: 0px; left: 0px; width: 200px; background: green; height: 50px; will-change: opacity"></div>
+ <svg width="200" height="200" style="position: absolute; top: 50px; left: 0px;">
+ <rect x="0" y="0" width="200" height="200" fill="transparent"/>
+ <rect x="0" y="0" width="200" height="200" fill="blue" id="rect"/>
+ </svg>
+</div>
+
+<script>
+function doTest() {
+ document.getElementById("rect").style.visibility = "hidden";
+ document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/invalidate-transform-1-ref.html b/layout/reftests/transform/invalidate-transform-1-ref.html
new file mode 100644
index 0000000000..6121847d70
--- /dev/null
+++ b/layout/reftests/transform/invalidate-transform-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title></title>
+</head>
+<style type="text/css">
+#green {
+ position: absolute;
+ top: 8px;
+ left: 208px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ z-index: 1;
+}
+</style>
+<body>
+<div id="green"></div>
+</body>
+</html>
diff --git a/layout/reftests/transform/invalidate-transform-1.html b/layout/reftests/transform/invalidate-transform-1.html
new file mode 100644
index 0000000000..d4403630a3
--- /dev/null
+++ b/layout/reftests/transform/invalidate-transform-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="UTF-8">
+<title></title>
+</head>
+<style type="text/css">
+#parent {
+ width: 200px;
+ height: 200px;
+}
+
+#box {
+ width: 200px;
+ height: 200px;
+ background-color: red;
+ z-index: 0;
+}
+
+#green {
+ position: absolute;
+ top: 8px;
+ left: 208px;
+ width: 200px;
+ height: 200px;
+ background-color: green;
+ z-index: 1;
+}
+</style>
+<body>
+
+<div id="parent">
+ <div id="box"></div>
+</div>
+<div id="green"></div>
+
+<script type="text/javascript">
+function doTest() {
+ var element = document.getElementById("parent");
+ element.style.transform = "translate(200px, 0px)";
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", doTest);
+
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-1-ref.html b/layout/reftests/transform/matrix-1-ref.html
new file mode 100644
index 0000000000..0b24d517bb
--- /dev/null
+++ b/layout/reftests/transform/matrix-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatex(100px); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-1a.html b/layout/reftests/transform/matrix-1a.html
new file mode 100644
index 0000000000..95307ec197
--- /dev/null
+++ b/layout/reftests/transform/matrix-1a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 0, 0, 1, 100, 0); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-2-ref.html b/layout/reftests/transform/matrix-2-ref.html
new file mode 100644
index 0000000000..0bb5f10b52
--- /dev/null
+++ b/layout/reftests/transform/matrix-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatey(100px); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-2a.html b/layout/reftests/transform/matrix-2a.html
new file mode 100644
index 0000000000..26c1958729
--- /dev/null
+++ b/layout/reftests/transform/matrix-2a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 0, 0, 1, 0, 100); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-3-ref.html b/layout/reftests/transform/matrix-3-ref.html
new file mode 100644
index 0000000000..7eaa66a605
--- /dev/null
+++ b/layout/reftests/transform/matrix-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatex(47%); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-3a.html b/layout/reftests/transform/matrix-3a.html
new file mode 100644
index 0000000000..36949de863
--- /dev/null
+++ b/layout/reftests/transform/matrix-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 0, 0, 1, 47, 0); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-4-ref.html b/layout/reftests/transform/matrix-4-ref.html
new file mode 100644
index 0000000000..31627a0cb5
--- /dev/null
+++ b/layout/reftests/transform/matrix-4-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatey(23%); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-4a.html b/layout/reftests/transform/matrix-4a.html
new file mode 100644
index 0000000000..1fde9f6c56
--- /dev/null
+++ b/layout/reftests/transform/matrix-4a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 0, 0, 1, 0, 23); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-5-ref.html b/layout/reftests/transform/matrix-5-ref.html
new file mode 100644
index 0000000000..04e7730ce3
--- /dev/null
+++ b/layout/reftests/transform/matrix-5-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: skewx(45deg); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-5a.html b/layout/reftests/transform/matrix-5a.html
new file mode 100644
index 0000000000..89a7c9c1a5
--- /dev/null
+++ b/layout/reftests/transform/matrix-5a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 0, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-6-ref.html b/layout/reftests/transform/matrix-6-ref.html
new file mode 100644
index 0000000000..a3846372c0
--- /dev/null
+++ b/layout/reftests/transform/matrix-6-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: skewy(45deg); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-6a.html b/layout/reftests/transform/matrix-6a.html
new file mode 100644
index 0000000000..50f0c3dd5b
--- /dev/null
+++ b/layout/reftests/transform/matrix-6a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 1, 0, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-7-ref.html b/layout/reftests/transform/matrix-7-ref.html
new file mode 100644
index 0000000000..460f5d645a
--- /dev/null
+++ b/layout/reftests/transform/matrix-7-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: scale(2, 4); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-7a.html b/layout/reftests/transform/matrix-7a.html
new file mode 100644
index 0000000000..8603c37b28
--- /dev/null
+++ b/layout/reftests/transform/matrix-7a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(2, 0, 0, 4, 0, 0); width: 100px; height: 100px; background-color: gold;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix3d-1-ref.html b/layout/reftests/transform/matrix3d-1-ref.html
new file mode 100644
index 0000000000..d2f257d531
--- /dev/null
+++ b/layout/reftests/transform/matrix3d-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+ <style>
+ div {
+ background: green;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix3d-1.html b/layout/reftests/transform/matrix3d-1.html
new file mode 100644
index 0000000000..09226ffb0b
--- /dev/null
+++ b/layout/reftests/transform/matrix3d-1.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+ <!-- We do not support the 3d matrix yet, so this should do nothing -->
+ <style>
+ div {
+ background: green;
+ width: 100px;
+ height: 100px;
+ -moz-transform: matrix3d(1, 0, 100, 1, 10,
+ 1, 100, 1, 1, 10,
+ 1, 100, 2, 3, 12,
+ 12, 100, 3, 4, 5);
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1-ref.html b/layout/reftests/transform/origin-1-ref.html
new file mode 100644
index 0000000000..643c8434a6
--- /dev/null
+++ b/layout/reftests/transform/origin-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg);">
+ Some text!
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1a.html b/layout/reftests/transform/origin-1a.html
new file mode 100644
index 0000000000..51e091442a
--- /dev/null
+++ b/layout/reftests/transform/origin-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 0% 0%">
+ Some text!
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1b.html b/layout/reftests/transform/origin-1b.html
new file mode 100644
index 0000000000..71ddbc388a
--- /dev/null
+++ b/layout/reftests/transform/origin-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin:100% 50%">
+ Some text!
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2-ref.html b/layout/reftests/transform/origin-2-ref.html
new file mode 100644
index 0000000000..643c8434a6
--- /dev/null
+++ b/layout/reftests/transform/origin-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg);">
+ Some text!
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2a.html b/layout/reftests/transform/origin-2a.html
new file mode 100644
index 0000000000..ac18108d40
--- /dev/null
+++ b/layout/reftests/transform/origin-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 101px 51px;">
+ Some text!
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2b.html b/layout/reftests/transform/origin-2b.html
new file mode 100644
index 0000000000..7e95c7ba2c
--- /dev/null
+++ b/layout/reftests/transform/origin-2b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 101px 50%;">
+ Some text!
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2c.html b/layout/reftests/transform/origin-2c.html
new file mode 100644
index 0000000000..8daef897f9
--- /dev/null
+++ b/layout/reftests/transform/origin-2c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 50% 51px;">
+ Some text!
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1-ref.html b/layout/reftests/transform/origin-name-1-ref.html
new file mode 100644
index 0000000000..70bb6d479a
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 0% 0%;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1a.html b/layout/reftests/transform/origin-name-1a.html
new file mode 100644
index 0000000000..5167634ac0
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top left;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1b.html b/layout/reftests/transform/origin-name-1b.html
new file mode 100644
index 0000000000..b7c5ca24e2
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: left top;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2-ref.html b/layout/reftests/transform/origin-name-2-ref.html
new file mode 100644
index 0000000000..2397fdf537
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 50% 0%;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2a.html b/layout/reftests/transform/origin-name-2a.html
new file mode 100644
index 0000000000..ff893641ce
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2b.html b/layout/reftests/transform/origin-name-2b.html
new file mode 100644
index 0000000000..1f30a1073d
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top center;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2c.html b/layout/reftests/transform/origin-name-2c.html
new file mode 100644
index 0000000000..aa9fe51204
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2c.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: center top;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3-ref.html b/layout/reftests/transform/origin-name-3-ref.html
new file mode 100644
index 0000000000..c0570bf334
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 100% 0%;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3a.html b/layout/reftests/transform/origin-name-3a.html
new file mode 100644
index 0000000000..06b9324a4e
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top right;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3b.html b/layout/reftests/transform/origin-name-3b.html
new file mode 100644
index 0000000000..cbc44043ba
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: right top;">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-ref.html b/layout/reftests/transform/partial-prerender-expansion-ref.html
new file mode 100644
index 0000000000..3c8eec7f69
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ background-color: green;
+ width: 100vw;
+ height: 100vh;
+ position: absolute;
+}
+</style>
+<div id="target"></div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-rotate.html b/layout/reftests/transform/partial-prerender-expansion-rotate.html
new file mode 100644
index 0000000000..a823989656
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-rotate.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ from { transform: translate(-50vw, -50vh) rotate(85deg); }
+ to { transform: translate(-50vw, -50vh) rotate(90deg); }
+}
+#target {
+ width: 200vw;
+ height: 200vh;
+ position: absolute;
+ transform-origin: 100vw 100vh;
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ Webrender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect fill="green" width="16" height="16"></rect>
+ </svg>
+</div>
+<script>
+// Waiting MozReftestInvalidate event makes this test fail for some reasons.
+// so we use window.onload instead.
+window.onload = () => {
+ target.style.animation = "anim 100s step-end reverse";
+ target.addEventListener("animationstart", () => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+};
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-translate.html b/layout/reftests/transform/partial-prerender-expansion-translate.html
new file mode 100644
index 0000000000..4b3ea595a9
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-translate.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ from { transform: translateX(0px); }
+}
+#target {
+ width: 200vw;
+ height: 100vh;
+ position: absolute;
+ /* Some part of this element needs to be visible initially so that */
+ /* a display item for this element is generated, thus the transform */
+ /* animation runs on the compositor. */
+ transform: translateX(90vw);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ Webrender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect fill="green" width="16" height="16"></rect>
+ </svg>
+</div>
+<script>
+// Waiting MozReftestInvalidate event makes this test fail for some reasons.
+// so we use window.onload instead.
+window.onload = () => {
+ target.style.animation = "anim 100s step-end reverse";
+ target.addEventListener("animationstart", () => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+};
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html
new file mode 100644
index 0000000000..2421735b2e
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush" reftest-resolution="0.5">
+<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1">
+<!--
+ A test for a partial pre-rendered transform animation with <1.0 resolution.
+ -->
+<style>
+html {
+ scrollbar-width: none;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* The reftest window size is (800x1000) and it's scaled by 0.5 */
+ /* (= 1600x2000), which means the partial pre-render size is (2250x2250) so */
+ /* move to a position inside the pre-render area and away from the */
+ /* pre-render right edge, translateX(-650px), so that we can avoid blurry */
+ /* edges in comparison with the reference. */
+ to { transform: translateX(-400px); }
+}
+#target {
+ width: 4000px;
+ height: 4000px;
+ position: absolute;
+ transform: translateX(0px);
+}
+</style>
+<div id="target">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4000 4000">
+ <rect fill="green" x="0" width="1600" height="4000"></rect>
+ <rect fill="blue" x="1600" width="650" height="4000"></rect>
+ <rect fill="red" x="2250" width="1750" height="4000"></rect>
+ </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 100s 1s step-start";
+ target.addEventListener("animationstart", () => {
+ // animtionstart event is fired just before requestAnimationFrame callbacks,
+ // so we need to wait two rAF to make sure the initial animation value is
+ // composited on the compositor.
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html
new file mode 100644
index 0000000000..9822296102
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush" reftest-resolution="0.5">
+<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1">
+<!--
+ A variant of partial-prerender-expansion-with-resolution-2.html, a partial
+ pre-rendered transform animation in an iframe with <1.0 resolution.
+ -->
+<style>
+html {
+ scrollbar-width: none;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+</style>
+<iframe style="width:1600px; height:2000px; border: 0"
+ srcdoc="<!DOCTYPE HTML>
+ <html>
+ <style>
+ html {
+ scrollbar-width: none;
+ }
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+
+ @keyframes anim {
+ /* The reftest window size is (800x1000) and it's scaled by */
+ /* 0.5 (= 1600x2000), which means the partial pre-render */
+ /* size is (2250x2250) so move to a position inside the */
+ /* pre-render area and away from the pre-render right edge, */
+ /* translateX(-650px), so that we can avoid blurry edges in */
+ /* comparison with the reference. */
+ to { transform: translateX(-400px); }
+ }
+ #target {
+ width: 4000px;
+ height: 4000px;
+ position: absolute;
+ transform: translateX(0px);
+ }
+ </style>
+ <div id='target'>
+ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 4000'>
+ <rect fill='green' x='0' width='1600' height='4000'></rect>
+ <rect fill='blue' x='1600' width='650' height='4000'></rect>
+ <rect fill='red' x='2250' width='1750' height='4000'></rect>
+ </svg>
+ </div>
+ <script>
+ window.addEventListener('message', () => {
+ if (event.data == 'start') {
+ target.style.animation = 'anim 100s 1s step-start';
+ target.addEventListener('animationstart', () => {
+ parent.postMessage('animationstart', '*');
+ });
+ }
+ });
+ </script></html>">
+</iframe>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ document.querySelector("iframe").contentWindow.postMessage("start", "*");
+}, { once: true });
+
+window.addEventListener("message", event => {
+ if (event.data == "animationstart") {
+ document.documentElement.classList.remove('reftest-wait');
+ }
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html
new file mode 100644
index 0000000000..ae4b009596
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html reftest-resolution="0.5">
+<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1">
+<style>
+html {
+ scrollbar-width: none;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ width: 4000px;
+ height: 4000px;
+ position: absolute;
+ transform: translateX(-400px);
+}
+</style>
+<div id="target">
+ <svg xmlns="http://www.w3.org/4000/svg" viewBox="0 0 4000 4000">
+ <rect fill="green" x="0" width="1600" height="4000"></rect>
+ <rect fill="blue" x="1600" width="650" height="4000"></rect>
+ <rect fill="red" x="2250" width="1750" height="4000"></rect>
+ </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-1-ref.html b/layout/reftests/transform/partial-prerender-in-svg-1-ref.html
new file mode 100644
index 0000000000..61fb6553a4
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ transform: translateX(-725px);
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+ <g id="target">
+ <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+ <rect fill="green" x="0" width="1125" height="400"></rect>
+ <rect fill="red" x="1125" width="800" height="400"></rect>
+ </svg>
+ </g>
+</svg>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-1.html b/layout/reftests/transform/partial-prerender-in-svg-1.html
new file mode 100644
index 0000000000..141cf4f68f
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* The reftest window size is (800x1000), which means the partial prerender */
+ /* area of (400x400) clipped target is (1125x400). Thus -725px(= 400 - 1125)*/
+ /* is the boundary where jank happens, so we choose a value close to -725px */
+ /* so that within a next couple of frames jank should happen. */
+ 0% { transform: translateX(-724px); }
+ 100% { transform: translateX(-2000px); }
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
+ <g id="target">
+ <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+ <rect fill="green" x="0" width="1125" height="400"></rect>
+ <rect fill="red" x="1125" width="800" height="400"></rect>
+ </svg>
+ </g>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ // A shorter animation-duration than we normally use (100s) because if we used
+ // the longer duration it may NOT fail this test even if any jank happens.
+ target.style.animation = "anim 10s 1s";
+ target.addEventListener("animationstart", () => {
+ // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+ // boundary (725px).
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 1000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-2.html b/layout/reftests/transform/partial-prerender-in-svg-2.html
new file mode 100644
index 0000000000..9595f82098
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-2.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* The reftest window size is (800x1000), which means the partial prerender */
+ /* area of (400x400) clipped target is (1125x400). Thus -725px(= 400 - 1125)*/
+ /* is the boundary where jank happens, so we choose a value close to -725px */
+ /* so that within a next couple of frames jank should happen. */
+ 0% { transform: translateX(-724px); }
+ 100% { transform: translateX(-2000px); }
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
+ style="overflow: scroll">
+ <g id="target">
+ <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+ <rect fill="green" x="0" width="1125" height="400"></rect>
+ <rect fill="red" x="1125" width="800" height="400"></rect>
+ </svg>
+ </g>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ // A shorter animation-duration than we normally use (100s) because if we used
+ // the longer duration it may NOT fail this test even if any jank happens.
+ target.style.animation = "anim 10s 1s";
+ target.addEventListener("animationstart", () => {
+ // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+ // boundary (725px).
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 1000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-3-ref.html b/layout/reftests/transform/partial-prerender-in-svg-3-ref.html
new file mode 100644
index 0000000000..2de1ee211c
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-3-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ transform: translateX(-325px);
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
+ style="overflow: visible">
+ <g id="target">
+ <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+ <rect fill="green" x="0" width="1125" height="400"></rect>
+ <rect fill="red" x="1125" width="800" height="400"></rect>
+ </svg>
+ </g>
+</svg>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-in-svg-3.html b/layout/reftests/transform/partial-prerender-in-svg-3.html
new file mode 100644
index 0000000000..f6f4155b5f
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-in-svg-3.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* The reftest window size is (800x1000), which means the partial prerender */
+ /* area is (1125x400). Thus -325px(= 800 - 1125) is the boundary where jank */
+ /* happens, so we choose a value close to -325px so that within a next */
+ /* couple of frames jank should happen. */
+ 0% { transform: translateX(-324px); }
+ 100% { transform: translateX(-2000px); }
+}
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"
+ style="overflow: visible">
+ <g id="target">
+ <svg xmlns="http://www.w3.org/2000/svg" width="10000">
+ <rect fill="green" x="0" width="1125" height="400"></rect>
+ <rect fill="red" x="1125" width="800" height="400"></rect>
+ </svg>
+ </g>
+</svg>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ // A shorter animation-duration than we normally use (100s) because if we used
+ // the longer duration it may NOT fail this test even if any jank happens.
+ target.style.animation = "anim 10s 1s";
+ target.addEventListener("animationstart", () => {
+ // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+ // boundary (325px).
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 1000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-1.html b/layout/reftests/transform/partial-prerender-translate-1.html
new file mode 100644
index 0000000000..9cd8fd6441
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-1.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test for a partial pre-rendered transform animation moves to a place where
+ the whole area of the transform animation is out of the viewport.
+ We consider it jank, thus we report it to the main-thread, then we clear out
+ the initial green rectangle, thus the result should be a blank page.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* translate to a position the element is completely outside of the */
+ /* viewport */
+ to { transform: translateX(-300vw); }
+}
+#target {
+ width: 200vw;
+ height: 200vh;
+ position: absolute;
+ /* Some part of this element needs to be visible initially so that */
+ /* a display item for this element is generated, thus the transform */
+ /* animation runs on the compositor. */
+ transform: translateX(-110vw);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect fill="green" width="16" height="16"></rect>
+ </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 100s 1s step-start";
+ target.addEventListener("animationstart", () => {
+ // Wait 100ms to make sure we can report the jank to the main-thread and
+ // in response to the report we can do a paint process on the main-thread.
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 100);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-10-ref.html b/layout/reftests/transform/partial-prerender-translate-10-ref.html
new file mode 100644
index 0000000000..c85aa22835
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-10-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ width: 1600px;
+ height: 1000px;
+ position: absolute;
+ left: -200px;
+ transform: translateX(0px);
+}
+</style>
+<div id="target">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
+ <rect fill="green" x="0" width="800" height="1000"></rect>
+ <rect fill="blue" x="800" width="362.5" height="1000"></rect>
+ <rect fill="red" x="1162.5" width="837.5" height="1000"></rect>
+ </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-10.html b/layout/reftests/transform/partial-prerender-translate-10.html
new file mode 100644
index 0000000000..3bf5c57dc7
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-10.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test case for a transform animation frame is positioned by specifying
+ left property (i.e. not transform property) so that if we didn't factor the
+ offset (from the reference frame) in the jank mechanism, the animation will
+ jank at wrong positions.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ 0% { transform: translateX(0px); animation-timing-function: step-end; }
+ /* After 1s, translate to a position where it's still inside the pre-render */
+ /* area. */
+ /* The right edge of the pre-render area is 1162.5px (see below for the */
+ /* calculation) and there is `left: -200px` property, which mean */
+ /* translateX(-162.5px) is the point where a jank happens. But we don't */
+ /* want to cause a jank at the edge since it results blurry boundary */
+ /* between green and blue areas because the jank will happen at a point */
+ /* very close to -162.5px, e.g. -162.4px. */
+ /* So what we try to do here is that, compositing where jank will never */
+ /* happen with the left property value, then trying to composite where a */
+ /* jank will happen if the left (-200px) value is not properly handled in */
+ /* the jank mechanism because the horizontal pre-render range is */
+ /* [37.5px, 1162.5px] (see below the calculation) */
+ 1% { transform: translateX(-150px); animation-timing-function: step-end; }
+ /* We have 100ms margin to avoid skipping this very keyframe */
+ 1.1% { transform: translateX(-150px); animation-timing-function: step-start; }
+ /* Back to the original position where jank should NEVER happen if the left */
+ /* property is handled in the jank mechanism, jank should happen if the */
+ /* property is NOT handled */
+ 100% { transform: translateX(0px); }
+}
+#target {
+ width: 1600px;
+ height: 1000px;
+ position: absolute;
+ left: -200px;
+ transform: translateX(0px);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+
+ The pre-render area width is 1125px, thus the expanded area outside of the
+ visible area is 325px. The 325px width is expaned to both directions,
+ leftward and rightward. Meanwhile, the horizontal visible frame range is
+ [200px, 1000px] because of `left: -200px`, so the left edge of the
+ pre-render area is 37.5px (= 200 - 325/2), the right edge is 1162.5px
+ (= 1000 + 325/2).
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000">
+ <rect fill="green" x="0" width="800" height="1000"></rect>
+ <rect fill="blue" x="800" width="362.5" height="1000"></rect>
+ <rect fill="red" x="1162.5" width="837.5" height="1000"></rect>
+ </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ // We don't specify 1s delay here since the @keyframes rule has already
+ // a kind of like delay with step-end timing function, which means even if
+ // the animation was painted at 0.1s position due to a lag on the main-thread
+ // (it quite often happens on our CIs!), the initial animation value on the
+ // compositor should be still the first value translateX(0px).
+ target.style.animation = "anim 100s";
+ target.addEventListener("animationstart", () => {
+ // Wait two seconds to make sure we tried to composite translateX(0px).
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 2000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-11-ref.html b/layout/reftests/transform/partial-prerender-translate-11-ref.html
new file mode 100644
index 0000000000..4836be1142
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-11-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html, body {
+ margin: 0;
+ padding: 0;
+}
+#target {
+ width: 30000px;
+ height: 100px;
+ transform: translateX(-2600px);
+}
+</style>
+<div style="width: 50%; overflow: hidden">
+ <div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 100">
+ <rect fill="green" x="2500" width="400" height="100"></rect>
+ <rect fill="blue" x="2900" width="100" height="100"></rect>
+ </svg>
+ </div>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-11.html b/layout/reftests/transform/partial-prerender-translate-11.html
new file mode 100644
index 0000000000..ecb6cf25d8
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-11.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test case that the nearest oveflow:hidden scroll frame is the clip frame
+ for the partial pre-render transform animation.
+ -->
+<style>
+html, body {
+ margin: 0;
+ padding: 0;
+}
+#target {
+ width: 30000px;
+ height: 100px;
+ transform: translateX(-2500px);
+ /*
+ * 1s delay so that we can avoid undesired composition, i.e. the first
+ * composition on the composition would be the final transition value.
+ */
+ transition: transform 100s step-start 1s;
+}
+</style>
+<div style="width: 50%; overflow: hidden">
+ <div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 100">
+ <rect fill="green" x="2500" width="400" height="100"></rect>
+ <rect fill="blue" x="2900" width="100" height="100"></rect>
+ </svg>
+ </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.transform = "translateX(-2600px)";
+ target.addEventListener("transitionstart", () => {
+ // Wait a second to make sure the transition has been composited on the
+ // compositor.
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 1000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-12.html b/layout/reftests/transform/partial-prerender-translate-12.html
new file mode 100644
index 0000000000..6fb2768284
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-12.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test for a partial pre-rendered transform animation moves to a place where
+ the partial pre-render area of the transform animation is out of the viewport,
+ but part of the element is still visible.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* jump to a position where the element is completely outside of the */
+ /* partial pre-render area but the element is still visible */
+ to { transform: translateX(-200vw); }
+}
+#target {
+ width: 400vw;
+ height: 400vh;
+ position: absolute;
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect fill="green" width="16" height="16"></rect>
+ </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 100s 1s step-start";
+ target.addEventListener("animationstart", () => {
+ // animtionstart event is fired just before requestAnimationFrame callbacks,
+ // so we need to wait two rAF to make sure the initial animation value is
+ // composited on the compositor.
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-2-ref.html b/layout/reftests/transform/partial-prerender-translate-2-ref.html
new file mode 100644
index 0000000000..98ee6a1f14
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ width: 2000px;
+ height: 2000px;
+ position: absolute;
+ transform: translateX(-325px);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect fill="green" x="0" width="1125" height="2000"></rect>
+ <rect fill="red" x="1125" width="875" height="2000"></rect>
+ </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-2.html b/layout/reftests/transform/partial-prerender-translate-2.html
new file mode 100644
index 0000000000..550a74084a
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-2.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test for a partial pre-rendered transform animation moves to a place where
+ jank happens.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* The reftest window size is (800x1000), which means the partial prerender */
+ /* area is (1125x1125). Thus -325px(= 800 - 1125) is the boundary where */
+ /* jank happens, so we choose a value close to -325px so that within a next */
+ /* couple of frames jank should happen. */
+ 0% { transform: translateX(-324px); }
+ 100% { transform: translateX(-2000px); }
+}
+#target {
+ width: 2000px;
+ height: 2000px;
+ position: absolute;
+ transform: translateX(0px);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
+ <!-- green on the pre-render area -->
+ <rect fill="green" x="0" width="1125" height="2000"></rect>
+ <rect fill="red" x="1125" width="875" height="2000"></rect>
+ </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ // A shorter animation-duration than we normally use (100s) because if we used
+ // the longer duration it may NOT fail this test even if any jank happens.
+ target.style.animation = "anim 10s 1s";
+ target.addEventListener("animationstart", () => {
+ // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+ // boundary (325px).
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 1000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-3-ref.html b/layout/reftests/transform/partial-prerender-translate-3-ref.html
new file mode 100644
index 0000000000..d4941007bd
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-3-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ background-color: green;
+ width: 50vw;
+ height: 100vh;
+ position: absolute;
+}
+</style>
+<div id="target"></div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-3.html b/layout/reftests/transform/partial-prerender-translate-3.html
new file mode 100644
index 0000000000..6e4ad202b1
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-3.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test for a partial pre-rendered transform animation moves to a place where
+ the partial pre-rendered area is completely out of the viewport but still
+ there remains some amount of area of the entire transform element.
+ If we mis-recognize it as NOT a jank, checkerboading will happen.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* translate to a position the partial pre-rendered area is outside of the */
+ /* viewport but still there should remain visible area. */
+ to { transform: translateX(-150vw); }
+}
+#target {
+ width: 200vw;
+ height: 200vh;
+ position: absolute;
+ transform: translateX(0vw);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect fill="green" width="16" height="16"></rect>
+ </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 100s 1s step-start";
+ target.addEventListener("animationstart", () => {
+ // animtionstart event is fired just before requestAnimationFrame callbacks,
+ // so we need to wait two rAF to make sure the initial animation value is
+ // composited on the compositor.
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-4.html b/layout/reftests/transform/partial-prerender-translate-4.html
new file mode 100644
index 0000000000..11ff491b87
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-4.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test that a partial pre-rendered transform animation is transformed by an
+ ancestor transform value.
+ If we don't factor the ancestor's transform, we mis-recognize janks, which
+ means janked at the initial translateX(0vw) position, thus white blank area
+ will appears.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* translate to a position where the left edge of partial pre-rendered on */
+ /* the left edge of the viewport. */
+ to { transform: translateX(-50vw); }
+}
+#target {
+ width: 300vw;
+ height: 300vh;
+ transform: translateX(0vw);
+}
+</style>
+<div style="transform: translateX(50vw);">
+ <div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <rect fill="green" width="16" height="16"></rect>
+ </svg>
+ </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 100s 1s step-start";
+ target.addEventListener("animationstart", () => {
+ // animtionstart event is fired just before requestAnimationFrame callbacks,
+ // so we need to wait two rAF to make sure the initial animation value is
+ // composited on the compositor.
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-5-ref.html b/layout/reftests/transform/partial-prerender-translate-5-ref.html
new file mode 100644
index 0000000000..c2047502af
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-5-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html reftest-async-scroll
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="800" reftest-displayport-h="2000"
+ reftest-async-scroll-x="0" reftest-async-scroll-y="1000">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow-x: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ width: 800px;
+ height: 1600px;
+ transform: translateY(-500px);
+}
+</style>
+<div style="width: 800px; height: 2000px"><!-- spacer --></div>
+<div style="position: fixed; top: 400px">
+ <div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600">
+ <rect fill="green" y="0" width="800" height="1000"></rect>
+ <rect fill="blue" y="1000" width="800" height="125"></rect>
+ <rect fill="red" y="1125" width="800" height="875"></rect>
+ </svg>
+ </div>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-5.html b/layout/reftests/transform/partial-prerender-translate-5.html
new file mode 100644
index 0000000000..6225b7de25
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-5.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush"
+ reftest-async-scroll
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="800" reftest-displayport-h="2000"
+ reftest-async-scroll-x="0" reftest-async-scroll-y="1000">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test that a partial pre-rendered transform animation is in a position:fixed
+ layer.
+ -->
+<style>
+html {
+ overflow-x: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ to { transform: translateY(-500px); }
+}
+#target {
+ width: 800px;
+ height: 1600px;
+ transform: translateY(-400px);
+}
+</style>
+<div style="width: 800px; height: 2000px"><!-- spacer --></div>
+<div style="position: fixed; top: 400px">
+ <div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600">
+ <rect fill="green" y="0" width="800" height="1000"></rect>
+ <rect fill="blue" y="1000" width="800" height="125"></rect>
+ <rect fill="red" y="1125" width="800" height="875"></rect>
+ </svg>
+ </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 100s 1s step-start";
+ target.addEventListener("animationstart", () => {
+ // animtionstart event is fired just before requestAnimationFrame callbacks,
+ // so we need to wait two rAF to make sure the initial animation value is
+ // composited on the compositor.
+ requestAnimationFrame(() => {
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+ });
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-6-ref.html b/layout/reftests/transform/partial-prerender-translate-6-ref.html
new file mode 100644
index 0000000000..dece645afb
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-6-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+#target {
+ width: 1600px;
+ height: 900px;
+ position: absolute;
+ transform: translateX(-325px);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900">
+ <rect fill="green" x="0" width="1125" height="900"></rect>
+ <rect fill="red" x="1125" width="875" height="900"></rect>
+ </svg>
+</div>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-6.html b/layout/reftests/transform/partial-prerender-translate-6.html
new file mode 100644
index 0000000000..58b34c6cae
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-6.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* The reftest window size is (800x1000), which means the partial prerender */
+ /* area is (1125x900). Thus -325px(= 800 - 1125) is the boundary where jank */
+ /* happens, so we choose a value close to -325px so that within a next */
+ /* couple of frames jank should happen. */
+ 0% { transform: translateX(-324px); }
+ 100% { transform: translateX(-2000px); }
+}
+#target {
+ width: 1600px;
+ /* Use a smallar value than the reftest window height to avoid bloating up */
+ /* svg inside this element beyond the window height */
+ height: 900px;
+ position: absolute;
+ transform: translateX(0px);
+}
+</style>
+<div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ Note: As SVG items get "webrenderized" this test won't work. For now
+ rounded rectangles go through the blob path.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900">
+ <!-- green on the pre-render area -->
+ <rect fill="green" x="0" width="1125" height="900" rx="0.1"></rect>
+ <rect fill="red" x="1125" width="875" height="900" rx="0.1"></rect>
+ </svg>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ // A shorter animation-duration than we normally use (100s) because if we used
+ // the longer duration it may NOT fail this test even if any jank happens.
+ target.style.animation = "anim 10s 1s";
+ target.addEventListener("animationstart", () => {
+ // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+ // boundary (325px).
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 1000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-7.html b/layout/reftests/transform/partial-prerender-translate-7.html
new file mode 100644
index 0000000000..06c26c66fb
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-7.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ Another variant of partial-prerender-translate-2.html, but the transform
+ animation is scaled by the parent element.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+@keyframes anim {
+ /* translate to a position where the left edge of partial pre-rendered on */
+ /* the left edge of the viewport. */
+ 0% { transform: translateX(-649px); }
+ 100% { transform: translateX(-2000px); }
+}
+#target {
+ width: 4000px;
+ height: 2000px;
+ position: absolute;
+ transform: translateX(0);
+}
+</style>
+<div style="transform: scale(0.5); transform-origin: 0 0">
+ <div id="target">
+ <!--
+ Put an SVG element so that the transform display item has a blob on
+ WebRender which means this test properly fails without the proper fix.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4000 2000">
+ <rect fill="green" x="0" width="2250" height="2000"></rect>
+ <rect fill="red" x="2250" width="1750" height="2000"></rect>
+ </svg>
+ </div>
+</div>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ target.style.animation = "anim 10s 1s";
+ target.addEventListener("animationstart", () => {
+ // Wait a second to make sure the animation gets stucked (i.e. jank) at the
+ // boundary (650px).
+ setTimeout(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ }, 1000);
+ });
+}, { once: true });
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-8-ref.html b/layout/reftests/transform/partial-prerender-translate-8-ref.html
new file mode 100644
index 0000000000..ddf5bda172
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-8-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A variant test of partial-prerender-translate-5.html but in this test the
+ position:fixed element is inside an iframe.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+</style>
+<iframe style="width:400px; height:1000px; border: 0"
+ srcdoc="<!DOCTYPE HTML>
+ <html>
+ <style>
+ html {
+ overflow-x: hidden;
+ scrollbar-width: none;
+ }
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+ #target {
+ width: 1600px;
+ height: 1000px;
+ transform: translateX(-725px);
+ }
+ </style>
+ <div id='target'>
+ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'>
+ <rect fill='green' x='0' width='800' height='1000'></rect>
+ <rect fill='blue' x='800' width='325' height='1000'></rect>
+ <rect fill='red' x='1125' width='675' height='1000'></rect>
+ </svg>
+ </div>
+ </html>">
+</iframe>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-8.html b/layout/reftests/transform/partial-prerender-translate-8.html
new file mode 100644
index 0000000000..0fc633a532
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-8.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A test for a partial pre-rendered transform in an iframe, if the clip
+ rectangle of the transform animation were wrong, e.g. (800, 1000), the
+ transform animation janks at the initial position.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+</style>
+ <!-- a half width of the view port -->
+<iframe style="width:400px; height:1000px; border: 0"
+ srcdoc="<!DOCTYPE HTML>
+ <html>
+ <style>
+ html {
+ overflow: hidden;
+ scrollbar-width: none;
+ }
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+ @keyframes anim {
+ /* the partial prerender area is (1125, 1000), thus */
+ /* translateX(-725px) is the position where the right edge */
+ /* of the partial prerender is positioned at the right edge */
+ /* of the clip rect (400, 1000). */
+ to { transform: translateX(-725px); }
+ }
+ #target {
+ width: 1600px;
+ height: 1000px;
+ transform: translateX(0px);
+ }
+ </style>
+ <div id='target'>
+ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'>
+ <rect fill='green' x='0' width='800' height='1000'></rect>
+ <rect fill='blue' x='800' width='325' height='1000'></rect>
+ <rect fill='red' x='1125' width='675' height='1000'></rect>
+ </svg>
+ </div>
+ <script>
+ window.addEventListener('message', () => {
+ if (event.data == 'start') {
+ target.style.animation = 'anim 100s 1s step-start';
+ target.addEventListener('animationstart', () => {
+ parent.postMessage('animationstart', '*');
+ });
+ }
+ });
+ </script></html>">
+</iframe>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ document.querySelector("iframe").contentWindow.postMessage("start", "*");
+}, { once: true });
+
+window.addEventListener("message", event => {
+ if (event.data == "animationstart") {
+ document.documentElement.classList.remove('reftest-wait');
+ }
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/partial-prerender-translate-9.html b/layout/reftests/transform/partial-prerender-translate-9.html
new file mode 100644
index 0000000000..2c6af406cb
--- /dev/null
+++ b/layout/reftests/transform/partial-prerender-translate-9.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html reftest-async-scroll class="reftest-wait reftest-no-flush">
+<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+<!--
+ A variant test of partial-prerender-translate-5.html but in this test the
+ position:fixed element is inside an iframe.
+ -->
+<style>
+html {
+ overflow: hidden;
+}
+body {
+ margin: 0px;
+ padding: 0px;
+}
+</style>
+<iframe style="width:800px; height:1000px; border: 0"
+ srcdoc="<!DOCTYPE HTML>
+ <html reftest-displayport-x='0' reftest-displayport-y='0'
+ reftest-displayport-w='800' reftest-displayport-h='2000'
+ reftest-async-scroll-x='0' reftest-async-scroll-y='1000'>
+ <style>
+ html {
+ overflow-x: hidden;
+ }
+ html, body {
+ margin: 0;
+ padding: 0;
+ }
+ @keyframes anim {
+ to { transform: translateY(-500px); }
+ }
+ #target {
+ width: 800px;
+ height: 1600px;
+ transform: translateY(-400px);
+ }
+ </style>
+ <div style='width: 800px; height: 2000px'><!-- spacer --></div>
+ <div style='position: fixed; top: 400px'>
+ <div id='target'>
+ <!--
+ Put an SVG element so that the transform display item has
+ a blob on WebRender which means this test properly fails
+ without the proper fix.
+ -->
+ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1600'>
+ <rect fill='green' y='0' width='800' height='1000'></rect>
+ <rect fill='blue' y='1000' width='800' height='125'></rect>
+ <rect fill='red' y='1125' width='800' height='875'></rect>
+ </svg>
+ </div>
+ </div>
+ <script>
+ window.addEventListener('message', () => {
+ if (event.data == 'start') {
+ target.style.animation = 'anim 100s 1s step-start';
+ target.addEventListener('animationstart', () => {
+ parent.postMessage('animationstart', '*');
+ });
+ }
+ });
+ </script></html>">
+</iframe>
+<script>
+document.addEventListener("MozReftestInvalidate", () => {
+ document.querySelector("iframe").contentWindow.postMessage("start", "*");
+}, { once: true });
+
+window.addEventListener("message", event => {
+ if (event.data == "animationstart") {
+ document.documentElement.classList.remove('reftest-wait');
+ }
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/pass.svg b/layout/reftests/transform/pass.svg
new file mode 100644
index 0000000000..c09c6601e8
--- /dev/null
+++ b/layout/reftests/transform/pass.svg
@@ -0,0 +1,8 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <title>Testcase reference file for generic pass condition</title>
+ <rect width="100%" height="100%" fill="lime"/>
+</svg>
diff --git a/layout/reftests/transform/percent-1-ref.html b/layout/reftests/transform/percent-1-ref.html
new file mode 100644
index 0000000000..2f011ce6fb
--- /dev/null
+++ b/layout/reftests/transform/percent-1-ref.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1a.html b/layout/reftests/transform/percent-1a.html
new file mode 100644
index 0000000000..4641d89689
--- /dev/null
+++ b/layout/reftests/transform/percent-1a.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1b.html b/layout/reftests/transform/percent-1b.html
new file mode 100644
index 0000000000..e836b92ddd
--- /dev/null
+++ b/layout/reftests/transform/percent-1b.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1c.html b/layout/reftests/transform/percent-1c.html
new file mode 100644
index 0000000000..156d5eb1db
--- /dev/null
+++ b/layout/reftests/transform/percent-1c.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1d.html b/layout/reftests/transform/percent-1d.html
new file mode 100644
index 0000000000..9a4a88ec0d
--- /dev/null
+++ b/layout/reftests/transform/percent-1d.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1e.html b/layout/reftests/transform/percent-1e.html
new file mode 100644
index 0000000000..6034e0757a
--- /dev/null
+++ b/layout/reftests/transform/percent-1e.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1f.html b/layout/reftests/transform/percent-1f.html
new file mode 100644
index 0000000000..de3f704c76
--- /dev/null
+++ b/layout/reftests/transform/percent-1f.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1g.html b/layout/reftests/transform/percent-1g.html
new file mode 100644
index 0000000000..52b2633140
--- /dev/null
+++ b/layout/reftests/transform/percent-1g.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <style type="text/css">
+ .transformed
+ {
+ -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%);
+ }
+ </style>
+</head>
+<body>
+ <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/propagate-inherit-boolean-ref.html b/layout/reftests/transform/propagate-inherit-boolean-ref.html
new file mode 100644
index 0000000000..4d59957c38
--- /dev/null
+++ b/layout/reftests/transform/propagate-inherit-boolean-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title></title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta http-equiv="Content-Style-Type" content="text/css">
+ <style type="text/css">
+
+ p {
+ font-size: 20px;
+ margin: 0;
+ height: 0;
+ width: 100px;
+ -moz-transform: translateX(80px);
+ }
+
+ p#two {
+ font-size: 40px;
+ -moz-transform: translateX(160px);
+ }
+
+ </style>
+</head>
+<body>
+
+<p id="one">One</p>
+
+<p id="two">Two</p>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/propagate-inherit-boolean.html b/layout/reftests/transform/propagate-inherit-boolean.html
new file mode 100644
index 0000000000..869b4f4bc5
--- /dev/null
+++ b/layout/reftests/transform/propagate-inherit-boolean.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+ <title></title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+ <meta http-equiv="Content-Style-Type" content="text/css">
+ <style type="text/css">
+
+ p {
+ font-size: 20px;
+ margin: 0;
+ height: 0;
+ width: 100px;
+ -moz-transform: translateX(4em);
+ }
+
+ p#two {
+ font-size: 40px;
+ }
+
+ </style>
+</head>
+<body>
+
+<p id="one">One</p>
+
+<p id="two">Two</p>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/reftest.list b/layout/reftests/transform/reftest.list
new file mode 100644
index 0000000000..4893c4a6d8
--- /dev/null
+++ b/layout/reftests/transform/reftest.list
@@ -0,0 +1,184 @@
+# Transforms specifying singular matrices shouldn't display at all.
+# NOTE: Regressions might manifest themselves as reftest timeouts on
+# this test.
+== singular-1a.html about:blank
+# Multiple transforms should act identically to nested divs.
+fuzzy(0-1,0-27) pref(apz.allow_zooming,true) == compound-1a.html compound-1-ref.html
+!= compound-1a.html compound-1-fail.html
+== dynamic-inherit-1.html dynamic-inherit-1-ref.html
+== dynamic-addremove-1a.html dynamic-addremove-1-ref.html
+== dynamic-addremove-1b.html dynamic-addremove-1-ref.html
+== dynamic-addremove-1c.html dynamic-addremove-1-ref.html
+== dynamic-addremove-2.html dynamic-addremove-2-ref.html
+# translatex should act like position: relative
+== translatex-1a.html translatex-1-ref.html
+== translatex-1b.html translatex-1-ref.html
+== translatex-1c.html translatex-1-ref.html
+== translatex-1d.html translatex-1-ref.html
+== translatex-1e.html translatex-1-ref.html
+== translatex-1a.html translatex-1-ref-2.html
+# translatey should act like position: relative
+== translatey-1a.html translatey-1-ref.html
+== translatey-1b.html translatey-1-ref.html
+== translatey-1c.html translatey-1-ref.html
+== translatey-1d.html translatey-1-ref.html
+== translatey-1e.html translatey-1-ref.html
+# matrices defined to be translations should act like position: relative
+== translatex-2.html translatex-1-ref.html
+== translatey-2.html translatey-1-ref.html
+# translate should act like position: relative
+!= translate-1a.html translate-1-ref.html
+== translate-1b.html translate-1-ref.html
+== translate-1c.html translate-1-ref.html
+== translate-1d.html translate-1-ref.html
+== translate-1e.html translate-1-ref.html
+== translate-2a.html translate-2-ref.html
+== translate-3.html translate-3-ref.html
+# rotate: Several rotations of the same object should be idempotent. These
+# tests are currently disabled because of subpixel (< 0.00001 gfx units)
+# rounding errors.
+random == rotate-1a.html rotate-1-ref.html
+random == rotate-1b.html rotate-1-ref.html
+random == rotate-1c.html rotate-1-ref.html
+random == rotate-1d.html rotate-1-ref.html
+random == rotate-1e.html rotate-1-ref.html
+random == rotate-1f.html rotate-1-ref.html
+# rotate: 90deg rotations should be indistinguishable from objects constructed
+# to look the same.
+== rotate-2a.html rotate-2-ref.html
+== rotate-2b.html rotate-2-ref.html
+# -transform-origin: We should NOT get the same images when using different
+# -transform-origins.
+!= origin-1a.html origin-1-ref.html
+!= origin-1b.html origin-1-ref.html
+# -transform-origin: We should get the same images when using equivalent
+# -transform-origins.
+== origin-2a.html origin-2-ref.html
+== origin-2b.html origin-2-ref.html
+== origin-2c.html origin-2-ref.html
+# "Translate" with percentages should be indistinguishable from translate with
+# equivalent values.
+== percent-1a.html percent-1-ref.html
+fuzzy(0-1,0-2) == percent-1b.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1c.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1d.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1e.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1f.html percent-1-ref.html
+fuzzy(0-1,0-80) == percent-1g.html percent-1-ref.html
+# Transformed elements are abs-pos and fixed-pos containing blocks.
+== abspos-1a.html abspos-1-ref.html
+== abspos-1b.html abspos-1-ref.html
+== abspos-1c.html abspos-1-ref.html
+== abspos-1d.html abspos-1-ref.html
+!= abspos-1e.html abspos-1-ref.html
+== abspos-1f.html abspos-1-ref.html
+== abspos-1g.html abspos-1-ref.html
+# Origin can use "top" "right" etc.
+== origin-name-1a.html origin-name-1-ref.html
+fuzzy(0-1,0-19) == origin-name-1b.html origin-name-1-ref.html
+== origin-name-2a.html origin-name-2-ref.html
+== origin-name-2b.html origin-name-2-ref.html
+fuzzy(0-1,0-350) == origin-name-2c.html origin-name-2-ref.html
+== origin-name-3a.html origin-name-3-ref.html
+== origin-name-3b.html origin-name-3-ref.html
+# Snapping still applies after 90 degree rotations.
+== snapping-1.html snapping-1-ref.html
+# SVG effects should work on transforms.
+== transform-svg-1a.xhtml transform-svg-1-ref.xhtml
+fuzzy(0-2,0-500) == transform-svg-2a.xhtml transform-svg-2-ref.xhtml
+!= transform-svg-2a.xhtml transform-svg-2-fail.xhtml
+# skew should allow a mix of one and two parameters.
+fuzzy(0-1,0-20) == skew-1a.html skew-1-ref.html
+fuzzy(0-1,0-80) == skew-1b.html skew-1-ref.html
+fuzzy(0-1,0-250) == skew-2a.html skew-2-ref.html
+# matrix with values equal to other transforms should behave indistinguishably
+== matrix-1a.html matrix-1-ref.html
+== matrix-2a.html matrix-2-ref.html
+== matrix-3a.html matrix-3-ref.html
+== matrix-4a.html matrix-4-ref.html
+fuzzy(0-1,0-120) == matrix-5a.html matrix-5-ref.html
+fuzzy(0-1,0-110) == matrix-6a.html matrix-6-ref.html
+== matrix-7a.html matrix-7-ref.html
+# ensure matrix 3d does not break us - should do nothing
+== matrix3d-1.html matrix3d-1-ref.html
+# Test that complex transform can be reversed
+fuzzy(0-2,0-5) == stresstest-1.html stresstest-1-ref.html
+# Test scale transforms
+== scalex-1.html scalex-1-ref.html
+== scaley-1.html scaley-1-ref.html
+== scale-1a.html scale-1-ref.html
+== scale-1b.html scale-1-ref.html
+== scale-percent-1.html scale-percent-1-ref.html
+== scaled-blend-mode.html scaled-blend-mode-ref.html
+# Some simple checks that it obeys selector operations
+== descendant-1.html descendant-1-ref.html
+== propagate-inherit-boolean.html propagate-inherit-boolean-ref.html
+# Ensure you can't move outside an iframe
+== iframe-1.html iframe-1-ref.html
+# Bugs
+== 601894-1.html 601894-ref.html
+== 601894-2.html 601894-ref.html
+== 830299-1.html 830299-1-ref.html
+# Bug 722777
+== table-1a.html table-1-ref.html
+== table-1b.html table-1-ref.html
+== table-1c.html table-1-ref.html
+== table-2a.html table-2-ref.html
+== table-2b.html table-2-ref.html
+# Bug 722463
+== inline-1a.html inline-1-ref.html
+== transform-box-svg-1a.svg transform-box-svg-1-ref.svg
+== transform-box-svg-1b.svg transform-box-svg-1-ref.svg
+== transform-box-svg-2a.svg transform-box-svg-2-ref.svg
+== transform-box-svg-2b.svg transform-box-svg-2-ref.svg
+== transform-box-svg-3a.svg pass.svg
+== transform-origin-svg-1a.svg transform-origin-svg-1-ref.svg
+== transform-origin-svg-1b.svg transform-origin-svg-1-ref.svg
+== transform-origin-svg-2a.svg transform-origin-svg-2-ref.svg
+== transform-origin-svg-2b.svg transform-origin-svg-2-ref.svg
+# Bug 1122526
+== animate-layer-scale-inherit-1.html animate-layer-scale-inherit-1-ref.html
+fuzzy(0-145,0-10000) == animate-layer-scale-inherit-2.html animate-layer-scale-inherit-2-ref.html
+== animate-layer-scale-inherit-3.html animate-layer-scale-inherit-1-ref.html
+# Bug 1301500
+== dynamic-add-without-change-cb-1.html dynamic-add-without-change-cb-1-ref.html
+skip-if(useDrawSnapshot) fuzzy(0-26,0-208) == table-overflowed-by-animation.html table-overflowed-by-animation-ref.html # Bug 1715402 for useDrawSnapshot&&webrender
+== translate-rounding-1.html translate-rounding-ref.html
+== translate-rounding-2.html translate-rounding-ref.html
+fails == translate-rounding-3.html translate-rounding-viewport-ref.html # bug 1397146
+== invalidate-transform-1.html invalidate-transform-1-ref.html
+== invalidate-svg-scale-1.html invalidate-svg-scale-1-ref.html
+# Bug 1526847
+pref(layout.css.individual-transform.enabled,true) == animate-layer-scale-inherit-4.html animate-layer-scale-inherit-4-ref.html
+fuzzy-if(winWidget,0-1,0-1000) == 1569215-1.html 1569215-1-ref.html
+
+test-pref(layout.css.zoom-transform-hack.enabled,true) == zoom-hack-1.html zoom-hack-ref.html
+test-pref(layout.css.zoom-transform-hack.enabled,false) != zoom-hack-1.html zoom-hack-ref.html
+test-pref(layout.css.zoom-transform-hack.enabled,true) == zoom-hack-2.html zoom-hack-ref.html
+
+== transform-anon-block-1.html transform-anon-block-1-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) == partial-prerender-expansion-translate.html partial-prerender-expansion-ref.html
+test-pref(layout.animation.prerender.partial,true) == partial-prerender-translate-1.html about:blank
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-59,0-1800) fuzzy-if(Android,0-255,0-7000) == partial-prerender-translate-2.html partial-prerender-translate-2-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") random == partial-prerender-translate-3.html partial-prerender-translate-3-ref.html # bug 1642575
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism doesn't properly handle ancestor's transform values
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-4.html partial-prerender-expansion-ref.html
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism does inproperly handle position:fixed scroll target
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-5.html partial-prerender-translate-5-ref.html
+skip-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-46,0-1250) fuzzy-if(Android,0-255,0-9900) random-if(gtkWidget&&isDebugBuild) random-if(useDrawSnapshot) == partial-prerender-translate-6.html partial-prerender-translate-6-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-4,0-1200) == partial-prerender-translate-7.html partial-prerender-translate-2-ref.html
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism doesn't properly clip transform in iframes.
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-8.html partial-prerender-translate-8-ref.html
+# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism does inproperly handle position:fixed scroll target
+fails-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-9.html partial-prerender-translate-5-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-10.html partial-prerender-translate-10-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-11.html partial-prerender-translate-11-ref.html
+skip test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-12.html partial-prerender-translate-2-ref.html # bug 1666692 for WebRender
+# This reftest heavily depends on layout.animation.prerender.viewport-ratio-limit
+# and reftest viewport size (800, 1000).
+skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)||Android) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy-if(!layersGPUAccelerated,0-75,0-2683) == partial-prerender-expansion-rotate.html partial-prerender-expansion-ref.html
+skip-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,true) == partial-prerender-expansion-with-resolution-1.html partial-prerender-expansion-with-resolution-ref.html
+skip test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,true) == partial-prerender-expansion-with-resolution-2.html partial-prerender-expansion-with-resolution-ref.html # bug 1650039 for WebRender
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy-if(Android,0-255,0-400) == partial-prerender-in-svg-1.html partial-prerender-in-svg-1-ref.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-in-svg-2.html partial-prerender-in-svg-1-ref.html # Reuse partial-prerender-in-svg-1-ref.html since the result should look same as partial-prerender-in-svg-1.html
+test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-62,0-400) fuzzy-if(Android,0-255,0-2000) == partial-prerender-in-svg-3.html partial-prerender-in-svg-3-ref.html
diff --git a/layout/reftests/transform/rotate-1-ref.html b/layout/reftests/transform/rotate-1-ref.html
new file mode 100644
index 0000000000..4ebbf5a568
--- /dev/null
+++ b/layout/reftests/transform/rotate-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotate(45deg); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1a.html b/layout/reftests/transform/rotate-1a.html
new file mode 100644
index 0000000000..fc8e67380d
--- /dev/null
+++ b/layout/reftests/transform/rotate-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotate(45deg) rotate(360deg); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1b.html b/layout/reftests/transform/rotate-1b.html
new file mode 100644
index 0000000000..79fa5c6b76
--- /dev/null
+++ b/layout/reftests/transform/rotate-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotate(45deg) rotate(400grad); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1c.html b/layout/reftests/transform/rotate-1c.html
new file mode 100644
index 0000000000..780739ca2c
--- /dev/null
+++ b/layout/reftests/transform/rotate-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1d.html b/layout/reftests/transform/rotate-1d.html
new file mode 100644
index 0000000000..ab44c7fc7f
--- /dev/null
+++ b/layout/reftests/transform/rotate-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotate(-45deg) rotate(100grad); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1e.html b/layout/reftests/transform/rotate-1e.html
new file mode 100644
index 0000000000..1f2ef14381
--- /dev/null
+++ b/layout/reftests/transform/rotate-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotate(-135deg) rotate(3.1415926535897932384626433rad); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1f.html b/layout/reftests/transform/rotate-1f.html
new file mode 100644
index 0000000000..1dd88ed00c
--- /dev/null
+++ b/layout/reftests/transform/rotate-1f.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotate(0.125turn); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2-ref.html b/layout/reftests/transform/rotate-2-ref.html
new file mode 100644
index 0000000000..51be5f08c3
--- /dev/null
+++ b/layout/reftests/transform/rotate-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:200px;height:100px;border:1px solid black;">
+
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2a.html b/layout/reftests/transform/rotate-2a.html
new file mode 100644
index 0000000000..9805bd79af
--- /dev/null
+++ b/layout/reftests/transform/rotate-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:100px;height:200px;-moz-transform: translate(50px, -50px) rotate(-90deg); border: 1px solid black;">
+
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2b.html b/layout/reftests/transform/rotate-2b.html
new file mode 100644
index 0000000000..040d8a99c1
--- /dev/null
+++ b/layout/reftests/transform/rotate-2b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="width:100px;height:200px;-moz-transform: translate(50px, -50px) rotate(-0.25turn); border: 1px solid black;">
+
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1-ref.html b/layout/reftests/transform/scale-1-ref.html
new file mode 100644
index 0000000000..7c39dd8505
--- /dev/null
+++ b/layout/reftests/transform/scale-1-ref.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ #test {
+ background: green;
+ width: 50px;
+ height: 50px;
+ margin: 25px;
+ }
+ </style>
+<body>
+ <div id="test">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1a.html b/layout/reftests/transform/scale-1a.html
new file mode 100644
index 0000000000..007d23e88c
--- /dev/null
+++ b/layout/reftests/transform/scale-1a.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ #test {
+ background: green;
+ width: 100px;
+ height: 100px;
+ -moz-transform: scale(0.5, 0.5);
+ }
+ </style>
+</head>
+<body>
+ <div id="test">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1b.html b/layout/reftests/transform/scale-1b.html
new file mode 100644
index 0000000000..6da74f0cfd
--- /dev/null
+++ b/layout/reftests/transform/scale-1b.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ #test {
+ background: green;
+ width: 100px;
+ height: 100px;
+ -moz-transform: scale(0.5);
+ }
+ </style>
+</head>
+<body>
+ <div id="test">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-percent-1-ref.html b/layout/reftests/transform/scale-percent-1-ref.html
new file mode 100644
index 0000000000..78c05acc54
--- /dev/null
+++ b/layout/reftests/transform/scale-percent-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ div {
+ background: green;
+ width: 100px;
+ height: 100px;
+ -moz-transform: scale(0.5, 0.75);
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-percent-1.html b/layout/reftests/transform/scale-percent-1.html
new file mode 100644
index 0000000000..45e2c0abd5
--- /dev/null
+++ b/layout/reftests/transform/scale-percent-1.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+ <!-- Percent values should function the same as their equivalent numeric values: e.g. (50% == 0.5) -->
+ <style>
+ body { margin: 0px; }
+ div {
+ background: green;
+ width: 100px;
+ height: 100px;
+ -moz-transform: scale(50%, 75%);
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaled-blend-mode-ref.html b/layout/reftests/transform/scaled-blend-mode-ref.html
new file mode 100644
index 0000000000..85ce12cd14
--- /dev/null
+++ b/layout/reftests/transform/scaled-blend-mode-ref.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ div {
+ width: 200px;
+ height: 200px;
+ }
+ #scale {
+ transform: scale(2);
+ transform-origin: top left;
+ }
+ #blend {
+ mix-blend-mode: multiply;
+ }
+ </style>
+</head>
+<body>
+ <div id="blend">
+ <div id="scale">
+ Hello
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaled-blend-mode.html b/layout/reftests/transform/scaled-blend-mode.html
new file mode 100644
index 0000000000..100be8126a
--- /dev/null
+++ b/layout/reftests/transform/scaled-blend-mode.html
@@ -0,0 +1,25 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ div {
+ width: 200px;
+ height: 200px;
+ }
+ #scale {
+ transform: scale(2);
+ transform-origin: top left;
+ }
+ #blend {
+ mix-blend-mode: multiply;
+ }
+ </style>
+</head>
+<body>
+ <div id="scale">
+ <div id="blend">
+ Hello
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scalex-1-ref.html b/layout/reftests/transform/scalex-1-ref.html
new file mode 100644
index 0000000000..b95fa2a46e
--- /dev/null
+++ b/layout/reftests/transform/scalex-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ div {
+ background: green;
+ width: 50px;
+ height: 100px;
+ margin-left: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scalex-1.html b/layout/reftests/transform/scalex-1.html
new file mode 100644
index 0000000000..becada6bbd
--- /dev/null
+++ b/layout/reftests/transform/scalex-1.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ div {
+ background: green;
+ width: 100px;
+ height: 100px;
+ -moz-transform: scalex(0.5);
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaley-1-ref.html b/layout/reftests/transform/scaley-1-ref.html
new file mode 100644
index 0000000000..58a01d1958
--- /dev/null
+++ b/layout/reftests/transform/scaley-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ div {
+ background: green;
+ width: 100px;
+ height: 50px;
+ margin-top: 25px;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaley-1.html b/layout/reftests/transform/scaley-1.html
new file mode 100644
index 0000000000..b909fbad79
--- /dev/null
+++ b/layout/reftests/transform/scaley-1.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+ <style>
+ body { margin: 0px; }
+ div {
+ background: green;
+ width: 100px;
+ height: 100px;
+ -moz-transform: scaley(0.5);
+ }
+ </style>
+</head>
+<body>
+ <div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/singular-1a.html b/layout/reftests/transform/singular-1a.html
new file mode 100644
index 0000000000..1ef61dc99c
--- /dev/null
+++ b/layout/reftests/transform/singular-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 1, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+ This shouldn't be visible.
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/skew-1-ref.html b/layout/reftests/transform/skew-1-ref.html
new file mode 100644
index 0000000000..d833689700
--- /dev/null
+++ b/layout/reftests/transform/skew-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skewx(10deg);">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/skew-1a.html b/layout/reftests/transform/skew-1a.html
new file mode 100644
index 0000000000..125b45bc4f
--- /dev/null
+++ b/layout/reftests/transform/skew-1a.html
@@ -0,0 +1,8 @@
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(10deg);">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/skew-1b.html b/layout/reftests/transform/skew-1b.html
new file mode 100644
index 0000000000..5776ba0081
--- /dev/null
+++ b/layout/reftests/transform/skew-1b.html
@@ -0,0 +1,8 @@
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(10deg, 0deg);">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/skew-2-ref.html b/layout/reftests/transform/skew-2-ref.html
new file mode 100644
index 0000000000..e017dd0e22
--- /dev/null
+++ b/layout/reftests/transform/skew-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skewy(10deg);">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/skew-2a.html b/layout/reftests/transform/skew-2a.html
new file mode 100644
index 0000000000..e3e5df6da3
--- /dev/null
+++ b/layout/reftests/transform/skew-2a.html
@@ -0,0 +1,8 @@
+<html>
+ <head>
+ </head>
+ <body>
+ <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(0deg, 10deg);">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/snapping-1-ref.html b/layout/reftests/transform/snapping-1-ref.html
new file mode 100644
index 0000000000..99006901b3
--- /dev/null
+++ b/layout/reftests/transform/snapping-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+ background: red;
+ position: relative;
+ left: 0.5px;
+ top: 100px;
+ height: 100px;
+ width: 100px;
+}
+</style>
+</head>
+<body>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/transform/snapping-1.html b/layout/reftests/transform/snapping-1.html
new file mode 100644
index 0000000000..e5a7d9abde
--- /dev/null
+++ b/layout/reftests/transform/snapping-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div {
+ background: red;
+ margin-left: 100.5px;
+ height: 100px;
+ width: 100px;
+ -moz-transform-origin: bottom left;
+ -moz-transform: rotate(-90deg) translate(-100px, 0);
+ transform-origin: bottom left;
+ transform: rotate(-90deg) translate(-100px, 0);
+}
+</style>
+</head>
+<body>
+ <div></div>
+</html>
diff --git a/layout/reftests/transform/square.html b/layout/reftests/transform/square.html
new file mode 100644
index 0000000000..2f6e4950bc
--- /dev/null
+++ b/layout/reftests/transform/square.html
@@ -0,0 +1,20 @@
+<html>
+ <head>
+ <style>
+ div {
+ background: green;
+ width: 100px;
+ height: 100px;
+ }
+ span {
+ background: yellow;
+ width: 50px;
+ }
+ </style>
+ </head>
+ <body>
+ <div>
+ <span></span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/stresstest-1-ref.html b/layout/reftests/transform/stresstest-1-ref.html
new file mode 100644
index 0000000000..a84cff23db
--- /dev/null
+++ b/layout/reftests/transform/stresstest-1-ref.html
@@ -0,0 +1,7 @@
+<html>
+ <body>
+ <iframe src="square.html" style="height: 200px; width: 300px" id="test">
+ test
+ </iframe>
+ </body>
+</html>
diff --git a/layout/reftests/transform/stresstest-1.html b/layout/reftests/transform/stresstest-1.html
new file mode 100644
index 0000000000..f0202ab861
--- /dev/null
+++ b/layout/reftests/transform/stresstest-1.html
@@ -0,0 +1,27 @@
+<html class="reftest-wait">
+ <head>
+ <script type="application/javascript">
+ function runtest() {
+ var iframe = document.getElementById("test");
+ var style = iframe.getAttribute("style");
+ // We depend on the transform being the last rule so clip the ending ';'
+ style = style.substring(0, style.length-1);
+
+ // Here, we add transform functions to explicitly undo the effects of
+ // each already-applied transform. This should leave us with an
+ // effectively-untransformed iframe.
+ style = style + " scale(0.5, 0.25) translatex(-50px) rotate(-45deg) translate(-50px, -50px) skewx(135deg);"
+ iframe.setAttribute("style", style);
+ document.documentElement.className = "";
+ }
+ </script>
+ </head>
+ <body>
+ <iframe
+ src="square.html"
+ style="height: 200px; width: 300px; -moz-transform: skewx(45deg) translate(50px, 50px) rotate(45deg) translatex(50px) scale(2.0, 4.0);"
+ id="test"
+ onload="runtest();">
+ </iframe>
+ </body>
+</html>
diff --git a/layout/reftests/transform/table-1-ref.html b/layout/reftests/transform/table-1-ref.html
new file mode 100644
index 0000000000..ca213123b5
--- /dev/null
+++ b/layout/reftests/transform/table-1-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<table>
+<caption>Hello</caption>
+<tr><td>there!
+</table>
+</div>
diff --git a/layout/reftests/transform/table-1a.html b/layout/reftests/transform/table-1a.html
new file mode 100644
index 0000000000..ce7458c8db
--- /dev/null
+++ b/layout/reftests/transform/table-1a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
diff --git a/layout/reftests/transform/table-1b.html b/layout/reftests/transform/table-1b.html
new file mode 100644
index 0000000000..ad045a3af4
--- /dev/null
+++ b/layout/reftests/transform/table-1b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="display:inline-table;-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
diff --git a/layout/reftests/transform/table-1c.html b/layout/reftests/transform/table-1c.html
new file mode 100644
index 0000000000..50f4d1add5
--- /dev/null
+++ b/layout/reftests/transform/table-1c.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div style="-moz-transform:translateX(200px) rotate(180deg) translateY(-100%);-moz-transform-origin:left">
+<table style="-moz-transform:translateY(100%)">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
+</div>
diff --git a/layout/reftests/transform/table-2-ref.html b/layout/reftests/transform/table-2-ref.html
new file mode 100644
index 0000000000..60e7bbb294
--- /dev/null
+++ b/layout/reftests/transform/table-2-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<div style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<table>
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-2a.html b/layout/reftests/transform/table-2a.html
new file mode 100644
index 0000000000..6e7f91ee57
--- /dev/null
+++ b/layout/reftests/transform/table-2a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-2b.html b/layout/reftests/transform/table-2b.html
new file mode 100644
index 0000000000..3d94dcf97b
--- /dev/null
+++ b/layout/reftests/transform/table-2b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="display:inline-table;-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-overflowed-by-animation-ref.html b/layout/reftests/transform/table-overflowed-by-animation-ref.html
new file mode 100644
index 0000000000..242dc53506
--- /dev/null
+++ b/layout/reftests/transform/table-overflowed-by-animation-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<table style="width: 100px; height: 100px;">
+ <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);">
+ </td>
+</table>
+</html>
diff --git a/layout/reftests/transform/table-overflowed-by-animation.html b/layout/reftests/transform/table-overflowed-by-animation.html
new file mode 100644
index 0000000000..b7bd80b5e4
--- /dev/null
+++ b/layout/reftests/transform/table-overflowed-by-animation.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+@keyframes anim {
+ /*
+ * We need to use different transform functions to produce
+ * UpdatePostTransformOverflow change hint, also these functions have to be
+ * the same matrix to being the same position while running reftest.
+ */
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: scale(1);
+ }
+}
+</style>
+<table id="test" style="width: 100px; height: 100px; animation: anim 1s infinite;">
+ <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);">
+ </td>
+</table>
+<script>
+document.getElementById("test").addEventListener("animationstart", () => {
+ requestAnimationFrame(() => {
+ document.documentElement.classList.remove("reftest-wait");
+ });
+});
+</script>
+</html>
diff --git a/layout/reftests/transform/transform-anon-block-1-ref.html b/layout/reftests/transform/transform-anon-block-1-ref.html
new file mode 100644
index 0000000000..a6b89ab863
--- /dev/null
+++ b/layout/reftests/transform/transform-anon-block-1-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <meta charset="UTF-8">
+ <style>
+ .parent {
+ border: none;
+ transform-style: preserve-3d;
+ background: red;
+ display: inline-block;
+ }
+
+ .child {
+ width: 100px;
+ height: 100px;
+ background: blue;
+ transform: rotate(45deg);
+ }
+ </style>
+</head>
+
+<body>
+ <div class="parent">
+ <div class="child"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-anon-block-1.html b/layout/reftests/transform/transform-anon-block-1.html
new file mode 100644
index 0000000000..0a45ec8804
--- /dev/null
+++ b/layout/reftests/transform/transform-anon-block-1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <meta charset="UTF-8">
+ <style>
+ .parent {
+ border: none;
+ transform-style: preserve-3d;
+ background: red;
+ padding: 0px;
+ }
+
+ .child {
+ width: 100px;
+ height: 100px;
+ background: blue;
+ transform: rotate(45deg);
+ }
+ </style>
+</head>
+
+<body>
+ <button class="parent">
+ <div class="child"></div>
+ </button>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-box-svg-1-ref.svg b/layout/reftests/transform/transform-box-svg-1-ref.svg
new file mode 100644
index 0000000000..8f748b73d7
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue'/>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-1a.svg b/layout/reftests/transform/transform-box-svg-1a.svg
new file mode 100644
index 0000000000..e74989823d
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1a.svg
@@ -0,0 +1,10 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point relative to the top left of the
+ element's paint bbox when transform-box is set to 'fill-box'
+ -->
+ <rect x='10' y='10' width='100' height='100' fill='blue'
+ style="transform:rotate(90deg); transform-origin:0px 100px;
+ transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-1b.svg b/layout/reftests/transform/transform-box-svg-1b.svg
new file mode 100644
index 0000000000..84d0da992b
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1b.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point relative to the top left of the
+ element's fill bbox when transform-box is set to 'fill-box', with
+ percentage values resolved against the size of the fill bbox.
+ -->
+ <rect x='10' y='10' width='100' height='100' fill='blue'
+ style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px);
+ transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2-ref.svg b/layout/reftests/transform/transform-box-svg-2-ref.svg
new file mode 100644
index 0000000000..905fafcca7
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2a.svg b/layout/reftests/transform/transform-box-svg-2a.svg
new file mode 100644
index 0000000000..7ae4cfe0b4
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2a.svg
@@ -0,0 +1,10 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point relative to the top left of the
+ element's paint bbox when transform-box is set to 'fill-box'
+ -->
+ <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+ style="transform:rotate(90deg); transform-origin:0px 100px;
+ transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2b.svg b/layout/reftests/transform/transform-box-svg-2b.svg
new file mode 100644
index 0000000000..8b14744820
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2b.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point relative to the top left of the
+ element's fill bbox when transform-box is set to 'fill-box', with
+ percentage values resolved against the size of the fill bbox.
+ -->
+ <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+ style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px);
+ transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-3a.svg b/layout/reftests/transform/transform-box-svg-3a.svg
new file mode 100644
index 0000000000..625294038c
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-3a.svg
@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">
+ <style>
+ /* <![CDATA[ */
+ .ref {
+ fill: red;
+ }
+ .test {
+ fill: lime;
+ }
+ /* ]]> */
+ </style>
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- all rect.test rects should be covered by the corresponded rest.ref rect-->
+ <!-- 1st row: transform-box only. -->
+ <rect class="ref"
+ x="11" y="11" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: view-box"
+ x="10" y="10" width="10" height="10"/>
+ <rect class="ref"
+ x="26" y="11" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: fill-box"
+ x="25" y="10" width="10" height="10"/>
+ <rect class="ref"
+ x="41" y="11" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: border-box"
+ x="40" y="10" width="10" height="10"/>
+
+ <!-- 2nd row: transform-box plus transform-origin. -->
+ <rect class="ref"
+ x="11" y="26" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: view-box; transform-origin: 40% 60%"
+ x="10" y="25" width="10" height="10"/>
+ <rect class="ref"
+ x="26" y="26" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: fill-box; transform-origin: 20px 10px"
+ x="25" y="25" width="10" height="10"/>
+ <rect class="ref"
+ x="41" y="26" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: border-box; transform-origin: 40% 60%"
+ x="40" y="25" width="10" height="10"/>
+
+ <!-- 3rd row: transform-box, transform-origin and transform. -->
+ <rect class="ref"
+ x="11" y="46" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: fill-box; transform-origin: 0% 0%; transform: scale(2);"
+ x="10" y="45" width="5" height="5"/>
+ <rect class="ref"
+ x="26" y="46" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: fill-box; transform-origin: 50% 50%; transform:rotate(45deg);"
+ x="24" y="44" width="12" height="12"/>
+ <rect class="ref"
+ x="41" y="46" width="8" height="8"/>
+ <rect class="test"
+ style="transform-box: border-box; transform-origin: 100% 100%; transform: scale(1);"
+ x="40" y="45" width="10" height="10"/>
+</svg> \ No newline at end of file
diff --git a/layout/reftests/transform/transform-origin-svg-1-ref.svg b/layout/reftests/transform/transform-origin-svg-1-ref.svg
new file mode 100644
index 0000000000..8f748b73d7
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue'/>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-1a.svg b/layout/reftests/transform/transform-origin-svg-1a.svg
new file mode 100644
index 0000000000..c1591e65b6
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1a.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point in user space -->
+ <rect x='10' y='10' width='100' height='100' fill='blue'
+ style="transform:rotate(90deg); transform-origin:10px 110px;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-1b.svg b/layout/reftests/transform/transform-origin-svg-1b.svg
new file mode 100644
index 0000000000..ca4eead39e
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1b.svg
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point in user space with percentages
+ resolved against the nearest viewport's dimensions.
+ -->
+ <rect x='10' y='10' width='100' height='100' fill='blue'
+ style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2-ref.svg b/layout/reftests/transform/transform-origin-svg-2-ref.svg
new file mode 100644
index 0000000000..905fafcca7
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2a.svg b/layout/reftests/transform/transform-origin-svg-2a.svg
new file mode 100644
index 0000000000..46de3c4806
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2a.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point in user space -->
+ <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+ style="transform:rotate(90deg); transform-origin:10px 110px;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2b.svg b/layout/reftests/transform/transform-origin-svg-2b.svg
new file mode 100644
index 0000000000..29d4187aa5
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2b.svg
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
+<g transform="translate(30,30)">
+ <!-- transform-origin specifies a point in user space with percentages
+ resolved against the nearest viewport's dimensions.
+ -->
+ <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+ style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-svg-1-ref.xhtml b/layout/reftests/transform/transform-svg-1-ref.xhtml
new file mode 100644
index 0000000000..1d303d1ada
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1-ref.xhtml
@@ -0,0 +1,12 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body style="margin:0">
+ <div style="position: relative; left:100px; top:100px; width:300px; height:300px; background:lime;">
+ <div style="height:200px;"/>
+ <div style="height:100px; background:blue;"/>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-1a.xhtml b/layout/reftests/transform/transform-svg-1a.xhtml
new file mode 100644
index 0000000000..99ffa75a02
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1a.xhtml
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:400px; height:200px; background:lime; -moz-transform: translate(100px, 100px);">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:blue;"/>
+ </div>
+
+ <svg:svg height="0">
+ <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+ <svg:rect x="0" y="0" width="300" height="300"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-1b.xhtml b/layout/reftests/transform/transform-svg-1b.xhtml
new file mode 100644
index 0000000000..73bcb54980
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1b.xhtml
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; -moz-transform: rotate(135deg);">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:lime;"/>
+ </div>
+
+ <svg:svg height="0">
+ <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+ <svg:rect x="0" y="0" width="300" height="300"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2-fail.xhtml b/layout/reftests/transform/transform-svg-2-fail.xhtml
new file mode 100644
index 0000000000..b3fe934e28
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2-fail.xhtml
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:400px; height:400px; background:blue;">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:lime;"/>
+ </div>
+
+ <svg:svg height="0">
+ <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+ <svg:circle cx="100" cy="100" r="200"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2-ref.xhtml b/layout/reftests/transform/transform-svg-2-ref.xhtml
new file mode 100644
index 0000000000..7d3da096db
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2-ref.xhtml
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; position: relative; left:100px; top:100px;">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:lime;"/>
+ </div>
+
+ <svg:svg height="0">
+ <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+ <svg:circle cx="200" cy="200" r="200"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2a.xhtml b/layout/reftests/transform/transform-svg-2a.xhtml
new file mode 100644
index 0000000000..c6e86b294b
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2a.xhtml
@@ -0,0 +1,20 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+ <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; -moz-transform: translate(100px, 100px);">
+ <div style="height:200px;"/>
+ <div style="height:200px; background:lime;"/>
+ </div>
+
+ <svg:svg height="0">
+ <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+ <svg:circle cx="200" cy="200" r="200"/>
+ </svg:clipPath>
+ </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1-ref.html b/layout/reftests/transform/translate-1-ref.html
new file mode 100644
index 0000000000..bdd2a30e70
--- /dev/null
+++ b/layout/reftests/transform/translate-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="position: relative; left: 50px; top: 50px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1a.html b/layout/reftests/transform/translate-1a.html
new file mode 100644
index 0000000000..3a7aa50f06
--- /dev/null
+++ b/layout/reftests/transform/translate-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate(50px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1b.html b/layout/reftests/transform/translate-1b.html
new file mode 100644
index 0000000000..c0eced528d
--- /dev/null
+++ b/layout/reftests/transform/translate-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate(50px, 50px) rotate(360deg);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1c.html b/layout/reftests/transform/translate-1c.html
new file mode 100644
index 0000000000..6ce78f42c2
--- /dev/null
+++ b/layout/reftests/transform/translate-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate(25px, 25px) translate(25px, 25px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1d.html b/layout/reftests/transform/translate-1d.html
new file mode 100644
index 0000000000..8cd0697f71
--- /dev/null
+++ b/layout/reftests/transform/translate-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate(25px, 25px); position:relative; top:25px; left:25px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1e.html b/layout/reftests/transform/translate-1e.html
new file mode 100644
index 0000000000..5d94de00ec
--- /dev/null
+++ b/layout/reftests/transform/translate-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate(50px) translate(-100px) translate(150px) translate(-50px) translate(0px, 50px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-2-ref.html b/layout/reftests/transform/translate-2-ref.html
new file mode 100644
index 0000000000..bc05a774a4
--- /dev/null
+++ b/layout/reftests/transform/translate-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="position: relative; left: 50px; top: 0px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-2a.html b/layout/reftests/transform/translate-2a.html
new file mode 100644
index 0000000000..3a7aa50f06
--- /dev/null
+++ b/layout/reftests/transform/translate-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate(50px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-3-ref.html b/layout/reftests/transform/translate-3-ref.html
new file mode 100644
index 0000000000..458932b60b
--- /dev/null
+++ b/layout/reftests/transform/translate-3-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<style>
+div {
+ width: 100px; height: 100px;
+ background: green;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/transform/translate-3.html b/layout/reftests/transform/translate-3.html
new file mode 100644
index 0000000000..ea326324a3
--- /dev/null
+++ b/layout/reftests/transform/translate-3.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+div {
+ width: 100px; height: 100px;
+}
+#outer {
+ background: green;
+ overflow: hidden;
+}
+#inner {
+ background: red;
+ transform: translateX(calc(100px));
+}
+</style>
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/layout/reftests/transform/translate-rounding-1.html b/layout/reftests/transform/translate-rounding-1.html
new file mode 100644
index 0000000000..a77f71dd59
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1392161 - Transform translate rounding (em)</title>
+ <style>
+ div {
+ height: 100px;
+ width: 100px;
+ background: blue;
+ font-size: 10px;
+ transform: scale(100000) translate(0.0001em) scale(0.00001);
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-2.html b/layout/reftests/transform/translate-rounding-2.html
new file mode 100644
index 0000000000..d22d6071fc
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-2.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1392161 - Transform translate rounding (rem)</title>
+ <style>
+ div {
+ height: 100px;
+ width: 100px;
+ background: blue;
+ transform: scale(100000) translate(0.0001rem) scale(0.00001);
+ }
+ html {
+ font-size: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-3.html b/layout/reftests/transform/translate-rounding-3.html
new file mode 100644
index 0000000000..2d0e92e6a1
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-3.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1392161 - Transform translate rounding (viewport size)</title>
+ <style>
+ div {
+ height: 100px;
+ width: 100px;
+ background: blue;
+ transform: scale(100000) translate(0.0005vw) scale(0.00001);
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-ref.html b/layout/reftests/transform/translate-rounding-ref.html
new file mode 100644
index 0000000000..8cf29dd1a9
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1392161 - Translate rounding reference</title>
+ <style>
+ div {
+ height: 100px;
+ width: 100px;
+ background: blue;
+ position: relative;
+ left: 100px;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/translate-rounding-viewport-ref.html b/layout/reftests/transform/translate-rounding-viewport-ref.html
new file mode 100644
index 0000000000..da2051d3b3
--- /dev/null
+++ b/layout/reftests/transform/translate-rounding-viewport-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Bug 1392161 - Translate rounding reference (viewport)</title>
+ <style>
+ div {
+ height: 100px;
+ width: 100px;
+ background: blue;
+ position: relative;
+ left: 50vw;
+ }
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/transform/translatex-1-ref-2.html b/layout/reftests/transform/translatex-1-ref-2.html
new file mode 100644
index 0000000000..5f242f1850
--- /dev/null
+++ b/layout/reftests/transform/translatex-1-ref-2.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-left: 50px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+ <div style="position:relative; left:50px; height:10px;">
+ <!-- make the body overflow by 50px horizontally -->
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1-ref.html b/layout/reftests/transform/translatex-1-ref.html
new file mode 100644
index 0000000000..4b35ca823c
--- /dev/null
+++ b/layout/reftests/transform/translatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="position:relative; left:50px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1a.html b/layout/reftests/transform/translatex-1a.html
new file mode 100644
index 0000000000..060b3f4364
--- /dev/null
+++ b/layout/reftests/transform/translatex-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatex(50px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1b.html b/layout/reftests/transform/translatex-1b.html
new file mode 100644
index 0000000000..aaca0211b9
--- /dev/null
+++ b/layout/reftests/transform/translatex-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatex(50px) rotate(360deg);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1c.html b/layout/reftests/transform/translatex-1c.html
new file mode 100644
index 0000000000..9a0cb5a036
--- /dev/null
+++ b/layout/reftests/transform/translatex-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatex(25px) translatex(25px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1d.html b/layout/reftests/transform/translatex-1d.html
new file mode 100644
index 0000000000..4b631aa063
--- /dev/null
+++ b/layout/reftests/transform/translatex-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatex(25px); position:relative; left:25px; top:0px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1e.html b/layout/reftests/transform/translatex-1e.html
new file mode 100644
index 0000000000..a45ff3c757
--- /dev/null
+++ b/layout/reftests/transform/translatex-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatex(50px) translatex(-100px) translatex(150px) translatex(-50px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-2.html b/layout/reftests/transform/translatex-2.html
new file mode 100644
index 0000000000..6271e4d932
--- /dev/null
+++ b/layout/reftests/transform/translatex-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 0, 0, 1, 50, 0);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1-ref-2.html b/layout/reftests/transform/translatey-1-ref-2.html
new file mode 100644
index 0000000000..49c42165f0
--- /dev/null
+++ b/layout/reftests/transform/translatey-1-ref-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="margin-top: 50px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1-ref.html b/layout/reftests/transform/translatey-1-ref.html
new file mode 100644
index 0000000000..a898e3385e
--- /dev/null
+++ b/layout/reftests/transform/translatey-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="position:relative; top:50px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1a.html b/layout/reftests/transform/translatey-1a.html
new file mode 100644
index 0000000000..8c6d985ce8
--- /dev/null
+++ b/layout/reftests/transform/translatey-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatey(50px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1b.html b/layout/reftests/transform/translatey-1b.html
new file mode 100644
index 0000000000..3adafcb2e4
--- /dev/null
+++ b/layout/reftests/transform/translatey-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatey(50px) rotate(360deg);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1c.html b/layout/reftests/transform/translatey-1c.html
new file mode 100644
index 0000000000..8a4b70babd
--- /dev/null
+++ b/layout/reftests/transform/translatey-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatey(25px) translatey(25px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1d.html b/layout/reftests/transform/translatey-1d.html
new file mode 100644
index 0000000000..73b7d5bbd6
--- /dev/null
+++ b/layout/reftests/transform/translatey-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatey(25px); position:relative; top:25px; left:0px;">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1e.html b/layout/reftests/transform/translatey-1e.html
new file mode 100644
index 0000000000..9a6c1f825a
--- /dev/null
+++ b/layout/reftests/transform/translatey-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatey(50px) translatey(-100px) translatey(150px) translatey(-50px);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-2.html b/layout/reftests/transform/translatey-2.html
new file mode 100644
index 0000000000..5a727fb855
--- /dev/null
+++ b/layout/reftests/transform/translatey-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: matrix(1, 0, 0, 1, 0, 50);">
+ <div style="background-color: green; width: 20px; height: 20px">
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/zoom-hack-1.html b/layout/reftests/transform/zoom-hack-1.html
new file mode 100644
index 0000000000..2bce0ac6c6
--- /dev/null
+++ b/layout/reftests/transform/zoom-hack-1.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ background: green;
+ zoom: 2;
+ }
+</style>
+<div></div>
diff --git a/layout/reftests/transform/zoom-hack-2.html b/layout/reftests/transform/zoom-hack-2.html
new file mode 100644
index 0000000000..d78550ef84
--- /dev/null
+++ b/layout/reftests/transform/zoom-hack-2.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<style>
+ div {
+ width: 200px;
+ height: 200px;
+ background: green;
+ zoom: 0;
+ }
+</style>
+<div></div>
diff --git a/layout/reftests/transform/zoom-hack-ref.html b/layout/reftests/transform/zoom-hack-ref.html
new file mode 100644
index 0000000000..274976159a
--- /dev/null
+++ b/layout/reftests/transform/zoom-hack-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<style>
+ div {
+ width: 200px;
+ height: 200px;
+ background: green;
+ }
+</style>
+<div></div>