diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/transform-3d | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/transform-3d')
120 files changed, 2968 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 000000000..4c79af3e4 --- /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 000000000..2d7e78707 --- /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 000000000..be0f6526a --- /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 000000000..59c7b67d8 --- /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 000000000..fc56c22e0 --- /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 000000000..845785d59 --- /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/animate-backface-hidden.html b/layout/reftests/transform-3d/animate-backface-hidden.html new file mode 100644 index 000000000..ce957bf73 --- /dev/null +++ b/layout/reftests/transform-3d/animate-backface-hidden.html @@ -0,0 +1,40 @@ +<!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; +} + +</style> + +<div id="test"> +</div> + +<script> + +document.getElementById("test").addEventListener("animationiteration", IterationListener, false); + +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 000000000..bbaa9d0b8 --- /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 000000000..aff04d5c9 --- /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 000000000..26c989a54 --- /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 000000000..d2d80b520 --- /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 000000000..fe15a3729 --- /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 000000000..01eb93049 --- /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 000000000..b7075f328 --- /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 000000000..5a8f61ec3 --- /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 000000000..2404be1b0 --- /dev/null +++ b/layout/reftests/transform-3d/animate-preserve3d-child.html @@ -0,0 +1,56 @@ +<!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, false); + +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 000000000..ae3fec196 --- /dev/null +++ b/layout/reftests/transform-3d/animate-preserve3d-parent.html @@ -0,0 +1,52 @@ +<!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; +} + +#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("animationiteration", IterationListener, false); + +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 000000000..60c560804 --- /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 000000000..0c1d0a3a6 --- /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 000000000..8590a6f60 --- /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 000000000..6129b443e --- /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 000000000..bc5146dbe --- /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 000000000..d55a8c9b4 --- /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 000000000..b75cb6def --- /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 000000000..ec8d648de --- /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/green-rect.html b/layout/reftests/transform-3d/green-rect.html new file mode 100644 index 000000000..4e6d13e95 --- /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/mask-layer-1.html b/layout/reftests/transform-3d/mask-layer-1.html new file mode 100644 index 000000000..834ed4463 --- /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 000000000..23315e224 --- /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 000000000..58a04a45a --- /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 000000000..bc4f963e6 --- /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 000000000..ef27cb984 --- /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 000000000..38b98b274 --- /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 000000000..ac665fb66 --- /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 000000000..222dd6a82 --- /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/opacity-preserve3d-1-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html new file mode 100644 index 000000000..8a42fa3c9 --- /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 000000000..b73be4923 --- /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 000000000..80336b5cf --- /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 000000000..a04b99829 --- /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 000000000..ffacd8277 --- /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 000000000..f7bbf2da8 --- /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 000000000..9fe799b61 --- /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 000000000..9fd672864 --- /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 000000000..ab64e1e9d --- /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 000000000..37808dd58 --- /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 000000000..f78592e8d --- /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 000000000..f78592e8d --- /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 000000000..78411f4cb --- /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 000000000..90ffcf528 --- /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-origin-1a.html b/layout/reftests/transform-3d/perspective-origin-1a.html new file mode 100644 index 000000000..c918e05ba --- /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 000000000..ee934dec1 --- /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 000000000..7c9e0d58a --- /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 000000000..ff8093816 --- /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 000000000..8271d2d3e --- /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 000000000..345db2c7f --- /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 000000000..087e572b7 --- /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 000000000..800756ebb --- /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-zindex-2.html b/layout/reftests/transform-3d/perspective-zindex-2.html new file mode 100644 index 000000000..927d761da --- /dev/null +++ b/layout/reftests/transform-3d/perspective-zindex-2.html @@ -0,0 +1,34 @@ +<!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; + 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); +} + +</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 000000000..3f6a33870 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-zindex.html @@ -0,0 +1,34 @@ +<!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); +} + +#back { + z-index: 1; + width: 100px; + height: 100px; + background-color: #FF0000; + transform: translateY(-100px); +} + +</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 000000000..9d7bf6434 --- /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 000000000..005ec797a --- /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 000000000..ef535fcce --- /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 000000000..1a396bcc8 --- /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 000000000..3bdd7ab8d --- /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 000000000..36d1827de --- /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 000000000..cc8ff8a0a --- /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 000000000..6cfe1e3bd --- /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 000000000..2590d9df3 --- /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 000000000..a28f814e9 --- /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 000000000..0bf0cbe4c --- /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 000000000..2bdd5c539 --- /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 000000000..03e9e7ed0 --- /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 000000000..f24abbe73 --- /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 000000000..0b604ba5d --- /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 000000000..cb17ddba5 --- /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 000000000..d962d4fd4 --- /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-clipped.html b/layout/reftests/transform-3d/preserve3d-clipped.html new file mode 100644 index 000000000..4647fd56d --- /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/preserves3d-nested-ref.html b/layout/reftests/transform-3d/preserves3d-nested-ref.html new file mode 100644 index 000000000..b8a744eb7 --- /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 000000000..673a982e9 --- /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-stylo.list b/layout/reftests/transform-3d/reftest-stylo.list new file mode 100644 index 000000000..c153fc4fc --- /dev/null +++ b/layout/reftests/transform-3d/reftest-stylo.list @@ -0,0 +1,93 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +== scalez-1a.html scalez-1a.html +== rotatey-1a.html rotatey-1a.html +== rotatex-1a.html rotatex-1a.html +# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg) +== scalezrotatex-1.html scalezrotatex-1.html +# Check that the perspectve() transform function results in some visual changes +== rotatex-perspective-1a.html rotatex-perspective-1a.html +# Check that -moz-perspective results in visual changes to child transformed elements +== rotatex-perspective-1b.html rotatex-perspective-1b.html +# -moz-perspective should only apply to child elements +# == rotatex-perspective-1c.html rotatex-perspective-1c.html +== rotatex-perspective-3a.html rotatex-perspective-3a.html +== scalez-1a.html scalez-1a.html +fails fuzzy-if(gtkWidget||winWidget,8,376) fuzzy-if(Android,8,441) fuzzy-if(cocoaWidget,17,4) fuzzy-if(skiaContent,16,250) == preserve3d-1a.html preserve3d-1a.html +== preserve3d-1b.html preserve3d-1b.html +== preserve3d-clipped.html preserve3d-clipped.html +== preserve3d-2a.html preserve3d-2a.html +== preserve3d-2b.html preserve3d-2b.html +== preserve3d-2c.html preserve3d-2c.html +== preserve3d-2d.html preserve3d-2d.html +== preserve3d-3a.html preserve3d-3a.html +== preserve3d-4a.html preserve3d-4a.html +fails fuzzy-if(gtkWidget,4,200) fuzzy-if(Android,4,300) fuzzy-if(winWidget&&!layersGPUAccelerated,2,100) fuzzy-if(skiaContent,16,100) == preserve3d-5a.html preserve3d-5a.html +== preserve3d-6a.html preserve3d-6a.html +== scale3d-z.html scale3d-z.html +fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all.html scale3d-all.html +# subpixel AA +fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all-separate.html scale3d-all-separate.html +# subpixel AA +== scale3d-xz.html scale3d-xz.html +== translatez-1a.html translatez-1a.html +== translatez-1b.html translatez-1b.html +== translate3d-1a.html translate3d-1a.html +fails fuzzy-if(skiaContent,1,4) == matrix3d-1a.html matrix3d-1a.html +== matrix3d-2a.html matrix3d-2a.html +== rotate3d-1a.html rotate3d-1a.html +== rotate3d-2a.html rotate3d-2a.html +== backface-visibility-1a.html backface-visibility-1a.html +== backface-visibility-1b.html backface-visibility-1b.html +== backface-visibility-1c.html backface-visibility-1c.html +fuzzy-if(winWidget&&!layersGPUAccelerated,1,251) == backface-visibility-2.html backface-visibility-2.html +== backface-visibility-3.html backface-visibility-3.html +== perspective-clipping-1.html perspective-clipping-1.html +== perspective-origin-1a.html perspective-origin-1a.html +== perspective-origin-1b.html perspective-origin-1b.html +random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2a.html +# subpixel AA, bug 732568 +fuzzy-if(winWidget&&!layersGPUAccelerated,1,61) == perspective-origin-3a.html perspective-origin-3a.html +== perspective-origin-4a.html perspective-origin-4a.html +== perspective-zindex.html perspective-zindex.html +== perspective-zindex-2.html perspective-zindex-2.html +== sorting-1a.html sorting-1a.html +# Parallel planes, different z depth +== sorting-2a.html sorting-2a.html +# Parallel planes, same z depth (shouldn't be sorted!) +== sorting-2b.html sorting-2b.html +== sorting-3a.html sorting-3a.html +# Different, but equivalent (for the given transform) transform origins +== rotatex-transformorigin-1a.html rotatex-transformorigin-1a.html +fails fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),1,86) == overflow-hidden-1a.html overflow-hidden-1a.html +== transform-style-flat-1a.html transform-style-flat-1a.html +== willchange-containing-block.html?willchange willchange-containing-block.html?willchange +== willchange-containing-block.html?willchange willchange-containing-block.html?willchange +fuzzy-if(winWidget&&!layersGPUAccelerated,1,606) == scroll-perspective-1.html scroll-perspective-1.html +# Bugs +fails-if(!layersGPUAccelerated) == 1035611-1.html 1035611-1.html +# Bug 1072898 for !layersGPUAccelerated failures +== 1157984-1.html 1157984-1.html +# Bug 1157984 +== animate-cube-radians.html animate-cube-radians.html +# subpixel AA +fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,16,6) fuzzy-if(Mulet,16,9) == animate-cube-radians-zoom.html animate-cube-radians-zoom.html +== animate-cube-radians-ref.html animate-cube-radians-ref.html +== animate-cube-degrees.html animate-cube-degrees.html +# subpixel AA +== animate-cube-degrees-zoom.html animate-cube-degrees-zoom.html +== animate-cube-degrees-ref.html animate-cube-degrees-ref.html +fails fuzzy-if(B2G||Android||OSX==1010,143,100) fuzzy-if(winWidget||OSX<1010,141,100) fuzzy-if(gtkWidget,128,100) == preserves3d-nested.html preserves3d-nested.html +skip == animate-preserve3d-parent.html animate-preserve3d-parent.html +# intermittently fuzzy on Mac +skip == animate-preserve3d-child.html animate-preserve3d-child.html +# intermittently fuzzy on Mac +skip == animate-backface-hidden.html animate-backface-hidden.html +== 1245450-1.html 1245450-1.html +== opacity-preserve3d-1.html opacity-preserve3d-1.html +== opacity-preserve3d-2.html opacity-preserve3d-2.html +== opacity-preserve3d-3.html opacity-preserve3d-3.html +== opacity-preserve3d-4.html opacity-preserve3d-4.html +== snap-perspective-1.html snap-perspective-1.html +== mask-layer-1.html mask-layer-1.html +== mask-layer-2.html mask-layer-2.html +== mask-layer-3.html mask-layer-3.html diff --git a/layout/reftests/transform-3d/reftest.list b/layout/reftests/transform-3d/reftest.list new file mode 100644 index 000000000..87b882f83 --- /dev/null +++ b/layout/reftests/transform-3d/reftest.list @@ -0,0 +1,84 @@ +== scalez-1a.html scalez-1-ref.html +== 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-if(gtkWidget||winWidget,8,376) fuzzy-if(Android,8,441) fuzzy-if(cocoaWidget,17,4) fuzzy-if(skiaContent,16,286) == 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-if(gtkWidget,4,200) fuzzy-if(Android,4,300) fuzzy-if(winWidget&&!layersGPUAccelerated,2,100) fuzzy-if(skiaContent,16,100) == preserve3d-5a.html preserve3d-5-ref.html +== preserve3d-6a.html preserve3d-6-ref.html +== scale3d-z.html scalez-1-ref.html +fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all.html scale3d-1-ref.html # subpixel AA +fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == 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-if(skiaContent,1,4) == matrix3d-1a.html matrix3d-1-ref.html +== matrix3d-2a.html matrix3d-2-ref.html +== rotate3d-1a.html rotatex-1-ref.html +== 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,1,251) == 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-origin-1a.html rotatex-perspective-1a.html +== perspective-origin-1b.html perspective-origin-1a.html +fuzzy(3,99) random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2-ref.html # subpixel AA, bug 732568 +fuzzy-if(winWidget&&!layersGPUAccelerated,1,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 +== rotatex-transformorigin-1a.html rotatex-transformorigin-1-ref.html +fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),1,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-if(winWidget&&!layersGPUAccelerated,1,606) == scroll-perspective-1.html scroll-perspective-1-ref.html +# Bugs +fails-if(!layersGPUAccelerated) == 1035611-1.html 1035611-1-ref.html # Bug 1072898 for !layersGPUAccelerated failures +!= 1157984-1.html about:blank # Bug 1157984 +fuzzy(3,99) == animate-cube-radians.html animate-cube-radians-ref.html # subpixel AA +fuzzy(3,99) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,16,6) == animate-cube-radians-zoom.html animate-cube-radians-zoom-ref.html +!= animate-cube-radians-ref.html animate-cube-radians-zoom-ref.html +fuzzy(3,99) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA +== 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,128,100) fuzzy-if(Android||OSX==1010||(gtkWidget&&layersGPUAccelerated),143,100) fuzzy-if(winWidget||OSX<1010,141,100) == preserves3d-nested.html preserves3d-nested-ref.html +fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac +fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac +== animate-backface-hidden.html about:blank +== 1245450-1.html green-rect.html +fuzzy(1,2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html +fuzzy(1,15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html +fuzzy(1,10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html +fuzzy(1,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 +== mask-layer-1.html mask-layer-ref.html +== mask-layer-2.html mask-layer-ref.html +== mask-layer-3.html mask-layer-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 000000000..ba2d222e4 --- /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 000000000..edf3c1be4 --- /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 000000000..0ee28cfe8 --- /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 000000000..f0c6b0183 --- /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 000000000..0b8671e7a --- /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 000000000..d8be19953 --- /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 000000000..9cae30696 --- /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 000000000..c0691b77f --- /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 000000000..593ca82bb --- /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 000000000..11a2dcf2d --- /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 000000000..2c54cef32 --- /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 000000000..0b3339824 --- /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 000000000..359105b01 --- /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 000000000..664d1d4f3 --- /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 000000000..1c0fe5014 --- /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 000000000..afe4639aa --- /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 000000000..81d090979 --- /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 000000000..e168dabc2 --- /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 000000000..6efdc2681 --- /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 000000000..5661addc1 --- /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 000000000..2f250fd78 --- /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 000000000..2cc10c840 --- /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 000000000..b314133f8 --- /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 000000000..2c17c0254 --- /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 000000000..ca84e9e73 --- /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 000000000..a5bd65f08 --- /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 000000000..340d2eb0b --- /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 000000000..98414f843 --- /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 000000000..cb34eaf4e --- /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 000000000..988ba323c --- /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 000000000..5828be845 --- /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 000000000..00c62b5ce --- /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/transform-style-flat-1-ref.html b/layout/reftests/transform-3d/transform-style-flat-1-ref.html new file mode 100644 index 000000000..e73834bb6 --- /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 000000000..946dc28a3 --- /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 000000000..d3b919e99 --- /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 000000000..418d12786 --- /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 000000000..e4a00aca1 --- /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 000000000..a19a128b2 --- /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 000000000..7e6f1dead --- /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 000000000..95de2c74d --- /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> |