diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/reftests/transform-3d | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/transform-3d')
154 files changed, 4072 insertions, 0 deletions
diff --git a/layout/reftests/transform-3d/1035611-1-ref.html b/layout/reftests/transform-3d/1035611-1-ref.html new file mode 100644 index 0000000000..4c79af3e43 --- /dev/null +++ b/layout/reftests/transform-3d/1035611-1-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>Testcase, bug 1035611</title> + <meta charset=UTF-8> + <style type="text/css"> + + #outer { + width: 500px; + height: 100px; + overflow:hidden; + background: orange; + } + + #inner { + width: 36px; + height: 100px; + background: blue; + } + + </style> +</head> +<body> +<div id="outer"> + <div id="inner"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/1035611-1.html b/layout/reftests/transform-3d/1035611-1.html new file mode 100644 index 0000000000..2d7e787077 --- /dev/null +++ b/layout/reftests/transform-3d/1035611-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en-US" reftest-zoom="1.0"> +<head> + <title>Testcase, bug 1035611</title> + <meta charset=UTF-8> + <style type="text/css"> + + #outer1 { + width: 500px; + height: 100px; + overflow:hidden; + background: blue; + } + + #outer2 { + width: 250px; + height: 100px; + perspective: 125px; + } + + #inner { + transform-origin: 0px 0px 70px; + transform: rotate3d(0, 1, 0, -54deg); + width: 128px; + height: 128px; + background: orange; + } + </style> +</head> +<body> +<div id="outer1"> + <div id="outer2"> + <div id="inner"></div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/1157984-1.html b/layout/reftests/transform-3d/1157984-1.html new file mode 100644 index 0000000000..be0f6526aa --- /dev/null +++ b/layout/reftests/transform-3d/1157984-1.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en-US" reftest-zoom="1.0"> +<head> + <title>Testcase, bug 1157984</title> + <meta charset=UTF-8> + <style type="text/css"> + + #outer { + position:absolute; + width: 60px; + height: 60px; + perspective-origin: 300px 300px; + perspective: 300px; + overflow: hidden; + } + + #inner { + position:absolute; + background-color: green; + width: 600px; + height: 600px; + transform-origin: 300px 300px 0px; + transform: translateZ(300px) rotateY(-2rad) translateZ(300px); + } + </style> +</head> +<body> + <div id="outer"> + <div id="inner"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/1245450-1.html b/layout/reftests/transform-3d/1245450-1.html new file mode 100644 index 0000000000..59c7b67d8c --- /dev/null +++ b/layout/reftests/transform-3d/1245450-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<style type="text/css"> + .scene { + perspective: 1000px; + transform-style: preserve-3d; + transform: rotateY(0deg); + } + + .card { + perspective: 1000px; + transform-style: preserve-3d; + backface-visibility: hidden; + width: 100px; + height: 100px; + } + + .front { + transform: rotateY(0deg); + background-color: #00FF00; + } + + .back { + transform: rotateY(180deg); + background-color: #FF0000; + } +</style> +</head> +<body> + <div class="scene"> + <div class="card front"></div> + <div class="card back"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/1271058-1-ref.html b/layout/reftests/transform-3d/1271058-1-ref.html new file mode 100644 index 0000000000..fc56c22e0a --- /dev/null +++ b/layout/reftests/transform-3d/1271058-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<body> +<canvas id="canvas" width="200" height="200"></canvas> +</body> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "green"; + ctx.fillRect(0, 0, 200, 200); +</script> +</html> diff --git a/layout/reftests/transform-3d/1271058-1.html b/layout/reftests/transform-3d/1271058-1.html new file mode 100644 index 0000000000..845785d591 --- /dev/null +++ b/layout/reftests/transform-3d/1271058-1.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html><head> +<style> + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 300px; + height: 300px; + position:absolute; + transform: translateZ(0px); + background-color: red; + top: -220px; + left: -20px; + } +</style> +</head><body> + +<canvas id="canvas" width="200" height="200"></canvas> +<div class="preserve"> + <div class="preserve" style="opacity:0.0001"> + <div class="leaf"></div> + </div> +</div> + +</body> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "green"; + ctx.fillRect(0, 0, 200, 200); +</script> +</html> + diff --git a/layout/reftests/transform-3d/1467277-1.html b/layout/reftests/transform-3d/1467277-1.html new file mode 100644 index 0000000000..ae6c4ccc33 --- /dev/null +++ b/layout/reftests/transform-3d/1467277-1.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate3d(1e50, 0, 0, 45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/1544995-1-ref.html b/layout/reftests/transform-3d/1544995-1-ref.html new file mode 100644 index 0000000000..091725c02a --- /dev/null +++ b/layout/reftests/transform-3d/1544995-1-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<style> + .scene { + transform-style: preserve-3d; + } + .hidden { + backface-visibility: hidden; + } + #inner { + width: 20px; + height: 20px; + box-shadow: rgb(255, 205, 31) 0px 0px 0px 3px; + } +</style> +</head> +<body> +<div class="scene"> + <div class="hidden"> + <div id="inner"> + </div> + </div> +</div +</body> diff --git a/layout/reftests/transform-3d/1544995-1.html b/layout/reftests/transform-3d/1544995-1.html new file mode 100644 index 0000000000..260231deb0 --- /dev/null +++ b/layout/reftests/transform-3d/1544995-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<style> + .scene { + transform-style: preserve-3d; + } + .hidden { + backface-visibility: hidden; + } + #inner { + width: 20px; + height: 20px; + } +</style> +<script type="text/javascript"> + function doTest() { + document.getElementById("inner").style.boxShadow = "rgb(255, 205, 31) 0px 0px 0px 3px"; + document.documentElement.removeAttribute('class'); + } + window.addEventListener("MozReftestInvalidate", doTest); +</script> +</head> +<body> +<div class="scene"> + <div class="hidden"> + <div id="inner"> + </div> + </div> +</div +</body> diff --git a/layout/reftests/transform-3d/1637067-1-ref.html b/layout/reftests/transform-3d/1637067-1-ref.html new file mode 100644 index 0000000000..e46b352f07 --- /dev/null +++ b/layout/reftests/transform-3d/1637067-1-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<style> + +.text { + position: absolute; + top: 100px; + left: 45px; + height: 400px; + width: 400px; +} + +.thing { + position: absolute; + top: 0; + left: 0; + width: 512px; + height: 512px; + background: url('data:image/svg+xml;utf8,<svg width="512" height="200" viewBox="0 0 512 512" fill="black" xmlns="http://www.w3.org/2000/svg"><text x="0" y="400" font-size="100">some text</text></svg>'); + background-repeat: no-repeat; + background-size: 100% 100%; +} + +</style> +</head> +<body> +<div class='text'> +<div class="thing"></div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/1637067-1.html b/layout/reftests/transform-3d/1637067-1.html new file mode 100644 index 0000000000..0f2b125082 --- /dev/null +++ b/layout/reftests/transform-3d/1637067-1.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<style> + +@keyframes rotate { + 100% { + transform: rotatey(1800deg); + } +} + +@keyframes rotate2 { + 100% { + transform: rotatey(2800deg); + } +} + + +.text { + position: absolute; + top: 100px; + left: 100px; + height: 400px; + width: 400px; + transform-style: preserve-3d; + transform: rotatey(271deg); + /*animation: rotate 30s linear infinite reverse;*/ +} + +.thing { + position: absolute; + top: 0; + left: 0; + width: 512px; + height: 512px; + background: url('data:image/svg+xml;utf8,<svg width="512" height="200" viewBox="0 0 512 512" fill="black" xmlns="http://www.w3.org/2000/svg"><text x="0" y="400" font-size="100">some text</text></svg>'); + background-repeat: no-repeat; + background-size: 100% 100%; + transform: rotatey(89deg) translatez(117.04394px); +} + +</style> +</head> +<body> +<div class='text'> +<div class="thing"></div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/animate-backface-hidden.html b/layout/reftests/transform-3d/animate-backface-hidden.html new file mode 100644 index 0000000000..f52b912f66 --- /dev/null +++ b/layout/reftests/transform-3d/animate-backface-hidden.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html class="reftest-wait reftest-no-flush"> +<title>Testcase, bug 1186061</title> +<style> + +html { overflow: hidden } + +body { padding: 50px } + +@keyframes flip { + 0%, 85% { transform: rotateX(170deg); } + 90%, 100% { transform: rotateX(10deg); } +} + +#test { + background: blue; + height: 200px; width: 200px; + backface-visibility: hidden; + /* use a -99.9s delay to start at 99.9% and then move to 0% */ + animation: flip 100s -99.9s linear 2 paused; +} + +</style> + +<div id="test"> +</div> + +<script> + +document.getElementById("test") + .addEventListener("animationstart", StartListener); + +function StartListener(event) { + var test = document.getElementById("test"); + test.style.animationPlayState = 'running'; + test.addEventListener("animationiteration", IterationListener); +} + +function IterationListener(event) { + setTimeout(RemoveReftestWait, 0); +} + +function RemoveReftestWait() { + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/transform-3d/animate-cube-degrees-ref.html b/layout/reftests/transform-3d/animate-cube-degrees-ref.html new file mode 100644 index 0000000000..bbaa9d0b8b --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-degrees-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + transform: rotateY(-120deg) rotateX(60deg); + transform-style: preserve-3d; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html b/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html new file mode 100644 index 0000000000..aff04d5c9e --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<html reftest-zoom="1.5"> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + transform: rotateY(-120deg) rotateX(60deg); + transform-style: preserve-3d; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-cube-degrees-zoom.html b/layout/reftests/transform-3d/animate-cube-degrees-zoom.html new file mode 100644 index 0000000000..26c989a540 --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-degrees-zoom.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html reftest-zoom="1.5"> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +@keyframes HoldTransform { + from, to { + transform: rotateY(-120deg) rotateX(60deg); + } +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + transform-style: preserve-3d; + animation: 10s HoldTransform infinite; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-cube-degrees.html b/layout/reftests/transform-3d/animate-cube-degrees.html new file mode 100644 index 0000000000..d2d80b5202 --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-degrees.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<html> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +@keyframes HoldTransform { + from, to { + transform: rotateY(-120deg) rotateX(60deg); + } +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + transform-style: preserve-3d; + animation: 10s HoldTransform infinite; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-cube-radians-ref.html b/layout/reftests/transform-3d/animate-cube-radians-ref.html new file mode 100644 index 0000000000..fe15a3729e --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-radians-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + /* approximately rotateY(-120deg) rotateX(60deg); */ + transform: rotateY(-2.0944rad) rotateX(1.0472rad); + transform-style: preserve-3d; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html b/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html new file mode 100644 index 0000000000..01eb930494 --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<html reftest-zoom="1.5"> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + /* approximately rotateY(-120deg) rotateX(60deg); */ + transform: rotateY(-2.0944rad) rotateX(1.0472rad); + transform-style: preserve-3d; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-cube-radians-zoom.html b/layout/reftests/transform-3d/animate-cube-radians-zoom.html new file mode 100644 index 0000000000..b7075f3283 --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-radians-zoom.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html reftest-zoom="1.5"> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +@keyframes HoldTransform { + from, to { + /* approximately rotateY(-120deg) rotateX(60deg); */ + transform: rotateY(-2.0944rad) rotateX(1.0472rad); + } +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + transform-style: preserve-3d; + animation: 10s HoldTransform infinite; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-cube-radians.html b/layout/reftests/transform-3d/animate-cube-radians.html new file mode 100644 index 0000000000..5a8f61ec3d --- /dev/null +++ b/layout/reftests/transform-3d/animate-cube-radians.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<html> +<title>Reftest, bug 1156456</title> +<style> + +html, body { + height: 100%; +} + +body { + background: white; + perspective: 1000px; +} + +div, div::before, div::after { + width: 200px; height: 200px; +} + +@keyframes HoldTransform { + from, to { + /* approximately rotateY(-120deg) rotateX(60deg); */ + transform: rotateY(-2.0944rad) rotateX(1.0472rad); + } +} + +div { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + margin: auto; + transform-origin: 50% 50% 100px; + background: #006; + transform-style: preserve-3d; + animation: 10s HoldTransform infinite; +} + +div::before, div::after { + position: absolute; + top: 0; left: 0; + content: ""; +} + +div::before { + background: #00f; + transform: translate3D(100px, 0, 100px) rotateY(90deg); +} + +div::after { + background: #00c; + transform: translate3D(0, -100px, 100px) rotateX(90deg); +} + +</style> +<div></div> diff --git a/layout/reftests/transform-3d/animate-preserve3d-child.html b/layout/reftests/transform-3d/animate-preserve3d-child.html new file mode 100644 index 0000000000..5ac5f290cf --- /dev/null +++ b/layout/reftests/transform-3d/animate-preserve3d-child.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>Testcase, bug 1176969</title> +<style> + +body { padding: 50px } + +#grandparent { perspective: 400px } + +@keyframes spin { + 0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); } + 90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); } +} + +#parent { + background: blue; + height: 200px; width: 200px; + border: 1px solid black; + transform-style: preserve-3d; + /* use a -99.9s delay to start at 99.9% and then move to 0% */ + animation: spin 100s -99.9s linear 2; +} + +@keyframes noop { + from, to { transform: translateZ(15px) } +} + +#child { + height: 100px; width: 100px; margin: 50px; + background: yellow; + box-shadow: 3px 3px olive; + animation: noop infinite 10s linear; +} + +</style> + +<div id="grandparent"> + <div id="parent"> + <div id="child"> + </div> + </div> +</div> + +<script> + +document.getElementById("parent") + .addEventListener("animationiteration", IterationListener); + +function IterationListener(event) { + setTimeout(RemoveReftestWait, 0); +} + +function RemoveReftestWait() { + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/transform-3d/animate-preserve3d-parent.html b/layout/reftests/transform-3d/animate-preserve3d-parent.html new file mode 100644 index 0000000000..9aa8816d3f --- /dev/null +++ b/layout/reftests/transform-3d/animate-preserve3d-parent.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>Testcase, bug 1176969</title> +<style> + +body { padding: 50px } + +#grandparent { perspective: 400px } + +@keyframes spin { + 0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); } + 90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); } +} + +#parent { + background: blue; + height: 200px; width: 200px; + border: 1px solid black; + transform-style: preserve-3d; + /* use a -99.9s delay to start at 99.9% and then move to 0% */ + animation: spin 100s -99.9s linear 2 paused; +} + +#child { + transform: translateZ(15px); + height: 100px; width: 100px; margin: 50px; + background: yellow; + box-shadow: 3px 3px olive; +} + +</style> + +<div id="grandparent"> + <div id="parent"> + <div id="child"> + </div> + </div> +</div> + +<script> + +document.getElementById("parent").addEventListener("animationstart", StartListener); + +function StartListener(event) { + var test = document.getElementById("parent"); + test.style.animationPlayState = 'running'; + test.addEventListener("animationiteration", IterationListener); +} + +function IterationListener(event) { + setTimeout(RemoveReftestWait, 0); +} + +function RemoveReftestWait() { + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/transform-3d/animate-preserve3d-ref.html b/layout/reftests/transform-3d/animate-preserve3d-ref.html new file mode 100644 index 0000000000..60c560804b --- /dev/null +++ b/layout/reftests/transform-3d/animate-preserve3d-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<html> +<title>Testcase, bug 1176969</title> +<style> + +body { padding: 50px } + +#grandparent { perspective: 400px } + +#parent { + background: blue; + height: 200px; width: 200px; + border: 1px solid black; + transform-style: preserve-3d; + transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); + will-change: transform; +} + +#child { + transform: translateZ(15px); + height: 100px; width: 100px; margin: 50px; + background: yellow; + box-shadow: 3px 3px olive; +} + +</style> + +<div id="grandparent"> + <div id="parent"> + <div id="child"> + </div> + </div> +</div> diff --git a/layout/reftests/transform-3d/backface-visibility-1a.html b/layout/reftests/transform-3d/backface-visibility-1a.html new file mode 100644 index 0000000000..0c1d0a3a64 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: visible; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/backface-visibility-1b.html b/layout/reftests/transform-3d/backface-visibility-1b.html new file mode 100644 index 0000000000..8590a6f600 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: hidden; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/backface-visibility-1c.html b/layout/reftests/transform-3d/backface-visibility-1c.html new file mode 100644 index 0000000000..6129b443e0 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: hidden; width: 100px; height: 100px; display: table"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/backface-visibility-2-ref.html b/layout/reftests/transform-3d/backface-visibility-2-ref.html new file mode 100644 index 0000000000..bc5146dbef --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-2-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<body> + <style> + #container { + position: relative; + margin: 10px auto; + width: 450px; + height: 281px; + z-index: 1; + -moz-perspective: 1000px; + } + #card { + width: 100%; + height: 100%; + -moz-transform-style: preserve-3d; + -moz-transform: rotateY(165deg); + } + .face { + position: absolute; + width: 100%; + height: 100%; + -moz-backface-visibility: hidden; + background: red; + } + .face.back { + display: block; + -moz-transform: rotateY(180deg); + box-sizing: border-box; + padding: 10px; + color: white; + text-align: center; + background: green; + } + </style> + + <div id="container" class="hover"> + <div id="card"> + <div class="back face"> + </div> + </div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/backface-visibility-2.html b/layout/reftests/transform-3d/backface-visibility-2.html new file mode 100644 index 0000000000..d55a8c9b41 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-2.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<body> + <style> + #container { + position: relative; + margin: 10px auto; + width: 450px; + height: 281px; + z-index: 1; + -moz-perspective: 1000px; + } + #card { + width: 100%; + height: 100%; + -moz-transform-style: preserve-3d; + -moz-transform: rotateY(165deg); + } + .face { + position: absolute; + width: 100%; + height: 100%; + -moz-backface-visibility: hidden; + background: red; + } + .face.back { + display: block; + -moz-transform: rotateY(180deg); + box-sizing: border-box; + padding: 10px; + color: white; + text-align: center; + background: green; + } + </style> + + <div id="container" class="hover"> + <div id="card"> + <div class="front face"> + </div> + <div class="back face"> + </div> + </div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/backface-visibility-3-ref.html b/layout/reftests/transform-3d/backface-visibility-3-ref.html new file mode 100644 index 0000000000..b75cb6def5 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-3-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <style type='text/css'> + div { + position: absolute; + display: block; + width: 160px; + height: 160px; + background: red; + top:108px; + left:308px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> + + diff --git a/layout/reftests/transform-3d/backface-visibility-3.html b/layout/reftests/transform-3d/backface-visibility-3.html new file mode 100644 index 0000000000..ec8d648de9 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <style type='text/css'> + body { + overflow: hidden; + } + #test { + transform-origin: 0 0; + transform: scale(2) translateX(100px); + transform-style: preserve-3d; + } + #test div { + position: absolute; + display: block; + width: 80px; + height: 80px; + background: red; + top:50px; + left:50px; + + backface-visibility: hidden; + } + </style> +</head> +<body> + <div id="test"> + <div></div> + </div> +</body> +</html> + + diff --git a/layout/reftests/transform-3d/component-alpha-1-ref.html b/layout/reftests/transform-3d/component-alpha-1-ref.html new file mode 100644 index 0000000000..3ec2905742 --- /dev/null +++ b/layout/reftests/transform-3d/component-alpha-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>red box</title> +<style> + +#wrapper { +} + +#shape { + background-color: red; + + width: 200px; + height: 200px; +} +</style> + +</head> +<body> +<div id="wrapper"> + <div id="shape">foo</div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/component-alpha-1.html b/layout/reftests/transform-3d/component-alpha-1.html new file mode 100644 index 0000000000..3726a4fbca --- /dev/null +++ b/layout/reftests/transform-3d/component-alpha-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>red box</title> +<style> + +#wrapper { + perspective: 0px; +} + +#shape { + background-color: red; + + width: 200px; + height: 200px; + + transform: rotateX(0deg); +} +</style> + +</head> +<body> +<div id="wrapper"> + <div id="shape">foo</div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/green-rect.html b/layout/reftests/transform-3d/green-rect.html new file mode 100644 index 0000000000..4e6d13e951 --- /dev/null +++ b/layout/reftests/transform-3d/green-rect.html @@ -0,0 +1,14 @@ +<html> + <head> + <style type="text/css"> + #parent { + width: 100px; + height: 100px; + background-color: #00FF00; + } + </style> + </head> + <body> + <div id="parent"></div> + </body> +</html> diff --git a/layout/reftests/transform-3d/intermediate-1-ref.html b/layout/reftests/transform-3d/intermediate-1-ref.html new file mode 100644 index 0000000000..53f8045c87 --- /dev/null +++ b/layout/reftests/transform-3d/intermediate-1-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="UTF-8"> +<style type="text/css"> + +div { + position: absolute; + width: 100px; + height: 100px; +} + +.opacity { + opacity: 0.99; +} + +.green { + background-color: green; +} + +.red { + width: 300px; + height: 100px; + background-color: red; +} + +.translate { + transform: translateX(100px); +} + +</style> +</head> + +<body> +<div class="red"></div> +<div class="green"> + <div class="translate opacity green"> + <div class="translate green"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/intermediate-1.html b/layout/reftests/transform-3d/intermediate-1.html new file mode 100644 index 0000000000..cfc822f4b2 --- /dev/null +++ b/layout/reftests/transform-3d/intermediate-1.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="UTF-8"> +<style type="text/css"> + +div { + position: absolute; + width: 100px; + height: 100px; +} + +.opacity { + opacity: 0.99; +} + +.green { + transform-style: preserve-3d; + background-color: green; +} + +.flat { + transform: translateZ(0px); +} + +.red { + width: 300px; + height: 100px; + background-color: red; +} + +.translate { + transform: translateX(100px); +} + +</style> +</head> + +<body> +<div class="red"></div> +<div class="green"> + <div class="flat"> + <div class="translate opacity green"> + <div class="translate green"> </div> + </div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/mask-layer-1.html b/layout/reftests/transform-3d/mask-layer-1.html new file mode 100644 index 0000000000..834ed44633 --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for elements with perspective</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; + perspective: 1000px; +} + +#b { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: translateX(0px); +} +</style> + +<div id="a"> + <div id="b"></div> +</div> diff --git a/layout/reftests/transform-3d/mask-layer-2.html b/layout/reftests/transform-3d/mask-layer-2.html new file mode 100644 index 0000000000..23315e2249 --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for elements with perspective and preserve-3d</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; + perspective: 1000px; +} + +#b { + height: 100%; + transform-style: preserve-3d; + transform: rotateX(90deg); +} + +#c { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: rotateX(90deg); +} +</style> + +<div id="a"> + <div id="b"> + <div id="c"></div> + </div> +</div> diff --git a/layout/reftests/transform-3d/mask-layer-3.html b/layout/reftests/transform-3d/mask-layer-3.html new file mode 100644 index 0000000000..58a04a45ab --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for elements with preserve-3d</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; +} + +#b { + height: 100%; + transform-style: preserve-3d; + transform: rotateX(90deg); +} + +#c { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: rotateX(90deg); +} +</style> + +<div id="a"> + <div id="b"> + <div id="c"></div> + </div> +</div> diff --git a/layout/reftests/transform-3d/mask-layer-ref.html b/layout/reftests/transform-3d/mask-layer-ref.html new file mode 100644 index 0000000000..bc4f963e63 --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for transformed elements</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; +} + +#b { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: translateZ(1px); +} +</style> + +<div id="a"> + <div id="b"></div> +</div> diff --git a/layout/reftests/transform-3d/matrix3d-1-ref.html b/layout/reftests/transform-3d/matrix3d-1-ref.html new file mode 100644 index 0000000000..ef27cb984b --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1,2,3,4,5,6); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/matrix3d-1a.html b/layout/reftests/transform-3d/matrix3d-1a.html new file mode 100644 index 0000000000..38b98b2740 --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix3d(1,2,0,0,3,4,0,0,0,0,1,0,5,6,0,1); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/matrix3d-2-ref.html b/layout/reftests/transform-3d/matrix3d-2-ref.html new file mode 100644 index 0000000000..ac665fb66d --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-2-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate3d(4px,5px,6px) scale3d(1,2,3); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/matrix3d-2a.html b/layout/reftests/transform-3d/matrix3d-2a.html new file mode 100644 index 0000000000..222dd6a82a --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix3d(1,0,0,0,0,2,0,0,0,0,3,0,4,5,6,1); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/nested-transform-1-ref.html b/layout/reftests/transform-3d/nested-transform-1-ref.html new file mode 100644 index 0000000000..294ef4bd8b --- /dev/null +++ b/layout/reftests/transform-3d/nested-transform-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title></title> + +<style type="text/css"> +div { + position: absolute; + margin: 0 0; +} +</style> +</head> + +<body> +<div style="left: 58px;"> + <div style="width: 100px; height: 100px; background-color: red;"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/nested-transform-1.html b/layout/reftests/transform-3d/nested-transform-1.html new file mode 100644 index 0000000000..f0264a4e00 --- /dev/null +++ b/layout/reftests/transform-3d/nested-transform-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title></title> + +<style type="text/css"> +div { + position: absolute; + margin: 0 0; +} +</style> +</head> + +<body> +<div style="transform-style: preserve-3d;"> + <div style="left: 50px; transform-style: flat;"> + <div style="transform: rotateX(0.1deg); transform-style: flat;"> + <div style="transform: rotateX(0.1deg); width: 100px; height: 100px; background-color: red;"></div> + </div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html new file mode 100644 index 0000000000..8a42fa3c98 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 60px; + } + .second { + transform: translateZ(5px); + background-color: green; + top: 40px; + } + .third { + transform: translateZ(-5px); + background-color: yellow; + top: 20px; + } + .fourth { + transform: translateZ(-10px); + background-color: red; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="leaf first"></div> + <div style="opacity:0.5"> + <div class="leaf second"></div> + <div class="leaf fourth"></div> + </div> + <div class="leaf third"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1.html b/layout/reftests/transform-3d/opacity-preserve3d-1.html new file mode 100644 index 0000000000..b73be49238 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 60px; + } + .second { + transform: translateZ(5px); + background-color: green; + top: 40px; + } + .third { + transform: translateZ(-5px); + background-color: yellow; + top: 20px; + } + .fourth { + transform: translateZ(-10px); + background-color: red; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="leaf first"></div> + <div class="preserve" style="opacity:0.5"> + <div class="leaf second"></div> + <div class="leaf fourth"></div> + </div> + <div class="leaf third"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html new file mode 100644 index 0000000000..80336b5cf5 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 50px; + } + .second { + transform: translateZ(5px); + background-color: green; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div style="opacity:0.5; transform:translateX(0px)"> + <div class="leaf first"></div> + <div class="leaf second"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2.html b/layout/reftests/transform-3d/opacity-preserve3d-2.html new file mode 100644 index 0000000000..a04b998291 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 50px; + } + .second { + transform: translateZ(5px); + background-color: green; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve" style="opacity:0.5"> + <div class="leaf first"></div> + <div class="leaf second"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html new file mode 100644 index 0000000000..ffacd8277b --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .third { + top: 80px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div style="opacity:0.5; transform:translateX(0px)"> + <div class="leaf first"></div> + <div class="leaf second"></div> + <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3.html b/layout/reftests/transform-3d/opacity-preserve3d-3.html new file mode 100644 index 0000000000..f7bbf2da88 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-3.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .third { + top: 80px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="preserve" style="opacity:0.5"> + <div class="leaf first"></div> + <div class="leaf second"></div> + <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html new file mode 100644 index 0000000000..9fe799b61a --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div style="opacity:0.5"> + <div class="leaf first"></div> + <canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4.html b/layout/reftests/transform-3d/opacity-preserve3d-4.html new file mode 100644 index 0000000000..9fd6728644 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-4.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="preserve" style="opacity:0.5"> + <div class="leaf first"></div> + <canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html new file mode 100644 index 0000000000..ab64e1e9da --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<style> + .outer { + transform-style: preserve-3d; + width: 200px; + height: 200px; + opacity: 0.7; + } + .inner { + top: 50%; + transform: translateY(-50%); + background-color: green; + position:relative; + width: 200px; + height: 200px; + } +</style> +</head> +<body> + +<div id="outer" class="outer"> + <div class="inner"> + </div> +</div> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5.html b/layout/reftests/transform-3d/opacity-preserve3d-5.html new file mode 100644 index 0000000000..37808dd581 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-5.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<style> + .outer { + transform-style: preserve-3d; + width: 200px; + height: 200px; + } + .inner { + top: 50%; + transform: translateY(-50%); + background-color: green; + position:relative; + width: 200px; + height: 200px; + } +</style> +</head> +<body> + +<div id="outer" class="outer"> + <div class="inner"> + </div> +</div> +<script> + function doTest() { + document.getElementById("outer").style.opacity = 0.7; + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/overflow-hidden-1-ref.html b/layout/reftests/transform-3d/overflow-hidden-1-ref.html new file mode 100644 index 0000000000..f78592e8db --- /dev/null +++ b/layout/reftests/transform-3d/overflow-hidden-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><head> +<style type="text/css"> + .stage{ + -moz-perspective: 700px; + overflow: hidden; + width: 260px; + height: 260px; + display: block; + } + + .box { + width: 170px; + height: 170px; + background-color: red; + display: block; + -moz-transform: rotate3d(0,1,0, 50deg) translatey(20px); + } + + </style> +</head> + +<body id="body"> + <div class="stage"> + <div class="box"></div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/overflow-hidden-1a.html b/layout/reftests/transform-3d/overflow-hidden-1a.html new file mode 100644 index 0000000000..f78592e8db --- /dev/null +++ b/layout/reftests/transform-3d/overflow-hidden-1a.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><head> +<style type="text/css"> + .stage{ + -moz-perspective: 700px; + overflow: hidden; + width: 260px; + height: 260px; + display: block; + } + + .box { + width: 170px; + height: 170px; + background-color: red; + display: block; + -moz-transform: rotate3d(0,1,0, 50deg) translatey(20px); + } + + </style> +</head> + +<body id="body"> + <div class="stage"> + <div class="box"></div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/perspective-clipping-1-ref.html b/layout/reftests/transform-3d/perspective-clipping-1-ref.html new file mode 100644 index 0000000000..78411f4cbc --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>#inner should not be clipped</title> + +<style> + +body { + margin: 0; + background: lime; +} + +</style> diff --git a/layout/reftests/transform-3d/perspective-clipping-1.html b/layout/reftests/transform-3d/perspective-clipping-1.html new file mode 100644 index 0000000000..90ffcf528a --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-1.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>#inner should not be clipped</title> + +<style> + +body { + margin: 0; + background: red; +} + +#perspective { + perspective: 300px; + perspective-origin: top left; +} + +#inner { + height: 100vh; + transform-origin: top left; + transform: translateZ(-300px) scale(2); + z-index: 2; + background: lime; + border: 1px solid lime; + box-sizing: border-box; +} + +</style> + +<div id="perspective"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/transform-3d/perspective-clipping-2-ref.html b/layout/reftests/transform-3d/perspective-clipping-2-ref.html new file mode 100644 index 0000000000..026b95bdd0 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:100px; height:200px; background-color:green"></div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-clipping-2.html b/layout/reftests/transform-3d/perspective-clipping-2.html new file mode 100644 index 0000000000..466b52c3a1 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-2.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:100px; height:100px; background-color:green"></div> + <div style="width:100px; height:100px; overflow:hidden"> + <div style="transform: translateY(-100px) perspective(1px); will-change:transform"> + <div style="background-color:red; width:100px; height:100px"></div> + <div style="background-color:green; width:100px; height:100px"></div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-1a.html b/layout/reftests/transform-3d/perspective-origin-1a.html new file mode 100644 index 0000000000..c918e05baf --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-1a.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="-moz-perspective: 1000px; -moz-perspective-origin: 0 0;"> + <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-1b.html b/layout/reftests/transform-3d/perspective-origin-1b.html new file mode 100644 index 0000000000..ee934dec13 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-1b.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="-moz-perspective: 1000px; -moz-perspective-origin: top left;"> + <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-2-ref.html b/layout/reftests/transform-3d/perspective-origin-2-ref.html new file mode 100644 index 0000000000..7c9e0d58ae --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-2-ref.html @@ -0,0 +1,31 @@ +<html> +</head> +<style type="text/css"> + .stage{ + -moz-perspective: 100px; + -moz-perspective-origin: 30px 30px; + height:100px; + width:100px; + margin:5px; + padding:5px; + border:5px solid gray; + } + + .box { + -moz-transform:rotateX(45deg); + height:70px; + width:70px; + background:green; + margin:5px; + padding:5px; + border:5px solid black; + } + + </style> +</head> +<body> + <div class="stage"> + <div class="box"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-2a.html b/layout/reftests/transform-3d/perspective-origin-2a.html new file mode 100644 index 0000000000..ff80938167 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-2a.html @@ -0,0 +1,31 @@ +<html> +</head> +<style type="text/css"> + .stage{ + -moz-perspective: 100px; + -moz-perspective-origin: 25% 25%; + height:100px; + width:100px; + margin:5px; + padding:5px; + border:5px solid gray; + } + + .box { + -moz-transform:rotateX(45deg); + height:70px; + width:70px; + background:green; + margin:5px; + padding:5px; + border:5px solid black; + } + + </style> +</head> +<body> + <div class="stage"> + <div class="box"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-3-ref.html b/layout/reftests/transform-3d/perspective-origin-3-ref.html new file mode 100644 index 0000000000..8271d2d3e4 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-3-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <style type="text/css"> + +.parentWithPerspective { + -moz-perspective: 100px; + -moz-perspective-origin: 150px 150px; + -webkit-perspective: 100px; + -webkit-perspective-origin: 150px 150px; + /* Changing width/height to 500px should not change the rendering. */ + height:100%; +} + +.parentWithPerspective > div { + position:absolute; + top:100px; + left:100px; + width:100px; + height:100px; +} + +.notTransformed { + outline: 1px solid black; +} + +.transformed { + background:blue; + -moz-transform-origin: 0% 0%; + -moz-transform: rotateY(45deg); + -webkit-transform-origin: 0% 0%; + -webkit-transform: rotateY(45deg); +} + + </style> + <body> + <div class="parentWithPerspective"> + <div class="notTransformed"></div> + <div class="transformed"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-3a.html b/layout/reftests/transform-3d/perspective-origin-3a.html new file mode 100644 index 0000000000..345db2c7f1 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-3a.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <style type="text/css"> + +.parentWithPerspective { + -moz-perspective: 100px; + -moz-perspective-origin: 150px 150px; + -webkit-perspective: 100px; + -webkit-perspective-origin: 150px 150px; + /* Changing width/height to 500px should not change the rendering. */ + height:500px; +} + +.parentWithPerspective > div { + position:absolute; + top:100px; + left:100px; + width:100px; + height:100px; +} + +.notTransformed { + outline: 1px solid black; +} + +.transformed { + background:blue; + -moz-transform-origin: 0% 0%; + -moz-transform: rotateY(45deg); + -webkit-transform-origin: 0% 0%; + -webkit-transform: rotateY(45deg); +} + + </style> + <body> + <div class="parentWithPerspective"> + <div class="notTransformed"></div> + <div class="transformed"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-4-ref.html b/layout/reftests/transform-3d/perspective-origin-4-ref.html new file mode 100644 index 0000000000..087e572b79 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-4-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Testcase for bug 770629</title> + <style> + +div { + position: absolute; + left: 125px; + width: 50px; + height: 100px; + background: blue; +} + + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-4a.html b/layout/reftests/transform-3d/perspective-origin-4a.html new file mode 100644 index 0000000000..800756ebb1 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-4a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Testcase for bug 770629</title> + <style> + +.outer { + position: absolute; + left: 100px; + -moz-transform: scale(0.5,1); + -moz-perspective: 200px; + -moz-perspective-origin: 50% 0px; +} + +.inner { + width: 100px; + height: 100px; + background: blue; + -moz-transform: rotateY(0deg); +} + + </style> +</head> +<body> + <div class="outer"> + <div class="inner"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-overflow-1-ref.html b/layout/reftests/transform-3d/perspective-overflow-1-ref.html new file mode 100644 index 0000000000..424a7993bb --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>Testcase for bug 1483659</title> +<style> + +#container { + position: absolute; + top: 400px; + left: 200px; + perspective: 100px; +} + +#content { + width: 300px; + height: 300px; + background-color: green; + transform: rotateY(60deg); +} +</style> +</head> +<body> +<div id="container"> + <div id="content"></div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-overflow-1.html b/layout/reftests/transform-3d/perspective-overflow-1.html new file mode 100644 index 0000000000..178e3d2e28 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Use reftest-snapshot-all as a workaround for bug 1485705 --> +<html class="reftest-wait reftest-snapshot-all"> +<head> +<meta charset="UTF-8"> +<title>Testcase for bug 1483659</title> +<style> +#container { + position: absolute; + top: 400px; + left: 200px; + perspective: 100px; +} + +#content { + width: 300px; + height: 300px; + background-color: green; +} +</style> +</head> +<body> +<div id="container"> + <div id="content"></div> +</div> +<script> +function doTest() { + var e = document.getElementById("content"); + e.style.transform = "rotateY(60deg)"; + + document.documentElement.classList.remove("reftest-wait"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-overflow-2-ref.html b/layout/reftests/transform-3d/perspective-overflow-2-ref.html new file mode 100644 index 0000000000..45116d2195 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Transform Overflow Bug</title>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ scrollbar-width: none;
+ perspective: 1px;
+ }
+
+ .inner {
+ background-color: red;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <p class="inner"></p>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-2.html b/layout/reftests/transform-3d/perspective-overflow-2.html new file mode 100644 index 0000000000..f4eefe1572 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-2.html @@ -0,0 +1,30 @@ +<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Transform Overflow Bug</title>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ scrollbar-width: none;
+ perspective: 1px;
+ }
+
+ .inner {
+ will-change: transform;
+ background-color: red;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <p class="inner"></p>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-zindex-2.html b/layout/reftests/transform-3d/perspective-zindex-2.html new file mode 100644 index 0000000000..92b884ab26 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-zindex-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>z-index should work correctly for elements with perspective</title> + +<style> + +#perspective { + z-index: 2; + position: relative; + perspective: 300px; + perspective-origin: top left; +} + +#front { + width: 100px; + height: 100px; + background-color: #00FF00; + transform: translateX(0px); +} + +#back { + z-index: 1; + width: 100px; + height: 100px; + background-color: #FF0000; + transform: translateY(-100px); + position: relative; +} + +</style> + +<div id="perspective"> + <div id="front"></div> +</div> +<div id="back"></div> diff --git a/layout/reftests/transform-3d/perspective-zindex.html b/layout/reftests/transform-3d/perspective-zindex.html new file mode 100644 index 0000000000..877f50898a --- /dev/null +++ b/layout/reftests/transform-3d/perspective-zindex.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>z-index should work correctly for elements with perspective</title> + +<style> + +#perspective { + perspective: 300px; + perspective-origin: top left; +} + +#front { + z-index: 2; + width: 100px; + height: 100px; + background-color: #00FF00; + transform: translateX(0px); + position: relative; +} + +#back { + z-index: 1; + width: 100px; + height: 100px; + background-color: #FF0000; + transform: translateY(-100px); + position: relative; +} + +</style> + +<div id="perspective"> + <div id="front"></div> + <div id="back"></div> +</div> diff --git a/layout/reftests/transform-3d/preserve3d-1-ref.html b/layout/reftests/transform-3d/preserve3d-1-ref.html new file mode 100644 index 0000000000..9d7bf6434d --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(180deg); width: 100px; height: 100px; background-color: white;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-1a.html b/layout/reftests/transform-3d/preserve3d-1a.html new file mode 100644 index 0000000000..005ec797a7 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-1a.html @@ -0,0 +1,15 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;"> + <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;"> + <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;"> + <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px; background-color: white;"> + Test Text + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-1b.html b/layout/reftests/transform-3d/preserve3d-1b.html new file mode 100644 index 0000000000..ef535fcce6 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-1b.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(90deg);"> + <div style="-moz-transform: rotatex(90deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2-ref.html b/layout/reftests/transform-3d/preserve3d-2-ref.html new file mode 100644 index 0000000000..1a396bcc80 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2-ref.html @@ -0,0 +1,27 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + -moz-transform-style: preserve-3d; + } + #parent { + -moz-transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatex(0px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2a.html b/layout/reftests/transform-3d/preserve3d-2a.html new file mode 100644 index 0000000000..3bdd7ab8d2 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2a.html @@ -0,0 +1,28 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + -moz-transform-style: preserve-3d; + margin-left: 200px + } + #parent { + -moz-transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatex(-200px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2b.html b/layout/reftests/transform-3d/preserve3d-2b.html new file mode 100644 index 0000000000..36d1827dee --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2b.html @@ -0,0 +1,28 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + -moz-transform-style: preserve-3d; + } + #parent { + -moz-transform-style: preserve-3d; + margin-left: 200px + } + + #child { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatex(-200px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2c.html b/layout/reftests/transform-3d/preserve3d-2c.html new file mode 100644 index 0000000000..cc8ff8a0a4 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2c.html @@ -0,0 +1,28 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + -moz-transform-style: preserve-3d; + } + #parent { + -moz-transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatex(-200px); + margin-left: 200px + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2d.html b/layout/reftests/transform-3d/preserve3d-2d.html new file mode 100644 index 0000000000..6cfe1e3bde --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2d.html @@ -0,0 +1,30 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + width: 100px; + height: 100px; + -moz-transform-style: preserve-3d; + -moz-transform: translatex(200%); + } + #parent { + -moz-transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatex(-200px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-3-ref.html b/layout/reftests/transform-3d/preserve3d-3-ref.html new file mode 100644 index 0000000000..2590d9df31 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-3-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px; background:red;"> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-3a.html b/layout/reftests/transform-3d/preserve3d-3a.html new file mode 100644 index 0000000000..a28f814e9e --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-3a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px; height: 100px; background:red;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-4a.html b/layout/reftests/transform-3d/preserve3d-4a.html new file mode 100644 index 0000000000..0bf0cbe4c7 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-4a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(90deg); -moz-transform-style: preserve-3d; opacity: 0.9999;"> + <div style="-moz-transform: rotatex(90deg); width: 100px; height: 100px; background-color: #00FF00"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-5-ref.html b/layout/reftests/transform-3d/preserve3d-5-ref.html new file mode 100644 index 0000000000..2bdd5c539f --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-5-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<div style="width: 100px; height: 100px; background: lime; +border-style: solid; border-width: 0 2px 2px 0"></div> diff --git a/layout/reftests/transform-3d/preserve3d-5a.html b/layout/reftests/transform-3d/preserve3d-5a.html new file mode 100644 index 0000000000..03e9e7ed0d --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-5a.html @@ -0,0 +1,10 @@ +<!doctype html> +<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;"> + <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;"> + <div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;"> + <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px; + background: lime; border-style: solid; border-width: 2px 2px 0 0"> + </div> + </div> + </div> +</div> diff --git a/layout/reftests/transform-3d/preserve3d-6-ref.html b/layout/reftests/transform-3d/preserve3d-6-ref.html new file mode 100644 index 0000000000..f24abbe730 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-6-ref.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="perspective:100px;"> + <div style="transform-style: preserve-3d"> + <div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);"> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-6a.html b/layout/reftests/transform-3d/preserve3d-6a.html new file mode 100644 index 0000000000..0b604ba5d5 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-6a.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="perspective:100px; transform-style: preserve-3d;"> + <div style="transform-style: preserve-3d"> + <div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);"> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-7-ref.html b/layout/reftests/transform-3d/preserve3d-7-ref.html new file mode 100644 index 0000000000..cb17ddba5a --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-7-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="opacity:0.5"> + <div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px;"> + <div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-7a.html b/layout/reftests/transform-3d/preserve3d-7a.html new file mode 100644 index 0000000000..d962d4fd4f --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-7a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px; opacity:0.5"> + <div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-8-ref.html b/layout/reftests/transform-3d/preserve3d-8-ref.html new file mode 100644 index 0000000000..afddf05d4d --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-8-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body style="width:100px"> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(180deg)"> + <g> + <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-8.html b/layout/reftests/transform-3d/preserve3d-8.html new file mode 100644 index 0000000000..76e9c10c33 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-8.html @@ -0,0 +1,17 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(45deg)"> + <g> + <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect> + </g> + </svg> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-clipped.html b/layout/reftests/transform-3d/preserve3d-clipped.html new file mode 100644 index 0000000000..4647fd56d6 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-clipped.html @@ -0,0 +1,10 @@ +<html>
+ <body>
+ <div style="-moz-transform-style: preserve-3d; -moz-transform:rotatex(90deg); overflow:hidden;">
+ <div style="-moz-transform:rotatex(90deg)">
+ x
+ </div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/transform-3d/preserve3d-scale-ref.html b/layout/reftests/transform-3d/preserve3d-scale-ref.html new file mode 100644 index 0000000000..243e88fdda --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-scale-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- This was just "drawn by hand" well after the original test landed to look + like the proper rendering of the test file without any transforms or + preserve3d. It's not identical, but a fuzzy match should be a good test + considering the original test just checked that it wasn't rendering blank +--> +<html> + <style> + div { + position: absolute; + top: 0; + left: 0; + } + </style> +</head> +<body> + <div> + <svg width="600px" height="600px"> + + <polygon fill="#DAD6CC" points="57, 51 114, 84 66, 124 10, 91"/> + <ellipse fill="#F8F1E5" cx="62" cy="88" rx="27" ry="19"/> + + <polygon fill="#DAD6CC" points="57, -1 114, 32 66, 72 10, 39"/> + <ellipse fill="#F8F1E5" cx="62" cy="36" rx="27" ry="19"/> + + </svg> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/preserve3d-scale.html b/layout/reftests/transform-3d/preserve3d-scale.html new file mode 100644 index 0000000000..5a3694fa1a --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-scale.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <style> + svg{ + display: block; + margin: auto; + -webkit-transform-origin: top center; + -webkit-transform: scale(1.5); + } + #cube{ + position: absolute; + left: 25px; + top: 25px; + width: 74px; + height: 74px; + backface-visibility: visible; + -webkit-transform-style: preserve-3d; + -webkit-transform-origin: center center; + -webkit-backface-visibility: visible; + -webkit-transform: rotateX(-45deg) rotateY(50deg); + -webkit-transition: -webkit-transform 1s; + } + + .side{ + position: absolute; + top: 0; + left: 0; + width: 74px; + height: 74px; + backface-visibility: visible; + -webkit-transform-origin: center center; + -webkit-backface-visibility: visible; + } + + #cube .side:nth-child(1) { + -webkit-transform: translateY(37px) rotateX(90deg); + -moz-transform: translateY(37px) rotateX(90deg); + } + + #cube .side:nth-child(2) { + -webkit-transform: translateY(-37px) rotateX(-90deg); + -moz-transform: translateY(-37px) rotateX(-90deg); + + } + </style> +</head> +<body> + <div id="cube"> + <svg class="side" width="100px" height="100px"> + <rect fill="#DAD6CC" width="74" height="74"></rect> + <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle> + <g> + </g> + </svg> + <svg class="side" width="100px" height="100px"> + <rect fill="#DAD6CC" width="74" height="74"></rect> + <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle> + <g> + </g> + </svg> + + </div> +</body></html> diff --git a/layout/reftests/transform-3d/preserve3d-table-ref.html b/layout/reftests/transform-3d/preserve3d-table-ref.html new file mode 100644 index 0000000000..94b660b747 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-table-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<table> + <tbody> + <tr><td>RISK-184</td></tr> + </tbody> +</table> + diff --git a/layout/reftests/transform-3d/preserve3d-table.html b/layout/reftests/transform-3d/preserve3d-table.html new file mode 100644 index 0000000000..b4b0a78df5 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-table.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<table style="transform-style: preserve-3d"> + <tbody style="transform: translate3d(0, 0, 0)"> + <tr><td>RISK-184</td></tr> + </tbody> +</table> + diff --git a/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html new file mode 100644 index 0000000000..964b11e0e6 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<style> + .transform { + will-change: transform; + transform-style: preserve-3d; + } +</style> +<body> + <div class="transform"> + <div>TEST PAGE</div> + <div style="text-indent: -9999em">TEST PAGE</div> + </div> +</body> diff --git a/layout/reftests/transform-3d/preserve3d-will-change-ref.html b/layout/reftests/transform-3d/preserve3d-will-change-ref.html new file mode 100644 index 0000000000..4ee913bd22 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-will-change-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<body> + <div style="transform-style: preserve-3d"> + <div>TEST PAGE</div> + </div> +</body> diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html new file mode 100644 index 0000000000..836525d876 --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>Green square</title> +<style> +.filter { + filter: brightness(0.75); +} + +.container { + width: 200px; + height: 200px; + + background-color: green; +} + +.square { + position: absolute; + + width: 200px; + height: 200px; + + background-color: green; +} +</style> +</head> +<body> + +<div class="filter"> + <div class="container"> + <div class="square"></div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html new file mode 100644 index 0000000000..d25df6169c --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Green square</title> +<style> +.filter { + filter: brightness(0.75); +} + +.container { + width: 200px; + height: 200px; + + transform-style: preserve-3d; + background-color: red; +} + +.square { + position: absolute; + + width: 200px; + height: 200px; + + transform-style: preserve-3d; + background-color: green; +} +</style> +</head> +<body> + +<div class="filter"> + <div class="container"> + <div class="square"></div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/preserves3d-nested-ref.html b/layout/reftests/transform-3d/preserves3d-nested-ref.html new file mode 100644 index 0000000000..b8a744eb76 --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<title>preserve-3d consequence nested context</title> +<style> +.rect { + width: 100px; + height: 100px; +} + +#outeri { + transform-style: preserve-3d; + transform: rotateX(45deg); +} + +#rect1 { + background-color: green; +} + +#rect2 { + transform: translate(50px, 50px); + background-color: pink; +} + +#inneri { + transform: rotateX(45deg); +} + +#rect3 { + background-color: red; +} + +</style> +<body> + <div id="outer"> + <div id="outeri"> + <div id="rect1" class="rect"></div> + <div id="rect2" class="rect"></div> + <div id="inner"> + <div id="inneri"> + <div id="rect3" class="rect"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/layout/reftests/transform-3d/preserves3d-nested.html b/layout/reftests/transform-3d/preserves3d-nested.html new file mode 100644 index 0000000000..673a982e99 --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<title>preserve-3d consequence nested context</title> +<style> +.rect { + width: 100px; + height: 100px; + background-color: green; +} + +#outeri { + transform-style: preserve-3d; + transform: rotateX(45deg); +} + +#inner { + transform: rotateX(0deg); +} + +#inneri { + transform-style: preserve-3d; + transform: rotateX(45deg); +} + +#rect2 { + transform: translate(50px, 50px); + background-color: pink; +} + +#rect3 { + background-color: red; +} + +</style> +<body> + <div id="outer"> + <div id="outeri"> + <div id="rect1" class="rect"></div> + <div id="rect2" class="rect"></div> + <div id="inner"> + <div id="inneri"> + <div id="rect3" class="rect"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/layout/reftests/transform-3d/reftest.list b/layout/reftests/transform-3d/reftest.list new file mode 100644 index 0000000000..4eea36e102 --- /dev/null +++ b/layout/reftests/transform-3d/reftest.list @@ -0,0 +1,102 @@ +== scalez-1a.html scalez-1-ref.html +fuzzy(0-1,0-6) == rotatey-1a.html rotatey-1-ref.html +== rotatex-1a.html rotatex-1-ref.html +# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg) +== scalezrotatex-1.html scalezrotatex-1-ref.html +# Check that the perspectve() transform function results in some visual changes +!= rotatex-perspective-1a.html rotatex-1-ref.html +# Check that -moz-perspective results in visual changes to child transformed elements +!= rotatex-perspective-1b.html rotatex-1-ref.html +# -moz-perspective should only apply to child elements +== rotatex-perspective-1c.html rotatex-1-ref.html +== rotatex-perspective-3a.html rotatex-perspective-3-ref.html +== scalez-1a.html scalez-1-ref.html +fuzzy(0-16,0-346) fuzzy-if(cocoaWidget,0-200,0-310) fuzzy-if(winWidget,0-175,0-250) == preserve3d-1a.html preserve3d-1-ref.html +== preserve3d-1b.html about:blank +== preserve3d-clipped.html about:blank +== preserve3d-2a.html preserve3d-2-ref.html +== preserve3d-2b.html preserve3d-2-ref.html +== preserve3d-2c.html preserve3d-2-ref.html +== preserve3d-2d.html preserve3d-2-ref.html +== preserve3d-3a.html preserve3d-3-ref.html +== preserve3d-4a.html about:blank +fuzzy(0-16,0-100) == preserve3d-5a.html preserve3d-5-ref.html +== preserve3d-6a.html preserve3d-6-ref.html +== preserve3d-table.html preserve3d-table-ref.html +== scale3d-z.html scalez-1-ref.html +fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == scale3d-all.html scale3d-1-ref.html # subpixel AA +fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == scale3d-all-separate.html scale3d-1-ref.html # subpixel AA +== scale3d-xz.html scale3d-1-ref.html +== translatez-1a.html translatez-1-ref.html +!= translatez-1b.html translatez-1-ref.html +== translate3d-1a.html translate3d-1-ref.html +fuzzy(0-1,0-4) == matrix3d-1a.html matrix3d-1-ref.html +== matrix3d-2a.html matrix3d-2-ref.html +== rotate3d-1a.html rotatex-1-ref.html +== 1467277-1.html rotatex-1-ref.html +fuzzy(0-1,0-6) == rotate3d-2a.html rotatey-1-ref.html +!= backface-visibility-1a.html about:blank +== backface-visibility-1b.html about:blank +== backface-visibility-1c.html about:blank +fuzzy-if(winWidget&&!layersGPUAccelerated,0-1,0-251) fuzzy-if(useDrawSnapshot,64-64,1438-1438) == backface-visibility-2.html backface-visibility-2-ref.html +== backface-visibility-3.html backface-visibility-3-ref.html +== perspective-clipping-1.html perspective-clipping-1-ref.html +== perspective-clipping-2.html perspective-clipping-2-ref.html +!= perspective-origin-1a.html rotatex-perspective-1a.html +fuzzy(0-1,0-3) == perspective-origin-1b.html perspective-origin-1a.html +fuzzy(0-3,0-99) random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2-ref.html # subpixel AA, bug 732568 +fuzzy-if(winWidget&&!layersGPUAccelerated,0-1,0-61) == perspective-origin-3a.html perspective-origin-3-ref.html +== perspective-origin-4a.html perspective-origin-4-ref.html +== perspective-zindex.html green-rect.html +== perspective-zindex-2.html green-rect.html +!= sorting-1a.html sorting-1-ref.html +# Parallel planes, different z depth +== sorting-2a.html sorting-2-ref.html +# Parallel planes, same z depth (shouldn't be sorted!) +== sorting-2b.html sorting-2-ref.html +== sorting-3a.html green-rect.html +# Different, but equivalent (for the given transform) transform origins +fuzzy(0-1,0-4) == rotatex-transformorigin-1a.html rotatex-transformorigin-1-ref.html +fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),0-1,0-86) == overflow-hidden-1a.html overflow-hidden-1-ref.html +== transform-style-flat-1a.html transform-style-flat-1-ref.html +== willchange-containing-block.html?willchange willchange-containing-block.html?ref +!= willchange-containing-block.html?willchange willchange-containing-block.html?noblock +fuzzy(0-3,0-304) == scroll-perspective-1.html scroll-perspective-1-ref.html +# Bugs +fails-if(!layersGPUAccelerated) fails-if(useDrawSnapshot) fuzzy-if(!useDrawSnapshot,0-60,0-826) == 1035611-1.html 1035611-1-ref.html # Bug 1072898 for !layersGPUAccelerated failures +!= 1157984-1.html about:blank # Bug 1157984 +fuzzy(0-220,0-660) == animate-cube-radians.html animate-cube-radians-ref.html # subpixel AA +fuzzy(0-240,0-400) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,0-16,0-6) == animate-cube-radians-zoom.html animate-cube-radians-zoom-ref.html +!= animate-cube-radians-ref.html animate-cube-radians-zoom-ref.html +fuzzy(0-240,0-660) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA +fuzzy(0-240,0-400) fails-if(useDrawSnapshot) == animate-cube-degrees-zoom.html animate-cube-degrees-zoom-ref.html +!= animate-cube-degrees-ref.html animate-cube-degrees-zoom-ref.html +fuzzy-if(gtkWidget,0-128,0-100) fuzzy-if(Android||(gtkWidget&&layersGPUAccelerated),0-143,0-100) fuzzy-if(winWidget||OSX,0-141,0-100) == preserves3d-nested.html preserves3d-nested-ref.html +fuzzy(0-255,0-153) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac +fuzzy(0-255,0-153) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac, bug 1461311 for Android +== animate-backface-hidden.html about:blank +== 1245450-1.html green-rect.html +fuzzy(0-1,0-2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html +fuzzy(0-1,0-15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html +fuzzy(0-1,0-10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html +fuzzy(0-1,0-10000) == opacity-preserve3d-4.html opacity-preserve3d-4-ref.html +== opacity-preserve3d-5.html opacity-preserve3d-5-ref.html +== snap-perspective-1.html snap-perspective-1-ref.html +fuzzy(0-120,0-590) == mask-layer-1.html mask-layer-ref.html +fuzzy(0-120,0-590) == mask-layer-2.html mask-layer-ref.html +fuzzy(0-120,0-590) == mask-layer-3.html mask-layer-ref.html +== split-intersect1.html split-intersect1-ref.html +fuzzy(0-255,0-150) fails-if(useDrawSnapshot) == split-intersect2.html split-intersect2-ref.html +fuzzy(0-255,0-100) fails-if(useDrawSnapshot) == split-non-ortho1.html split-non-ortho1-ref.html +fuzzy-if(winWidget,0-150,0-120) == component-alpha-1.html component-alpha-1-ref.html +== nested-transform-1.html nested-transform-1-ref.html +fuzzy-if(winWidget,0-4,0-51) == transform-geometry-1.html transform-geometry-1-ref.html +== intermediate-1.html intermediate-1-ref.html +== preserves3d-nested-filter-1.html preserves3d-nested-filter-1-ref.html +!= preserve3d-scale.html about:blank +fuzzy(0-52,0-1600) == preserve3d-scale.html preserve3d-scale-ref.html +fuzzy(0-50,0-22) == perspective-overflow-1.html perspective-overflow-1-ref.html +== perspective-overflow-2.html perspective-overflow-2-ref.html +== 1544995-1.html 1544995-1-ref.html +== preserve3d-will-change-large-frame.html preserve3d-will-change-ref.html +fuzzy(0-6,0-3117) fuzzy-if(useDrawSnapshot,4-4,13-13) == 1637067-1.html 1637067-1-ref.html diff --git a/layout/reftests/transform-3d/rotate3d-1a.html b/layout/reftests/transform-3d/rotate3d-1a.html new file mode 100644 index 0000000000..ba2d222e46 --- /dev/null +++ b/layout/reftests/transform-3d/rotate3d-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate3d(1, 0, 0, 45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotate3d-2a.html b/layout/reftests/transform-3d/rotate3d-2a.html new file mode 100644 index 0000000000..edf3c1be4b --- /dev/null +++ b/layout/reftests/transform-3d/rotate3d-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate3d(0, 1, 0, 45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-1-ref.html b/layout/reftests/transform-3d/rotatex-1-ref.html new file mode 100644 index 0000000000..0ee28cfe80 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-1a.html b/layout/reftests/transform-3d/rotatex-1a.html new file mode 100644 index 0000000000..f0c6b01838 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg) rotatey(360deg) rotatex(360deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-1a.html b/layout/reftests/transform-3d/rotatex-perspective-1a.html new file mode 100644 index 0000000000..0b8671e7a0 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-1b.html b/layout/reftests/transform-3d/rotatex-perspective-1b.html new file mode 100644 index 0000000000..d8be199534 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-1b.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="-moz-perspective: 1000px;"> + <div style="-moz-transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-1c.html b/layout/reftests/transform-3d/rotatex-perspective-1c.html new file mode 100644 index 0000000000..9cae306962 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg); -moz-perspective: 1000px; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-3-ref.html b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html new file mode 100644 index 0000000000..c0691b77f8 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html @@ -0,0 +1,33 @@ +<html> +<head> + <style type="text/css"> + #container { + position: relative; + height: 300px; + width: 300px; + margin: 50px 100px; + border: 2px solid blue; + + -moz-perspective: 500px; + } + + #parent { + margin: 10px; + width: 280px; + height: 280px; + background-color: #844BCA; + + -moz-transform: rotateY(40deg); + } + + </style> +</head> +<body> + + <div id="container"> + <div id="parent"> + </div> + </div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-3a.html b/layout/reftests/transform-3d/rotatex-perspective-3a.html new file mode 100644 index 0000000000..593ca82bb3 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-3a.html @@ -0,0 +1,34 @@ +<html> +<head> + <style type="text/css"> + #container { + position: relative; + height: 300px; + width: 300px; + margin: 50px 100px; + border: 2px solid blue; + + -moz-perspective: 500px; + opacity: 0.9999; + } + + #parent { + margin: 10px; + width: 280px; + height: 280px; + background-color: #844BCA; + + -moz-transform: rotateY(40deg); + } + + </style> +</head> +<body> + + <div id="container"> + <div id="parent"> + </div> + </div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html new file mode 100644 index 0000000000..11a2dcf2d0 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="-moz-perspective: 1000px;"> + <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top right; width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1a.html b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html new file mode 100644 index 0000000000..2c54cef326 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="-moz-perspective: 1000px;"> + <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top left; width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatey-1-ref.html b/layout/reftests/transform-3d/rotatey-1-ref.html new file mode 100644 index 0000000000..0b3339824c --- /dev/null +++ b/layout/reftests/transform-3d/rotatey-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatey(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatey-1a.html b/layout/reftests/transform-3d/rotatey-1a.html new file mode 100644 index 0000000000..359105b01e --- /dev/null +++ b/layout/reftests/transform-3d/rotatey-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatey(45deg) rotatey(360deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-1-ref.html b/layout/reftests/transform-3d/scale3d-1-ref.html new file mode 100644 index 0000000000..664d1d4f35 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: scaleX(2) scaleY(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-all-separate.html b/layout/reftests/transform-3d/scale3d-all-separate.html new file mode 100644 index 0000000000..1c0fe50145 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-all-separate.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: scaleX(2) scaleY(2) scaleZ(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-all.html b/layout/reftests/transform-3d/scale3d-all.html new file mode 100644 index 0000000000..afe4639aa3 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-all.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: scale3D(2,2,2); -moz-transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-xz.html b/layout/reftests/transform-3d/scale3d-xz.html new file mode 100644 index 0000000000..81d0909794 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-xz.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(90deg) scale3D(2,1,2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-z.html b/layout/reftests/transform-3d/scale3d-z.html new file mode 100644 index 0000000000..e168dabc24 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-z.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(90deg) scale3D(1,1,2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scalez-1-ref.html b/layout/reftests/transform-3d/scalez-1-ref.html new file mode 100644 index 0000000000..6efdc2681b --- /dev/null +++ b/layout/reftests/transform-3d/scalez-1-ref.html @@ -0,0 +1,10 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: scaleY(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> + diff --git a/layout/reftests/transform-3d/scalez-1a.html b/layout/reftests/transform-3d/scalez-1a.html new file mode 100644 index 0000000000..5661addc16 --- /dev/null +++ b/layout/reftests/transform-3d/scalez-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(90deg) scaleZ(2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scalezrotatex-1-ref.html b/layout/reftests/transform-3d/scalezrotatex-1-ref.html new file mode 100644 index 0000000000..2f250fd786 --- /dev/null +++ b/layout/reftests/transform-3d/scalezrotatex-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: scaleY(-1); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scalezrotatex-1.html b/layout/reftests/transform-3d/scalezrotatex-1.html new file mode 100644 index 0000000000..2cc10c8405 --- /dev/null +++ b/layout/reftests/transform-3d/scalezrotatex-1.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(180deg) scaleZ(-1); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scroll-perspective-1-ref.html b/layout/reftests/transform-3d/scroll-perspective-1-ref.html new file mode 100644 index 0000000000..b314133f85 --- /dev/null +++ b/layout/reftests/transform-3d/scroll-perspective-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> +<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll"> + <div id="t" style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:0"></div> + <div style="height:4000px"></div> +</div> +<script> +s.scrollTop = 3000; +var tr = t.getBoundingClientRect(); +t.style.height = "300px"; +</script> diff --git a/layout/reftests/transform-3d/scroll-perspective-1.html b/layout/reftests/transform-3d/scroll-perspective-1.html new file mode 100644 index 0000000000..2c17c02543 --- /dev/null +++ b/layout/reftests/transform-3d/scroll-perspective-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll"> + <div style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:300px;"></div> + <div style="height:4000px"></div> +</div> +<script> +s.scrollTop = 3000; +</script> diff --git a/layout/reftests/transform-3d/snap-perspective-1-ref.html b/layout/reftests/transform-3d/snap-perspective-1-ref.html new file mode 100644 index 0000000000..ca84e9e738 --- /dev/null +++ b/layout/reftests/transform-3d/snap-perspective-1-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background-color:red"><div> +</body> +</html> diff --git a/layout/reftests/transform-3d/snap-perspective-1.html b/layout/reftests/transform-3d/snap-perspective-1.html new file mode 100644 index 0000000000..a5bd65f084 --- /dev/null +++ b/layout/reftests/transform-3d/snap-perspective-1.html @@ -0,0 +1,12 @@ +<html> +<body> + <div style="perspective:1000px"> + <div style="transform: translateX(-100.2px)"> + <div style="width: 300px; height: 300px; overflow:hidden"> + <div style="transform: translateX(100.2px); background-color:red; width: 100px; height: 100px; will-change: transform;"> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/sorting-1-ref.html b/layout/reftests/transform-3d/sorting-1-ref.html new file mode 100644 index 0000000000..340d2eb0bb --- /dev/null +++ b/layout/reftests/transform-3d/sorting-1-ref.html @@ -0,0 +1,35 @@ +<html> + <head> + <style type="text/css"> + #stage { + -moz-perspective: 1000px; + } + + #parent { + -moz-transform-style: preserve-3d; + } + + #big { + width: 1000px; + height: 1000px; + background-color: #995C7F; + -moz-transform: rotatey(45deg); + } + + #small { + width: 100px; + height: 100px; + background-color: #995C7F; + -moz-transform: translate3d(600px, 200px, 0px); + } + </style> + </head> + <body> + <div id="stage"> + <div id="parent"> + <div id="small"></div> + <div id="big"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-1a.html b/layout/reftests/transform-3d/sorting-1a.html new file mode 100644 index 0000000000..98414f843b --- /dev/null +++ b/layout/reftests/transform-3d/sorting-1a.html @@ -0,0 +1,35 @@ +<html> + <head> + <style type="text/css"> + #stage { + -moz-perspective: 1000px; + } + + #parent { + -moz-transform-style: preserve-3d; + } + + #big { + width: 1000px; + height: 1000px; + background-color: #995C7F; + -moz-transform: rotatey(45deg); + } + + #small { + width: 100px; + height: 100px; + background-color: #835A99; + -moz-transform: translate3d(600px, 200px, 0px); + } + </style> + </head> + <body> + <div id="stage"> + <div id="parent"> + <div id="small"></div> + <div id="big"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-2-ref.html b/layout/reftests/transform-3d/sorting-2-ref.html new file mode 100644 index 0000000000..cb34eaf4ed --- /dev/null +++ b/layout/reftests/transform-3d/sorting-2-ref.html @@ -0,0 +1,21 @@ +<html> + <head> + <style type="text/css"> + #one { + width: 100px; + height: 100px; + background-color: #00FF00; + } + + #two { + width: 100px; + height: 50px; + background-color: red; + } + </style> + </head> + <body> + <div id="one"></div> + <div id="two"></div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-2a.html b/layout/reftests/transform-3d/sorting-2a.html new file mode 100644 index 0000000000..988ba323c2 --- /dev/null +++ b/layout/reftests/transform-3d/sorting-2a.html @@ -0,0 +1,29 @@ +<html> + <head> + <style type="text/css"> + #parent { + -moz-transform-style: preserve-3d; + } + + #one { + width: 100px; + height: 100px; + background-color: #00FF00; + -moz-transform: translatez(10px); + } + + #two { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatez(-10px) translatey(-50px); + } + </style> + </head> + <body> + <div id="parent"> + <div id="one"></div> + <div id="two"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-2b.html b/layout/reftests/transform-3d/sorting-2b.html new file mode 100644 index 0000000000..5828be845e --- /dev/null +++ b/layout/reftests/transform-3d/sorting-2b.html @@ -0,0 +1,30 @@ +<html> + <head> + <style type="text/css"> + #parent { + -moz-transform-style: preserve-3d; + -moz-transform: rotatex(180deg); + } + + #one { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatez(10px) translatey(50px); + } + + #two { + width: 100px; + height: 100px; + background-color: #00FF00; + -moz-transform: translatez(10px); + } + </style> + </head> + <body> + <div id="parent"> + <div id="one"></div> + <div id="two"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-3a.html b/layout/reftests/transform-3d/sorting-3a.html new file mode 100644 index 0000000000..00c62b5ce6 --- /dev/null +++ b/layout/reftests/transform-3d/sorting-3a.html @@ -0,0 +1,25 @@ +<html> + <head> + <style type="text/css"> + #parent { + -moz-transform-style: preserve-3d; + -moz-transform: rotateX(180deg); + width: 100px; + height: 100px; + background-color: #00FF00; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + -moz-transform: translatez(10px); + } + </style> + </head> + <body> + <div id="parent"> + <div id="child"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect1-ref.html b/layout/reftests/transform-3d/split-intersect1-ref.html new file mode 100644 index 0000000000..c30c35615f --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect1-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 1 ref</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; +} + +.shape { + margin: 0 0; + position: absolute; + + width: 50px; + height: 100px; +} + +.first { + background-color: rgba(255,0,0,1); + left: 58px; +} + +.second { + background-color: rgba(0,255,0,1); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape first"></div> + <div class="shape second"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect1.html b/layout/reftests/transform-3d/split-intersect1.html new file mode 100644 index 0000000000..73dc67f12b --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect1.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 1</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; + + width: 100px; + height: 100px; +} + +.first { + background-color: rgba(255,0,0,1); +} + +.second { + background-color: rgba(0,255,0,1); + transform: rotateY(0.1deg); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape first"></div> + <div class="shape second"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect2-ref.html b/layout/reftests/transform-3d/split-intersect2-ref.html new file mode 100644 index 0000000000..5a19840c17 --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect2-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 2 ref</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; +} + +.shape { + margin: 0 0; + position: absolute; +} + +.red { + background-color: rgba(255,0,0,1); + + width: 100px; + height: 15px; + + top: 150.5px; + left: 73px; +} + +.green1 { + background-color: rgba(0,255,0,1); + + width: 30px; + height: 42.5px; + + top: 108px; + left: 88px; +} + +.green2 { + background-color: rgba(0,255,0,1); + + width: 30px; + height: 50px; + + top: 158px; + left: 88px; +} + +.blue1 { + background-color: rgba(0,0,255,1); + + top: 108px; + left: 128px; + + width: 30px; + height: 42.5px; +} + +.blue2 { + background-color: rgba(0,0,255,1); + + width: 30px; + height: 50px; + + top: 158px; + left: 128px; +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape red"></div> + <div class="shape green1"></div> + <div class="shape green2"></div> + <div class="shape blue1"></div> + <div class="shape blue2"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect2.html b/layout/reftests/transform-3d/split-intersect2.html new file mode 100644 index 0000000000..345e4a5630 --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect2.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 2</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; + + width: 30px; + height: 100px; +} + +.red { + background-color: rgba(255,0,0,1); + transform: translate(100px, 100px) rotateZ(90deg) rotateY(60deg); +} + +.green { + background-color: rgba(0,255,0,1); + transform: translate(80px, 100px); +} + +.blue { + background-color: rgba(0,0,255,1); + transform: translate(120px, 100px); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape red"></div> + <div class="shape green"></div> + <div class="shape blue"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-non-ortho1-ref.html b/layout/reftests/transform-3d/split-non-ortho1-ref.html new file mode 100644 index 0000000000..d519431de6 --- /dev/null +++ b/layout/reftests/transform-3d/split-non-ortho1-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split non-orthogonal 1 ref</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + position: absolute; + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; +} + +.red-square-back { + background-color: rgba(255,0,0,1); + + width: 100px; + height: 100px; + + top: 50px; + left: 50px; +} + +.green-square-back { + background-color: rgba(0,255,0,1); + + width: 150px; + height: 150px; + + top: 50px; + left: 50px; + + transform: rotateZ(45deg); +} + +.red-square-front { + background-color: rgba(255,0,0,1); + + width: 50px; + height: 50px; + + top: 100px; + left: 100px; +} + +.green-square-front { + background-color: rgba(0,255,0,1); + + width: 72px; + height: 72px; + + top: 63.5px; + left: 63.5px; + + transform: rotateZ(45deg); +} + +#canvas { + width: 100px + height: 100px; + + top: 100px; + left: 100px; +} + +</style> +</head> + +<body> + <div class="container"> + <div class="shape red-square-back"></div> + <div class="shape green-square-back"></div> + <div class="shape red-square-front"></div> + <div class="shape green-square-front"></div> + </div> +</body> + +</html> diff --git a/layout/reftests/transform-3d/split-non-ortho1.html b/layout/reftests/transform-3d/split-non-ortho1.html new file mode 100644 index 0000000000..4612e0b9ff --- /dev/null +++ b/layout/reftests/transform-3d/split-non-ortho1.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split non-orthogonal 1</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + position: absolute; + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; +} + +.first { + background-color: rgba(255,0,0,1); + + width: 100px; + height: 100px; + + top: 50px; + left: 50px; +} + +.second { + background-color: rgba(0,255,0,1); + + width: 150px; + height: 150px; + + top: 50px; + left: 50px; + + transform: rotateZ(45deg) rotateY(0.1deg); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape second"></div> + <div class="shape first"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/transform-geometry-1-ref.html b/layout/reftests/transform-3d/transform-geometry-1-ref.html new file mode 100644 index 0000000000..c9c03ece43 --- /dev/null +++ b/layout/reftests/transform-3d/transform-geometry-1-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +<style type="text/css"> +#parent { + width: 400px; + height: 400px; + transform-style: flat; +} + +#child { + width: 400px; + height: 400px; + overflow: scroll; +} + +.box { + width: 400px; + height: 300px; + background-color: red; +} +</style> + +</head> +<body> + +<div id="parent"> + <div id="child"> + <div class="box"></div> + <div class="box"></div> + </div> +</div> + +<script> +function doTest() { + document.documentElement.removeAttribute("class"); + document.getElementById("child").scrollTop = 200; +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> + +</body> +</html> diff --git a/layout/reftests/transform-3d/transform-geometry-1.html b/layout/reftests/transform-3d/transform-geometry-1.html new file mode 100644 index 0000000000..0ee592e3ee --- /dev/null +++ b/layout/reftests/transform-3d/transform-geometry-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +<style type="text/css"> +#parent { + width: 400px; + height: 400px; + transform-style: preserve-3d; +} + +#child { + width: 400px; + height: 400px; + overflow: scroll; +} + +.box { + width: 400px; + height: 300px; + background-color: red; +} +</style> + +</head> +<body> + +<div id="parent"> + <div id="child"> + <div class="box"></div> + <div class="box"></div> + </div> +</div> + +<script> +function doTest() { + document.documentElement.removeAttribute("class"); + document.getElementById("child").scrollTop = 200; +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> + +</body> +</html> diff --git a/layout/reftests/transform-3d/transform-style-flat-1-ref.html b/layout/reftests/transform-3d/transform-style-flat-1-ref.html new file mode 100644 index 0000000000..e73834bb64 --- /dev/null +++ b/layout/reftests/transform-3d/transform-style-flat-1-ref.html @@ -0,0 +1,6 @@ +<html> + <body> + <div style="height: 100px; width: 100px; background: lime"> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/transform-style-flat-1a.html b/layout/reftests/transform-3d/transform-style-flat-1a.html new file mode 100644 index 0000000000..946dc28a31 --- /dev/null +++ b/layout/reftests/transform-3d/transform-style-flat-1a.html @@ -0,0 +1,8 @@ +<html> + <body> + <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top"> + <div style="-moz-transform: rotatex(-45deg); -moz-transform-origin: top; height: 200px; width: 100px; background: lime"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/translate3d-1-ref.html b/layout/reftests/transform-3d/translate3d-1-ref.html new file mode 100644 index 0000000000..d3b919e992 --- /dev/null +++ b/layout/reftests/transform-3d/translate3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: 10px 30px -10px; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translate3d-1a.html b/layout/reftests/transform-3d/translate3d-1a.html new file mode 100644 index 0000000000..418d127869 --- /dev/null +++ b/layout/reftests/transform-3d/translate3d-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate3d(10px, 30px, -10px) rotatex(45deg) translate3d(-10px, -30px, 10px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translatez-1-ref.html b/layout/reftests/transform-3d/translatez-1-ref.html new file mode 100644 index 0000000000..e4a00aca15 --- /dev/null +++ b/layout/reftests/transform-3d/translatez-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: 0 0 -10px; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translatez-1a.html b/layout/reftests/transform-3d/translatez-1a.html new file mode 100644 index 0000000000..a19a128b26 --- /dev/null +++ b/layout/reftests/transform-3d/translatez-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatez(-10px) rotatex(45deg) translatez(10px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translatez-1b.html b/layout/reftests/transform-3d/translatez-1b.html new file mode 100644 index 0000000000..7e6f1dead1 --- /dev/null +++ b/layout/reftests/transform-3d/translatez-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatez(-20px) rotatex(45deg) translatez(20px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/willchange-containing-block.html b/layout/reftests/transform-3d/willchange-containing-block.html new file mode 100644 index 0000000000..95de2c74d0 --- /dev/null +++ b/layout/reftests/transform-3d/willchange-containing-block.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<body> +<style> +body { + padding: 100px; + width: 5000px; + height: 5000px; + overflow: scroll; +} +div { +} +#parent { + background:red; + width: 64px; + height: 64px; +} +#child { + background:green; + position:fixed; + width: 32px; + height: 32px; +} +</style> +<div id="parent"> +<div id="child"> + +</div> +</div> +<script type="application/javascript"> + +if (document.location.search == '?willchange') { + document.getElementById("parent").style.willChange = "transform"; +} else if (document.location.search == '?ref') { + document.getElementById("parent").style.transform = "translateZ(1px)"; +} else if (document.location.search == '?noblock') { +} + +document.documentElement.scrollTop = 10; +document.documentElement.scrollLeft = 10; +</script> +</body> +</html> |