diff options
Diffstat (limited to 'layout/reftests/transform')
214 files changed, 4075 insertions, 0 deletions
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> |
