diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /layout/reftests/transform | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
368 files changed, 8147 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..b491051ba8 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(180deg); backface-visibility: visible; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/backface-visibility-1b.html b/layout/reftests/transform-3d/backface-visibility-1b.html new file mode 100644 index 0000000000..26fdfd649e --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(180deg); backface-visibility: hidden; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/backface-visibility-1c.html b/layout/reftests/transform-3d/backface-visibility-1c.html new file mode 100644 index 0000000000..8047462a7d --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(180deg); backface-visibility: hidden; width: 100px; height: 100px; display: table"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/backface-visibility-2-ref.html b/layout/reftests/transform-3d/backface-visibility-2-ref.html new file mode 100644 index 0000000000..47db3e64f2 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-2-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<body> + <style> + #container { + position: relative; + margin: 10px auto; + width: 450px; + height: 281px; + z-index: 1; + perspective: 1000px; + } + #card { + width: 100%; + height: 100%; + transform-style: preserve-3d; + transform: rotateY(165deg); + } + .face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + background: red; + } + .face.back { + display: block; + transform: rotateY(180deg); + box-sizing: border-box; + padding: 10px; + color: white; + text-align: center; + background: green; + } + </style> + + <div id="container" class="hover"> + <div id="card"> + <div class="back face"> + </div> + </div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/backface-visibility-2.html b/layout/reftests/transform-3d/backface-visibility-2.html new file mode 100644 index 0000000000..1c48f2545d --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-2.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<body> + <style> + #container { + position: relative; + margin: 10px auto; + width: 450px; + height: 281px; + z-index: 1; + perspective: 1000px; + } + #card { + width: 100%; + height: 100%; + transform-style: preserve-3d; + transform: rotateY(165deg); + } + .face { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + background: red; + } + .face.back { + display: block; + transform: rotateY(180deg); + box-sizing: border-box; + padding: 10px; + color: white; + text-align: center; + background: green; + } + </style> + + <div id="container" class="hover"> + <div id="card"> + <div class="front face"> + </div> + <div class="back face"> + </div> + </div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/backface-visibility-3-ref.html b/layout/reftests/transform-3d/backface-visibility-3-ref.html new file mode 100644 index 0000000000..b75cb6def5 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-3-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <style type='text/css'> + div { + position: absolute; + display: block; + width: 160px; + height: 160px; + background: red; + top:108px; + left:308px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> + + diff --git a/layout/reftests/transform-3d/backface-visibility-3.html b/layout/reftests/transform-3d/backface-visibility-3.html new file mode 100644 index 0000000000..ec8d648de9 --- /dev/null +++ b/layout/reftests/transform-3d/backface-visibility-3.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <style type='text/css'> + body { + overflow: hidden; + } + #test { + transform-origin: 0 0; + transform: scale(2) translateX(100px); + transform-style: preserve-3d; + } + #test div { + position: absolute; + display: block; + width: 80px; + height: 80px; + background: red; + top:50px; + left:50px; + + backface-visibility: hidden; + } + </style> +</head> +<body> + <div id="test"> + <div></div> + </div> +</body> +</html> + + diff --git a/layout/reftests/transform-3d/component-alpha-1-ref.html b/layout/reftests/transform-3d/component-alpha-1-ref.html new file mode 100644 index 0000000000..3ec2905742 --- /dev/null +++ b/layout/reftests/transform-3d/component-alpha-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>red box</title> +<style> + +#wrapper { +} + +#shape { + background-color: red; + + width: 200px; + height: 200px; +} +</style> + +</head> +<body> +<div id="wrapper"> + <div id="shape">foo</div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/component-alpha-1.html b/layout/reftests/transform-3d/component-alpha-1.html new file mode 100644 index 0000000000..3726a4fbca --- /dev/null +++ b/layout/reftests/transform-3d/component-alpha-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>red box</title> +<style> + +#wrapper { + perspective: 0px; +} + +#shape { + background-color: red; + + width: 200px; + height: 200px; + + transform: rotateX(0deg); +} +</style> + +</head> +<body> +<div id="wrapper"> + <div id="shape">foo</div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/green-rect.html b/layout/reftests/transform-3d/green-rect.html new file mode 100644 index 0000000000..4e6d13e951 --- /dev/null +++ b/layout/reftests/transform-3d/green-rect.html @@ -0,0 +1,14 @@ +<html> + <head> + <style type="text/css"> + #parent { + width: 100px; + height: 100px; + background-color: #00FF00; + } + </style> + </head> + <body> + <div id="parent"></div> + </body> +</html> diff --git a/layout/reftests/transform-3d/intermediate-1-ref.html b/layout/reftests/transform-3d/intermediate-1-ref.html new file mode 100644 index 0000000000..53f8045c87 --- /dev/null +++ b/layout/reftests/transform-3d/intermediate-1-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="UTF-8"> +<style type="text/css"> + +div { + position: absolute; + width: 100px; + height: 100px; +} + +.opacity { + opacity: 0.99; +} + +.green { + background-color: green; +} + +.red { + width: 300px; + height: 100px; + background-color: red; +} + +.translate { + transform: translateX(100px); +} + +</style> +</head> + +<body> +<div class="red"></div> +<div class="green"> + <div class="translate opacity green"> + <div class="translate green"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/intermediate-1.html b/layout/reftests/transform-3d/intermediate-1.html new file mode 100644 index 0000000000..cfc822f4b2 --- /dev/null +++ b/layout/reftests/transform-3d/intermediate-1.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + +<head> +<meta charset="UTF-8"> +<style type="text/css"> + +div { + position: absolute; + width: 100px; + height: 100px; +} + +.opacity { + opacity: 0.99; +} + +.green { + transform-style: preserve-3d; + background-color: green; +} + +.flat { + transform: translateZ(0px); +} + +.red { + width: 300px; + height: 100px; + background-color: red; +} + +.translate { + transform: translateX(100px); +} + +</style> +</head> + +<body> +<div class="red"></div> +<div class="green"> + <div class="flat"> + <div class="translate opacity green"> + <div class="translate green"> </div> + </div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/mask-layer-1.html b/layout/reftests/transform-3d/mask-layer-1.html new file mode 100644 index 0000000000..834ed44633 --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for elements with perspective</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; + perspective: 1000px; +} + +#b { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: translateX(0px); +} +</style> + +<div id="a"> + <div id="b"></div> +</div> diff --git a/layout/reftests/transform-3d/mask-layer-2.html b/layout/reftests/transform-3d/mask-layer-2.html new file mode 100644 index 0000000000..23315e2249 --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-2.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for elements with perspective and preserve-3d</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; + perspective: 1000px; +} + +#b { + height: 100%; + transform-style: preserve-3d; + transform: rotateX(90deg); +} + +#c { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: rotateX(90deg); +} +</style> + +<div id="a"> + <div id="b"> + <div id="c"></div> + </div> +</div> diff --git a/layout/reftests/transform-3d/mask-layer-3.html b/layout/reftests/transform-3d/mask-layer-3.html new file mode 100644 index 0000000000..58a04a45ab --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for elements with preserve-3d</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; +} + +#b { + height: 100%; + transform-style: preserve-3d; + transform: rotateX(90deg); +} + +#c { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: rotateX(90deg); +} +</style> + +<div id="a"> + <div id="b"> + <div id="c"></div> + </div> +</div> diff --git a/layout/reftests/transform-3d/mask-layer-ref.html b/layout/reftests/transform-3d/mask-layer-ref.html new file mode 100644 index 0000000000..bc4f963e63 --- /dev/null +++ b/layout/reftests/transform-3d/mask-layer-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>border-radius should work correctly for transformed elements</title> + +<style> + +#a { + position: relative; + width: 300px; + height: 300px; + border-radius: 10px; + overflow: hidden; + background: red; +} + +#b { + position: relative; + background: green; + height: 100%; + width: 10000px; + transform: translateZ(1px); +} +</style> + +<div id="a"> + <div id="b"></div> +</div> diff --git a/layout/reftests/transform-3d/matrix3d-1-ref.html b/layout/reftests/transform-3d/matrix3d-1-ref.html new file mode 100644 index 0000000000..5cd503b432 --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1,2,3,4,5,6); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/matrix3d-1a.html b/layout/reftests/transform-3d/matrix3d-1a.html new file mode 100644 index 0000000000..235f0ae592 --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix3d(1,2,0,0,3,4,0,0,0,0,1,0,5,6,0,1); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/matrix3d-2-ref.html b/layout/reftests/transform-3d/matrix3d-2-ref.html new file mode 100644 index 0000000000..b781a00017 --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-2-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate3d(4px,5px,6px) scale3d(1,2,3); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/matrix3d-2a.html b/layout/reftests/transform-3d/matrix3d-2a.html new file mode 100644 index 0000000000..65f8d6bc87 --- /dev/null +++ b/layout/reftests/transform-3d/matrix3d-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix3d(1,0,0,0,0,2,0,0,0,0,3,0,4,5,6,1); width: 100px; height: 100px; background: gold;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/nested-transform-1-ref.html b/layout/reftests/transform-3d/nested-transform-1-ref.html new file mode 100644 index 0000000000..294ef4bd8b --- /dev/null +++ b/layout/reftests/transform-3d/nested-transform-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title></title> + +<style type="text/css"> +div { + position: absolute; + margin: 0 0; +} +</style> +</head> + +<body> +<div style="left: 58px;"> + <div style="width: 100px; height: 100px; background-color: red;"></div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/nested-transform-1.html b/layout/reftests/transform-3d/nested-transform-1.html new file mode 100644 index 0000000000..f0264a4e00 --- /dev/null +++ b/layout/reftests/transform-3d/nested-transform-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title></title> + +<style type="text/css"> +div { + position: absolute; + margin: 0 0; +} +</style> +</head> + +<body> +<div style="transform-style: preserve-3d;"> + <div style="left: 50px; transform-style: flat;"> + <div style="transform: rotateX(0.1deg); transform-style: flat;"> + <div style="transform: rotateX(0.1deg); width: 100px; height: 100px; background-color: red;"></div> + </div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html new file mode 100644 index 0000000000..8a42fa3c98 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 60px; + } + .second { + transform: translateZ(5px); + background-color: green; + top: 40px; + } + .third { + transform: translateZ(-5px); + background-color: yellow; + top: 20px; + } + .fourth { + transform: translateZ(-10px); + background-color: red; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="leaf first"></div> + <div style="opacity:0.5"> + <div class="leaf second"></div> + <div class="leaf fourth"></div> + </div> + <div class="leaf third"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1.html b/layout/reftests/transform-3d/opacity-preserve3d-1.html new file mode 100644 index 0000000000..b73be49238 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 60px; + } + .second { + transform: translateZ(5px); + background-color: green; + top: 40px; + } + .third { + transform: translateZ(-5px); + background-color: yellow; + top: 20px; + } + .fourth { + transform: translateZ(-10px); + background-color: red; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="leaf first"></div> + <div class="preserve" style="opacity:0.5"> + <div class="leaf second"></div> + <div class="leaf fourth"></div> + </div> + <div class="leaf third"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html new file mode 100644 index 0000000000..80336b5cf5 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 50px; + } + .second { + transform: translateZ(5px); + background-color: green; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div style="opacity:0.5; transform:translateX(0px)"> + <div class="leaf first"></div> + <div class="leaf second"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2.html b/layout/reftests/transform-3d/opacity-preserve3d-2.html new file mode 100644 index 0000000000..a04b998291 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 50px; + } + .second { + transform: translateZ(5px); + background-color: green; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve" style="opacity:0.5"> + <div class="leaf first"></div> + <div class="leaf second"></div> +</div> + +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html new file mode 100644 index 0000000000..ffacd8277b --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .third { + top: 80px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div style="opacity:0.5; transform:translateX(0px)"> + <div class="leaf first"></div> + <div class="leaf second"></div> + <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3.html b/layout/reftests/transform-3d/opacity-preserve3d-3.html new file mode 100644 index 0000000000..f7bbf2da88 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-3.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .third { + top: 80px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="preserve" style="opacity:0.5"> + <div class="leaf first"></div> + <div class="leaf second"></div> + <canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html new file mode 100644 index 0000000000..9fe799b61a --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div style="opacity:0.5"> + <div class="leaf first"></div> + <canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4.html b/layout/reftests/transform-3d/opacity-preserve3d-4.html new file mode 100644 index 0000000000..9fd6728644 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-4.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><head> +<style> + .first { + transform: translateZ(10px); + background-color: blue; + top: 0px; + } + .second { + background-color: green; + top: 40px; + } + .preserve { + transform-style: preserve-3d; + } + .leaf { + width: 100px; + height: 100px; + position:absolute; + } +</style> +</head><body> + +<div class="preserve"> + <div class="preserve" style="opacity:0.5"> + <div class="leaf first"></div> + <canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas> + </div> +</div> +<script> + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + ctx.fillStyle = "red"; + ctx.fillRect(0, 0, 100, 100); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html new file mode 100644 index 0000000000..ab64e1e9da --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<style> + .outer { + transform-style: preserve-3d; + width: 200px; + height: 200px; + opacity: 0.7; + } + .inner { + top: 50%; + transform: translateY(-50%); + background-color: green; + position:relative; + width: 200px; + height: 200px; + } +</style> +</head> +<body> + +<div id="outer" class="outer"> + <div class="inner"> + </div> +</div> +</body> +</html> + diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5.html b/layout/reftests/transform-3d/opacity-preserve3d-5.html new file mode 100644 index 0000000000..37808dd581 --- /dev/null +++ b/layout/reftests/transform-3d/opacity-preserve3d-5.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<style> + .outer { + transform-style: preserve-3d; + width: 200px; + height: 200px; + } + .inner { + top: 50%; + transform: translateY(-50%); + background-color: green; + position:relative; + width: 200px; + height: 200px; + } +</style> +</head> +<body> + +<div id="outer" class="outer"> + <div class="inner"> + </div> +</div> +<script> + function doTest() { + document.getElementById("outer").style.opacity = 0.7; + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</body> +</html> + diff --git a/layout/reftests/transform-3d/overflow-hidden-1-ref.html b/layout/reftests/transform-3d/overflow-hidden-1-ref.html new file mode 100644 index 0000000000..6f62611d71 --- /dev/null +++ b/layout/reftests/transform-3d/overflow-hidden-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><head> +<style type="text/css"> + .stage{ + perspective: 700px; + overflow: hidden; + width: 260px; + height: 260px; + display: block; + } + + .box { + width: 170px; + height: 170px; + background-color: red; + display: block; + transform: rotate3d(0,1,0, 50deg) translatey(20px); + } + + </style> +</head> + +<body id="body"> + <div class="stage"> + <div class="box"></div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/overflow-hidden-1a.html b/layout/reftests/transform-3d/overflow-hidden-1a.html new file mode 100644 index 0000000000..6f62611d71 --- /dev/null +++ b/layout/reftests/transform-3d/overflow-hidden-1a.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><head> +<style type="text/css"> + .stage{ + perspective: 700px; + overflow: hidden; + width: 260px; + height: 260px; + display: block; + } + + .box { + width: 170px; + height: 170px; + background-color: red; + display: block; + transform: rotate3d(0,1,0, 50deg) translatey(20px); + } + + </style> +</head> + +<body id="body"> + <div class="stage"> + <div class="box"></div> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/perspective-clipping-1-ref.html b/layout/reftests/transform-3d/perspective-clipping-1-ref.html new file mode 100644 index 0000000000..78411f4cbc --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-1-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>#inner should not be clipped</title> + +<style> + +body { + margin: 0; + background: lime; +} + +</style> diff --git a/layout/reftests/transform-3d/perspective-clipping-1.html b/layout/reftests/transform-3d/perspective-clipping-1.html new file mode 100644 index 0000000000..90ffcf528a --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-1.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>#inner should not be clipped</title> + +<style> + +body { + margin: 0; + background: red; +} + +#perspective { + perspective: 300px; + perspective-origin: top left; +} + +#inner { + height: 100vh; + transform-origin: top left; + transform: translateZ(-300px) scale(2); + z-index: 2; + background: lime; + border: 1px solid lime; + box-sizing: border-box; +} + +</style> + +<div id="perspective"> + <div id="inner"></div> +</div> diff --git a/layout/reftests/transform-3d/perspective-clipping-2-ref.html b/layout/reftests/transform-3d/perspective-clipping-2-ref.html new file mode 100644 index 0000000000..026b95bdd0 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:100px; height:200px; background-color:green"></div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-clipping-2.html b/layout/reftests/transform-3d/perspective-clipping-2.html new file mode 100644 index 0000000000..466b52c3a1 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-clipping-2.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> + <div style="width:100px; height:100px; background-color:green"></div> + <div style="width:100px; height:100px; overflow:hidden"> + <div style="transform: translateY(-100px) perspective(1px); will-change:transform"> + <div style="background-color:red; width:100px; height:100px"></div> + <div style="background-color:green; width:100px; height:100px"></div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-1a.html b/layout/reftests/transform-3d/perspective-origin-1a.html new file mode 100644 index 0000000000..ccd0073abf --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-1a.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="perspective: 1000px; perspective-origin: 0 0;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-1b.html b/layout/reftests/transform-3d/perspective-origin-1b.html new file mode 100644 index 0000000000..2cee0ec606 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-1b.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="perspective: 1000px; perspective-origin: top left;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-2-ref.html b/layout/reftests/transform-3d/perspective-origin-2-ref.html new file mode 100644 index 0000000000..51f813b115 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-2-ref.html @@ -0,0 +1,31 @@ +<html> +</head> +<style type="text/css"> + .stage{ + perspective: 100px; + perspective-origin: 30px 30px; + height:100px; + width:100px; + margin:5px; + padding:5px; + border:5px solid gray; + } + + .box { + transform:rotateX(45deg); + height:70px; + width:70px; + background:green; + margin:5px; + padding:5px; + border:5px solid black; + } + + </style> +</head> +<body> + <div class="stage"> + <div class="box"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-2a.html b/layout/reftests/transform-3d/perspective-origin-2a.html new file mode 100644 index 0000000000..c96af6b91d --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-2a.html @@ -0,0 +1,31 @@ +<html> +</head> +<style type="text/css"> + .stage{ + perspective: 100px; + perspective-origin: 25% 25%; + height:100px; + width:100px; + margin:5px; + padding:5px; + border:5px solid gray; + } + + .box { + transform:rotateX(45deg); + height:70px; + width:70px; + background:green; + margin:5px; + padding:5px; + border:5px solid black; + } + + </style> +</head> +<body> + <div class="stage"> + <div class="box"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-3-ref.html b/layout/reftests/transform-3d/perspective-origin-3-ref.html new file mode 100644 index 0000000000..06378b11b4 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-3-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <style type="text/css"> + +.parentWithPerspective { + perspective: 100px; + perspective-origin: 150px 150px; + -webkit-perspective: 100px; + -webkit-perspective-origin: 150px 150px; + /* Changing width/height to 500px should not change the rendering. */ + height:100%; +} + +.parentWithPerspective > div { + position:absolute; + top:100px; + left:100px; + width:100px; + height:100px; +} + +.notTransformed { + outline: 1px solid black; +} + +.transformed { + background:blue; + transform-origin: 0% 0%; + transform: rotateY(45deg); + -webkit-transform-origin: 0% 0%; + -webkit-transform: rotateY(45deg); +} + + </style> + <body> + <div class="parentWithPerspective"> + <div class="notTransformed"></div> + <div class="transformed"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-3a.html b/layout/reftests/transform-3d/perspective-origin-3a.html new file mode 100644 index 0000000000..1cc3d03b09 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-3a.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <style type="text/css"> + +.parentWithPerspective { + perspective: 100px; + perspective-origin: 150px 150px; + -webkit-perspective: 100px; + -webkit-perspective-origin: 150px 150px; + /* Changing width/height to 500px should not change the rendering. */ + height:500px; +} + +.parentWithPerspective > div { + position:absolute; + top:100px; + left:100px; + width:100px; + height:100px; +} + +.notTransformed { + outline: 1px solid black; +} + +.transformed { + background:blue; + transform-origin: 0% 0%; + transform: rotateY(45deg); + -webkit-transform-origin: 0% 0%; + -webkit-transform: rotateY(45deg); +} + + </style> + <body> + <div class="parentWithPerspective"> + <div class="notTransformed"></div> + <div class="transformed"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-4-ref.html b/layout/reftests/transform-3d/perspective-origin-4-ref.html new file mode 100644 index 0000000000..087e572b79 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-4-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Testcase for bug 770629</title> + <style> + +div { + position: absolute; + left: 125px; + width: 50px; + height: 100px; + background: blue; +} + + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-origin-4a.html b/layout/reftests/transform-3d/perspective-origin-4a.html new file mode 100644 index 0000000000..ee2a0fabfa --- /dev/null +++ b/layout/reftests/transform-3d/perspective-origin-4a.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Testcase for bug 770629</title> + <style> + +.outer { + position: absolute; + left: 100px; + transform: scale(0.5,1); + perspective: 200px; + perspective-origin: 50% 0px; +} + +.inner { + width: 100px; + height: 100px; + background: blue; + transform: rotateY(0deg); +} + + </style> +</head> +<body> + <div class="outer"> + <div class="inner"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-overflow-1-ref.html b/layout/reftests/transform-3d/perspective-overflow-1-ref.html new file mode 100644 index 0000000000..424a7993bb --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-1-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>Testcase for bug 1483659</title> +<style> + +#container { + position: absolute; + top: 400px; + left: 200px; + perspective: 100px; +} + +#content { + width: 300px; + height: 300px; + background-color: green; + transform: rotateY(60deg); +} +</style> +</head> +<body> +<div id="container"> + <div id="content"></div> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-overflow-1.html b/layout/reftests/transform-3d/perspective-overflow-1.html new file mode 100644 index 0000000000..178e3d2e28 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- Use reftest-snapshot-all as a workaround for bug 1485705 --> +<html class="reftest-wait reftest-snapshot-all"> +<head> +<meta charset="UTF-8"> +<title>Testcase for bug 1483659</title> +<style> +#container { + position: absolute; + top: 400px; + left: 200px; + perspective: 100px; +} + +#content { + width: 300px; + height: 300px; + background-color: green; +} +</style> +</head> +<body> +<div id="container"> + <div id="content"></div> +</div> +<script> +function doTest() { + var e = document.getElementById("content"); + e.style.transform = "rotateY(60deg)"; + + document.documentElement.classList.remove("reftest-wait"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/transform-3d/perspective-overflow-2-ref.html b/layout/reftests/transform-3d/perspective-overflow-2-ref.html new file mode 100644 index 0000000000..45116d2195 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Transform Overflow Bug</title>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ scrollbar-width: none;
+ perspective: 1px;
+ }
+
+ .inner {
+ background-color: red;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <p class="inner"></p>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-2.html b/layout/reftests/transform-3d/perspective-overflow-2.html new file mode 100644 index 0000000000..f4eefe1572 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-overflow-2.html @@ -0,0 +1,30 @@ +<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Transform Overflow Bug</title>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ scrollbar-width: none;
+ perspective: 1px;
+ }
+
+ .inner {
+ will-change: transform;
+ background-color: red;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <p class="inner"></p>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-zindex-2.html b/layout/reftests/transform-3d/perspective-zindex-2.html new file mode 100644 index 0000000000..92b884ab26 --- /dev/null +++ b/layout/reftests/transform-3d/perspective-zindex-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>z-index should work correctly for elements with perspective</title> + +<style> + +#perspective { + z-index: 2; + position: relative; + perspective: 300px; + perspective-origin: top left; +} + +#front { + width: 100px; + height: 100px; + background-color: #00FF00; + transform: translateX(0px); +} + +#back { + z-index: 1; + width: 100px; + height: 100px; + background-color: #FF0000; + transform: translateY(-100px); + position: relative; +} + +</style> + +<div id="perspective"> + <div id="front"></div> +</div> +<div id="back"></div> diff --git a/layout/reftests/transform-3d/perspective-zindex.html b/layout/reftests/transform-3d/perspective-zindex.html new file mode 100644 index 0000000000..877f50898a --- /dev/null +++ b/layout/reftests/transform-3d/perspective-zindex.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>z-index should work correctly for elements with perspective</title> + +<style> + +#perspective { + perspective: 300px; + perspective-origin: top left; +} + +#front { + z-index: 2; + width: 100px; + height: 100px; + background-color: #00FF00; + transform: translateX(0px); + position: relative; +} + +#back { + z-index: 1; + width: 100px; + height: 100px; + background-color: #FF0000; + transform: translateY(-100px); + position: relative; +} + +</style> + +<div id="perspective"> + <div id="front"></div> + <div id="back"></div> +</div> diff --git a/layout/reftests/transform-3d/preserve3d-1-ref.html b/layout/reftests/transform-3d/preserve3d-1-ref.html new file mode 100644 index 0000000000..c577cca6f8 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(180deg); width: 100px; height: 100px; background-color: white;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-1a.html b/layout/reftests/transform-3d/preserve3d-1a.html new file mode 100644 index 0000000000..a5d3182302 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-1a.html @@ -0,0 +1,15 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px; background-color: white;"> + Test Text + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-1b.html b/layout/reftests/transform-3d/preserve3d-1b.html new file mode 100644 index 0000000000..203bdaa13d --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-1b.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(90deg);"> + <div style="transform: rotatex(90deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2-ref.html b/layout/reftests/transform-3d/preserve3d-2-ref.html new file mode 100644 index 0000000000..fd9063760d --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2-ref.html @@ -0,0 +1,27 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + transform-style: preserve-3d; + } + #parent { + transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + transform: translatex(0px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2a.html b/layout/reftests/transform-3d/preserve3d-2a.html new file mode 100644 index 0000000000..e3a421ec8f --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2a.html @@ -0,0 +1,28 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + transform-style: preserve-3d; + margin-left: 200px + } + #parent { + transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + transform: translatex(-200px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2b.html b/layout/reftests/transform-3d/preserve3d-2b.html new file mode 100644 index 0000000000..c54a59406c --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2b.html @@ -0,0 +1,28 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + transform-style: preserve-3d; + } + #parent { + transform-style: preserve-3d; + margin-left: 200px + } + + #child { + width: 100px; + height: 100px; + background-color: red; + transform: translatex(-200px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2c.html b/layout/reftests/transform-3d/preserve3d-2c.html new file mode 100644 index 0000000000..40843b907c --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2c.html @@ -0,0 +1,28 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + transform-style: preserve-3d; + } + #parent { + transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + transform: translatex(-200px); + margin-left: 200px + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-2d.html b/layout/reftests/transform-3d/preserve3d-2d.html new file mode 100644 index 0000000000..50bf6edc7f --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-2d.html @@ -0,0 +1,30 @@ +<html> + <head> + <style type="text/css"> + #grandparent { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transform: translatex(200%); + } + #parent { + transform-style: preserve-3d; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + transform: translatex(-200px); + } + + </style> + </head> + <body> + <div id="grandparent"> + <div id="parent"> + <div id="child"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-3-ref.html b/layout/reftests/transform-3d/preserve3d-3-ref.html new file mode 100644 index 0000000000..55027ea925 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-3-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); width: 100px; height: 100px; background:red;"> +</div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-3a.html b/layout/reftests/transform-3d/preserve3d-3a.html new file mode 100644 index 0000000000..7fa00da003 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-3a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px; height: 100px; background:red;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-4a.html b/layout/reftests/transform-3d/preserve3d-4a.html new file mode 100644 index 0000000000..d1b093e53e --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-4a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(90deg); transform-style: preserve-3d; opacity: 0.9999;"> + <div style="transform: rotatex(90deg); width: 100px; height: 100px; background-color: #00FF00"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-5-ref.html b/layout/reftests/transform-3d/preserve3d-5-ref.html new file mode 100644 index 0000000000..2bdd5c539f --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-5-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<div style="width: 100px; height: 100px; background: lime; +border-style: solid; border-width: 0 2px 2px 0"></div> diff --git a/layout/reftests/transform-3d/preserve3d-5a.html b/layout/reftests/transform-3d/preserve3d-5a.html new file mode 100644 index 0000000000..925a267be0 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-5a.html @@ -0,0 +1,10 @@ +<!doctype html> +<div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 110px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 110px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 110px;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px; + background: lime; border-style: solid; border-width: 2px 2px 0 0"> + </div> + </div> + </div> +</div> diff --git a/layout/reftests/transform-3d/preserve3d-6-ref.html b/layout/reftests/transform-3d/preserve3d-6-ref.html new file mode 100644 index 0000000000..f24abbe730 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-6-ref.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="perspective:100px;"> + <div style="transform-style: preserve-3d"> + <div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);"> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-6a.html b/layout/reftests/transform-3d/preserve3d-6a.html new file mode 100644 index 0000000000..0b604ba5d5 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-6a.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="perspective:100px; transform-style: preserve-3d;"> + <div style="transform-style: preserve-3d"> + <div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);"> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-7-ref.html b/layout/reftests/transform-3d/preserve3d-7-ref.html new file mode 100644 index 0000000000..cb17ddba5a --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-7-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="opacity:0.5"> + <div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px;"> + <div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-7a.html b/layout/reftests/transform-3d/preserve3d-7a.html new file mode 100644 index 0000000000..d962d4fd4f --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-7a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px; opacity:0.5"> + <div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-8-ref.html b/layout/reftests/transform-3d/preserve3d-8-ref.html new file mode 100644 index 0000000000..afddf05d4d --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-8-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body style="width:100px"> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(180deg)"> + <g> + <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-8.html b/layout/reftests/transform-3d/preserve3d-8.html new file mode 100644 index 0000000000..76e9c10c33 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-8.html @@ -0,0 +1,17 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(45deg)"> + <g> + <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect> + </g> + </svg> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/preserve3d-clipped.html b/layout/reftests/transform-3d/preserve3d-clipped.html new file mode 100644 index 0000000000..60d49c77ff --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-clipped.html @@ -0,0 +1,10 @@ +<html>
+ <body>
+ <div style="transform-style: preserve-3d; transform:rotatex(90deg); overflow:hidden;">
+ <div style="transform:rotatex(90deg)">
+ x
+ </div>
+ </div>
+ </body>
+</html>
+
diff --git a/layout/reftests/transform-3d/preserve3d-scale-ref.html b/layout/reftests/transform-3d/preserve3d-scale-ref.html new file mode 100644 index 0000000000..243e88fdda --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-scale-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<!-- This was just "drawn by hand" well after the original test landed to look + like the proper rendering of the test file without any transforms or + preserve3d. It's not identical, but a fuzzy match should be a good test + considering the original test just checked that it wasn't rendering blank +--> +<html> + <style> + div { + position: absolute; + top: 0; + left: 0; + } + </style> +</head> +<body> + <div> + <svg width="600px" height="600px"> + + <polygon fill="#DAD6CC" points="57, 51 114, 84 66, 124 10, 91"/> + <ellipse fill="#F8F1E5" cx="62" cy="88" rx="27" ry="19"/> + + <polygon fill="#DAD6CC" points="57, -1 114, 32 66, 72 10, 39"/> + <ellipse fill="#F8F1E5" cx="62" cy="36" rx="27" ry="19"/> + + </svg> + </div> +</body></html> diff --git a/layout/reftests/transform-3d/preserve3d-scale.html b/layout/reftests/transform-3d/preserve3d-scale.html new file mode 100644 index 0000000000..099ef078de --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-scale.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> + <style> + svg{ + display: block; + margin: auto; + -webkit-transform-origin: top center; + -webkit-transform: scale(1.5); + } + #cube{ + position: absolute; + left: 25px; + top: 25px; + width: 74px; + height: 74px; + backface-visibility: visible; + -webkit-transform-style: preserve-3d; + -webkit-transform-origin: center center; + -webkit-backface-visibility: visible; + -webkit-transform: rotateX(-45deg) rotateY(50deg); + -webkit-transition: -webkit-transform 1s; + } + + .side{ + position: absolute; + top: 0; + left: 0; + width: 74px; + height: 74px; + backface-visibility: visible; + -webkit-transform-origin: center center; + -webkit-backface-visibility: visible; + } + + #cube .side:nth-child(1) { + -webkit-transform: translateY(37px) rotateX(90deg); + transform: translateY(37px) rotateX(90deg); + } + + #cube .side:nth-child(2) { + -webkit-transform: translateY(-37px) rotateX(-90deg); + transform: translateY(-37px) rotateX(-90deg); + + } + </style> +</head> +<body> + <div id="cube"> + <svg class="side" width="100px" height="100px"> + <rect fill="#DAD6CC" width="74" height="74"></rect> + <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle> + <g> + </g> + </svg> + <svg class="side" width="100px" height="100px"> + <rect fill="#DAD6CC" width="74" height="74"></rect> + <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle> + <g> + </g> + </svg> + + </div> +</body></html> diff --git a/layout/reftests/transform-3d/preserve3d-table-ref.html b/layout/reftests/transform-3d/preserve3d-table-ref.html new file mode 100644 index 0000000000..94b660b747 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-table-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<table> + <tbody> + <tr><td>RISK-184</td></tr> + </tbody> +</table> + diff --git a/layout/reftests/transform-3d/preserve3d-table.html b/layout/reftests/transform-3d/preserve3d-table.html new file mode 100644 index 0000000000..b4b0a78df5 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-table.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<table style="transform-style: preserve-3d"> + <tbody style="transform: translate3d(0, 0, 0)"> + <tr><td>RISK-184</td></tr> + </tbody> +</table> + diff --git a/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html new file mode 100644 index 0000000000..964b11e0e6 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<style> + .transform { + will-change: transform; + transform-style: preserve-3d; + } +</style> +<body> + <div class="transform"> + <div>TEST PAGE</div> + <div style="text-indent: -9999em">TEST PAGE</div> + </div> +</body> diff --git a/layout/reftests/transform-3d/preserve3d-will-change-ref.html b/layout/reftests/transform-3d/preserve3d-will-change-ref.html new file mode 100644 index 0000000000..4ee913bd22 --- /dev/null +++ b/layout/reftests/transform-3d/preserve3d-will-change-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<body> + <div style="transform-style: preserve-3d"> + <div>TEST PAGE</div> + </div> +</body> diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html new file mode 100644 index 0000000000..836525d876 --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> +<title>Green square</title> +<style> +.filter { + filter: brightness(0.75); +} + +.container { + width: 200px; + height: 200px; + + background-color: green; +} + +.square { + position: absolute; + + width: 200px; + height: 200px; + + background-color: green; +} +</style> +</head> +<body> + +<div class="filter"> + <div class="container"> + <div class="square"></div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html new file mode 100644 index 0000000000..d25df6169c --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Green square</title> +<style> +.filter { + filter: brightness(0.75); +} + +.container { + width: 200px; + height: 200px; + + transform-style: preserve-3d; + background-color: red; +} + +.square { + position: absolute; + + width: 200px; + height: 200px; + + transform-style: preserve-3d; + background-color: green; +} +</style> +</head> +<body> + +<div class="filter"> + <div class="container"> + <div class="square"></div> + </div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/preserves3d-nested-ref.html b/layout/reftests/transform-3d/preserves3d-nested-ref.html new file mode 100644 index 0000000000..b8a744eb76 --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<title>preserve-3d consequence nested context</title> +<style> +.rect { + width: 100px; + height: 100px; +} + +#outeri { + transform-style: preserve-3d; + transform: rotateX(45deg); +} + +#rect1 { + background-color: green; +} + +#rect2 { + transform: translate(50px, 50px); + background-color: pink; +} + +#inneri { + transform: rotateX(45deg); +} + +#rect3 { + background-color: red; +} + +</style> +<body> + <div id="outer"> + <div id="outeri"> + <div id="rect1" class="rect"></div> + <div id="rect2" class="rect"></div> + <div id="inner"> + <div id="inneri"> + <div id="rect3" class="rect"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/layout/reftests/transform-3d/preserves3d-nested.html b/layout/reftests/transform-3d/preserves3d-nested.html new file mode 100644 index 0000000000..673a982e99 --- /dev/null +++ b/layout/reftests/transform-3d/preserves3d-nested.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<title>preserve-3d consequence nested context</title> +<style> +.rect { + width: 100px; + height: 100px; + background-color: green; +} + +#outeri { + transform-style: preserve-3d; + transform: rotateX(45deg); +} + +#inner { + transform: rotateX(0deg); +} + +#inneri { + transform-style: preserve-3d; + transform: rotateX(45deg); +} + +#rect2 { + transform: translate(50px, 50px); + background-color: pink; +} + +#rect3 { + background-color: red; +} + +</style> +<body> + <div id="outer"> + <div id="outeri"> + <div id="rect1" class="rect"></div> + <div id="rect2" class="rect"></div> + <div id="inner"> + <div id="inneri"> + <div id="rect3" class="rect"></div> + </div> + </div> + </div> + </div> +</body> diff --git a/layout/reftests/transform-3d/reftest.list b/layout/reftests/transform-3d/reftest.list new file mode 100644 index 0000000000..12587f51a8 --- /dev/null +++ b/layout/reftests/transform-3d/reftest.list @@ -0,0 +1,102 @@ +== scalez-1a.html scalez-1-ref.html +fuzzy(0-1,0-6) == rotatey-1a.html rotatey-1-ref.html +== rotatex-1a.html rotatex-1-ref.html +# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg) +== scalezrotatex-1.html scalezrotatex-1-ref.html +# Check that the perspectve() transform function results in some visual changes +!= rotatex-perspective-1a.html rotatex-1-ref.html +# Check that perspective results in visual changes to child transformed elements +!= rotatex-perspective-1b.html rotatex-1-ref.html +# perspective should only apply to child elements +== rotatex-perspective-1c.html rotatex-1-ref.html +== rotatex-perspective-3a.html rotatex-perspective-3-ref.html +== scalez-1a.html scalez-1-ref.html +fuzzy(0-16,0-346) fuzzy-if(cocoaWidget,0-200,0-310) fuzzy-if(winWidget,0-175,0-250) == preserve3d-1a.html preserve3d-1-ref.html +== preserve3d-1b.html about:blank +== preserve3d-clipped.html about:blank +== preserve3d-2a.html preserve3d-2-ref.html +== preserve3d-2b.html preserve3d-2-ref.html +== preserve3d-2c.html preserve3d-2-ref.html +== preserve3d-2d.html preserve3d-2-ref.html +== preserve3d-3a.html preserve3d-3-ref.html +== preserve3d-4a.html about:blank +fuzzy(0-16,0-100) == preserve3d-5a.html preserve3d-5-ref.html +== preserve3d-6a.html preserve3d-6-ref.html +== preserve3d-table.html preserve3d-table-ref.html +== scale3d-z.html scalez-1-ref.html +fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == scale3d-all.html scale3d-1-ref.html # subpixel AA +fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == scale3d-all-separate.html scale3d-1-ref.html # subpixel AA +== scale3d-xz.html scale3d-1-ref.html +== translatez-1a.html translatez-1-ref.html +!= translatez-1b.html translatez-1-ref.html +== translate3d-1a.html translate3d-1-ref.html +fuzzy(0-1,0-4) == matrix3d-1a.html matrix3d-1-ref.html +== matrix3d-2a.html matrix3d-2-ref.html +== rotate3d-1a.html rotatex-1-ref.html +== 1467277-1.html rotatex-1-ref.html +fuzzy(0-1,0-6) == rotate3d-2a.html rotatey-1-ref.html +!= backface-visibility-1a.html about:blank +== backface-visibility-1b.html about:blank +== backface-visibility-1c.html about:blank +fuzzy-if(winWidget&&!layersGPUAccelerated,0-1,0-251) fuzzy-if(useDrawSnapshot,64-64,1438-1438) == backface-visibility-2.html backface-visibility-2-ref.html +== backface-visibility-3.html backface-visibility-3-ref.html +== perspective-clipping-1.html perspective-clipping-1-ref.html +== perspective-clipping-2.html perspective-clipping-2-ref.html +!= perspective-origin-1a.html rotatex-perspective-1a.html +fuzzy(0-1,0-3) == perspective-origin-1b.html perspective-origin-1a.html +fuzzy(0-3,0-99) random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2-ref.html # subpixel AA, bug 732568 +fuzzy-if(winWidget&&!layersGPUAccelerated,0-1,0-61) == perspective-origin-3a.html perspective-origin-3-ref.html +== perspective-origin-4a.html perspective-origin-4-ref.html +== perspective-zindex.html green-rect.html +== perspective-zindex-2.html green-rect.html +!= sorting-1a.html sorting-1-ref.html +# Parallel planes, different z depth +== sorting-2a.html sorting-2-ref.html +# Parallel planes, same z depth (shouldn't be sorted!) +== sorting-2b.html sorting-2-ref.html +== sorting-3a.html green-rect.html +# Different, but equivalent (for the given transform) transform origins +fuzzy(0-1,0-4) == rotatex-transformorigin-1a.html rotatex-transformorigin-1-ref.html +fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),0-1,0-86) == overflow-hidden-1a.html overflow-hidden-1-ref.html +== transform-style-flat-1a.html transform-style-flat-1-ref.html +== willchange-containing-block.html?willchange willchange-containing-block.html?ref +!= willchange-containing-block.html?willchange willchange-containing-block.html?noblock +fuzzy(0-3,0-304) == scroll-perspective-1.html scroll-perspective-1-ref.html +# Bugs +fails-if(!layersGPUAccelerated) fails-if(useDrawSnapshot) fuzzy-if(!useDrawSnapshot,0-60,0-826) == 1035611-1.html 1035611-1-ref.html # Bug 1072898 for !layersGPUAccelerated failures +random-if(swgl&&Android) != 1157984-1.html about:blank # Bug 1157984 +fuzzy(0-220,0-660) == animate-cube-radians.html animate-cube-radians-ref.html # subpixel AA +fuzzy(0-240,0-400) == animate-cube-radians-zoom.html animate-cube-radians-zoom-ref.html +!= animate-cube-radians-ref.html animate-cube-radians-zoom-ref.html +fuzzy(0-240,0-660) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA +fuzzy(0-240,0-400) fails-if(useDrawSnapshot) == animate-cube-degrees-zoom.html animate-cube-degrees-zoom-ref.html +!= animate-cube-degrees-ref.html animate-cube-degrees-zoom-ref.html +fuzzy-if(gtkWidget,0-128,0-100) fuzzy-if(Android||(gtkWidget&&layersGPUAccelerated),0-143,0-100) fuzzy-if(winWidget||OSX,0-141,0-100) == preserves3d-nested.html preserves3d-nested-ref.html +fuzzy(0-255,0-153) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac +fuzzy(0-255,0-153) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac, bug 1461311 for Android +== animate-backface-hidden.html about:blank +== 1245450-1.html green-rect.html +fuzzy(0-1,0-2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html +fuzzy(0-1,0-15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html +fuzzy(0-1,0-10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html +fuzzy(0-1,0-10000) == opacity-preserve3d-4.html opacity-preserve3d-4-ref.html +== opacity-preserve3d-5.html opacity-preserve3d-5-ref.html +== snap-perspective-1.html snap-perspective-1-ref.html +fuzzy(0-120,0-590) == mask-layer-1.html mask-layer-ref.html +fuzzy(0-120,0-590) == mask-layer-2.html mask-layer-ref.html +fuzzy(0-120,0-590) == mask-layer-3.html mask-layer-ref.html +== split-intersect1.html split-intersect1-ref.html +fuzzy(0-255,0-150) fails-if(useDrawSnapshot) == split-intersect2.html split-intersect2-ref.html +fuzzy(0-255,0-100) fails-if(useDrawSnapshot) == split-non-ortho1.html split-non-ortho1-ref.html +fuzzy-if(winWidget,0-150,0-120) == component-alpha-1.html component-alpha-1-ref.html +== nested-transform-1.html nested-transform-1-ref.html +fuzzy-if(winWidget,0-4,0-51) == transform-geometry-1.html transform-geometry-1-ref.html +== intermediate-1.html intermediate-1-ref.html +== preserves3d-nested-filter-1.html preserves3d-nested-filter-1-ref.html +!= preserve3d-scale.html about:blank +fuzzy(0-52,0-1600) == preserve3d-scale.html preserve3d-scale-ref.html +fuzzy(0-50,0-22) == perspective-overflow-1.html perspective-overflow-1-ref.html +== perspective-overflow-2.html perspective-overflow-2-ref.html +== 1544995-1.html 1544995-1-ref.html +== preserve3d-will-change-large-frame.html preserve3d-will-change-ref.html +fuzzy(0-6,0-3117) fuzzy-if(useDrawSnapshot,4-4,13-13) == 1637067-1.html 1637067-1-ref.html diff --git a/layout/reftests/transform-3d/rotate3d-1a.html b/layout/reftests/transform-3d/rotate3d-1a.html new file mode 100644 index 0000000000..c4d20fd789 --- /dev/null +++ b/layout/reftests/transform-3d/rotate3d-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate3d(1, 0, 0, 45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotate3d-2a.html b/layout/reftests/transform-3d/rotate3d-2a.html new file mode 100644 index 0000000000..2e593e6df1 --- /dev/null +++ b/layout/reftests/transform-3d/rotate3d-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate3d(0, 1, 0, 45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-1-ref.html b/layout/reftests/transform-3d/rotatex-1-ref.html new file mode 100644 index 0000000000..446d2896c7 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-1a.html b/layout/reftests/transform-3d/rotatex-1a.html new file mode 100644 index 0000000000..c7897f2b90 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg) rotatey(360deg) rotatex(360deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-1a.html b/layout/reftests/transform-3d/rotatex-perspective-1a.html new file mode 100644 index 0000000000..db89219a8c --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-1b.html b/layout/reftests/transform-3d/rotatex-perspective-1b.html new file mode 100644 index 0000000000..440f14c1e3 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-1b.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="perspective: 1000px;"> + <div style="transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-1c.html b/layout/reftests/transform-3d/rotatex-perspective-1c.html new file mode 100644 index 0000000000..0c7be0fb31 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); perspective: 1000px; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-3-ref.html b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html new file mode 100644 index 0000000000..028193ce1c --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html @@ -0,0 +1,33 @@ +<html> +<head> + <style type="text/css"> + #container { + position: relative; + height: 300px; + width: 300px; + margin: 50px 100px; + border: 2px solid blue; + + perspective: 500px; + } + + #parent { + margin: 10px; + width: 280px; + height: 280px; + background-color: #844BCA; + + transform: rotateY(40deg); + } + + </style> +</head> +<body> + + <div id="container"> + <div id="parent"> + </div> + </div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-perspective-3a.html b/layout/reftests/transform-3d/rotatex-perspective-3a.html new file mode 100644 index 0000000000..957c2b32b1 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-perspective-3a.html @@ -0,0 +1,34 @@ +<html> +<head> + <style type="text/css"> + #container { + position: relative; + height: 300px; + width: 300px; + margin: 50px 100px; + border: 2px solid blue; + + perspective: 500px; + opacity: 0.9999; + } + + #parent { + margin: 10px; + width: 280px; + height: 280px; + background-color: #844BCA; + + transform: rotateY(40deg); + } + + </style> +</head> +<body> + + <div id="container"> + <div id="parent"> + </div> + </div> + +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html new file mode 100644 index 0000000000..3b35c1b7c8 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="perspective: 1000px;"> + <div style="transform: rotatex(45deg); transform-origin: top right; width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1a.html b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html new file mode 100644 index 0000000000..c9cff65925 --- /dev/null +++ b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html @@ -0,0 +1,11 @@ +<html> +<head> +</head> +<body> + <div style="perspective: 1000px;"> + <div style="transform: rotatex(45deg); transform-origin: top left; width: 100px; height: 100px;"> + Test Text + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatey-1-ref.html b/layout/reftests/transform-3d/rotatey-1-ref.html new file mode 100644 index 0000000000..f1850c7f74 --- /dev/null +++ b/layout/reftests/transform-3d/rotatey-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatey(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/rotatey-1a.html b/layout/reftests/transform-3d/rotatey-1a.html new file mode 100644 index 0000000000..97f56c740f --- /dev/null +++ b/layout/reftests/transform-3d/rotatey-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatey(45deg) rotatey(360deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-1-ref.html b/layout/reftests/transform-3d/scale3d-1-ref.html new file mode 100644 index 0000000000..a9229a050b --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: scaleX(2) scaleY(2); transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-all-separate.html b/layout/reftests/transform-3d/scale3d-all-separate.html new file mode 100644 index 0000000000..409d911795 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-all-separate.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: scaleX(2) scaleY(2) scaleZ(2); transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-all.html b/layout/reftests/transform-3d/scale3d-all.html new file mode 100644 index 0000000000..97ae36bbf5 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-all.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: scale3D(2,2,2); transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-xz.html b/layout/reftests/transform-3d/scale3d-xz.html new file mode 100644 index 0000000000..14e7edb1cc --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-xz.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(90deg) scale3D(2,1,2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scale3d-z.html b/layout/reftests/transform-3d/scale3d-z.html new file mode 100644 index 0000000000..f9062d9507 --- /dev/null +++ b/layout/reftests/transform-3d/scale3d-z.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(90deg) scale3D(1,1,2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scalez-1-ref.html b/layout/reftests/transform-3d/scalez-1-ref.html new file mode 100644 index 0000000000..54068fb5d5 --- /dev/null +++ b/layout/reftests/transform-3d/scalez-1-ref.html @@ -0,0 +1,10 @@ +<html> +<head> +</head> +<body> + <div style="transform: scaleY(2); transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> + diff --git a/layout/reftests/transform-3d/scalez-1a.html b/layout/reftests/transform-3d/scalez-1a.html new file mode 100644 index 0000000000..13e7e7640c --- /dev/null +++ b/layout/reftests/transform-3d/scalez-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(90deg) scaleZ(2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scalezrotatex-1-ref.html b/layout/reftests/transform-3d/scalezrotatex-1-ref.html new file mode 100644 index 0000000000..a2d81bf9bd --- /dev/null +++ b/layout/reftests/transform-3d/scalezrotatex-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: scaleY(-1); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scalezrotatex-1.html b/layout/reftests/transform-3d/scalezrotatex-1.html new file mode 100644 index 0000000000..2149755091 --- /dev/null +++ b/layout/reftests/transform-3d/scalezrotatex-1.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(180deg) scaleZ(-1); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/scroll-perspective-1-ref.html b/layout/reftests/transform-3d/scroll-perspective-1-ref.html new file mode 100644 index 0000000000..b314133f85 --- /dev/null +++ b/layout/reftests/transform-3d/scroll-perspective-1-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> +<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll"> + <div id="t" style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:0"></div> + <div style="height:4000px"></div> +</div> +<script> +s.scrollTop = 3000; +var tr = t.getBoundingClientRect(); +t.style.height = "300px"; +</script> diff --git a/layout/reftests/transform-3d/scroll-perspective-1.html b/layout/reftests/transform-3d/scroll-perspective-1.html new file mode 100644 index 0000000000..2c17c02543 --- /dev/null +++ b/layout/reftests/transform-3d/scroll-perspective-1.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll"> + <div style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:300px;"></div> + <div style="height:4000px"></div> +</div> +<script> +s.scrollTop = 3000; +</script> diff --git a/layout/reftests/transform-3d/snap-perspective-1-ref.html b/layout/reftests/transform-3d/snap-perspective-1-ref.html new file mode 100644 index 0000000000..ca84e9e738 --- /dev/null +++ b/layout/reftests/transform-3d/snap-perspective-1-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background-color:red"><div> +</body> +</html> diff --git a/layout/reftests/transform-3d/snap-perspective-1.html b/layout/reftests/transform-3d/snap-perspective-1.html new file mode 100644 index 0000000000..a5bd65f084 --- /dev/null +++ b/layout/reftests/transform-3d/snap-perspective-1.html @@ -0,0 +1,12 @@ +<html> +<body> + <div style="perspective:1000px"> + <div style="transform: translateX(-100.2px)"> + <div style="width: 300px; height: 300px; overflow:hidden"> + <div style="transform: translateX(100.2px); background-color:red; width: 100px; height: 100px; will-change: transform;"> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/sorting-1-ref.html b/layout/reftests/transform-3d/sorting-1-ref.html new file mode 100644 index 0000000000..8028e4fd43 --- /dev/null +++ b/layout/reftests/transform-3d/sorting-1-ref.html @@ -0,0 +1,35 @@ +<html> + <head> + <style type="text/css"> + #stage { + perspective: 1000px; + } + + #parent { + transform-style: preserve-3d; + } + + #big { + width: 1000px; + height: 1000px; + background-color: #995C7F; + transform: rotatey(45deg); + } + + #small { + width: 100px; + height: 100px; + background-color: #995C7F; + transform: translate3d(600px, 200px, 0px); + } + </style> + </head> + <body> + <div id="stage"> + <div id="parent"> + <div id="small"></div> + <div id="big"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-1a.html b/layout/reftests/transform-3d/sorting-1a.html new file mode 100644 index 0000000000..1aa878d2c1 --- /dev/null +++ b/layout/reftests/transform-3d/sorting-1a.html @@ -0,0 +1,35 @@ +<html> + <head> + <style type="text/css"> + #stage { + perspective: 1000px; + } + + #parent { + transform-style: preserve-3d; + } + + #big { + width: 1000px; + height: 1000px; + background-color: #995C7F; + transform: rotatey(45deg); + } + + #small { + width: 100px; + height: 100px; + background-color: #835A99; + transform: translate3d(600px, 200px, 0px); + } + </style> + </head> + <body> + <div id="stage"> + <div id="parent"> + <div id="small"></div> + <div id="big"></div> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-2-ref.html b/layout/reftests/transform-3d/sorting-2-ref.html new file mode 100644 index 0000000000..cb34eaf4ed --- /dev/null +++ b/layout/reftests/transform-3d/sorting-2-ref.html @@ -0,0 +1,21 @@ +<html> + <head> + <style type="text/css"> + #one { + width: 100px; + height: 100px; + background-color: #00FF00; + } + + #two { + width: 100px; + height: 50px; + background-color: red; + } + </style> + </head> + <body> + <div id="one"></div> + <div id="two"></div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-2a.html b/layout/reftests/transform-3d/sorting-2a.html new file mode 100644 index 0000000000..6c5ba56f98 --- /dev/null +++ b/layout/reftests/transform-3d/sorting-2a.html @@ -0,0 +1,29 @@ +<html> + <head> + <style type="text/css"> + #parent { + transform-style: preserve-3d; + } + + #one { + width: 100px; + height: 100px; + background-color: #00FF00; + transform: translatez(10px); + } + + #two { + width: 100px; + height: 100px; + background-color: red; + transform: translatez(-10px) translatey(-50px); + } + </style> + </head> + <body> + <div id="parent"> + <div id="one"></div> + <div id="two"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-2b.html b/layout/reftests/transform-3d/sorting-2b.html new file mode 100644 index 0000000000..bb553dd862 --- /dev/null +++ b/layout/reftests/transform-3d/sorting-2b.html @@ -0,0 +1,30 @@ +<html> + <head> + <style type="text/css"> + #parent { + transform-style: preserve-3d; + transform: rotatex(180deg); + } + + #one { + width: 100px; + height: 100px; + background-color: red; + transform: translatez(10px) translatey(50px); + } + + #two { + width: 100px; + height: 100px; + background-color: #00FF00; + transform: translatez(10px); + } + </style> + </head> + <body> + <div id="parent"> + <div id="one"></div> + <div id="two"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/sorting-3a.html b/layout/reftests/transform-3d/sorting-3a.html new file mode 100644 index 0000000000..c408df587c --- /dev/null +++ b/layout/reftests/transform-3d/sorting-3a.html @@ -0,0 +1,25 @@ +<html> + <head> + <style type="text/css"> + #parent { + transform-style: preserve-3d; + transform: rotateX(180deg); + width: 100px; + height: 100px; + background-color: #00FF00; + } + + #child { + width: 100px; + height: 100px; + background-color: red; + transform: translatez(10px); + } + </style> + </head> + <body> + <div id="parent"> + <div id="child"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect1-ref.html b/layout/reftests/transform-3d/split-intersect1-ref.html new file mode 100644 index 0000000000..c30c35615f --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect1-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 1 ref</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; +} + +.shape { + margin: 0 0; + position: absolute; + + width: 50px; + height: 100px; +} + +.first { + background-color: rgba(255,0,0,1); + left: 58px; +} + +.second { + background-color: rgba(0,255,0,1); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape first"></div> + <div class="shape second"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect1.html b/layout/reftests/transform-3d/split-intersect1.html new file mode 100644 index 0000000000..73dc67f12b --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect1.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 1</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; + + width: 100px; + height: 100px; +} + +.first { + background-color: rgba(255,0,0,1); +} + +.second { + background-color: rgba(0,255,0,1); + transform: rotateY(0.1deg); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape first"></div> + <div class="shape second"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect2-ref.html b/layout/reftests/transform-3d/split-intersect2-ref.html new file mode 100644 index 0000000000..5a19840c17 --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect2-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 2 ref</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; +} + +.shape { + margin: 0 0; + position: absolute; +} + +.red { + background-color: rgba(255,0,0,1); + + width: 100px; + height: 15px; + + top: 150.5px; + left: 73px; +} + +.green1 { + background-color: rgba(0,255,0,1); + + width: 30px; + height: 42.5px; + + top: 108px; + left: 88px; +} + +.green2 { + background-color: rgba(0,255,0,1); + + width: 30px; + height: 50px; + + top: 158px; + left: 88px; +} + +.blue1 { + background-color: rgba(0,0,255,1); + + top: 108px; + left: 128px; + + width: 30px; + height: 42.5px; +} + +.blue2 { + background-color: rgba(0,0,255,1); + + width: 30px; + height: 50px; + + top: 158px; + left: 128px; +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape red"></div> + <div class="shape green1"></div> + <div class="shape green2"></div> + <div class="shape blue1"></div> + <div class="shape blue2"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-intersect2.html b/layout/reftests/transform-3d/split-intersect2.html new file mode 100644 index 0000000000..345e4a5630 --- /dev/null +++ b/layout/reftests/transform-3d/split-intersect2.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split intersect 2</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; + + width: 30px; + height: 100px; +} + +.red { + background-color: rgba(255,0,0,1); + transform: translate(100px, 100px) rotateZ(90deg) rotateY(60deg); +} + +.green { + background-color: rgba(0,255,0,1); + transform: translate(80px, 100px); +} + +.blue { + background-color: rgba(0,0,255,1); + transform: translate(120px, 100px); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape red"></div> + <div class="shape green"></div> + <div class="shape blue"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/split-non-ortho1-ref.html b/layout/reftests/transform-3d/split-non-ortho1-ref.html new file mode 100644 index 0000000000..d519431de6 --- /dev/null +++ b/layout/reftests/transform-3d/split-non-ortho1-ref.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split non-orthogonal 1 ref</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + position: absolute; + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; +} + +.red-square-back { + background-color: rgba(255,0,0,1); + + width: 100px; + height: 100px; + + top: 50px; + left: 50px; +} + +.green-square-back { + background-color: rgba(0,255,0,1); + + width: 150px; + height: 150px; + + top: 50px; + left: 50px; + + transform: rotateZ(45deg); +} + +.red-square-front { + background-color: rgba(255,0,0,1); + + width: 50px; + height: 50px; + + top: 100px; + left: 100px; +} + +.green-square-front { + background-color: rgba(0,255,0,1); + + width: 72px; + height: 72px; + + top: 63.5px; + left: 63.5px; + + transform: rotateZ(45deg); +} + +#canvas { + width: 100px + height: 100px; + + top: 100px; + left: 100px; +} + +</style> +</head> + +<body> + <div class="container"> + <div class="shape red-square-back"></div> + <div class="shape green-square-back"></div> + <div class="shape red-square-front"></div> + <div class="shape green-square-front"></div> + </div> +</body> + +</html> diff --git a/layout/reftests/transform-3d/split-non-ortho1.html b/layout/reftests/transform-3d/split-non-ortho1.html new file mode 100644 index 0000000000..4612e0b9ff --- /dev/null +++ b/layout/reftests/transform-3d/split-non-ortho1.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<meta charset="utf-8"> +<title>Split non-orthogonal 1</title> + +<style> +.container { + margin: 0 0; + width: 400px; + height: 400px; + + position: absolute; + transform-style: preserve-3d; +} + +.shape { + margin: 0 0; + position: absolute; +} + +.first { + background-color: rgba(255,0,0,1); + + width: 100px; + height: 100px; + + top: 50px; + left: 50px; +} + +.second { + background-color: rgba(0,255,0,1); + + width: 150px; + height: 150px; + + top: 50px; + left: 50px; + + transform: rotateZ(45deg) rotateY(0.1deg); +} +</style> +</head> + +<body> + <div class="container"> + <div class="shape second"></div> + <div class="shape first"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/transform-geometry-1-ref.html b/layout/reftests/transform-3d/transform-geometry-1-ref.html new file mode 100644 index 0000000000..c9c03ece43 --- /dev/null +++ b/layout/reftests/transform-3d/transform-geometry-1-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +<style type="text/css"> +#parent { + width: 400px; + height: 400px; + transform-style: flat; +} + +#child { + width: 400px; + height: 400px; + overflow: scroll; +} + +.box { + width: 400px; + height: 300px; + background-color: red; +} +</style> + +</head> +<body> + +<div id="parent"> + <div id="child"> + <div class="box"></div> + <div class="box"></div> + </div> +</div> + +<script> +function doTest() { + document.documentElement.removeAttribute("class"); + document.getElementById("child").scrollTop = 200; +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> + +</body> +</html> diff --git a/layout/reftests/transform-3d/transform-geometry-1.html b/layout/reftests/transform-3d/transform-geometry-1.html new file mode 100644 index 0000000000..0ee592e3ee --- /dev/null +++ b/layout/reftests/transform-3d/transform-geometry-1.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> + +<style type="text/css"> +#parent { + width: 400px; + height: 400px; + transform-style: preserve-3d; +} + +#child { + width: 400px; + height: 400px; + overflow: scroll; +} + +.box { + width: 400px; + height: 300px; + background-color: red; +} +</style> + +</head> +<body> + +<div id="parent"> + <div id="child"> + <div class="box"></div> + <div class="box"></div> + </div> +</div> + +<script> +function doTest() { + document.documentElement.removeAttribute("class"); + document.getElementById("child").scrollTop = 200; +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> + +</body> +</html> diff --git a/layout/reftests/transform-3d/transform-style-flat-1-ref.html b/layout/reftests/transform-3d/transform-style-flat-1-ref.html new file mode 100644 index 0000000000..e73834bb64 --- /dev/null +++ b/layout/reftests/transform-3d/transform-style-flat-1-ref.html @@ -0,0 +1,6 @@ +<html> + <body> + <div style="height: 100px; width: 100px; background: lime"> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/transform-style-flat-1a.html b/layout/reftests/transform-3d/transform-style-flat-1a.html new file mode 100644 index 0000000000..1e7f2a00c8 --- /dev/null +++ b/layout/reftests/transform-3d/transform-style-flat-1a.html @@ -0,0 +1,8 @@ +<html> + <body> + <div style="transform: rotatex(45deg); transform-origin: top"> + <div style="transform: rotatex(-45deg); transform-origin: top; height: 200px; width: 100px; background: lime"> + </div> + </div> + </body> +</html> diff --git a/layout/reftests/transform-3d/translate3d-1-ref.html b/layout/reftests/transform-3d/translate3d-1-ref.html new file mode 100644 index 0000000000..4a4b2b95ad --- /dev/null +++ b/layout/reftests/transform-3d/translate3d-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); transform-origin: 10px 30px -10px; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translate3d-1a.html b/layout/reftests/transform-3d/translate3d-1a.html new file mode 100644 index 0000000000..2eae430836 --- /dev/null +++ b/layout/reftests/transform-3d/translate3d-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate3d(10px, 30px, -10px) rotatex(45deg) translate3d(-10px, -30px, 10px); transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translatez-1-ref.html b/layout/reftests/transform-3d/translatez-1-ref.html new file mode 100644 index 0000000000..413ce3b027 --- /dev/null +++ b/layout/reftests/transform-3d/translatez-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotatex(45deg); transform-origin: 0 0 -10px; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translatez-1a.html b/layout/reftests/transform-3d/translatez-1a.html new file mode 100644 index 0000000000..e721bde209 --- /dev/null +++ b/layout/reftests/transform-3d/translatez-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatez(-10px) rotatex(45deg) translatez(10px); transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/translatez-1b.html b/layout/reftests/transform-3d/translatez-1b.html new file mode 100644 index 0000000000..78987b8858 --- /dev/null +++ b/layout/reftests/transform-3d/translatez-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatez(-20px) rotatex(45deg) translatez(20px); transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform-3d/willchange-containing-block.html b/layout/reftests/transform-3d/willchange-containing-block.html new file mode 100644 index 0000000000..95de2c74d0 --- /dev/null +++ b/layout/reftests/transform-3d/willchange-containing-block.html @@ -0,0 +1,43 @@ +<!DOCTYPE HTML> +<html> +<body> +<style> +body { + padding: 100px; + width: 5000px; + height: 5000px; + overflow: scroll; +} +div { +} +#parent { + background:red; + width: 64px; + height: 64px; +} +#child { + background:green; + position:fixed; + width: 32px; + height: 32px; +} +</style> +<div id="parent"> +<div id="child"> + +</div> +</div> +<script type="application/javascript"> + +if (document.location.search == '?willchange') { + document.getElementById("parent").style.willChange = "transform"; +} else if (document.location.search == '?ref') { + document.getElementById("parent").style.transform = "translateZ(1px)"; +} else if (document.location.search == '?noblock') { +} + +document.documentElement.scrollTop = 10; +document.documentElement.scrollLeft = 10; +</script> +</body> +</html> diff --git a/layout/reftests/transform/1569215-1-ref.html b/layout/reftests/transform/1569215-1-ref.html new file mode 100644 index 0000000000..de52ba1e8c --- /dev/null +++ b/layout/reftests/transform/1569215-1-ref.html @@ -0,0 +1,10 @@ +<style> +path { + stroke: #000; + fill: none; +} +</style> + +<svg width="500" height="500" viewBox="105 125 20 20"> + <path id="pp" d="m 95,130 h 36" /> +</svg> diff --git a/layout/reftests/transform/1569215-1.html b/layout/reftests/transform/1569215-1.html new file mode 100644 index 0000000000..b1b199ab63 --- /dev/null +++ b/layout/reftests/transform/1569215-1.html @@ -0,0 +1,28 @@ +<style> +path { + stroke: #000; + fill: none; +} + +#pp { + animation: flyR 5s infinite; +} + +@keyframes flyR { + from { + transform: translate(9px); + } + + 50% { + transform: translate(4.5px); + } + + to { + transform: translate(0px); + } +} +</style> + +<svg width="500" height="500" viewBox="105 125 20 20"> + <path id="pp" d="m 95,130 h 36" /> +</svg> diff --git a/layout/reftests/transform/601894-1.html b/layout/reftests/transform/601894-1.html new file mode 100644 index 0000000000..ae68117579 --- /dev/null +++ b/layout/reftests/transform/601894-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <body style="background: linear-gradient(lime, lime) fixed; overflow: hidden;"> + <div style="position: absolute; left: 21.0138px; top: 507.24px; z-index: 17567; transform: scale(8);"> + <div style="height: 128px; left: -64px; position: absolute; top: -64px; visibility: visible; width: 128px;"></div> + </div> + <div style="position: absolute; left: 640.572px; top: 386.574px; transform: scale(1); z-index: -157863;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + <div style="position: absolute; left: 568.346px; top: 582.669px; transform: scale(1); z-index: -62592;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + <div style="position: absolute; left: 573.27px; top: 168.861px; transform: scale(1); z-index: -137632;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + <div style="position: absolute; left: 519.063px; top: 182.9px; transform: scale(1); z-index: -50558;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform/601894-2.html b/layout/reftests/transform/601894-2.html new file mode 100644 index 0000000000..d805456c62 --- /dev/null +++ b/layout/reftests/transform/601894-2.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body style="background: linear-gradient(lime, lime) fixed;"> + <div style="position: absolute; left: 0; top: 0; transform: scale(1)"> + <div style="position: absolute; width: 200px; height: 200px;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform/601894-ref.html b/layout/reftests/transform/601894-ref.html new file mode 100644 index 0000000000..f4e6cdae83 --- /dev/null +++ b/layout/reftests/transform/601894-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<body style="background: lime;"> diff --git a/layout/reftests/transform/830299-1-ref.html b/layout/reftests/transform/830299-1-ref.html new file mode 100644 index 0000000000..d5cf007103 --- /dev/null +++ b/layout/reftests/transform/830299-1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en-US"> +<head> + <title>Testcase, bug 830299</title> + <meta charset=UTF-8> + <style type="text/css"> + + html { margin: 1px; padding: 2px } + body { margin: 4px; padding: 8px } + + #outer { + position: absolute; + top: 3px; left: 5px; + width: 200px; height: 200px; + background: yellow; + } + + #inner { + position: absolute; + top: 7px; left: 9px; + width: 100px; height: 100px; + background: aqua; + } + + </style> +</head> +<body> + +<div id="outer"> + <div id="inner">inner</div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform/830299-1.html b/layout/reftests/transform/830299-1.html new file mode 100644 index 0000000000..3d7c799334 --- /dev/null +++ b/layout/reftests/transform/830299-1.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang="en-US" class="reftest-wait"> +<head> + <title>Testcase, bug 830299</title> + <meta charset=UTF-8> + <style type="text/css"> + + html { margin: 1px; padding: 2px } + body { margin: 4px; padding: 8px } + + #outer { + position: absolute; + overflow: hidden; + transform: translateX(0px); + top: 3px; left: 5px; + width: 200px; height: 200px; + background: yellow; + } + + #inner { + position: fixed; + top: 7px; left: 9px; + width: 100px; height: 100px; + background: aqua; + } + + </style> + <script type="text/javascript"> + + window.addEventListener("load", function(event) { + setTimeout(function() { + document.getElementById("inner").style.display = ""; + document.documentElement.removeAttribute("class"); + }, 100); + }); + + </script> +</head> +<body> + +<div id="outer"> + <div id="inner" style="display:none">inner</div> +</div> + +</body> +</html> diff --git a/layout/reftests/transform/abspos-1-ref.html b/layout/reftests/transform/abspos-1-ref.html new file mode 100644 index 0000000000..337c849b51 --- /dev/null +++ b/layout/reftests/transform/abspos-1-ref.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; position: relative; left: 50px; top: 50px; background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1a.html b/layout/reftests/transform/abspos-1a.html new file mode 100644 index 0000000000..b8270222df --- /dev/null +++ b/layout/reftests/transform/abspos-1a.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; transform: translate(50px, 50px); background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1b.html b/layout/reftests/transform/abspos-1b.html new file mode 100644 index 0000000000..c2a0a668c3 --- /dev/null +++ b/layout/reftests/transform/abspos-1b.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1c.html b/layout/reftests/transform/abspos-1c.html new file mode 100644 index 0000000000..536d2559cc --- /dev/null +++ b/layout/reftests/transform/abspos-1c.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; right: -150px; bottom: 0px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1d.html b/layout/reftests/transform/abspos-1d.html new file mode 100644 index 0000000000..13f21e1ca2 --- /dev/null +++ b/layout/reftests/transform/abspos-1d.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -150px; bottom: 0px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1e.html b/layout/reftests/transform/abspos-1e.html new file mode 100644 index 0000000000..b6a90de489 --- /dev/null +++ b/layout/reftests/transform/abspos-1e.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -151px; bottom: 0px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1f.html b/layout/reftests/transform/abspos-1f.html new file mode 100644 index 0000000000..8139a9f194 --- /dev/null +++ b/layout/reftests/transform/abspos-1f.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; transform: translate(50px, 50px); background-color: gold; display: table"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1g.html b/layout/reftests/transform/abspos-1g.html new file mode 100644 index 0000000000..ac35376bc9 --- /dev/null +++ b/layout/reftests/transform/abspos-1g.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; transform: translate(50px, 50px) ;background-color: gold;display: inline-table"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html new file mode 100644 index 0000000000..3f2974597f --- /dev/null +++ b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1122526</title> +<style> + +#outer, #inner { + display: inline-block; + background: white; + color: black; +} + +#inner { + vertical-align: top; + height: 100px; + width: 100px; + background: repeating-linear-gradient(to top left, yellow, blue 10px); + will-change: transform; +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1.html b/layout/reftests/transform/animate-layer-scale-inherit-1.html new file mode 100644 index 0000000000..b04c4a8fa9 --- /dev/null +++ b/layout/reftests/transform/animate-layer-scale-inherit-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1122526</title> +<style> + +#outer, #inner { + display: inline-block; + background: white; + color: black; +} +#outer { transform: scale(5) } +#inner { animation: HoldTransform linear infinite 1s } +#inner { + vertical-align: top; + height: 100px; + width: 100px; + background: repeating-linear-gradient(to top left, yellow, blue 10px); +} +@keyframes HoldTransform { + from, to { transform: scale(0.2) } +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html new file mode 100644 index 0000000000..714f6f2224 --- /dev/null +++ b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1122526</title> +<style> + +#outer, #inner { + display: inline-block; + background: white; + color: black; +} +#inner { + vertical-align: top; + height: 100px; + width: 100px; + background: repeating-linear-gradient(to top left, yellow, blue 10px); + opacity: 0.6; + will-change: transform, opacity; +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2.html b/layout/reftests/transform/animate-layer-scale-inherit-2.html new file mode 100644 index 0000000000..f7297d1213 --- /dev/null +++ b/layout/reftests/transform/animate-layer-scale-inherit-2.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1122526</title> +<style> + +#outer, #inner { + display: inline-block; + background: white; + color: black; +} +#outer { transform: scale(5) } +#inner { animation: HoldTransform linear infinite 1s, + HoldOpacity linear infinite 1s; } +#inner { + vertical-align: top; + height: 100px; + width: 100px; + background: repeating-linear-gradient(to top left, yellow, blue 10px); +} +@keyframes HoldTransform { + from, to { transform: scale(0.2) } +} +@keyframes HoldOpacity { + from, to { opacity: 0.6 } +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-3.html b/layout/reftests/transform/animate-layer-scale-inherit-3.html new file mode 100644 index 0000000000..4badfbd825 --- /dev/null +++ b/layout/reftests/transform/animate-layer-scale-inherit-3.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>Testcase, bug 1122526</title> +<style> + +#outer, #inner { + display: inline-block; + background: white; + color: black; +} +/* + * We use step-end with reverse direction to paint the initial state + * on the first frame, and step to the last state on the next frame. + */ +#inner { animation: HoldTransform step-end 100s reverse } +#inner { + vertical-align: top; + height: 100px; + width: 100px; + background: repeating-linear-gradient(to top left, yellow, blue 10px); +} +@keyframes HoldTransform { + /* need to initially rasterize at non-identity transform to hit the + * bug at all + * NOTE: These keyframes will be used reverse direction. + */ + 0% { transform: none } + 100% { transform: scale(0.2) } +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> + +<script> + +document.getElementById("inner").addEventListener("animationstart", StartListener); + +function StartListener(event) { + // Animation should be zoomed to transform:none after the first frame. + requestAnimationFrame(RemoveReftestWait); +} + +function RemoveReftestWait() { + document.documentElement.classList.remove("reftest-wait"); +} + +</script> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html new file mode 100644 index 0000000000..16688d4def --- /dev/null +++ b/layout/reftests/transform/animate-layer-scale-inherit-4-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1122526</title> +<style> + +#outer, #inner { + display: inline-block; + background: white; + color: black; +} +#inner { + vertical-align: top; + height: 100px; + width: 100px; + background: repeating-linear-gradient(to top left, yellow, blue 10px); + will-change: transform; +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-4.html b/layout/reftests/transform/animate-layer-scale-inherit-4.html new file mode 100644 index 0000000000..8ab439fc7a --- /dev/null +++ b/layout/reftests/transform/animate-layer-scale-inherit-4.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<title>Testcase, bug 1526847</title> +<style> + +#outer, #inner { + display: inline-block; + background: white; + color: black; +} +#outer { scale: 5 } +#inner { + vertical-align: top; + height: 100px; + width: 100px; + background: repeating-linear-gradient(to top left, yellow, blue 10px); + animation: HoldTransform linear infinite 1s; +} +@keyframes HoldTransform { + from, to { scale: 0.5; transform: scale(0.4); } +} + +</style> + +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/layout/reftests/transform/compound-1-fail.html b/layout/reftests/transform/compound-1-fail.html new file mode 100644 index 0000000000..d252d45c09 --- /dev/null +++ b/layout/reftests/transform/compound-1-fail.html @@ -0,0 +1,35 @@ +<html> +<head> + <style type="text/css"> + div.test + { + background-color: gold; + width:200px; + height:100px; + border: 1px solid black; + } + div + { + transform-origin: top left; + } + html + { + scrollbar-width: none; + } + </style> +</head> +<body> + <div style="position:relative; left:400px; top:200px;"> + <div style="transform: skew(15deg);"> + <div style="transform: rotate(90deg);"> + <div style="transform: scale(2);"> + <div style="transform: translate(100px);"> + <div class="test"> + </div> + </div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/compound-1-ref.html b/layout/reftests/transform/compound-1-ref.html new file mode 100644 index 0000000000..dcc45ef263 --- /dev/null +++ b/layout/reftests/transform/compound-1-ref.html @@ -0,0 +1,36 @@ +<html> +<head> + <meta name="viewport" content="initial-scale=1"> + <style type="text/css"> + div.test + { + background-color: gold; + width:200px; + height:100px; + border: 1px solid black; + } + div + { + transform-origin: top left; + } + html + { + scrollbar-width: none; + } + </style> +</head> +<body> + <div style="position:relative; left:400px; top:200px;"> + <div style="transform: translate(100px);"> + <div style="transform: scale(2);"> + <div style="transform: rotate(90deg);"> + <div style="transform: skew(15deg);"> + <div class="test"> + </div> + </div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/compound-1a.html b/layout/reftests/transform/compound-1a.html new file mode 100644 index 0000000000..ce36c58422 --- /dev/null +++ b/layout/reftests/transform/compound-1a.html @@ -0,0 +1,28 @@ +<html> +<head> + <meta name="viewport" content="initial-scale=1"> + <style type="text/css"> + div.test + { + background-color: gold; + width:200px; + height:100px; + border: 1px solid black; + } + div + { + transform-origin: top left; + } + html + { + scrollbar-width: none; + } + </style> +</head> +<body> + <div style="position:relative; left:400px; top:200px;"> + <div class="test" style="transform: translate(100px) scale(2) rotate(90deg) skew(15deg);"> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/descendant-1-ref.html b/layout/reftests/transform/descendant-1-ref.html new file mode 100644 index 0000000000..827090c7e7 --- /dev/null +++ b/layout/reftests/transform/descendant-1-ref.html @@ -0,0 +1,21 @@ +<html> +<head> + <style> + #div1 { + background: green; + height: 100px; + width: 100px; + } + span { + background: yellow; + } + </style> +</head> +<body> + <div id="div1"> + <span style="position: relative; top: 150px; left: 20px">span 1</span> + </div> + <span>span 2</span> + +</body> +</html> diff --git a/layout/reftests/transform/descendant-1.html b/layout/reftests/transform/descendant-1.html new file mode 100644 index 0000000000..3ea83eb755 --- /dev/null +++ b/layout/reftests/transform/descendant-1.html @@ -0,0 +1,23 @@ +<html> +<head> + <style> + #div1 { + background: green; + height: 100px; + width: 100px; + } + span { + background: yellow; + } + #div1 div {transform: translate(20px, 150px); + transform-origin: 0% 0%; + } + </style> +</head> +<body> + <div id="div1"> + <div><span>span 1</span></div> + </div> + <span>span 2</span> +</body> +</html> diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html new file mode 100644 index 0000000000..e2d067e1f6 --- /dev/null +++ b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + The green square below should be centered. + <div style="width: 400px; height: 400px; position: absolute; + perspective: 600px; left: calc(50% - 200px); + top: calc(50% - 200px); background: green;"> + </div> +</html> diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1.html b/layout/reftests/transform/dynamic-add-without-change-cb-1.html new file mode 100644 index 0000000000..7b8307b4fb --- /dev/null +++ b/layout/reftests/transform/dynamic-add-without-change-cb-1.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + The green square below should be centered. + <div style="width: 400px; height: 400px; position: absolute; + perspective: 600px; left: 50%; top: 50%; background: green;"> + </div> + <script> + document.body.offsetWidth; + document.querySelector("div").style.transform = "translate(-50%, -50%)"; + </script> +</html> diff --git a/layout/reftests/transform/dynamic-addremove-1-ref.html b/layout/reftests/transform/dynamic-addremove-1-ref.html new file mode 100644 index 0000000000..271b1a6470 --- /dev/null +++ b/layout/reftests/transform/dynamic-addremove-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div style="position:absolute; left:80px; top:20px; width:100px; height:100px; background:yellow"> + <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange"></div> +</div> +</body> +</html> diff --git a/layout/reftests/transform/dynamic-addremove-1a.html b/layout/reftests/transform/dynamic-addremove-1a.html new file mode 100644 index 0000000000..580e0fd722 --- /dev/null +++ b/layout/reftests/transform/dynamic-addremove-1a.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="margin:0;"> +<div id="t" style="width:100px; height:100px; background:yellow;"> + <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange;"></div> +</div> +<script> +function doTest() { + document.getElementById("t").style.transform = "translate(80px,20px)"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/transform/dynamic-addremove-1b.html b/layout/reftests/transform/dynamic-addremove-1b.html new file mode 100644 index 0000000000..5c17bc073b --- /dev/null +++ b/layout/reftests/transform/dynamic-addremove-1b.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="margin:0;"> +<div id="t" style="width:100px; height:100px; background:yellow;"> + <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div> +</div> +<script> +function doTest() { + document.getElementById("t").style.transform = "translate(80px,20px)"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/transform/dynamic-addremove-1c.html b/layout/reftests/transform/dynamic-addremove-1c.html new file mode 100644 index 0000000000..519fc19f20 --- /dev/null +++ b/layout/reftests/transform/dynamic-addremove-1c.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<body style="margin:0;"> +<div id="t" style="width:100px; height:100px; background:yellow;"> + <div style="float:left;"> + <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div> + </div> +</div> +<script> +function doTest() { + document.getElementById("t").style.transform = "translate(80px,20px)"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/transform/dynamic-addremove-2-ref.html b/layout/reftests/transform/dynamic-addremove-2-ref.html new file mode 100644 index 0000000000..d92058201d --- /dev/null +++ b/layout/reftests/transform/dynamic-addremove-2-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<html style="background: green"> +</html> diff --git a/layout/reftests/transform/dynamic-addremove-2.html b/layout/reftests/transform/dynamic-addremove-2.html new file mode 100644 index 0000000000..b6718b29a7 --- /dev/null +++ b/layout/reftests/transform/dynamic-addremove-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html style="background: red"> + <div style="transform: translate3d(0, 0, 0); position: absolute; + top: 0; left: 0; width: 100px; height: 100px"> + <div style="position: absolute"> + <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0; + background: green"> + </div> + </div> + </div> + <script> + onload = function() { + document.body.offsetWidth; + document.querySelector("div").style.transform = "none"; + } + </script> +</html> diff --git a/layout/reftests/transform/dynamic-inherit-1-ref.html b/layout/reftests/transform/dynamic-inherit-1-ref.html new file mode 100644 index 0000000000..02743d8c4a --- /dev/null +++ b/layout/reftests/transform/dynamic-inherit-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<head> +<title>Test for bug 521720</title> +<style type="text/css"> + +p { + transform-origin: inherit; + transform: scale(2); + height: 10px; + width: 10px; + background: green; + margin: 50px; +} + +</style> +<head> +<body> +<div id="a"> +<p style="font-size: 10px"></p> +</div> +</body> diff --git a/layout/reftests/transform/dynamic-inherit-1.html b/layout/reftests/transform/dynamic-inherit-1.html new file mode 100644 index 0000000000..4c410e2441 --- /dev/null +++ b/layout/reftests/transform/dynamic-inherit-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<head> +<title>Test for bug 521720</title> +<style type="text/css"> + +p { + transform-origin: inherit; + transform: scale(2); + height: 10px; + width: 10px; + background: green; + margin: 50px; +} + +</style> +<head> +<body onload="document.getElementById('a').style.removeProperty('transform-origin');"> +<div id="a" style="transform-origin: 10px 10px"> +<p style="font-size: 10px"></p> +</div> +</body> diff --git a/layout/reftests/transform/iframe-1-ref.html b/layout/reftests/transform/iframe-1-ref.html new file mode 100644 index 0000000000..43c76457a4 --- /dev/null +++ b/layout/reftests/transform/iframe-1-ref.html @@ -0,0 +1,15 @@ +<html> + <head> + <style> + iframe { + overflow: hidden; + height: 200px; + width: 300px; + } + </style> + </head> + <body> + <iframe src="about:blank"> + </iframe> + </body> +</html> diff --git a/layout/reftests/transform/iframe-1.html b/layout/reftests/transform/iframe-1.html new file mode 100644 index 0000000000..6a2b621df9 --- /dev/null +++ b/layout/reftests/transform/iframe-1.html @@ -0,0 +1,14 @@ +<html> + <head> + <style> + iframe { + height: 200px; + width: 300px; + } + </style> + </head> + <body> + <iframe scrolling="no" src="iframe-transform.html"> + </iframe> + </body> +</html> diff --git a/layout/reftests/transform/iframe-transform.html b/layout/reftests/transform/iframe-transform.html new file mode 100644 index 0000000000..5e644ea493 --- /dev/null +++ b/layout/reftests/transform/iframe-transform.html @@ -0,0 +1,16 @@ +<html> + <head> + <style> + div { + height: 200px; + width: 200px; + background: green; + transform: translate(500px, 500px); + } + </style> + </head> + <body> + <div> + </div> + </body> +</html> diff --git a/layout/reftests/transform/inline-1-ref.html b/layout/reftests/transform/inline-1-ref.html new file mode 100644 index 0000000000..84a2f6dd4a --- /dev/null +++ b/layout/reftests/transform/inline-1-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +This is some text<br>that is not transformed diff --git a/layout/reftests/transform/inline-1a.html b/layout/reftests/transform/inline-1a.html new file mode 100644 index 0000000000..823c1ac6b3 --- /dev/null +++ b/layout/reftests/transform/inline-1a.html @@ -0,0 +1,3 @@ +<!doctype html> +This is some <span style="transform:rotate(180deg)">text<br> +that is</span> not transformed diff --git a/layout/reftests/transform/invalidate-svg-scale-1-ref.html b/layout/reftests/transform/invalidate-svg-scale-1-ref.html new file mode 100644 index 0000000000..dde3a479aa --- /dev/null +++ b/layout/reftests/transform/invalidate-svg-scale-1-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Bug 1490518</title> +</head> +<body> +<div style="position: absolute; top: 0px; left: 0px; transform: scale(2.0);"> + <div style="position: absolute; top: 0px; left: 0px; width: 200px; background: green; height: 50px; will-change: opacity"></div> + <svg width="200" height="200" style="position: absolute; top: 50px; left: 0px;"> + <rect x="0" y="0" width="200" height="200" fill="transparent"/> + </svg> +</div> +</body> +</html> diff --git a/layout/reftests/transform/invalidate-svg-scale-1.html b/layout/reftests/transform/invalidate-svg-scale-1.html new file mode 100644 index 0000000000..f1ef5fdf65 --- /dev/null +++ b/layout/reftests/transform/invalidate-svg-scale-1.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="utf-8"> +<title>Bug 1490518</title> +</head> +<body> +<div style="position: absolute; top: 0px; left: 0px; transform: scale(2.0);"> + <div style="position: absolute; top: 0px; left: 0px; width: 200px; background: green; height: 50px; will-change: opacity"></div> + <svg width="200" height="200" style="position: absolute; top: 50px; left: 0px;"> + <rect x="0" y="0" width="200" height="200" fill="transparent"/> + <rect x="0" y="0" width="200" height="200" fill="blue" id="rect"/> + </svg> +</div> + +<script> +function doTest() { + document.getElementById("rect").style.visibility = "hidden"; + document.documentElement.removeAttribute("class"); +} +window.addEventListener("MozReftestInvalidate", doTest); +</script> +</body> +</html> diff --git a/layout/reftests/transform/invalidate-transform-1-ref.html b/layout/reftests/transform/invalidate-transform-1-ref.html new file mode 100644 index 0000000000..6121847d70 --- /dev/null +++ b/layout/reftests/transform/invalidate-transform-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title></title> +</head> +<style type="text/css"> +#green { + position: absolute; + top: 8px; + left: 208px; + width: 200px; + height: 200px; + background-color: green; + z-index: 1; +} +</style> +<body> +<div id="green"></div> +</body> +</html> diff --git a/layout/reftests/transform/invalidate-transform-1.html b/layout/reftests/transform/invalidate-transform-1.html new file mode 100644 index 0000000000..d4403630a3 --- /dev/null +++ b/layout/reftests/transform/invalidate-transform-1.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<meta charset="UTF-8"> +<title></title> +</head> +<style type="text/css"> +#parent { + width: 200px; + height: 200px; +} + +#box { + width: 200px; + height: 200px; + background-color: red; + z-index: 0; +} + +#green { + position: absolute; + top: 8px; + left: 208px; + width: 200px; + height: 200px; + background-color: green; + z-index: 1; +} +</style> +<body> + +<div id="parent"> + <div id="box"></div> +</div> +<div id="green"></div> + +<script type="text/javascript"> +function doTest() { + var element = document.getElementById("parent"); + element.style.transform = "translate(200px, 0px)"; + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest); + +</script> + +</body> +</html> diff --git a/layout/reftests/transform/matrix-1-ref.html b/layout/reftests/transform/matrix-1-ref.html new file mode 100644 index 0000000000..475b6bbe5c --- /dev/null +++ b/layout/reftests/transform/matrix-1-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatex(100px); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-1a.html b/layout/reftests/transform/matrix-1a.html new file mode 100644 index 0000000000..9a5ff58d33 --- /dev/null +++ b/layout/reftests/transform/matrix-1a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 0, 0, 1, 100, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-2-ref.html b/layout/reftests/transform/matrix-2-ref.html new file mode 100644 index 0000000000..66d0d80b43 --- /dev/null +++ b/layout/reftests/transform/matrix-2-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatey(100px); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-2a.html b/layout/reftests/transform/matrix-2a.html new file mode 100644 index 0000000000..314f335b8f --- /dev/null +++ b/layout/reftests/transform/matrix-2a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 0, 0, 1, 0, 100); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-3-ref.html b/layout/reftests/transform/matrix-3-ref.html new file mode 100644 index 0000000000..0dbcfc2bf3 --- /dev/null +++ b/layout/reftests/transform/matrix-3-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatex(47%); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-3a.html b/layout/reftests/transform/matrix-3a.html new file mode 100644 index 0000000000..5277707912 --- /dev/null +++ b/layout/reftests/transform/matrix-3a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 0, 0, 1, 47, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-4-ref.html b/layout/reftests/transform/matrix-4-ref.html new file mode 100644 index 0000000000..087d8c8a83 --- /dev/null +++ b/layout/reftests/transform/matrix-4-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatey(23%); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-4a.html b/layout/reftests/transform/matrix-4a.html new file mode 100644 index 0000000000..c7224096e6 --- /dev/null +++ b/layout/reftests/transform/matrix-4a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 0, 0, 1, 0, 23); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-5-ref.html b/layout/reftests/transform/matrix-5-ref.html new file mode 100644 index 0000000000..52a89c6e52 --- /dev/null +++ b/layout/reftests/transform/matrix-5-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: skewx(45deg); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-5a.html b/layout/reftests/transform/matrix-5a.html new file mode 100644 index 0000000000..cfcc9ddb18 --- /dev/null +++ b/layout/reftests/transform/matrix-5a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 0, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-6-ref.html b/layout/reftests/transform/matrix-6-ref.html new file mode 100644 index 0000000000..e97131cd34 --- /dev/null +++ b/layout/reftests/transform/matrix-6-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: skewy(45deg); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-6a.html b/layout/reftests/transform/matrix-6a.html new file mode 100644 index 0000000000..88650733c2 --- /dev/null +++ b/layout/reftests/transform/matrix-6a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 1, 0, 1, 0, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-7-ref.html b/layout/reftests/transform/matrix-7-ref.html new file mode 100644 index 0000000000..dddab1a738 --- /dev/null +++ b/layout/reftests/transform/matrix-7-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: scale(2, 4); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-7a.html b/layout/reftests/transform/matrix-7a.html new file mode 100644 index 0000000000..46904f1b26 --- /dev/null +++ b/layout/reftests/transform/matrix-7a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(2, 0, 0, 4, 0, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix3d-1-ref.html b/layout/reftests/transform/matrix3d-1-ref.html new file mode 100644 index 0000000000..d2f257d531 --- /dev/null +++ b/layout/reftests/transform/matrix3d-1-ref.html @@ -0,0 +1,15 @@ +<html> +<head> + <style> + div { + background: green; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix3d-1.html b/layout/reftests/transform/matrix3d-1.html new file mode 100644 index 0000000000..6952333530 --- /dev/null +++ b/layout/reftests/transform/matrix3d-1.html @@ -0,0 +1,20 @@ +<html> +<head> + <!-- We do not support the 3d matrix yet, so this should do nothing --> + <style> + div { + background: green; + width: 100px; + height: 100px; + transform: matrix3d(1, 0, 100, 1, 10, + 1, 100, 1, 1, 10, + 1, 100, 2, 3, 12, + 12, 100, 3, 4, 5); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-1-ref.html b/layout/reftests/transform/origin-1-ref.html new file mode 100644 index 0000000000..5c1dae55c0 --- /dev/null +++ b/layout/reftests/transform/origin-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg);"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-1a.html b/layout/reftests/transform/origin-1a.html new file mode 100644 index 0000000000..0234f4255e --- /dev/null +++ b/layout/reftests/transform/origin-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 0% 0%"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-1b.html b/layout/reftests/transform/origin-1b.html new file mode 100644 index 0000000000..e3c8289f67 --- /dev/null +++ b/layout/reftests/transform/origin-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin:100% 50%"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2-ref.html b/layout/reftests/transform/origin-2-ref.html new file mode 100644 index 0000000000..5c1dae55c0 --- /dev/null +++ b/layout/reftests/transform/origin-2-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg);"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2a.html b/layout/reftests/transform/origin-2a.html new file mode 100644 index 0000000000..79e49aa143 --- /dev/null +++ b/layout/reftests/transform/origin-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 101px 51px;"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2b.html b/layout/reftests/transform/origin-2b.html new file mode 100644 index 0000000000..70dbd361c8 --- /dev/null +++ b/layout/reftests/transform/origin-2b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 101px 50%;"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2c.html b/layout/reftests/transform/origin-2c.html new file mode 100644 index 0000000000..722b7bca74 --- /dev/null +++ b/layout/reftests/transform/origin-2c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; transform: rotate(45deg); transform-origin: 50% 51px;"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-1-ref.html b/layout/reftests/transform/origin-name-1-ref.html new file mode 100644 index 0000000000..16af6cd062 --- /dev/null +++ b/layout/reftests/transform/origin-name-1-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: 0% 0%;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-1a.html b/layout/reftests/transform/origin-name-1a.html new file mode 100644 index 0000000000..c49831cdff --- /dev/null +++ b/layout/reftests/transform/origin-name-1a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top left;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-1b.html b/layout/reftests/transform/origin-name-1b.html new file mode 100644 index 0000000000..381cb52fdc --- /dev/null +++ b/layout/reftests/transform/origin-name-1b.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: left top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2-ref.html b/layout/reftests/transform/origin-name-2-ref.html new file mode 100644 index 0000000000..d84b06737c --- /dev/null +++ b/layout/reftests/transform/origin-name-2-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: 50% 0%;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2a.html b/layout/reftests/transform/origin-name-2a.html new file mode 100644 index 0000000000..f537c2dc9a --- /dev/null +++ b/layout/reftests/transform/origin-name-2a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2b.html b/layout/reftests/transform/origin-name-2b.html new file mode 100644 index 0000000000..d76cffd576 --- /dev/null +++ b/layout/reftests/transform/origin-name-2b.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top center;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2c.html b/layout/reftests/transform/origin-name-2c.html new file mode 100644 index 0000000000..ab462fab65 --- /dev/null +++ b/layout/reftests/transform/origin-name-2c.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: center top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-3-ref.html b/layout/reftests/transform/origin-name-3-ref.html new file mode 100644 index 0000000000..b98e1baf19 --- /dev/null +++ b/layout/reftests/transform/origin-name-3-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: 100% 0%;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-3a.html b/layout/reftests/transform/origin-name-3a.html new file mode 100644 index 0000000000..c7210d3210 --- /dev/null +++ b/layout/reftests/transform/origin-name-3a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: top right;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-3b.html b/layout/reftests/transform/origin-name-3b.html new file mode 100644 index 0000000000..eddebf4ce3 --- /dev/null +++ b/layout/reftests/transform/origin-name-3b.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; transform: rotate(45deg); transform-origin: right top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/partial-prerender-expansion-ref.html b/layout/reftests/transform/partial-prerender-expansion-ref.html new file mode 100644 index 0000000000..3c8eec7f69 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-expansion-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + background-color: green; + width: 100vw; + height: 100vh; + position: absolute; +} +</style> +<div id="target"></div> +</html> diff --git a/layout/reftests/transform/partial-prerender-expansion-rotate.html b/layout/reftests/transform/partial-prerender-expansion-rotate.html new file mode 100644 index 0000000000..a823989656 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-expansion-rotate.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + from { transform: translate(-50vw, -50vh) rotate(85deg); } + to { transform: translate(-50vw, -50vh) rotate(90deg); } +} +#target { + width: 200vw; + height: 200vh; + position: absolute; + transform-origin: 100vw 100vh; +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + Webrender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <rect fill="green" width="16" height="16"></rect> + </svg> +</div> +<script> +// Waiting MozReftestInvalidate event makes this test fail for some reasons. +// so we use window.onload instead. +window.onload = () => { + target.style.animation = "anim 100s step-end reverse"; + target.addEventListener("animationstart", () => { + document.documentElement.classList.remove("reftest-wait"); + }); +}; +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-expansion-translate.html b/layout/reftests/transform/partial-prerender-expansion-translate.html new file mode 100644 index 0000000000..4b3ea595a9 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-expansion-translate.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + from { transform: translateX(0px); } +} +#target { + width: 200vw; + height: 100vh; + position: absolute; + /* Some part of this element needs to be visible initially so that */ + /* a display item for this element is generated, thus the transform */ + /* animation runs on the compositor. */ + transform: translateX(90vw); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + Webrender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <rect fill="green" width="16" height="16"></rect> + </svg> +</div> +<script> +// Waiting MozReftestInvalidate event makes this test fail for some reasons. +// so we use window.onload instead. +window.onload = () => { + target.style.animation = "anim 100s step-end reverse"; + target.addEventListener("animationstart", () => { + document.documentElement.classList.remove("reftest-wait"); + }); +}; +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html new file mode 100644 index 0000000000..2421735b2e --- /dev/null +++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-1.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush" reftest-resolution="0.5"> +<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1"> +<!-- + A test for a partial pre-rendered transform animation with <1.0 resolution. + --> +<style> +html { + scrollbar-width: none; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* The reftest window size is (800x1000) and it's scaled by 0.5 */ + /* (= 1600x2000), which means the partial pre-render size is (2250x2250) so */ + /* move to a position inside the pre-render area and away from the */ + /* pre-render right edge, translateX(-650px), so that we can avoid blurry */ + /* edges in comparison with the reference. */ + to { transform: translateX(-400px); } +} +#target { + width: 4000px; + height: 4000px; + position: absolute; + transform: translateX(0px); +} +</style> +<div id="target"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4000 4000"> + <rect fill="green" x="0" width="1600" height="4000"></rect> + <rect fill="blue" x="1600" width="650" height="4000"></rect> + <rect fill="red" x="2250" width="1750" height="4000"></rect> + </svg> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 100s 1s step-start"; + target.addEventListener("animationstart", () => { + // animtionstart event is fired just before requestAnimationFrame callbacks, + // so we need to wait two rAF to make sure the initial animation value is + // composited on the compositor. + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html new file mode 100644 index 0000000000..9822296102 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-2.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush" reftest-resolution="0.5"> +<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1"> +<!-- + A variant of partial-prerender-expansion-with-resolution-2.html, a partial + pre-rendered transform animation in an iframe with <1.0 resolution. + --> +<style> +html { + scrollbar-width: none; +} +body { + margin: 0px; + padding: 0px; +} +</style> +<iframe style="width:1600px; height:2000px; border: 0" + srcdoc="<!DOCTYPE HTML> + <html> + <style> + html { + scrollbar-width: none; + } + html, body { + margin: 0; + padding: 0; + } + + @keyframes anim { + /* The reftest window size is (800x1000) and it's scaled by */ + /* 0.5 (= 1600x2000), which means the partial pre-render */ + /* size is (2250x2250) so move to a position inside the */ + /* pre-render area and away from the pre-render right edge, */ + /* translateX(-650px), so that we can avoid blurry edges in */ + /* comparison with the reference. */ + to { transform: translateX(-400px); } + } + #target { + width: 4000px; + height: 4000px; + position: absolute; + transform: translateX(0px); + } + </style> + <div id='target'> + <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 4000'> + <rect fill='green' x='0' width='1600' height='4000'></rect> + <rect fill='blue' x='1600' width='650' height='4000'></rect> + <rect fill='red' x='2250' width='1750' height='4000'></rect> + </svg> + </div> + <script> + window.addEventListener('message', () => { + if (event.data == 'start') { + target.style.animation = 'anim 100s 1s step-start'; + target.addEventListener('animationstart', () => { + parent.postMessage('animationstart', '*'); + }); + } + }); + </script></html>"> +</iframe> +<script> +document.addEventListener("MozReftestInvalidate", () => { + document.querySelector("iframe").contentWindow.postMessage("start", "*"); +}, { once: true }); + +window.addEventListener("message", event => { + if (event.data == "animationstart") { + document.documentElement.classList.remove('reftest-wait'); + } +}); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html b/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html new file mode 100644 index 0000000000..ae4b009596 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-expansion-with-resolution-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html reftest-resolution="0.5"> +<meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1"> +<style> +html { + scrollbar-width: none; +} +body { + margin: 0px; + padding: 0px; +} +#target { + width: 4000px; + height: 4000px; + position: absolute; + transform: translateX(-400px); +} +</style> +<div id="target"> + <svg xmlns="http://www.w3.org/4000/svg" viewBox="0 0 4000 4000"> + <rect fill="green" x="0" width="1600" height="4000"></rect> + <rect fill="blue" x="1600" width="650" height="4000"></rect> + <rect fill="red" x="2250" width="1750" height="4000"></rect> + </svg> +</div> +</html> diff --git a/layout/reftests/transform/partial-prerender-in-svg-1-ref.html b/layout/reftests/transform/partial-prerender-in-svg-1-ref.html new file mode 100644 index 0000000000..61fb6553a4 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-in-svg-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + transform: translateX(-725px); +} +</style> +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"> + <g id="target"> + <svg xmlns="http://www.w3.org/2000/svg" width="10000"> + <rect fill="green" x="0" width="1125" height="400"></rect> + <rect fill="red" x="1125" width="800" height="400"></rect> + </svg> + </g> +</svg> +</html> diff --git a/layout/reftests/transform/partial-prerender-in-svg-1.html b/layout/reftests/transform/partial-prerender-in-svg-1.html new file mode 100644 index 0000000000..141cf4f68f --- /dev/null +++ b/layout/reftests/transform/partial-prerender-in-svg-1.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* The reftest window size is (800x1000), which means the partial prerender */ + /* area of (400x400) clipped target is (1125x400). Thus -725px(= 400 - 1125)*/ + /* is the boundary where jank happens, so we choose a value close to -725px */ + /* so that within a next couple of frames jank should happen. */ + 0% { transform: translateX(-724px); } + 100% { transform: translateX(-2000px); } +} +</style> +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"> + <g id="target"> + <svg xmlns="http://www.w3.org/2000/svg" width="10000"> + <rect fill="green" x="0" width="1125" height="400"></rect> + <rect fill="red" x="1125" width="800" height="400"></rect> + </svg> + </g> +</svg> +<script> +document.addEventListener("MozReftestInvalidate", () => { + // A shorter animation-duration than we normally use (100s) because if we used + // the longer duration it may NOT fail this test even if any jank happens. + target.style.animation = "anim 10s 1s"; + target.addEventListener("animationstart", () => { + // Wait a second to make sure the animation gets stucked (i.e. jank) at the + // boundary (725px). + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 1000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-in-svg-2.html b/layout/reftests/transform/partial-prerender-in-svg-2.html new file mode 100644 index 0000000000..9595f82098 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-in-svg-2.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* The reftest window size is (800x1000), which means the partial prerender */ + /* area of (400x400) clipped target is (1125x400). Thus -725px(= 400 - 1125)*/ + /* is the boundary where jank happens, so we choose a value close to -725px */ + /* so that within a next couple of frames jank should happen. */ + 0% { transform: translateX(-724px); } + 100% { transform: translateX(-2000px); } +} +</style> +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" + style="overflow: scroll"> + <g id="target"> + <svg xmlns="http://www.w3.org/2000/svg" width="10000"> + <rect fill="green" x="0" width="1125" height="400"></rect> + <rect fill="red" x="1125" width="800" height="400"></rect> + </svg> + </g> +</svg> +<script> +document.addEventListener("MozReftestInvalidate", () => { + // A shorter animation-duration than we normally use (100s) because if we used + // the longer duration it may NOT fail this test even if any jank happens. + target.style.animation = "anim 10s 1s"; + target.addEventListener("animationstart", () => { + // Wait a second to make sure the animation gets stucked (i.e. jank) at the + // boundary (725px). + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 1000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-in-svg-3-ref.html b/layout/reftests/transform/partial-prerender-in-svg-3-ref.html new file mode 100644 index 0000000000..2de1ee211c --- /dev/null +++ b/layout/reftests/transform/partial-prerender-in-svg-3-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + transform: translateX(-325px); +} +</style> +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" + style="overflow: visible"> + <g id="target"> + <svg xmlns="http://www.w3.org/2000/svg" width="10000"> + <rect fill="green" x="0" width="1125" height="400"></rect> + <rect fill="red" x="1125" width="800" height="400"></rect> + </svg> + </g> +</svg> +</html> diff --git a/layout/reftests/transform/partial-prerender-in-svg-3.html b/layout/reftests/transform/partial-prerender-in-svg-3.html new file mode 100644 index 0000000000..f6f4155b5f --- /dev/null +++ b/layout/reftests/transform/partial-prerender-in-svg-3.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* The reftest window size is (800x1000), which means the partial prerender */ + /* area is (1125x400). Thus -325px(= 800 - 1125) is the boundary where jank */ + /* happens, so we choose a value close to -325px so that within a next */ + /* couple of frames jank should happen. */ + 0% { transform: translateX(-324px); } + 100% { transform: translateX(-2000px); } +} +</style> +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" + style="overflow: visible"> + <g id="target"> + <svg xmlns="http://www.w3.org/2000/svg" width="10000"> + <rect fill="green" x="0" width="1125" height="400"></rect> + <rect fill="red" x="1125" width="800" height="400"></rect> + </svg> + </g> +</svg> +<script> +document.addEventListener("MozReftestInvalidate", () => { + // A shorter animation-duration than we normally use (100s) because if we used + // the longer duration it may NOT fail this test even if any jank happens. + target.style.animation = "anim 10s 1s"; + target.addEventListener("animationstart", () => { + // Wait a second to make sure the animation gets stucked (i.e. jank) at the + // boundary (325px). + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 1000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-1.html b/layout/reftests/transform/partial-prerender-translate-1.html new file mode 100644 index 0000000000..9cd8fd6441 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-1.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test for a partial pre-rendered transform animation moves to a place where + the whole area of the transform animation is out of the viewport. + We consider it jank, thus we report it to the main-thread, then we clear out + the initial green rectangle, thus the result should be a blank page. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* translate to a position the element is completely outside of the */ + /* viewport */ + to { transform: translateX(-300vw); } +} +#target { + width: 200vw; + height: 200vh; + position: absolute; + /* Some part of this element needs to be visible initially so that */ + /* a display item for this element is generated, thus the transform */ + /* animation runs on the compositor. */ + transform: translateX(-110vw); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <rect fill="green" width="16" height="16"></rect> + </svg> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 100s 1s step-start"; + target.addEventListener("animationstart", () => { + // Wait 100ms to make sure we can report the jank to the main-thread and + // in response to the report we can do a paint process on the main-thread. + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 100); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-10-ref.html b/layout/reftests/transform/partial-prerender-translate-10-ref.html new file mode 100644 index 0000000000..c85aa22835 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-10-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + width: 1600px; + height: 1000px; + position: absolute; + left: -200px; + transform: translateX(0px); +} +</style> +<div id="target"> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000"> + <rect fill="green" x="0" width="800" height="1000"></rect> + <rect fill="blue" x="800" width="362.5" height="1000"></rect> + <rect fill="red" x="1162.5" width="837.5" height="1000"></rect> + </svg> +</div> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-10.html b/layout/reftests/transform/partial-prerender-translate-10.html new file mode 100644 index 0000000000..3bf5c57dc7 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-10.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test case for a transform animation frame is positioned by specifying + left property (i.e. not transform property) so that if we didn't factor the + offset (from the reference frame) in the jank mechanism, the animation will + jank at wrong positions. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + 0% { transform: translateX(0px); animation-timing-function: step-end; } + /* After 1s, translate to a position where it's still inside the pre-render */ + /* area. */ + /* The right edge of the pre-render area is 1162.5px (see below for the */ + /* calculation) and there is `left: -200px` property, which mean */ + /* translateX(-162.5px) is the point where a jank happens. But we don't */ + /* want to cause a jank at the edge since it results blurry boundary */ + /* between green and blue areas because the jank will happen at a point */ + /* very close to -162.5px, e.g. -162.4px. */ + /* So what we try to do here is that, compositing where jank will never */ + /* happen with the left property value, then trying to composite where a */ + /* jank will happen if the left (-200px) value is not properly handled in */ + /* the jank mechanism because the horizontal pre-render range is */ + /* [37.5px, 1162.5px] (see below the calculation) */ + 1% { transform: translateX(-150px); animation-timing-function: step-end; } + /* We have 100ms margin to avoid skipping this very keyframe */ + 1.1% { transform: translateX(-150px); animation-timing-function: step-start; } + /* Back to the original position where jank should NEVER happen if the left */ + /* property is handled in the jank mechanism, jank should happen if the */ + /* property is NOT handled */ + 100% { transform: translateX(0px); } +} +#target { + width: 1600px; + height: 1000px; + position: absolute; + left: -200px; + transform: translateX(0px); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + + The pre-render area width is 1125px, thus the expanded area outside of the + visible area is 325px. The 325px width is expaned to both directions, + leftward and rightward. Meanwhile, the horizontal visible frame range is + [200px, 1000px] because of `left: -200px`, so the left edge of the + pre-render area is 37.5px (= 200 - 325/2), the right edge is 1162.5px + (= 1000 + 325/2). + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000"> + <rect fill="green" x="0" width="800" height="1000"></rect> + <rect fill="blue" x="800" width="362.5" height="1000"></rect> + <rect fill="red" x="1162.5" width="837.5" height="1000"></rect> + </svg> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + // We don't specify 1s delay here since the @keyframes rule has already + // a kind of like delay with step-end timing function, which means even if + // the animation was painted at 0.1s position due to a lag on the main-thread + // (it quite often happens on our CIs!), the initial animation value on the + // compositor should be still the first value translateX(0px). + target.style.animation = "anim 100s"; + target.addEventListener("animationstart", () => { + // Wait two seconds to make sure we tried to composite translateX(0px). + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 2000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-11-ref.html b/layout/reftests/transform/partial-prerender-translate-11-ref.html new file mode 100644 index 0000000000..4836be1142 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-11-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html, body { + margin: 0; + padding: 0; +} +#target { + width: 30000px; + height: 100px; + transform: translateX(-2600px); +} +</style> +<div style="width: 50%; overflow: hidden"> + <div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 100"> + <rect fill="green" x="2500" width="400" height="100"></rect> + <rect fill="blue" x="2900" width="100" height="100"></rect> + </svg> + </div> +</div> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-11.html b/layout/reftests/transform/partial-prerender-translate-11.html new file mode 100644 index 0000000000..ecb6cf25d8 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-11.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test case that the nearest oveflow:hidden scroll frame is the clip frame + for the partial pre-render transform animation. + --> +<style> +html, body { + margin: 0; + padding: 0; +} +#target { + width: 30000px; + height: 100px; + transform: translateX(-2500px); + /* + * 1s delay so that we can avoid undesired composition, i.e. the first + * composition on the composition would be the final transition value. + */ + transition: transform 100s step-start 1s; +} +</style> +<div style="width: 50%; overflow: hidden"> + <div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30000 100"> + <rect fill="green" x="2500" width="400" height="100"></rect> + <rect fill="blue" x="2900" width="100" height="100"></rect> + </svg> + </div> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.transform = "translateX(-2600px)"; + target.addEventListener("transitionstart", () => { + // Wait a second to make sure the transition has been composited on the + // compositor. + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 1000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-12.html b/layout/reftests/transform/partial-prerender-translate-12.html new file mode 100644 index 0000000000..6fb2768284 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-12.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test for a partial pre-rendered transform animation moves to a place where + the partial pre-render area of the transform animation is out of the viewport, + but part of the element is still visible. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* jump to a position where the element is completely outside of the */ + /* partial pre-render area but the element is still visible */ + to { transform: translateX(-200vw); } +} +#target { + width: 400vw; + height: 400vh; + position: absolute; +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <rect fill="green" width="16" height="16"></rect> + </svg> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 100s 1s step-start"; + target.addEventListener("animationstart", () => { + // animtionstart event is fired just before requestAnimationFrame callbacks, + // so we need to wait two rAF to make sure the initial animation value is + // composited on the compositor. + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-2-ref.html b/layout/reftests/transform/partial-prerender-translate-2-ref.html new file mode 100644 index 0000000000..98ee6a1f14 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-2-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + width: 2000px; + height: 2000px; + position: absolute; + transform: translateX(-325px); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <rect fill="green" x="0" width="1125" height="2000"></rect> + <rect fill="red" x="1125" width="875" height="2000"></rect> + </svg> +</div> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-2.html b/layout/reftests/transform/partial-prerender-translate-2.html new file mode 100644 index 0000000000..550a74084a --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-2.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test for a partial pre-rendered transform animation moves to a place where + jank happens. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* The reftest window size is (800x1000), which means the partial prerender */ + /* area is (1125x1125). Thus -325px(= 800 - 1125) is the boundary where */ + /* jank happens, so we choose a value close to -325px so that within a next */ + /* couple of frames jank should happen. */ + 0% { transform: translateX(-324px); } + 100% { transform: translateX(-2000px); } +} +#target { + width: 2000px; + height: 2000px; + position: absolute; + transform: translateX(0px); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"> + <!-- green on the pre-render area --> + <rect fill="green" x="0" width="1125" height="2000"></rect> + <rect fill="red" x="1125" width="875" height="2000"></rect> + </svg> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + // A shorter animation-duration than we normally use (100s) because if we used + // the longer duration it may NOT fail this test even if any jank happens. + target.style.animation = "anim 10s 1s"; + target.addEventListener("animationstart", () => { + // Wait a second to make sure the animation gets stucked (i.e. jank) at the + // boundary (325px). + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 1000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-3-ref.html b/layout/reftests/transform/partial-prerender-translate-3-ref.html new file mode 100644 index 0000000000..d4941007bd --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-3-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + background-color: green; + width: 50vw; + height: 100vh; + position: absolute; +} +</style> +<div id="target"></div> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-3.html b/layout/reftests/transform/partial-prerender-translate-3.html new file mode 100644 index 0000000000..6e4ad202b1 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-3.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test for a partial pre-rendered transform animation moves to a place where + the partial pre-rendered area is completely out of the viewport but still + there remains some amount of area of the entire transform element. + If we mis-recognize it as NOT a jank, checkerboading will happen. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* translate to a position the partial pre-rendered area is outside of the */ + /* viewport but still there should remain visible area. */ + to { transform: translateX(-150vw); } +} +#target { + width: 200vw; + height: 200vh; + position: absolute; + transform: translateX(0vw); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <rect fill="green" width="16" height="16"></rect> + </svg> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 100s 1s step-start"; + target.addEventListener("animationstart", () => { + // animtionstart event is fired just before requestAnimationFrame callbacks, + // so we need to wait two rAF to make sure the initial animation value is + // composited on the compositor. + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-4.html b/layout/reftests/transform/partial-prerender-translate-4.html new file mode 100644 index 0000000000..11ff491b87 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-4.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test that a partial pre-rendered transform animation is transformed by an + ancestor transform value. + If we don't factor the ancestor's transform, we mis-recognize janks, which + means janked at the initial translateX(0vw) position, thus white blank area + will appears. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* translate to a position where the left edge of partial pre-rendered on */ + /* the left edge of the viewport. */ + to { transform: translateX(-50vw); } +} +#target { + width: 300vw; + height: 300vh; + transform: translateX(0vw); +} +</style> +<div style="transform: translateX(50vw);"> + <div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> + <rect fill="green" width="16" height="16"></rect> + </svg> + </div> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 100s 1s step-start"; + target.addEventListener("animationstart", () => { + // animtionstart event is fired just before requestAnimationFrame callbacks, + // so we need to wait two rAF to make sure the initial animation value is + // composited on the compositor. + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-5-ref.html b/layout/reftests/transform/partial-prerender-translate-5-ref.html new file mode 100644 index 0000000000..c2047502af --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-5-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html reftest-async-scroll + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="1000"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow-x: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + width: 800px; + height: 1600px; + transform: translateY(-500px); +} +</style> +<div style="width: 800px; height: 2000px"><!-- spacer --></div> +<div style="position: fixed; top: 400px"> + <div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600"> + <rect fill="green" y="0" width="800" height="1000"></rect> + <rect fill="blue" y="1000" width="800" height="125"></rect> + <rect fill="red" y="1125" width="800" height="875"></rect> + </svg> + </div> +</div> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-5.html b/layout/reftests/transform/partial-prerender-translate-5.html new file mode 100644 index 0000000000..6225b7de25 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-5.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush" + reftest-async-scroll + reftest-displayport-x="0" reftest-displayport-y="0" + reftest-displayport-w="800" reftest-displayport-h="2000" + reftest-async-scroll-x="0" reftest-async-scroll-y="1000"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test that a partial pre-rendered transform animation is in a position:fixed + layer. + --> +<style> +html { + overflow-x: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + to { transform: translateY(-500px); } +} +#target { + width: 800px; + height: 1600px; + transform: translateY(-400px); +} +</style> +<div style="width: 800px; height: 2000px"><!-- spacer --></div> +<div style="position: fixed; top: 400px"> + <div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1600"> + <rect fill="green" y="0" width="800" height="1000"></rect> + <rect fill="blue" y="1000" width="800" height="125"></rect> + <rect fill="red" y="1125" width="800" height="875"></rect> + </svg> + </div> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 100s 1s step-start"; + target.addEventListener("animationstart", () => { + // animtionstart event is fired just before requestAnimationFrame callbacks, + // so we need to wait two rAF to make sure the initial animation value is + // composited on the compositor. + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-6-ref.html b/layout/reftests/transform/partial-prerender-translate-6-ref.html new file mode 100644 index 0000000000..dece645afb --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-6-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +#target { + width: 1600px; + height: 900px; + position: absolute; + transform: translateX(-325px); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900"> + <rect fill="green" x="0" width="1125" height="900"></rect> + <rect fill="red" x="1125" width="875" height="900"></rect> + </svg> +</div> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-6.html b/layout/reftests/transform/partial-prerender-translate-6.html new file mode 100644 index 0000000000..58b34c6cae --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-6.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* The reftest window size is (800x1000), which means the partial prerender */ + /* area is (1125x900). Thus -325px(= 800 - 1125) is the boundary where jank */ + /* happens, so we choose a value close to -325px so that within a next */ + /* couple of frames jank should happen. */ + 0% { transform: translateX(-324px); } + 100% { transform: translateX(-2000px); } +} +#target { + width: 1600px; + /* Use a smallar value than the reftest window height to avoid bloating up */ + /* svg inside this element beyond the window height */ + height: 900px; + position: absolute; + transform: translateX(0px); +} +</style> +<div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + Note: As SVG items get "webrenderized" this test won't work. For now + rounded rectangles go through the blob path. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900"> + <!-- green on the pre-render area --> + <rect fill="green" x="0" width="1125" height="900" rx="0.1"></rect> + <rect fill="red" x="1125" width="875" height="900" rx="0.1"></rect> + </svg> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + // A shorter animation-duration than we normally use (100s) because if we used + // the longer duration it may NOT fail this test even if any jank happens. + target.style.animation = "anim 10s 1s"; + target.addEventListener("animationstart", () => { + // Wait a second to make sure the animation gets stucked (i.e. jank) at the + // boundary (325px). + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 1000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-7.html b/layout/reftests/transform/partial-prerender-translate-7.html new file mode 100644 index 0000000000..06c26c66fb --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-7.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + Another variant of partial-prerender-translate-2.html, but the transform + animation is scaled by the parent element. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +@keyframes anim { + /* translate to a position where the left edge of partial pre-rendered on */ + /* the left edge of the viewport. */ + 0% { transform: translateX(-649px); } + 100% { transform: translateX(-2000px); } +} +#target { + width: 4000px; + height: 2000px; + position: absolute; + transform: translateX(0); +} +</style> +<div style="transform: scale(0.5); transform-origin: 0 0"> + <div id="target"> + <!-- + Put an SVG element so that the transform display item has a blob on + WebRender which means this test properly fails without the proper fix. + --> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4000 2000"> + <rect fill="green" x="0" width="2250" height="2000"></rect> + <rect fill="red" x="2250" width="1750" height="2000"></rect> + </svg> + </div> +</div> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 10s 1s"; + target.addEventListener("animationstart", () => { + // Wait a second to make sure the animation gets stucked (i.e. jank) at the + // boundary (650px). + setTimeout(() => { + document.documentElement.classList.remove("reftest-wait"); + }, 1000); + }); +}, { once: true }); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-8-ref.html b/layout/reftests/transform/partial-prerender-translate-8-ref.html new file mode 100644 index 0000000000..ddf5bda172 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-8-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A variant test of partial-prerender-translate-5.html but in this test the + position:fixed element is inside an iframe. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +</style> +<iframe style="width:400px; height:1000px; border: 0" + srcdoc="<!DOCTYPE HTML> + <html> + <style> + html { + overflow-x: hidden; + scrollbar-width: none; + } + html, body { + margin: 0; + padding: 0; + } + #target { + width: 1600px; + height: 1000px; + transform: translateX(-725px); + } + </style> + <div id='target'> + <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'> + <rect fill='green' x='0' width='800' height='1000'></rect> + <rect fill='blue' x='800' width='325' height='1000'></rect> + <rect fill='red' x='1125' width='675' height='1000'></rect> + </svg> + </div> + </html>"> +</iframe> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-8.html b/layout/reftests/transform/partial-prerender-translate-8.html new file mode 100644 index 0000000000..0fc633a532 --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-8.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A test for a partial pre-rendered transform in an iframe, if the clip + rectangle of the transform animation were wrong, e.g. (800, 1000), the + transform animation janks at the initial position. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +</style> + <!-- a half width of the view port --> +<iframe style="width:400px; height:1000px; border: 0" + srcdoc="<!DOCTYPE HTML> + <html> + <style> + html { + overflow: hidden; + scrollbar-width: none; + } + html, body { + margin: 0; + padding: 0; + } + @keyframes anim { + /* the partial prerender area is (1125, 1000), thus */ + /* translateX(-725px) is the position where the right edge */ + /* of the partial prerender is positioned at the right edge */ + /* of the clip rect (400, 1000). */ + to { transform: translateX(-725px); } + } + #target { + width: 1600px; + height: 1000px; + transform: translateX(0px); + } + </style> + <div id='target'> + <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'> + <rect fill='green' x='0' width='800' height='1000'></rect> + <rect fill='blue' x='800' width='325' height='1000'></rect> + <rect fill='red' x='1125' width='675' height='1000'></rect> + </svg> + </div> + <script> + window.addEventListener('message', () => { + if (event.data == 'start') { + target.style.animation = 'anim 100s 1s step-start'; + target.addEventListener('animationstart', () => { + parent.postMessage('animationstart', '*'); + }); + } + }); + </script></html>"> +</iframe> +<script> +document.addEventListener("MozReftestInvalidate", () => { + document.querySelector("iframe").contentWindow.postMessage("start", "*"); +}, { once: true }); + +window.addEventListener("message", event => { + if (event.data == "animationstart") { + document.documentElement.classList.remove('reftest-wait'); + } +}); +</script> +</html> diff --git a/layout/reftests/transform/partial-prerender-translate-9.html b/layout/reftests/transform/partial-prerender-translate-9.html new file mode 100644 index 0000000000..2c6af406cb --- /dev/null +++ b/layout/reftests/transform/partial-prerender-translate-9.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html reftest-async-scroll class="reftest-wait reftest-no-flush"> +<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> +<!-- + A variant test of partial-prerender-translate-5.html but in this test the + position:fixed element is inside an iframe. + --> +<style> +html { + overflow: hidden; +} +body { + margin: 0px; + padding: 0px; +} +</style> +<iframe style="width:800px; height:1000px; border: 0" + srcdoc="<!DOCTYPE HTML> + <html reftest-displayport-x='0' reftest-displayport-y='0' + reftest-displayport-w='800' reftest-displayport-h='2000' + reftest-async-scroll-x='0' reftest-async-scroll-y='1000'> + <style> + html { + overflow-x: hidden; + } + html, body { + margin: 0; + padding: 0; + } + @keyframes anim { + to { transform: translateY(-500px); } + } + #target { + width: 800px; + height: 1600px; + transform: translateY(-400px); + } + </style> + <div style='width: 800px; height: 2000px'><!-- spacer --></div> + <div style='position: fixed; top: 400px'> + <div id='target'> + <!-- + Put an SVG element so that the transform display item has + a blob on WebRender which means this test properly fails + without the proper fix. + --> + <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1600'> + <rect fill='green' y='0' width='800' height='1000'></rect> + <rect fill='blue' y='1000' width='800' height='125'></rect> + <rect fill='red' y='1125' width='800' height='875'></rect> + </svg> + </div> + </div> + <script> + window.addEventListener('message', () => { + if (event.data == 'start') { + target.style.animation = 'anim 100s 1s step-start'; + target.addEventListener('animationstart', () => { + parent.postMessage('animationstart', '*'); + }); + } + }); + </script></html>"> +</iframe> +<script> +document.addEventListener("MozReftestInvalidate", () => { + document.querySelector("iframe").contentWindow.postMessage("start", "*"); +}, { once: true }); + +window.addEventListener("message", event => { + if (event.data == "animationstart") { + document.documentElement.classList.remove('reftest-wait'); + } +}); +</script> +</html> diff --git a/layout/reftests/transform/pass.svg b/layout/reftests/transform/pass.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/transform/pass.svg @@ -0,0 +1,8 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/transform/percent-1-ref.html b/layout/reftests/transform/percent-1-ref.html new file mode 100644 index 0000000000..52a1752bea --- /dev/null +++ b/layout/reftests/transform/percent-1-ref.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1a.html b/layout/reftests/transform/percent-1a.html new file mode 100644 index 0000000000..3fcdf47ed6 --- /dev/null +++ b/layout/reftests/transform/percent-1a.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1b.html b/layout/reftests/transform/percent-1b.html new file mode 100644 index 0000000000..968225eaa1 --- /dev/null +++ b/layout/reftests/transform/percent-1b.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1c.html b/layout/reftests/transform/percent-1c.html new file mode 100644 index 0000000000..d84dbfc6ab --- /dev/null +++ b/layout/reftests/transform/percent-1c.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1d.html b/layout/reftests/transform/percent-1d.html new file mode 100644 index 0000000000..9fda44acd0 --- /dev/null +++ b/layout/reftests/transform/percent-1d.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1e.html b/layout/reftests/transform/percent-1e.html new file mode 100644 index 0000000000..38bfcfc7d6 --- /dev/null +++ b/layout/reftests/transform/percent-1e.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1f.html b/layout/reftests/transform/percent-1f.html new file mode 100644 index 0000000000..3c20bd2bc2 --- /dev/null +++ b/layout/reftests/transform/percent-1f.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1g.html b/layout/reftests/transform/percent-1g.html new file mode 100644 index 0000000000..fab0c113a5 --- /dev/null +++ b/layout/reftests/transform/percent-1g.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/propagate-inherit-boolean-ref.html b/layout/reftests/transform/propagate-inherit-boolean-ref.html new file mode 100644 index 0000000000..a23b0a4f92 --- /dev/null +++ b/layout/reftests/transform/propagate-inherit-boolean-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title></title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + p { + font-size: 20px; + margin: 0; + height: 0; + width: 100px; + transform: translateX(80px); + } + + p#two { + font-size: 40px; + transform: translateX(160px); + } + + </style> +</head> +<body> + +<p id="one">One</p> + +<p id="two">Two</p> + +</body> +</html> diff --git a/layout/reftests/transform/propagate-inherit-boolean.html b/layout/reftests/transform/propagate-inherit-boolean.html new file mode 100644 index 0000000000..47ba9bded1 --- /dev/null +++ b/layout/reftests/transform/propagate-inherit-boolean.html @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title></title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + p { + font-size: 20px; + margin: 0; + height: 0; + width: 100px; + transform: translateX(4em); + } + + p#two { + font-size: 40px; + } + + </style> +</head> +<body> + +<p id="one">One</p> + +<p id="two">Two</p> + +</body> +</html> diff --git a/layout/reftests/transform/reftest.list b/layout/reftests/transform/reftest.list new file mode 100644 index 0000000000..86f8002ce1 --- /dev/null +++ b/layout/reftests/transform/reftest.list @@ -0,0 +1,180 @@ +# Transforms specifying singular matrices shouldn't display at all. +# NOTE: Regressions might manifest themselves as reftest timeouts on +# this test. +== singular-1a.html about:blank +# Multiple transforms should act identically to nested divs. +fuzzy(0-1,0-27) pref(apz.allow_zooming,true) == compound-1a.html compound-1-ref.html +!= compound-1a.html compound-1-fail.html +== dynamic-inherit-1.html dynamic-inherit-1-ref.html +== dynamic-addremove-1a.html dynamic-addremove-1-ref.html +== dynamic-addremove-1b.html dynamic-addremove-1-ref.html +== dynamic-addremove-1c.html dynamic-addremove-1-ref.html +== dynamic-addremove-2.html dynamic-addremove-2-ref.html +# translatex should act like position: relative +== translatex-1a.html translatex-1-ref.html +== translatex-1b.html translatex-1-ref.html +== translatex-1c.html translatex-1-ref.html +== translatex-1d.html translatex-1-ref.html +== translatex-1e.html translatex-1-ref.html +== translatex-1a.html translatex-1-ref-2.html +# translatey should act like position: relative +== translatey-1a.html translatey-1-ref.html +== translatey-1b.html translatey-1-ref.html +== translatey-1c.html translatey-1-ref.html +== translatey-1d.html translatey-1-ref.html +== translatey-1e.html translatey-1-ref.html +# matrices defined to be translations should act like position: relative +== translatex-2.html translatex-1-ref.html +== translatey-2.html translatey-1-ref.html +# translate should act like position: relative +!= translate-1a.html translate-1-ref.html +== translate-1b.html translate-1-ref.html +== translate-1c.html translate-1-ref.html +== translate-1d.html translate-1-ref.html +== translate-1e.html translate-1-ref.html +== translate-2a.html translate-2-ref.html +== translate-3.html translate-3-ref.html +# rotate: Several rotations of the same object should be idempotent. These +# tests are currently disabled because of subpixel (< 0.00001 gfx units) +# rounding errors. +random == rotate-1a.html rotate-1-ref.html +random == rotate-1b.html rotate-1-ref.html +random == rotate-1c.html rotate-1-ref.html +random == rotate-1d.html rotate-1-ref.html +random == rotate-1e.html rotate-1-ref.html +random == rotate-1f.html rotate-1-ref.html +# rotate: 90deg rotations should be indistinguishable from objects constructed +# to look the same. +== rotate-2a.html rotate-2-ref.html +== rotate-2b.html rotate-2-ref.html +# -transform-origin: We should NOT get the same images when using different +# -transform-origins. +!= origin-1a.html origin-1-ref.html +!= origin-1b.html origin-1-ref.html +# -transform-origin: We should get the same images when using equivalent +# -transform-origins. +== origin-2a.html origin-2-ref.html +== origin-2b.html origin-2-ref.html +== origin-2c.html origin-2-ref.html +# "Translate" with percentages should be indistinguishable from translate with +# equivalent values. +== percent-1a.html percent-1-ref.html +fuzzy(0-1,0-2) == percent-1b.html percent-1-ref.html +fuzzy(0-1,0-80) == percent-1c.html percent-1-ref.html +fuzzy(0-1,0-80) == percent-1d.html percent-1-ref.html +fuzzy(0-1,0-80) == percent-1e.html percent-1-ref.html +fuzzy(0-1,0-80) == percent-1f.html percent-1-ref.html +fuzzy(0-1,0-80) == percent-1g.html percent-1-ref.html +# Transformed elements are abs-pos and fixed-pos containing blocks. +== abspos-1a.html abspos-1-ref.html +== abspos-1b.html abspos-1-ref.html +== abspos-1c.html abspos-1-ref.html +== abspos-1d.html abspos-1-ref.html +!= abspos-1e.html abspos-1-ref.html +== abspos-1f.html abspos-1-ref.html +== abspos-1g.html abspos-1-ref.html +# Origin can use "top" "right" etc. +== origin-name-1a.html origin-name-1-ref.html +fuzzy(0-1,0-19) == origin-name-1b.html origin-name-1-ref.html +== origin-name-2a.html origin-name-2-ref.html +== origin-name-2b.html origin-name-2-ref.html +fuzzy(0-1,0-350) == origin-name-2c.html origin-name-2-ref.html +== origin-name-3a.html origin-name-3-ref.html +== origin-name-3b.html origin-name-3-ref.html +# Snapping still applies after 90 degree rotations. +== snapping-1.html snapping-1-ref.html +# SVG effects should work on transforms. +== transform-svg-1a.xhtml transform-svg-1-ref.xhtml +fuzzy(0-2,0-500) == transform-svg-2a.xhtml transform-svg-2-ref.xhtml +!= transform-svg-2a.xhtml transform-svg-2-fail.xhtml +# skew should allow a mix of one and two parameters. +fuzzy(0-1,0-20) == skew-1a.html skew-1-ref.html +fuzzy(0-1,0-80) == skew-1b.html skew-1-ref.html +fuzzy(0-1,0-250) == skew-2a.html skew-2-ref.html +# matrix with values equal to other transforms should behave indistinguishably +== matrix-1a.html matrix-1-ref.html +== matrix-2a.html matrix-2-ref.html +== matrix-3a.html matrix-3-ref.html +== matrix-4a.html matrix-4-ref.html +fuzzy(0-1,0-120) == matrix-5a.html matrix-5-ref.html +fuzzy(0-1,0-110) == matrix-6a.html matrix-6-ref.html +== matrix-7a.html matrix-7-ref.html +# ensure matrix 3d does not break us - should do nothing +== matrix3d-1.html matrix3d-1-ref.html +# Test that complex transform can be reversed +fuzzy(0-2,0-5) == stresstest-1.html stresstest-1-ref.html +# Test scale transforms +== scalex-1.html scalex-1-ref.html +== scaley-1.html scaley-1-ref.html +== scale-1a.html scale-1-ref.html +== scale-1b.html scale-1-ref.html +== scale-percent-1.html scale-percent-1-ref.html +== scaled-blend-mode.html scaled-blend-mode-ref.html +# Some simple checks that it obeys selector operations +== descendant-1.html descendant-1-ref.html +== propagate-inherit-boolean.html propagate-inherit-boolean-ref.html +# Ensure you can't move outside an iframe +== iframe-1.html iframe-1-ref.html +# Bugs +== 601894-1.html 601894-ref.html +== 601894-2.html 601894-ref.html +== 830299-1.html 830299-1-ref.html +# Bug 722777 +== table-1a.html table-1-ref.html +== table-1b.html table-1-ref.html +== table-1c.html table-1-ref.html +== table-2a.html table-2-ref.html +== table-2b.html table-2-ref.html +# Bug 722463 +== inline-1a.html inline-1-ref.html +== transform-box-svg-1a.svg transform-box-svg-1-ref.svg +== transform-box-svg-1b.svg transform-box-svg-1-ref.svg +== transform-box-svg-2a.svg transform-box-svg-2-ref.svg +== transform-box-svg-2b.svg transform-box-svg-2-ref.svg +== transform-box-svg-3a.svg pass.svg +== transform-origin-svg-1a.svg transform-origin-svg-1-ref.svg +== transform-origin-svg-1b.svg transform-origin-svg-1-ref.svg +== transform-origin-svg-2a.svg transform-origin-svg-2-ref.svg +== transform-origin-svg-2b.svg transform-origin-svg-2-ref.svg +# Bug 1122526 +== animate-layer-scale-inherit-1.html animate-layer-scale-inherit-1-ref.html +fuzzy(0-145,0-10000) == animate-layer-scale-inherit-2.html animate-layer-scale-inherit-2-ref.html +== animate-layer-scale-inherit-3.html animate-layer-scale-inherit-1-ref.html +# Bug 1301500 +== dynamic-add-without-change-cb-1.html dynamic-add-without-change-cb-1-ref.html +skip-if(useDrawSnapshot) fuzzy(0-26,0-208) == table-overflowed-by-animation.html table-overflowed-by-animation-ref.html # Bug 1715402 for useDrawSnapshot&&webrender +== translate-rounding-1.html translate-rounding-ref.html +== translate-rounding-2.html translate-rounding-ref.html +fails == translate-rounding-3.html translate-rounding-viewport-ref.html # bug 1397146 +== invalidate-transform-1.html invalidate-transform-1-ref.html +== invalidate-svg-scale-1.html invalidate-svg-scale-1-ref.html +# Bug 1526847 +pref(layout.css.individual-transform.enabled,true) == animate-layer-scale-inherit-4.html animate-layer-scale-inherit-4-ref.html +fuzzy-if(winWidget,0-1,0-1000) == 1569215-1.html 1569215-1-ref.html + +== transform-anon-block-1.html transform-anon-block-1-ref.html +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) == partial-prerender-expansion-translate.html partial-prerender-expansion-ref.html +test-pref(layout.animation.prerender.partial,true) == partial-prerender-translate-1.html about:blank +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-59,0-1800) fuzzy-if(Android,0-255,0-7000) == partial-prerender-translate-2.html partial-prerender-translate-2-ref.html +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") random == partial-prerender-translate-3.html partial-prerender-translate-3-ref.html # bug 1642575 +# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism doesn't properly handle ancestor's transform values +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-4.html partial-prerender-expansion-ref.html +# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism does inproperly handle position:fixed scroll target +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-5.html partial-prerender-translate-5-ref.html +skip-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-46,0-1250) fuzzy-if(Android,0-255,0-9900) random-if(gtkWidget&&isDebugBuild) random-if(useDrawSnapshot) == partial-prerender-translate-6.html partial-prerender-translate-6-ref.html +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-4,0-1200) == partial-prerender-translate-7.html partial-prerender-translate-2-ref.html +# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism doesn't properly clip transform in iframes. +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-8.html partial-prerender-translate-8-ref.html +# This reftest doesn't fail on WebRender, this reftest fails only if there is a jank mechanism and the mechanism does inproperly handle position:fixed scroll target +fails-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-9.html partial-prerender-translate-5-ref.html +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-10.html partial-prerender-translate-10-ref.html +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-11.html partial-prerender-translate-11-ref.html +skip test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-translate-12.html partial-prerender-translate-2-ref.html # bug 1666692 for WebRender +# This reftest heavily depends on layout.animation.prerender.viewport-ratio-limit +# and reftest viewport size (800, 1000). +skip-if(Android) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy-if(!layersGPUAccelerated,0-75,0-2683) == partial-prerender-expansion-rotate.html partial-prerender-expansion-ref.html +skip-if(useDrawSnapshot) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,true) == partial-prerender-expansion-with-resolution-1.html partial-prerender-expansion-with-resolution-ref.html +skip test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") pref(dom.meta-viewport.enabled,true) pref(apz.allow_zooming,true) == partial-prerender-expansion-with-resolution-2.html partial-prerender-expansion-with-resolution-ref.html # bug 1650039 for WebRender +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy-if(Android,0-255,0-400) == partial-prerender-in-svg-1.html partial-prerender-in-svg-1-ref.html +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") == partial-prerender-in-svg-2.html partial-prerender-in-svg-1-ref.html # Reuse partial-prerender-in-svg-1-ref.html since the result should look same as partial-prerender-in-svg-1.html +test-pref(layout.animation.prerender.partial.jank,true) test-pref(layout.animation.prerender.partial,true) test-pref(layout.animation.prerender.viewport-ratio-limit,"1.125") fuzzy(0-62,0-400) fuzzy-if(Android,0-255,0-2000) == partial-prerender-in-svg-3.html partial-prerender-in-svg-3-ref.html diff --git a/layout/reftests/transform/rotate-1-ref.html b/layout/reftests/transform/rotate-1-ref.html new file mode 100644 index 0000000000..539308724d --- /dev/null +++ b/layout/reftests/transform/rotate-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1a.html b/layout/reftests/transform/rotate-1a.html new file mode 100644 index 0000000000..75e9b95b5a --- /dev/null +++ b/layout/reftests/transform/rotate-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate(45deg) rotate(360deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1b.html b/layout/reftests/transform/rotate-1b.html new file mode 100644 index 0000000000..adb9181589 --- /dev/null +++ b/layout/reftests/transform/rotate-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate(45deg) rotate(400grad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1c.html b/layout/reftests/transform/rotate-1c.html new file mode 100644 index 0000000000..40631422df --- /dev/null +++ b/layout/reftests/transform/rotate-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1d.html b/layout/reftests/transform/rotate-1d.html new file mode 100644 index 0000000000..810efa13ec --- /dev/null +++ b/layout/reftests/transform/rotate-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate(-45deg) rotate(100grad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1e.html b/layout/reftests/transform/rotate-1e.html new file mode 100644 index 0000000000..b1d293050b --- /dev/null +++ b/layout/reftests/transform/rotate-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate(-135deg) rotate(3.1415926535897932384626433rad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1f.html b/layout/reftests/transform/rotate-1f.html new file mode 100644 index 0000000000..684762ef73 --- /dev/null +++ b/layout/reftests/transform/rotate-1f.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: rotate(0.125turn); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-2-ref.html b/layout/reftests/transform/rotate-2-ref.html new file mode 100644 index 0000000000..51be5f08c3 --- /dev/null +++ b/layout/reftests/transform/rotate-2-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black;"> + + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-2a.html b/layout/reftests/transform/rotate-2a.html new file mode 100644 index 0000000000..1034862ede --- /dev/null +++ b/layout/reftests/transform/rotate-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:100px;height:200px;transform: translate(50px, -50px) rotate(-90deg); border: 1px solid black;"> + + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-2b.html b/layout/reftests/transform/rotate-2b.html new file mode 100644 index 0000000000..6d29dc198a --- /dev/null +++ b/layout/reftests/transform/rotate-2b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:100px;height:200px;transform: translate(50px, -50px) rotate(-0.25turn); border: 1px solid black;"> + + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-1-ref.html b/layout/reftests/transform/scale-1-ref.html new file mode 100644 index 0000000000..7c39dd8505 --- /dev/null +++ b/layout/reftests/transform/scale-1-ref.html @@ -0,0 +1,16 @@ +<html> +<head> + <style> + body { margin: 0px; } + #test { + background: green; + width: 50px; + height: 50px; + margin: 25px; + } + </style> +<body> + <div id="test"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-1a.html b/layout/reftests/transform/scale-1a.html new file mode 100644 index 0000000000..c5842292ed --- /dev/null +++ b/layout/reftests/transform/scale-1a.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + #test { + background: green; + width: 100px; + height: 100px; + transform: scale(0.5, 0.5); + } + </style> +</head> +<body> + <div id="test"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-1b.html b/layout/reftests/transform/scale-1b.html new file mode 100644 index 0000000000..cab7fb1090 --- /dev/null +++ b/layout/reftests/transform/scale-1b.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + #test { + background: green; + width: 100px; + height: 100px; + transform: scale(0.5); + } + </style> +</head> +<body> + <div id="test"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-percent-1-ref.html b/layout/reftests/transform/scale-percent-1-ref.html new file mode 100644 index 0000000000..e5923793b6 --- /dev/null +++ b/layout/reftests/transform/scale-percent-1-ref.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + transform: scale(0.5, 0.75); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-percent-1.html b/layout/reftests/transform/scale-percent-1.html new file mode 100644 index 0000000000..2cdba843fd --- /dev/null +++ b/layout/reftests/transform/scale-percent-1.html @@ -0,0 +1,18 @@ +<html> +<head> + <!-- Percent values should function the same as their equivalent numeric values: e.g. (50% == 0.5) --> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + transform: scale(50%, 75%); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scaled-blend-mode-ref.html b/layout/reftests/transform/scaled-blend-mode-ref.html new file mode 100644 index 0000000000..85ce12cd14 --- /dev/null +++ b/layout/reftests/transform/scaled-blend-mode-ref.html @@ -0,0 +1,25 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + width: 200px; + height: 200px; + } + #scale { + transform: scale(2); + transform-origin: top left; + } + #blend { + mix-blend-mode: multiply; + } + </style> +</head> +<body> + <div id="blend"> + <div id="scale"> + Hello + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scaled-blend-mode.html b/layout/reftests/transform/scaled-blend-mode.html new file mode 100644 index 0000000000..100be8126a --- /dev/null +++ b/layout/reftests/transform/scaled-blend-mode.html @@ -0,0 +1,25 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + width: 200px; + height: 200px; + } + #scale { + transform: scale(2); + transform-origin: top left; + } + #blend { + mix-blend-mode: multiply; + } + </style> +</head> +<body> + <div id="scale"> + <div id="blend"> + Hello + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scalex-1-ref.html b/layout/reftests/transform/scalex-1-ref.html new file mode 100644 index 0000000000..b95fa2a46e --- /dev/null +++ b/layout/reftests/transform/scalex-1-ref.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 50px; + height: 100px; + margin-left: 25px; + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scalex-1.html b/layout/reftests/transform/scalex-1.html new file mode 100644 index 0000000000..6fbe7aecfc --- /dev/null +++ b/layout/reftests/transform/scalex-1.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + transform: scalex(0.5); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scaley-1-ref.html b/layout/reftests/transform/scaley-1-ref.html new file mode 100644 index 0000000000..58a01d1958 --- /dev/null +++ b/layout/reftests/transform/scaley-1-ref.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 50px; + margin-top: 25px; + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scaley-1.html b/layout/reftests/transform/scaley-1.html new file mode 100644 index 0000000000..14f331a3ae --- /dev/null +++ b/layout/reftests/transform/scaley-1.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + transform: scaley(0.5); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/singular-1a.html b/layout/reftests/transform/singular-1a.html new file mode 100644 index 0000000000..4087b36f93 --- /dev/null +++ b/layout/reftests/transform/singular-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 1, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;"> + This shouldn't be visible. + </div> +</body> +</html> diff --git a/layout/reftests/transform/skew-1-ref.html b/layout/reftests/transform/skew-1-ref.html new file mode 100644 index 0000000000..98d97522cf --- /dev/null +++ b/layout/reftests/transform/skew-1-ref.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skewx(10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-1a.html b/layout/reftests/transform/skew-1a.html new file mode 100644 index 0000000000..4d68d1dca3 --- /dev/null +++ b/layout/reftests/transform/skew-1a.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skew(10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-1b.html b/layout/reftests/transform/skew-1b.html new file mode 100644 index 0000000000..f1d5e89672 --- /dev/null +++ b/layout/reftests/transform/skew-1b.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skew(10deg, 0deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-2-ref.html b/layout/reftests/transform/skew-2-ref.html new file mode 100644 index 0000000000..fbd24a03d6 --- /dev/null +++ b/layout/reftests/transform/skew-2-ref.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skewy(10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-2a.html b/layout/reftests/transform/skew-2a.html new file mode 100644 index 0000000000..78f4fedc01 --- /dev/null +++ b/layout/reftests/transform/skew-2a.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; transform: skew(0deg, 10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/snapping-1-ref.html b/layout/reftests/transform/snapping-1-ref.html new file mode 100644 index 0000000000..99006901b3 --- /dev/null +++ b/layout/reftests/transform/snapping-1-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + background: red; + position: relative; + left: 0.5px; + top: 100px; + height: 100px; + width: 100px; +} +</style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/transform/snapping-1.html b/layout/reftests/transform/snapping-1.html new file mode 100644 index 0000000000..d8198cf958 --- /dev/null +++ b/layout/reftests/transform/snapping-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + background: red; + margin-left: 100.5px; + height: 100px; + width: 100px; + transform-origin: bottom left; + transform: rotate(-90deg) translate(-100px, 0); + transform-origin: bottom left; + transform: rotate(-90deg) translate(-100px, 0); +} +</style> +</head> +<body> + <div></div> +</html> diff --git a/layout/reftests/transform/square.html b/layout/reftests/transform/square.html new file mode 100644 index 0000000000..2f6e4950bc --- /dev/null +++ b/layout/reftests/transform/square.html @@ -0,0 +1,20 @@ +<html> + <head> + <style> + div { + background: green; + width: 100px; + height: 100px; + } + span { + background: yellow; + width: 50px; + } + </style> + </head> + <body> + <div> + <span></span> + </div> + </body> +</html> diff --git a/layout/reftests/transform/stresstest-1-ref.html b/layout/reftests/transform/stresstest-1-ref.html new file mode 100644 index 0000000000..a84cff23db --- /dev/null +++ b/layout/reftests/transform/stresstest-1-ref.html @@ -0,0 +1,7 @@ +<html> + <body> + <iframe src="square.html" style="height: 200px; width: 300px" id="test"> + test + </iframe> + </body> +</html> diff --git a/layout/reftests/transform/stresstest-1.html b/layout/reftests/transform/stresstest-1.html new file mode 100644 index 0000000000..3429ab87bc --- /dev/null +++ b/layout/reftests/transform/stresstest-1.html @@ -0,0 +1,27 @@ +<html class="reftest-wait"> + <head> + <script type="application/javascript"> + function runtest() { + var iframe = document.getElementById("test"); + var style = iframe.getAttribute("style"); + // We depend on the transform being the last rule so clip the ending ';' + style = style.substring(0, style.length-1); + + // Here, we add transform functions to explicitly undo the effects of + // each already-applied transform. This should leave us with an + // effectively-untransformed iframe. + style = style + " scale(0.5, 0.25) translatex(-50px) rotate(-45deg) translate(-50px, -50px) skewx(135deg);" + iframe.setAttribute("style", style); + document.documentElement.className = ""; + } + </script> + </head> + <body> + <iframe + src="square.html" + style="height: 200px; width: 300px; transform: skewx(45deg) translate(50px, 50px) rotate(45deg) translatex(50px) scale(2.0, 4.0);" + id="test" + onload="runtest();"> + </iframe> + </body> +</html> diff --git a/layout/reftests/transform/table-1-ref.html b/layout/reftests/transform/table-1-ref.html new file mode 100644 index 0000000000..05c86fc719 --- /dev/null +++ b/layout/reftests/transform/table-1-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<div style="transform:translate(200px) rotate(180deg);transform-origin:left"> +<table> +<caption>Hello</caption> +<tr><td>there! +</table> +</div> diff --git a/layout/reftests/transform/table-1a.html b/layout/reftests/transform/table-1a.html new file mode 100644 index 0000000000..9bdfa8dea5 --- /dev/null +++ b/layout/reftests/transform/table-1a.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="transform:translate(200px) rotate(180deg);transform-origin:left"> +<caption>Hello</caption> +<tr><td>there! +</table> diff --git a/layout/reftests/transform/table-1b.html b/layout/reftests/transform/table-1b.html new file mode 100644 index 0000000000..7789da42bc --- /dev/null +++ b/layout/reftests/transform/table-1b.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="display:inline-table;transform:translate(200px) rotate(180deg);transform-origin:left"> +<caption>Hello</caption> +<tr><td>there! +</table> diff --git a/layout/reftests/transform/table-1c.html b/layout/reftests/transform/table-1c.html new file mode 100644 index 0000000000..a4be031172 --- /dev/null +++ b/layout/reftests/transform/table-1c.html @@ -0,0 +1,7 @@ +<!doctype html> +<div style="transform:translateX(200px) rotate(180deg) translateY(-100%);transform-origin:left"> +<table style="transform:translateY(100%)"> +<caption>Hello</caption> +<tr><td>there! +</table> +</div> diff --git a/layout/reftests/transform/table-2-ref.html b/layout/reftests/transform/table-2-ref.html new file mode 100644 index 0000000000..7e4059a487 --- /dev/null +++ b/layout/reftests/transform/table-2-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<div style="transform:translate(200px) rotate(180deg);transform-origin:left"> +<table> +<caption style=caption-side:bottom>there!</caption> +<tr><td>Hello +</table> diff --git a/layout/reftests/transform/table-2a.html b/layout/reftests/transform/table-2a.html new file mode 100644 index 0000000000..b3343b326d --- /dev/null +++ b/layout/reftests/transform/table-2a.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="transform:translate(200px) rotate(180deg);transform-origin:left"> +<caption style=caption-side:bottom>there!</caption> +<tr><td>Hello +</table> diff --git a/layout/reftests/transform/table-2b.html b/layout/reftests/transform/table-2b.html new file mode 100644 index 0000000000..1ab20b11d4 --- /dev/null +++ b/layout/reftests/transform/table-2b.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="display:inline-table;transform:translate(200px) rotate(180deg);transform-origin:left"> +<caption style=caption-side:bottom>there!</caption> +<tr><td>Hello +</table> diff --git a/layout/reftests/transform/table-overflowed-by-animation-ref.html b/layout/reftests/transform/table-overflowed-by-animation-ref.html new file mode 100644 index 0000000000..242dc53506 --- /dev/null +++ b/layout/reftests/transform/table-overflowed-by-animation-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> +<table style="width: 100px; height: 100px;"> + <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);"> + </td> +</table> +</html> diff --git a/layout/reftests/transform/table-overflowed-by-animation.html b/layout/reftests/transform/table-overflowed-by-animation.html new file mode 100644 index 0000000000..b7bd80b5e4 --- /dev/null +++ b/layout/reftests/transform/table-overflowed-by-animation.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +@keyframes anim { + /* + * We need to use different transform functions to produce + * UpdatePostTransformOverflow change hint, also these functions have to be + * the same matrix to being the same position while running reftest. + */ + from { + transform: rotate(0deg); + } + to { + transform: scale(1); + } +} +</style> +<table id="test" style="width: 100px; height: 100px; animation: anim 1s infinite;"> + <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);"> + </td> +</table> +<script> +document.getElementById("test").addEventListener("animationstart", () => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> +</html> diff --git a/layout/reftests/transform/transform-anon-block-1-ref.html b/layout/reftests/transform/transform-anon-block-1-ref.html new file mode 100644 index 0000000000..a6b89ab863 --- /dev/null +++ b/layout/reftests/transform/transform-anon-block-1-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <meta charset="UTF-8"> + <style> + .parent { + border: none; + transform-style: preserve-3d; + background: red; + display: inline-block; + } + + .child { + width: 100px; + height: 100px; + background: blue; + transform: rotate(45deg); + } + </style> +</head> + +<body> + <div class="parent"> + <div class="child"></div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/transform-anon-block-1.html b/layout/reftests/transform/transform-anon-block-1.html new file mode 100644 index 0000000000..0a45ec8804 --- /dev/null +++ b/layout/reftests/transform/transform-anon-block-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <meta charset="UTF-8"> + <style> + .parent { + border: none; + transform-style: preserve-3d; + background: red; + padding: 0px; + } + + .child { + width: 100px; + height: 100px; + background: blue; + transform: rotate(45deg); + } + </style> +</head> + +<body> + <button class="parent"> + <div class="child"></div> + </button> +</body> +</html> diff --git a/layout/reftests/transform/transform-box-svg-1-ref.svg b/layout/reftests/transform/transform-box-svg-1-ref.svg new file mode 100644 index 0000000000..8f748b73d7 --- /dev/null +++ b/layout/reftests/transform/transform-box-svg-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<rect x='40' y='140' width='100' height='100' fill='blue'/> +</svg> diff --git a/layout/reftests/transform/transform-box-svg-1a.svg b/layout/reftests/transform/transform-box-svg-1a.svg new file mode 100644 index 0000000000..e74989823d --- /dev/null +++ b/layout/reftests/transform/transform-box-svg-1a.svg @@ -0,0 +1,10 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point relative to the top left of the + element's paint bbox when transform-box is set to 'fill-box' + --> + <rect x='10' y='10' width='100' height='100' fill='blue' + style="transform:rotate(90deg); transform-origin:0px 100px; + transform-box:fill-box;"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-box-svg-1b.svg b/layout/reftests/transform/transform-box-svg-1b.svg new file mode 100644 index 0000000000..84d0da992b --- /dev/null +++ b/layout/reftests/transform/transform-box-svg-1b.svg @@ -0,0 +1,11 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point relative to the top left of the + element's fill bbox when transform-box is set to 'fill-box', with + percentage values resolved against the size of the fill bbox. + --> + <rect x='10' y='10' width='100' height='100' fill='blue' + style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px); + transform-box:fill-box;"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-box-svg-2-ref.svg b/layout/reftests/transform/transform-box-svg-2-ref.svg new file mode 100644 index 0000000000..905fafcca7 --- /dev/null +++ b/layout/reftests/transform/transform-box-svg-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/> +</svg> diff --git a/layout/reftests/transform/transform-box-svg-2a.svg b/layout/reftests/transform/transform-box-svg-2a.svg new file mode 100644 index 0000000000..7ae4cfe0b4 --- /dev/null +++ b/layout/reftests/transform/transform-box-svg-2a.svg @@ -0,0 +1,10 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point relative to the top left of the + element's paint bbox when transform-box is set to 'fill-box' + --> + <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black' + style="transform:rotate(90deg); transform-origin:0px 100px; + transform-box:fill-box;"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-box-svg-2b.svg b/layout/reftests/transform/transform-box-svg-2b.svg new file mode 100644 index 0000000000..8b14744820 --- /dev/null +++ b/layout/reftests/transform/transform-box-svg-2b.svg @@ -0,0 +1,11 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point relative to the top left of the + element's fill bbox when transform-box is set to 'fill-box', with + percentage values resolved against the size of the fill bbox. + --> + <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black' + style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px); + transform-box:fill-box;"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-box-svg-3a.svg b/layout/reftests/transform/transform-box-svg-3a.svg new file mode 100644 index 0000000000..625294038c --- /dev/null +++ b/layout/reftests/transform/transform-box-svg-3a.svg @@ -0,0 +1,64 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none"> + <style> + /* <![CDATA[ */ + .ref { + fill: red; + } + .test { + fill: lime; + } + /* ]]> */ + </style> + <rect width="100%" height="100%" fill="lime"/> + <!-- all rect.test rects should be covered by the corresponded rest.ref rect--> + <!-- 1st row: transform-box only. --> + <rect class="ref" + x="11" y="11" width="8" height="8"/> + <rect class="test" + style="transform-box: view-box" + x="10" y="10" width="10" height="10"/> + <rect class="ref" + x="26" y="11" width="8" height="8"/> + <rect class="test" + style="transform-box: fill-box" + x="25" y="10" width="10" height="10"/> + <rect class="ref" + x="41" y="11" width="8" height="8"/> + <rect class="test" + style="transform-box: border-box" + x="40" y="10" width="10" height="10"/> + + <!-- 2nd row: transform-box plus transform-origin. --> + <rect class="ref" + x="11" y="26" width="8" height="8"/> + <rect class="test" + style="transform-box: view-box; transform-origin: 40% 60%" + x="10" y="25" width="10" height="10"/> + <rect class="ref" + x="26" y="26" width="8" height="8"/> + <rect class="test" + style="transform-box: fill-box; transform-origin: 20px 10px" + x="25" y="25" width="10" height="10"/> + <rect class="ref" + x="41" y="26" width="8" height="8"/> + <rect class="test" + style="transform-box: border-box; transform-origin: 40% 60%" + x="40" y="25" width="10" height="10"/> + + <!-- 3rd row: transform-box, transform-origin and transform. --> + <rect class="ref" + x="11" y="46" width="8" height="8"/> + <rect class="test" + style="transform-box: fill-box; transform-origin: 0% 0%; transform: scale(2);" + x="10" y="45" width="5" height="5"/> + <rect class="ref" + x="26" y="46" width="8" height="8"/> + <rect class="test" + style="transform-box: fill-box; transform-origin: 50% 50%; transform:rotate(45deg);" + x="24" y="44" width="12" height="12"/> + <rect class="ref" + x="41" y="46" width="8" height="8"/> + <rect class="test" + style="transform-box: border-box; transform-origin: 100% 100%; transform: scale(1);" + x="40" y="45" width="10" height="10"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/transform/transform-origin-svg-1-ref.svg b/layout/reftests/transform/transform-origin-svg-1-ref.svg new file mode 100644 index 0000000000..8f748b73d7 --- /dev/null +++ b/layout/reftests/transform/transform-origin-svg-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<rect x='40' y='140' width='100' height='100' fill='blue'/> +</svg> diff --git a/layout/reftests/transform/transform-origin-svg-1a.svg b/layout/reftests/transform/transform-origin-svg-1a.svg new file mode 100644 index 0000000000..c1591e65b6 --- /dev/null +++ b/layout/reftests/transform/transform-origin-svg-1a.svg @@ -0,0 +1,7 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point in user space --> + <rect x='10' y='10' width='100' height='100' fill='blue' + style="transform:rotate(90deg); transform-origin:10px 110px;"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-origin-svg-1b.svg b/layout/reftests/transform/transform-origin-svg-1b.svg new file mode 100644 index 0000000000..ca4eead39e --- /dev/null +++ b/layout/reftests/transform/transform-origin-svg-1b.svg @@ -0,0 +1,9 @@ +<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point in user space with percentages + resolved against the nearest viewport's dimensions. + --> + <rect x='10' y='10' width='100' height='100' fill='blue' + style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-origin-svg-2-ref.svg b/layout/reftests/transform/transform-origin-svg-2-ref.svg new file mode 100644 index 0000000000..905fafcca7 --- /dev/null +++ b/layout/reftests/transform/transform-origin-svg-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/> +</svg> diff --git a/layout/reftests/transform/transform-origin-svg-2a.svg b/layout/reftests/transform/transform-origin-svg-2a.svg new file mode 100644 index 0000000000..46de3c4806 --- /dev/null +++ b/layout/reftests/transform/transform-origin-svg-2a.svg @@ -0,0 +1,7 @@ +<svg xmlns='http://www.w3.org/2000/svg'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point in user space --> + <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black' + style="transform:rotate(90deg); transform-origin:10px 110px;"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-origin-svg-2b.svg b/layout/reftests/transform/transform-origin-svg-2b.svg new file mode 100644 index 0000000000..29d4187aa5 --- /dev/null +++ b/layout/reftests/transform/transform-origin-svg-2b.svg @@ -0,0 +1,9 @@ +<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'> +<g transform="translate(30,30)"> + <!-- transform-origin specifies a point in user space with percentages + resolved against the nearest viewport's dimensions. + --> + <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black' + style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/> +</g> +</svg> diff --git a/layout/reftests/transform/transform-svg-1-ref.xhtml b/layout/reftests/transform/transform-svg-1-ref.xhtml new file mode 100644 index 0000000000..1d303d1ada --- /dev/null +++ b/layout/reftests/transform/transform-svg-1-ref.xhtml @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<body style="margin:0"> + <div style="position: relative; left:100px; top:100px; width:300px; height:300px; background:lime;"> + <div style="height:200px;"/> + <div style="height:100px; background:blue;"/> + </div> +</body> +</html> diff --git a/layout/reftests/transform/transform-svg-1a.xhtml b/layout/reftests/transform/transform-svg-1a.xhtml new file mode 100644 index 0000000000..af1f03b04f --- /dev/null +++ b/layout/reftests/transform/transform-svg-1a.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:200px; background:lime; transform: translate(100px, 100px);"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:rect x="0" y="0" width="300" height="300"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/transform-svg-1b.xhtml b/layout/reftests/transform/transform-svg-1b.xhtml new file mode 100644 index 0000000000..56dd523324 --- /dev/null +++ b/layout/reftests/transform/transform-svg-1b.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; transform: rotate(135deg);"> + <div style="height:200px;"/> + <div style="height:200px; background:lime;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:rect x="0" y="0" width="300" height="300"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/transform-svg-2-fail.xhtml b/layout/reftests/transform/transform-svg-2-fail.xhtml new file mode 100644 index 0000000000..b3fe934e28 --- /dev/null +++ b/layout/reftests/transform/transform-svg-2-fail.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:400px; background:blue;"> + <div style="height:200px;"/> + <div style="height:200px; background:lime;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:circle cx="100" cy="100" r="200"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/transform-svg-2-ref.xhtml b/layout/reftests/transform/transform-svg-2-ref.xhtml new file mode 100644 index 0000000000..7d3da096db --- /dev/null +++ b/layout/reftests/transform/transform-svg-2-ref.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; position: relative; left:100px; top:100px;"> + <div style="height:200px;"/> + <div style="height:200px; background:lime;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:circle cx="200" cy="200" r="200"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/transform-svg-2a.xhtml b/layout/reftests/transform/transform-svg-2a.xhtml new file mode 100644 index 0000000000..5e89a581ad --- /dev/null +++ b/layout/reftests/transform/transform-svg-2a.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; transform: translate(100px, 100px);"> + <div style="height:200px;"/> + <div style="height:200px; background:lime;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:circle cx="200" cy="200" r="200"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/translate-1-ref.html b/layout/reftests/transform/translate-1-ref.html new file mode 100644 index 0000000000..bdd2a30e70 --- /dev/null +++ b/layout/reftests/transform/translate-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="position: relative; left: 50px; top: 50px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1a.html b/layout/reftests/transform/translate-1a.html new file mode 100644 index 0000000000..c6944e49b2 --- /dev/null +++ b/layout/reftests/transform/translate-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate(50px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1b.html b/layout/reftests/transform/translate-1b.html new file mode 100644 index 0000000000..4d2f1efd16 --- /dev/null +++ b/layout/reftests/transform/translate-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate(50px, 50px) rotate(360deg);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1c.html b/layout/reftests/transform/translate-1c.html new file mode 100644 index 0000000000..0545c027b7 --- /dev/null +++ b/layout/reftests/transform/translate-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate(25px, 25px) translate(25px, 25px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1d.html b/layout/reftests/transform/translate-1d.html new file mode 100644 index 0000000000..bba4c6e96f --- /dev/null +++ b/layout/reftests/transform/translate-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate(25px, 25px); position:relative; top:25px; left:25px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1e.html b/layout/reftests/transform/translate-1e.html new file mode 100644 index 0000000000..09378a0f4a --- /dev/null +++ b/layout/reftests/transform/translate-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate(50px) translate(-100px) translate(150px) translate(-50px) translate(0px, 50px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-2-ref.html b/layout/reftests/transform/translate-2-ref.html new file mode 100644 index 0000000000..bc05a774a4 --- /dev/null +++ b/layout/reftests/transform/translate-2-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="position: relative; left: 50px; top: 0px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-2a.html b/layout/reftests/transform/translate-2a.html new file mode 100644 index 0000000000..c6944e49b2 --- /dev/null +++ b/layout/reftests/transform/translate-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translate(50px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-3-ref.html b/layout/reftests/transform/translate-3-ref.html new file mode 100644 index 0000000000..458932b60b --- /dev/null +++ b/layout/reftests/transform/translate-3-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; height: 100px; + background: green; +} +</style> +<div></div> diff --git a/layout/reftests/transform/translate-3.html b/layout/reftests/transform/translate-3.html new file mode 100644 index 0000000000..ea326324a3 --- /dev/null +++ b/layout/reftests/transform/translate-3.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; height: 100px; +} +#outer { + background: green; + overflow: hidden; +} +#inner { + background: red; + transform: translateX(calc(100px)); +} +</style> +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/layout/reftests/transform/translate-rounding-1.html b/layout/reftests/transform/translate-rounding-1.html new file mode 100644 index 0000000000..a77f71dd59 --- /dev/null +++ b/layout/reftests/transform/translate-rounding-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1392161 - Transform translate rounding (em)</title> + <style> + div { + height: 100px; + width: 100px; + background: blue; + font-size: 10px; + transform: scale(100000) translate(0.0001em) scale(0.00001); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/transform/translate-rounding-2.html b/layout/reftests/transform/translate-rounding-2.html new file mode 100644 index 0000000000..d22d6071fc --- /dev/null +++ b/layout/reftests/transform/translate-rounding-2.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1392161 - Transform translate rounding (rem)</title> + <style> + div { + height: 100px; + width: 100px; + background: blue; + transform: scale(100000) translate(0.0001rem) scale(0.00001); + } + html { + font-size: 10px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/transform/translate-rounding-3.html b/layout/reftests/transform/translate-rounding-3.html new file mode 100644 index 0000000000..2d0e92e6a1 --- /dev/null +++ b/layout/reftests/transform/translate-rounding-3.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1392161 - Transform translate rounding (viewport size)</title> + <style> + div { + height: 100px; + width: 100px; + background: blue; + transform: scale(100000) translate(0.0005vw) scale(0.00001); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/transform/translate-rounding-ref.html b/layout/reftests/transform/translate-rounding-ref.html new file mode 100644 index 0000000000..8cf29dd1a9 --- /dev/null +++ b/layout/reftests/transform/translate-rounding-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1392161 - Translate rounding reference</title> + <style> + div { + height: 100px; + width: 100px; + background: blue; + position: relative; + left: 100px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/transform/translate-rounding-viewport-ref.html b/layout/reftests/transform/translate-rounding-viewport-ref.html new file mode 100644 index 0000000000..da2051d3b3 --- /dev/null +++ b/layout/reftests/transform/translate-rounding-viewport-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Bug 1392161 - Translate rounding reference (viewport)</title> + <style> + div { + height: 100px; + width: 100px; + background: blue; + position: relative; + left: 50vw; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/transform/translatex-1-ref-2.html b/layout/reftests/transform/translatex-1-ref-2.html new file mode 100644 index 0000000000..5f242f1850 --- /dev/null +++ b/layout/reftests/transform/translatex-1-ref-2.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 50px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> + <div style="position:relative; left:50px; height:10px;"> + <!-- make the body overflow by 50px horizontally --> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1-ref.html b/layout/reftests/transform/translatex-1-ref.html new file mode 100644 index 0000000000..4b35ca823c --- /dev/null +++ b/layout/reftests/transform/translatex-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="position:relative; left:50px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1a.html b/layout/reftests/transform/translatex-1a.html new file mode 100644 index 0000000000..fe9c4f4eb0 --- /dev/null +++ b/layout/reftests/transform/translatex-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatex(50px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1b.html b/layout/reftests/transform/translatex-1b.html new file mode 100644 index 0000000000..c4c9fb654b --- /dev/null +++ b/layout/reftests/transform/translatex-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatex(50px) rotate(360deg);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1c.html b/layout/reftests/transform/translatex-1c.html new file mode 100644 index 0000000000..2f0ff89029 --- /dev/null +++ b/layout/reftests/transform/translatex-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatex(25px) translatex(25px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1d.html b/layout/reftests/transform/translatex-1d.html new file mode 100644 index 0000000000..fdd7e28cbe --- /dev/null +++ b/layout/reftests/transform/translatex-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatex(25px); position:relative; left:25px; top:0px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1e.html b/layout/reftests/transform/translatex-1e.html new file mode 100644 index 0000000000..c09fd49ef9 --- /dev/null +++ b/layout/reftests/transform/translatex-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatex(50px) translatex(-100px) translatex(150px) translatex(-50px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-2.html b/layout/reftests/transform/translatex-2.html new file mode 100644 index 0000000000..7d7e504994 --- /dev/null +++ b/layout/reftests/transform/translatex-2.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 0, 0, 1, 50, 0);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1-ref-2.html b/layout/reftests/transform/translatey-1-ref-2.html new file mode 100644 index 0000000000..49c42165f0 --- /dev/null +++ b/layout/reftests/transform/translatey-1-ref-2.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="margin-top: 50px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1-ref.html b/layout/reftests/transform/translatey-1-ref.html new file mode 100644 index 0000000000..a898e3385e --- /dev/null +++ b/layout/reftests/transform/translatey-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="position:relative; top:50px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1a.html b/layout/reftests/transform/translatey-1a.html new file mode 100644 index 0000000000..b3cf76916d --- /dev/null +++ b/layout/reftests/transform/translatey-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatey(50px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1b.html b/layout/reftests/transform/translatey-1b.html new file mode 100644 index 0000000000..d5ea622d12 --- /dev/null +++ b/layout/reftests/transform/translatey-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatey(50px) rotate(360deg);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1c.html b/layout/reftests/transform/translatey-1c.html new file mode 100644 index 0000000000..d8283aaa02 --- /dev/null +++ b/layout/reftests/transform/translatey-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatey(25px) translatey(25px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1d.html b/layout/reftests/transform/translatey-1d.html new file mode 100644 index 0000000000..f0e6bac6bc --- /dev/null +++ b/layout/reftests/transform/translatey-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatey(25px); position:relative; top:25px; left:0px;"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1e.html b/layout/reftests/transform/translatey-1e.html new file mode 100644 index 0000000000..1b73e3a401 --- /dev/null +++ b/layout/reftests/transform/translatey-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: translatey(50px) translatey(-100px) translatey(150px) translatey(-50px);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-2.html b/layout/reftests/transform/translatey-2.html new file mode 100644 index 0000000000..a894c94288 --- /dev/null +++ b/layout/reftests/transform/translatey-2.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="transform: matrix(1, 0, 0, 1, 0, 50);"> + <div style="background-color: green; width: 20px; height: 20px"> + </div> +</body> +</html> |
