diff options
Diffstat (limited to 'layout/reftests/transform')
164 files changed, 2327 insertions, 0 deletions
diff --git a/layout/reftests/transform/601894-1.html b/layout/reftests/transform/601894-1.html new file mode 100644 index 000000000..28af1fa28 --- /dev/null +++ b/layout/reftests/transform/601894-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <body style="background: -moz-linear-gradient(lime, lime) fixed; overflow: hidden;"> + <div style="position: absolute; left: 21.0138px; top: 507.24px; z-index: 17567; -moz-transform: scale(8);"> + <div style="height: 128px; left: -64px; position: absolute; top: -64px; visibility: visible; width: 128px;"></div> + </div> + <div style="position: absolute; left: 640.572px; top: 386.574px; -moz-transform: scale(1); z-index: -157863;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + <div style="position: absolute; left: 568.346px; top: 582.669px; -moz-transform: scale(1); z-index: -62592;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + <div style="position: absolute; left: 573.27px; top: 168.861px; -moz-transform: scale(1); z-index: -137632;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + <div style="position: absolute; left: 519.063px; top: 182.9px; -moz-transform: scale(1); z-index: -50558;"> + <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform/601894-2.html b/layout/reftests/transform/601894-2.html new file mode 100644 index 000000000..7bf87215b --- /dev/null +++ b/layout/reftests/transform/601894-2.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body style="background: -moz-linear-gradient(lime, lime) fixed;"> + <div style="position: absolute; left: 0; top: 0; -moz-transform: scale(1)"> + <div style="position: absolute; width: 200px; height: 200px;"></div> + </div> + </body> +</html> diff --git a/layout/reftests/transform/601894-ref.html b/layout/reftests/transform/601894-ref.html new file mode 100644 index 000000000..f4e6cdae8 --- /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 000000000..d5cf00710 --- /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 000000000..a34dcd8d4 --- /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); + }, false); + + </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 000000000..337c849b5 --- /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 000000000..a999bee74 --- /dev/null +++ b/layout/reftests/transform/abspos-1a.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px); background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1b.html b/layout/reftests/transform/abspos-1b.html new file mode 100644 index 000000000..54c37fdf6 --- /dev/null +++ b/layout/reftests/transform/abspos-1b.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1c.html b/layout/reftests/transform/abspos-1c.html new file mode 100644 index 000000000..d3cc9a4c2 --- /dev/null +++ b/layout/reftests/transform/abspos-1c.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; right: -150px; bottom: 0px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1d.html b/layout/reftests/transform/abspos-1d.html new file mode 100644 index 000000000..47ac1b9dc --- /dev/null +++ b/layout/reftests/transform/abspos-1d.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -150px; bottom: 0px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1e.html b/layout/reftests/transform/abspos-1e.html new file mode 100644 index 000000000..310d33e4b --- /dev/null +++ b/layout/reftests/transform/abspos-1e.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -151px; bottom: 0px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1f.html b/layout/reftests/transform/abspos-1f.html new file mode 100644 index 000000000..2b9d954e6 --- /dev/null +++ b/layout/reftests/transform/abspos-1f.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px); background-color: gold; display: table"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/abspos-1g.html b/layout/reftests/transform/abspos-1g.html new file mode 100644 index 000000000..32cf19e0c --- /dev/null +++ b/layout/reftests/transform/abspos-1g.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;display: inline-table"> + A B C D E F G H I J K L M N O P Q R S T U V W X Y Z + <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;"> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html new file mode 100644 index 000000000..3f2974597 --- /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 000000000..b04c4a8fa --- /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 000000000..714f6f222 --- /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 000000000..f7297d121 --- /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 000000000..666920955 --- /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, false); + +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/compound-1-fail.html b/layout/reftests/transform/compound-1-fail.html new file mode 100644 index 000000000..dd8b75654 --- /dev/null +++ b/layout/reftests/transform/compound-1-fail.html @@ -0,0 +1,31 @@ +<html> +<head> + <style type="text/css"> + div.test + { + background-color: gold; + width:200px; + height:100px; + border: 1px solid black; + } + div + { + -moz-transform-origin: top left; + } + </style> +</head> +<body> + <div style="position:relative; left:400px; top:200px;"> + <div style="-moz-transform: skew(15deg);"> + <div style="-moz-transform: rotate(90deg);"> + <div style="-moz-transform: scale(2);"> + <div style="-moz-transform: translate(100px);"> + <div class="test"> + </div> + </div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/compound-1-ref.html b/layout/reftests/transform/compound-1-ref.html new file mode 100644 index 000000000..48a47117c --- /dev/null +++ b/layout/reftests/transform/compound-1-ref.html @@ -0,0 +1,35 @@ +<html> +<head> + <style type="text/css"> + div.test + { + background-color: gold; + width:200px; + height:100px; + border: 1px solid black; + } + div + { + -moz-transform-origin: top left; + } + body + { + overflow:hidden; + } + </style> +</head> +<body> + <div style="position:relative; left:400px; top:200px;"> + <div style="-moz-transform: translate(100px);"> + <div style="-moz-transform: scale(2);"> + <div style="-moz-transform: rotate(90deg);"> + <div style="-moz-transform: skew(15deg);"> + <div class="test"> + </div> + </div> + </div> + </div> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/compound-1a.html b/layout/reftests/transform/compound-1a.html new file mode 100644 index 000000000..31c677b2e --- /dev/null +++ b/layout/reftests/transform/compound-1a.html @@ -0,0 +1,27 @@ +<html> +<head> + <style type="text/css"> + div.test + { + background-color: gold; + width:200px; + height:100px; + border: 1px solid black; + } + div + { + -moz-transform-origin: top left; + } + body + { + overflow:hidden; + } + </style> +</head> +<body> + <div style="position:relative; left:400px; top:200px;"> + <div class="test" style="-moz-transform: translate(100px) scale(2) rotate(90deg) skew(15deg);"> + </div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/descendant-1-ref.html b/layout/reftests/transform/descendant-1-ref.html new file mode 100644 index 000000000..827090c7e --- /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 000000000..6de49fc5f --- /dev/null +++ b/layout/reftests/transform/descendant-1.html @@ -0,0 +1,23 @@ +<html> +<head> + <style> + #div1 { + background: green; + height: 100px; + width: 100px; + } + span { + background: yellow; + } + #div1 div {-moz-transform: translate(20px, 150px); + -moz-transform-origin: 0% 0%; + } + </style> +</head> +<body> + <div id="div1"> + <div><span>span 1</span></div> + </div> + <span>span 2</span> +</body> +</html> diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html new file mode 100644 index 000000000..e2d067e1f --- /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 000000000..7b8307b4f --- /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 000000000..271b1a647 --- /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 000000000..358cd938b --- /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, false); +</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 000000000..0ce3547c1 --- /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, false); +</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 000000000..c53596914 --- /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, false); +</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 000000000..d92058201 --- /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 000000000..b6718b29a --- /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 000000000..f0f7eae47 --- /dev/null +++ b/layout/reftests/transform/dynamic-inherit-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<head> +<title>Test for bug 521720</title> +<style type="text/css"> + +p { + -moz-transform-origin: inherit; + -moz-transform: scale(2); + height: 10px; + width: 10px; + background: green; + margin: 50px; +} + +</style> +<head> +<body> +<div id="a"> +<p style="font-size: 10px"></p> +</div> +</body> diff --git a/layout/reftests/transform/dynamic-inherit-1.html b/layout/reftests/transform/dynamic-inherit-1.html new file mode 100644 index 000000000..e04512a6f --- /dev/null +++ b/layout/reftests/transform/dynamic-inherit-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<head> +<title>Test for bug 521720</title> +<style type="text/css"> + +p { + -moz-transform-origin: inherit; + -moz-transform: scale(2); + height: 10px; + width: 10px; + background: green; + margin: 50px; +} + +</style> +<head> +<body onload="document.getElementById('a').style.removeProperty('-moz-transform-origin');"> +<div id="a" style="-moz-transform-origin: 10px 10px"> +<p style="font-size: 10px"></p> +</div> +</body> diff --git a/layout/reftests/transform/iframe-1-ref.html b/layout/reftests/transform/iframe-1-ref.html new file mode 100644 index 000000000..43c76457a --- /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 000000000..6a2b621df --- /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 000000000..ffe15e78d --- /dev/null +++ b/layout/reftests/transform/iframe-transform.html @@ -0,0 +1,16 @@ +<html> + <head> + <style> + div { + height: 200px; + width: 200px; + background: green; + -moz-transform: translate(500px, 500px); + } + </style> + </head> + <body> + <div> + </div> + </body> +</html> diff --git a/layout/reftests/transform/inline-1-ref.html b/layout/reftests/transform/inline-1-ref.html new file mode 100644 index 000000000..84a2f6dd4 --- /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 000000000..fab499d72 --- /dev/null +++ b/layout/reftests/transform/inline-1a.html @@ -0,0 +1,3 @@ +<!doctype html> +This is some <span style="-moz-transform:rotate(180deg)">text<br> +that is</span> not transformed diff --git a/layout/reftests/transform/matrix-1-ref.html b/layout/reftests/transform/matrix-1-ref.html new file mode 100644 index 000000000..0b24d517b --- /dev/null +++ b/layout/reftests/transform/matrix-1-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatex(100px); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-1a.html b/layout/reftests/transform/matrix-1a.html new file mode 100644 index 000000000..95307ec19 --- /dev/null +++ b/layout/reftests/transform/matrix-1a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 0, 0, 1, 100, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-2-ref.html b/layout/reftests/transform/matrix-2-ref.html new file mode 100644 index 000000000..0bb5f10b5 --- /dev/null +++ b/layout/reftests/transform/matrix-2-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatey(100px); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-2a.html b/layout/reftests/transform/matrix-2a.html new file mode 100644 index 000000000..26c195872 --- /dev/null +++ b/layout/reftests/transform/matrix-2a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 0, 0, 1, 0, 100); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-3-ref.html b/layout/reftests/transform/matrix-3-ref.html new file mode 100644 index 000000000..7eaa66a60 --- /dev/null +++ b/layout/reftests/transform/matrix-3-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatex(47%); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-3a.html b/layout/reftests/transform/matrix-3a.html new file mode 100644 index 000000000..36949de86 --- /dev/null +++ b/layout/reftests/transform/matrix-3a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 0, 0, 1, 47, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-4-ref.html b/layout/reftests/transform/matrix-4-ref.html new file mode 100644 index 000000000..31627a0cb --- /dev/null +++ b/layout/reftests/transform/matrix-4-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatey(23%); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-4a.html b/layout/reftests/transform/matrix-4a.html new file mode 100644 index 000000000..1fde9f6c5 --- /dev/null +++ b/layout/reftests/transform/matrix-4a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 0, 0, 1, 0, 23); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-5-ref.html b/layout/reftests/transform/matrix-5-ref.html new file mode 100644 index 000000000..04e7730ce --- /dev/null +++ b/layout/reftests/transform/matrix-5-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: skewx(45deg); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-5a.html b/layout/reftests/transform/matrix-5a.html new file mode 100644 index 000000000..89a7c9c1a --- /dev/null +++ b/layout/reftests/transform/matrix-5a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 0, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-6-ref.html b/layout/reftests/transform/matrix-6-ref.html new file mode 100644 index 000000000..a3846372c --- /dev/null +++ b/layout/reftests/transform/matrix-6-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: skewy(45deg); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-6a.html b/layout/reftests/transform/matrix-6a.html new file mode 100644 index 000000000..50f0c3dd5 --- /dev/null +++ b/layout/reftests/transform/matrix-6a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 1, 0, 1, 0, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-7-ref.html b/layout/reftests/transform/matrix-7-ref.html new file mode 100644 index 000000000..460f5d645 --- /dev/null +++ b/layout/reftests/transform/matrix-7-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: scale(2, 4); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix-7a.html b/layout/reftests/transform/matrix-7a.html new file mode 100644 index 000000000..8603c37b2 --- /dev/null +++ b/layout/reftests/transform/matrix-7a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(2, 0, 0, 4, 0, 0); width: 100px; height: 100px; background-color: gold;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/matrix3d-1-ref.html b/layout/reftests/transform/matrix3d-1-ref.html new file mode 100644 index 000000000..d2f257d53 --- /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 000000000..09226ffb0 --- /dev/null +++ b/layout/reftests/transform/matrix3d-1.html @@ -0,0 +1,20 @@ +<html> +<head> + <!-- We do not support the 3d matrix yet, so this should do nothing --> + <style> + div { + background: green; + width: 100px; + height: 100px; + -moz-transform: matrix3d(1, 0, 100, 1, 10, + 1, 100, 1, 1, 10, + 1, 100, 2, 3, 12, + 12, 100, 3, 4, 5); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-1-ref.html b/layout/reftests/transform/origin-1-ref.html new file mode 100644 index 000000000..643c8434a --- /dev/null +++ b/layout/reftests/transform/origin-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg);"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-1a.html b/layout/reftests/transform/origin-1a.html new file mode 100644 index 000000000..51e091442 --- /dev/null +++ b/layout/reftests/transform/origin-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 0% 0%"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-1b.html b/layout/reftests/transform/origin-1b.html new file mode 100644 index 000000000..71ddbc388 --- /dev/null +++ b/layout/reftests/transform/origin-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin:100% 50%"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2-ref.html b/layout/reftests/transform/origin-2-ref.html new file mode 100644 index 000000000..643c8434a --- /dev/null +++ b/layout/reftests/transform/origin-2-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg);"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2a.html b/layout/reftests/transform/origin-2a.html new file mode 100644 index 000000000..ac18108d4 --- /dev/null +++ b/layout/reftests/transform/origin-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 101px 51px;"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2b.html b/layout/reftests/transform/origin-2b.html new file mode 100644 index 000000000..7e95c7ba2 --- /dev/null +++ b/layout/reftests/transform/origin-2b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 101px 50%;"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-2c.html b/layout/reftests/transform/origin-2c.html new file mode 100644 index 000000000..8daef897f --- /dev/null +++ b/layout/reftests/transform/origin-2c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 50% 51px;"> + Some text! + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-1-ref.html b/layout/reftests/transform/origin-name-1-ref.html new file mode 100644 index 000000000..70bb6d479 --- /dev/null +++ b/layout/reftests/transform/origin-name-1-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 0% 0%;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-1a.html b/layout/reftests/transform/origin-name-1a.html new file mode 100644 index 000000000..5167634ac --- /dev/null +++ b/layout/reftests/transform/origin-name-1a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top left;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-1b.html b/layout/reftests/transform/origin-name-1b.html new file mode 100644 index 000000000..b7c5ca24e --- /dev/null +++ b/layout/reftests/transform/origin-name-1b.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: left top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2-ref.html b/layout/reftests/transform/origin-name-2-ref.html new file mode 100644 index 000000000..2397fdf53 --- /dev/null +++ b/layout/reftests/transform/origin-name-2-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 50% 0%;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2a.html b/layout/reftests/transform/origin-name-2a.html new file mode 100644 index 000000000..ff893641c --- /dev/null +++ b/layout/reftests/transform/origin-name-2a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2b.html b/layout/reftests/transform/origin-name-2b.html new file mode 100644 index 000000000..1f30a1073 --- /dev/null +++ b/layout/reftests/transform/origin-name-2b.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top center;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-2c.html b/layout/reftests/transform/origin-name-2c.html new file mode 100644 index 000000000..aa9fe5120 --- /dev/null +++ b/layout/reftests/transform/origin-name-2c.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: center top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-3-ref.html b/layout/reftests/transform/origin-name-3-ref.html new file mode 100644 index 000000000..c0570bf33 --- /dev/null +++ b/layout/reftests/transform/origin-name-3-ref.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 100% 0%;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-3a.html b/layout/reftests/transform/origin-name-3a.html new file mode 100644 index 000000000..06b9324a4 --- /dev/null +++ b/layout/reftests/transform/origin-name-3a.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top right;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/origin-name-3b.html b/layout/reftests/transform/origin-name-3b.html new file mode 100644 index 000000000..cbc44043b --- /dev/null +++ b/layout/reftests/transform/origin-name-3b.html @@ -0,0 +1,8 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: right top;"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1-ref.html b/layout/reftests/transform/percent-1-ref.html new file mode 100644 index 000000000..2f011ce6f --- /dev/null +++ b/layout/reftests/transform/percent-1-ref.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1a.html b/layout/reftests/transform/percent-1a.html new file mode 100644 index 000000000..4641d8968 --- /dev/null +++ b/layout/reftests/transform/percent-1a.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1b.html b/layout/reftests/transform/percent-1b.html new file mode 100644 index 000000000..e836b92dd --- /dev/null +++ b/layout/reftests/transform/percent-1b.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1c.html b/layout/reftests/transform/percent-1c.html new file mode 100644 index 000000000..156d5eb1d --- /dev/null +++ b/layout/reftests/transform/percent-1c.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1d.html b/layout/reftests/transform/percent-1d.html new file mode 100644 index 000000000..9a4a88ec0 --- /dev/null +++ b/layout/reftests/transform/percent-1d.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1e.html b/layout/reftests/transform/percent-1e.html new file mode 100644 index 000000000..6034e0757 --- /dev/null +++ b/layout/reftests/transform/percent-1e.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1f.html b/layout/reftests/transform/percent-1f.html new file mode 100644 index 000000000..de3f704c7 --- /dev/null +++ b/layout/reftests/transform/percent-1f.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/percent-1g.html b/layout/reftests/transform/percent-1g.html new file mode 100644 index 000000000..52b263314 --- /dev/null +++ b/layout/reftests/transform/percent-1g.html @@ -0,0 +1,14 @@ +<html> +<head> + <style type="text/css"> + .transformed + { + -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%); + } + </style> +</head> +<body> + <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/propagate-inherit-boolean-ref.html b/layout/reftests/transform/propagate-inherit-boolean-ref.html new file mode 100644 index 000000000..4d59957c3 --- /dev/null +++ b/layout/reftests/transform/propagate-inherit-boolean-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title></title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + p { + font-size: 20px; + margin: 0; + height: 0; + width: 100px; + -moz-transform: translateX(80px); + } + + p#two { + font-size: 40px; + -moz-transform: translateX(160px); + } + + </style> +</head> +<body> + +<p id="one">One</p> + +<p id="two">Two</p> + +</body> +</html> diff --git a/layout/reftests/transform/propagate-inherit-boolean.html b/layout/reftests/transform/propagate-inherit-boolean.html new file mode 100644 index 000000000..869b4f4bc --- /dev/null +++ b/layout/reftests/transform/propagate-inherit-boolean.html @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en-US"> +<head> + <title></title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <meta http-equiv="Content-Style-Type" content="text/css"> + <style type="text/css"> + + p { + font-size: 20px; + margin: 0; + height: 0; + width: 100px; + -moz-transform: translateX(4em); + } + + p#two { + font-size: 40px; + } + + </style> +</head> +<body> + +<p id="one">One</p> + +<p id="two">Two</p> + +</body> +</html> diff --git a/layout/reftests/transform/reftest-stylo.list b/layout/reftests/transform/reftest-stylo.list new file mode 100644 index 000000000..7ccbcba5f --- /dev/null +++ b/layout/reftests/transform/reftest-stylo.list @@ -0,0 +1,159 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Transforms specifying singular matrices shouldn't display at all. +# NOTE: Regressions might manifest themselves as reftest timeouts on +# this test. +== singular-1a.html singular-1a.html +# Multiple transforms should act identically to nested divs. +== compound-1a.html compound-1a.html +== compound-1a.html compound-1a.html +== dynamic-inherit-1.html dynamic-inherit-1.html +== dynamic-addremove-1a.html dynamic-addremove-1a.html +skip == dynamic-addremove-1b.html dynamic-addremove-1b.html +== dynamic-addremove-1c.html dynamic-addremove-1c.html +# translatex should act like position: relative +skip-if(B2G||Mulet) == translatex-1a.html translatex-1a.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translatex-1b.html translatex-1b.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translatex-1c.html translatex-1c.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translatex-1d.html translatex-1d.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translatex-1e.html translatex-1e.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translatex-1a.html translatex-1a.html +# Initial mulet triage: parity with B2G/B2G Desktop +# translatey should act like position: relative +== translatey-1a.html translatey-1a.html +== translatey-1b.html translatey-1b.html +== translatey-1c.html translatey-1c.html +== translatey-1d.html translatey-1d.html +== translatey-1e.html translatey-1e.html +# matrices defined to be translations should act like position: relative +skip-if(B2G||Mulet) == translatex-2.html translatex-2.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +== translatey-2.html translatey-2.html +# translate should act like position: relative +skip-if(B2G||Mulet) == translate-1a.html translate-1a.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translate-1b.html translate-1b.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translate-1c.html translate-1c.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translate-1d.html translate-1d.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translate-1e.html translate-1e.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == translate-2a.html translate-2a.html +# Initial mulet triage: parity with B2G/B2G Desktop +# 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-1a.html +random == rotate-1b.html rotate-1b.html +random == rotate-1c.html rotate-1c.html +random == rotate-1d.html rotate-1d.html +random == rotate-1e.html rotate-1e.html +random == rotate-1f.html rotate-1f.html +# rotate: 90deg rotations should be indistinguishable from objects constructed +# to look the same. +== rotate-2a.html rotate-2a.html +== rotate-2b.html rotate-2b.html +# -transform-origin: We should NOT get the same images when using different +# -transform-origins. +== origin-1a.html origin-1a.html +== origin-1b.html origin-1b.html +# -transform-origin: We should get the same images when using equivalent +# -transform-origins. +== origin-2a.html origin-2a.html +== origin-2b.html origin-2b.html +== origin-2c.html origin-2c.html +# "Translate" with percentages should be indistinguishable from translate with +# equivalent values. +== percent-1a.html percent-1a.html +== percent-1b.html percent-1b.html +fails fuzzy-if(skiaContent,1,80) == percent-1c.html percent-1c.html +fails fuzzy-if(skiaContent,1,80) == percent-1d.html percent-1d.html +fails fuzzy-if(skiaContent,1,80) == percent-1e.html percent-1e.html +fails fuzzy-if(skiaContent,1,80) == percent-1f.html percent-1f.html +fails fuzzy-if(skiaContent,1,80) == percent-1g.html percent-1g.html +# Transformed elements are abs-pos and fixed-pos containing blocks. +== abspos-1a.html abspos-1a.html +== abspos-1b.html abspos-1b.html +== abspos-1c.html abspos-1c.html +== abspos-1d.html abspos-1d.html +== abspos-1e.html abspos-1e.html +== abspos-1f.html abspos-1f.html +== abspos-1g.html abspos-1g.html +# Origin can use "top" "right" etc. +== origin-name-1a.html origin-name-1a.html +== origin-name-1b.html origin-name-1b.html +== origin-name-2a.html origin-name-2a.html +== origin-name-2b.html origin-name-2b.html +fails fuzzy-if(skiaContent,1,350) == origin-name-2c.html origin-name-2c.html +== origin-name-3a.html origin-name-3a.html +== origin-name-3b.html origin-name-3b.html +# Snapping still applies after 90 degree rotations. +skip == snapping-1.html snapping-1.html +# SVG effects should work on transforms. +== transform-svg-1a.xhtml transform-svg-1a.xhtml +fuzzy-if(skiaContent,2,500) == transform-svg-2a.xhtml transform-svg-2a.xhtml +== transform-svg-2a.xhtml transform-svg-2a.xhtml +# skew should allow a mix of one and two parameters. +== skew-1a.html skew-1a.html +fails fuzzy-if(skiaContent,1,80) == skew-1b.html skew-1b.html +skip == skew-2a.html skew-2a.html +# matrix with values equal to other transforms should behave indistinguishably +== matrix-1a.html matrix-1a.html +== matrix-2a.html matrix-2a.html +skip == matrix-3a.html matrix-3a.html +== matrix-4a.html matrix-4a.html +fails fuzzy-if(skiaContent,1,120) == matrix-5a.html matrix-5a.html +fails fuzzy-if(skiaContent,1,110) == matrix-6a.html matrix-6a.html +== matrix-7a.html matrix-7a.html +# ensure matrix 3d does not break us - should do nothing +== matrix3d-1.html matrix3d-1.html +# Test that complex transform can be reversed +skip-if(B2G||Mulet) fuzzy-if(skiaContent,2,5) == stresstest-1.html stresstest-1.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +# Test scale transforms +== scalex-1.html scalex-1.html +== scaley-1.html scaley-1.html +== scale-1a.html scale-1a.html +== scale-1b.html scale-1b.html +== scale-percent-1.html scale-percent-1.html +# Some simple checks that it obeys selector operations +== descendant-1.html descendant-1.html +== propagate-inherit-boolean.html propagate-inherit-boolean.html +# Ensure you can't move outside an iframe +== iframe-1.html iframe-1.html +# Bugs +== 601894-1.html 601894-1.html +== 601894-2.html 601894-2.html +== 830299-1.html 830299-1.html +# Bug 722777 +== table-1a.html table-1a.html +== table-1b.html table-1b.html +== table-1c.html table-1c.html +== table-2a.html table-2a.html +== table-2b.html table-2b.html +# Bug 722463 +== inline-1a.html inline-1a.html +pref(svg.transform-box.enabled,true) == transform-box-svg-1a.svg transform-box-svg-1a.svg +pref(svg.transform-box.enabled,true) == transform-box-svg-1b.svg transform-box-svg-1b.svg +pref(svg.transform-box.enabled,true) == transform-box-svg-2a.svg transform-box-svg-2a.svg +pref(svg.transform-box.enabled,true) == transform-box-svg-2b.svg transform-box-svg-2b.svg +== transform-origin-svg-1a.svg transform-origin-svg-1a.svg +== transform-origin-svg-1b.svg transform-origin-svg-1b.svg +== transform-origin-svg-2a.svg transform-origin-svg-2a.svg +== transform-origin-svg-2b.svg transform-origin-svg-2b.svg +# Bug 1122526 +skip == animate-layer-scale-inherit-1.html animate-layer-scale-inherit-1.html +skip == animate-layer-scale-inherit-2.html animate-layer-scale-inherit-2.html +skip == animate-layer-scale-inherit-3.html animate-layer-scale-inherit-3.html diff --git a/layout/reftests/transform/reftest.list b/layout/reftests/transform/reftest.list new file mode 100644 index 000000000..57ad46673 --- /dev/null +++ b/layout/reftests/transform/reftest.list @@ -0,0 +1,142 @@ +# 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. +== 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 +# 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 +== percent-1b.html percent-1-ref.html +fuzzy-if(skiaContent,1,80) == percent-1c.html percent-1-ref.html +fuzzy-if(skiaContent,1,80) == percent-1d.html percent-1-ref.html +fuzzy-if(skiaContent,1,80) == percent-1e.html percent-1-ref.html +fuzzy-if(skiaContent,1,80) == percent-1f.html percent-1-ref.html +fuzzy-if(skiaContent,1,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 +== 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-if(skiaContent,1,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-if(skiaContent,2,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. +== skew-1a.html skew-1-ref.html +fuzzy-if(skiaContent,1,80) == skew-1b.html skew-1-ref.html +== 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-if(skiaContent,1,120) == matrix-5a.html matrix-5-ref.html +fuzzy-if(skiaContent,1,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-if(skiaContent,2,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 +# 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 +pref(svg.transform-box.enabled,true) == transform-box-svg-1a.svg transform-box-svg-1-ref.svg +pref(svg.transform-box.enabled,true) == transform-box-svg-1b.svg transform-box-svg-1-ref.svg +pref(svg.transform-box.enabled,true) == transform-box-svg-2a.svg transform-box-svg-2-ref.svg +pref(svg.transform-box.enabled,true) == transform-box-svg-2b.svg transform-box-svg-2-ref.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 +== 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 +fuzzy-if(d2d,1,5) == table-overflowed-by-animation.html table-overflowed-by-animation-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 000000000..4ebbf5a56 --- /dev/null +++ b/layout/reftests/transform/rotate-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate(45deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1a.html b/layout/reftests/transform/rotate-1a.html new file mode 100644 index 000000000..fc8e67380 --- /dev/null +++ b/layout/reftests/transform/rotate-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate(45deg) rotate(360deg); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1b.html b/layout/reftests/transform/rotate-1b.html new file mode 100644 index 000000000..79fa5c6b7 --- /dev/null +++ b/layout/reftests/transform/rotate-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate(45deg) rotate(400grad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1c.html b/layout/reftests/transform/rotate-1c.html new file mode 100644 index 000000000..780739ca2 --- /dev/null +++ b/layout/reftests/transform/rotate-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1d.html b/layout/reftests/transform/rotate-1d.html new file mode 100644 index 000000000..ab44c7fc7 --- /dev/null +++ b/layout/reftests/transform/rotate-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate(-45deg) rotate(100grad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1e.html b/layout/reftests/transform/rotate-1e.html new file mode 100644 index 000000000..1f2ef1438 --- /dev/null +++ b/layout/reftests/transform/rotate-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate(-135deg) rotate(3.1415926535897932384626433rad); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-1f.html b/layout/reftests/transform/rotate-1f.html new file mode 100644 index 000000000..1dd88ed00 --- /dev/null +++ b/layout/reftests/transform/rotate-1f.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: rotate(0.125turn); width: 100px; height: 100px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-2-ref.html b/layout/reftests/transform/rotate-2-ref.html new file mode 100644 index 000000000..51be5f08c --- /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 000000000..9805bd79a --- /dev/null +++ b/layout/reftests/transform/rotate-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:100px;height:200px;-moz-transform: translate(50px, -50px) rotate(-90deg); border: 1px solid black;"> + + </div> +</body> +</html> diff --git a/layout/reftests/transform/rotate-2b.html b/layout/reftests/transform/rotate-2b.html new file mode 100644 index 000000000..040d8a99c --- /dev/null +++ b/layout/reftests/transform/rotate-2b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="width:100px;height:200px;-moz-transform: translate(50px, -50px) rotate(-0.25turn); border: 1px solid black;"> + + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-1-ref.html b/layout/reftests/transform/scale-1-ref.html new file mode 100644 index 000000000..7c39dd850 --- /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 000000000..007d23e88 --- /dev/null +++ b/layout/reftests/transform/scale-1a.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + #test { + background: green; + width: 100px; + height: 100px; + -moz-transform: scale(0.5, 0.5); + } + </style> +</head> +<body> + <div id="test"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-1b.html b/layout/reftests/transform/scale-1b.html new file mode 100644 index 000000000..6da74f0cf --- /dev/null +++ b/layout/reftests/transform/scale-1b.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + #test { + background: green; + width: 100px; + height: 100px; + -moz-transform: scale(0.5); + } + </style> +</head> +<body> + <div id="test"> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scale-percent-1-ref.html b/layout/reftests/transform/scale-percent-1-ref.html new file mode 100644 index 000000000..a6baeab57 --- /dev/null +++ b/layout/reftests/transform/scale-percent-1-ref.html @@ -0,0 +1,16 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + } + </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 000000000..a76ecd7ed --- /dev/null +++ b/layout/reftests/transform/scale-percent-1.html @@ -0,0 +1,18 @@ +<html> +<head> + <!-- Percent values are not allowed for scale, so this shouldn't do anything --> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + -moz-transform: scale(50%, 50%); + } + </style> +</head> +<body> + <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 000000000..b95fa2a46 --- /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 000000000..becada6bb --- /dev/null +++ b/layout/reftests/transform/scalex-1.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + -moz-transform: scalex(0.5); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/scaley-1-ref.html b/layout/reftests/transform/scaley-1-ref.html new file mode 100644 index 000000000..58a01d195 --- /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 000000000..b909fbad7 --- /dev/null +++ b/layout/reftests/transform/scaley-1.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + body { margin: 0px; } + div { + background: green; + width: 100px; + height: 100px; + -moz-transform: scaley(0.5); + } + </style> +</head> +<body> + <div> + </div> +</body> +</html> diff --git a/layout/reftests/transform/singular-1a.html b/layout/reftests/transform/singular-1a.html new file mode 100644 index 000000000..1ef61dc99 --- /dev/null +++ b/layout/reftests/transform/singular-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 1, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;"> + This shouldn't be visible. + </div> +</body> +</html> diff --git a/layout/reftests/transform/skew-1-ref.html b/layout/reftests/transform/skew-1-ref.html new file mode 100644 index 000000000..d83368970 --- /dev/null +++ b/layout/reftests/transform/skew-1-ref.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skewx(10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-1a.html b/layout/reftests/transform/skew-1a.html new file mode 100644 index 000000000..125b45bc4 --- /dev/null +++ b/layout/reftests/transform/skew-1a.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-1b.html b/layout/reftests/transform/skew-1b.html new file mode 100644 index 000000000..5776ba008 --- /dev/null +++ b/layout/reftests/transform/skew-1b.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(10deg, 0deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-2-ref.html b/layout/reftests/transform/skew-2-ref.html new file mode 100644 index 000000000..e017dd0e2 --- /dev/null +++ b/layout/reftests/transform/skew-2-ref.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skewy(10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/skew-2a.html b/layout/reftests/transform/skew-2a.html new file mode 100644 index 000000000..e3e5df6da --- /dev/null +++ b/layout/reftests/transform/skew-2a.html @@ -0,0 +1,8 @@ +<html> + <head> + </head> + <body> + <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(0deg, 10deg);"> + </div> + </body> +</html> diff --git a/layout/reftests/transform/snapping-1-ref.html b/layout/reftests/transform/snapping-1-ref.html new file mode 100644 index 000000000..99006901b --- /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 000000000..e5a7d9abd --- /dev/null +++ b/layout/reftests/transform/snapping-1.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + background: red; + margin-left: 100.5px; + height: 100px; + width: 100px; + -moz-transform-origin: bottom left; + -moz-transform: rotate(-90deg) translate(-100px, 0); + transform-origin: bottom left; + transform: rotate(-90deg) translate(-100px, 0); +} +</style> +</head> +<body> + <div></div> +</html> diff --git a/layout/reftests/transform/square.html b/layout/reftests/transform/square.html new file mode 100644 index 000000000..2f6e4950b --- /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 000000000..a84cff23d --- /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 000000000..f0202ab86 --- /dev/null +++ b/layout/reftests/transform/stresstest-1.html @@ -0,0 +1,27 @@ +<html class="reftest-wait"> + <head> + <script type="application/javascript"> + function runtest() { + var iframe = document.getElementById("test"); + var style = iframe.getAttribute("style"); + // We depend on the transform being the last rule so clip the ending ';' + style = style.substring(0, style.length-1); + + // Here, we add transform functions to explicitly undo the effects of + // each already-applied transform. This should leave us with an + // effectively-untransformed iframe. + style = style + " scale(0.5, 0.25) translatex(-50px) rotate(-45deg) translate(-50px, -50px) skewx(135deg);" + iframe.setAttribute("style", style); + document.documentElement.className = ""; + } + </script> + </head> + <body> + <iframe + src="square.html" + style="height: 200px; width: 300px; -moz-transform: skewx(45deg) translate(50px, 50px) rotate(45deg) translatex(50px) scale(2.0, 4.0);" + id="test" + onload="runtest();"> + </iframe> + </body> +</html> diff --git a/layout/reftests/transform/table-1-ref.html b/layout/reftests/transform/table-1-ref.html new file mode 100644 index 000000000..ca213123b --- /dev/null +++ b/layout/reftests/transform/table-1-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<div style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left"> +<table> +<caption>Hello</caption> +<tr><td>there! +</table> +</div> diff --git a/layout/reftests/transform/table-1a.html b/layout/reftests/transform/table-1a.html new file mode 100644 index 000000000..ce7458c8d --- /dev/null +++ b/layout/reftests/transform/table-1a.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left"> +<caption>Hello</caption> +<tr><td>there! +</table> diff --git a/layout/reftests/transform/table-1b.html b/layout/reftests/transform/table-1b.html new file mode 100644 index 000000000..ad045a3af --- /dev/null +++ b/layout/reftests/transform/table-1b.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="display:inline-table;-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left"> +<caption>Hello</caption> +<tr><td>there! +</table> diff --git a/layout/reftests/transform/table-1c.html b/layout/reftests/transform/table-1c.html new file mode 100644 index 000000000..50f4d1add --- /dev/null +++ b/layout/reftests/transform/table-1c.html @@ -0,0 +1,7 @@ +<!doctype html> +<div style="-moz-transform:translateX(200px) rotate(180deg) translateY(-100%);-moz-transform-origin:left"> +<table style="-moz-transform:translateY(100%)"> +<caption>Hello</caption> +<tr><td>there! +</table> +</div> diff --git a/layout/reftests/transform/table-2-ref.html b/layout/reftests/transform/table-2-ref.html new file mode 100644 index 000000000..60e7bbb29 --- /dev/null +++ b/layout/reftests/transform/table-2-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<div style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left"> +<table> +<caption style=caption-side:bottom>there!</caption> +<tr><td>Hello +</table> diff --git a/layout/reftests/transform/table-2a.html b/layout/reftests/transform/table-2a.html new file mode 100644 index 000000000..6e7f91ee5 --- /dev/null +++ b/layout/reftests/transform/table-2a.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left"> +<caption style=caption-side:bottom>there!</caption> +<tr><td>Hello +</table> diff --git a/layout/reftests/transform/table-2b.html b/layout/reftests/transform/table-2b.html new file mode 100644 index 000000000..3d94dcf97 --- /dev/null +++ b/layout/reftests/transform/table-2b.html @@ -0,0 +1,5 @@ +<!doctype html> +<table style="display:inline-table;-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left"> +<caption style=caption-side:bottom>there!</caption> +<tr><td>Hello +</table> diff --git a/layout/reftests/transform/table-overflowed-by-animation-ref.html b/layout/reftests/transform/table-overflowed-by-animation-ref.html new file mode 100644 index 000000000..242dc5350 --- /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 000000000..d3d2b8355 --- /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"); + }); +}, false); +</script> +</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 000000000..8f748b73d --- /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 000000000..e74989823 --- /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 000000000..84d0da992 --- /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 000000000..905fafcca --- /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 000000000..7ae4cfe0b --- /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 000000000..8b1474482 --- /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-origin-svg-1-ref.svg b/layout/reftests/transform/transform-origin-svg-1-ref.svg new file mode 100644 index 000000000..8f748b73d --- /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 000000000..c1591e65b --- /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 000000000..ca4eead39 --- /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 000000000..905fafcca --- /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 000000000..46de3c480 --- /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 000000000..29d4187aa --- /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 000000000..1d303d1ad --- /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 000000000..99ffa75a0 --- /dev/null +++ b/layout/reftests/transform/transform-svg-1a.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:200px; background:lime; -moz-transform: translate(100px, 100px);"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:rect x="0" y="0" width="300" height="300"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/transform-svg-1b.xhtml b/layout/reftests/transform/transform-svg-1b.xhtml new file mode 100644 index 000000000..73bcb5498 --- /dev/null +++ b/layout/reftests/transform/transform-svg-1b.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; -moz-transform: rotate(135deg);"> + <div style="height:200px;"/> + <div style="height:200px; background:lime;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:rect x="0" y="0" width="300" height="300"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/transform-svg-2-fail.xhtml b/layout/reftests/transform/transform-svg-2-fail.xhtml new file mode 100644 index 000000000..b3fe934e2 --- /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 000000000..7d3da096d --- /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 000000000..c6e86b294 --- /dev/null +++ b/layout/reftests/transform/transform-svg-2a.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; -moz-transform: translate(100px, 100px);"> + <div style="height:200px;"/> + <div style="height:200px; background:lime;"/> + </div> + + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse"> + <svg:circle cx="200" cy="200" r="200"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/transform/translate-1-ref.html b/layout/reftests/transform/translate-1-ref.html new file mode 100644 index 000000000..5463d15e4 --- /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;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1a.html b/layout/reftests/transform/translate-1a.html new file mode 100644 index 000000000..194f4cbb9 --- /dev/null +++ b/layout/reftests/transform/translate-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate(50px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1b.html b/layout/reftests/transform/translate-1b.html new file mode 100644 index 000000000..a1e4b9f58 --- /dev/null +++ b/layout/reftests/transform/translate-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate(50px, 50px) rotate(360deg);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1c.html b/layout/reftests/transform/translate-1c.html new file mode 100644 index 000000000..485f7dcc9 --- /dev/null +++ b/layout/reftests/transform/translate-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate(25px, 25px) translate(25px, 25px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1d.html b/layout/reftests/transform/translate-1d.html new file mode 100644 index 000000000..686c721aa --- /dev/null +++ b/layout/reftests/transform/translate-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate(25px, 25px); position:relative; top:25px; left:25px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-1e.html b/layout/reftests/transform/translate-1e.html new file mode 100644 index 000000000..c7b8fc0d4 --- /dev/null +++ b/layout/reftests/transform/translate-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate(50px) translate(-100px) translate(150px) translate(-50px) translate(0px, 50px);"> + Test Text + </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 000000000..e89c01854 --- /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;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translate-2a.html b/layout/reftests/transform/translate-2a.html new file mode 100644 index 000000000..194f4cbb9 --- /dev/null +++ b/layout/reftests/transform/translate-2a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translate(50px);"> + Test Text + </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 000000000..319fcc0b8 --- /dev/null +++ b/layout/reftests/transform/translatex-1-ref-2.html @@ -0,0 +1,12 @@ +<html> +<head> +</head> +<body> + <div style="margin-left: 50px;"> + Test Text + </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 000000000..40a591180 --- /dev/null +++ b/layout/reftests/transform/translatex-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="position:relative; left:50px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1a.html b/layout/reftests/transform/translatex-1a.html new file mode 100644 index 000000000..50777d421 --- /dev/null +++ b/layout/reftests/transform/translatex-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatex(50px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1b.html b/layout/reftests/transform/translatex-1b.html new file mode 100644 index 000000000..953245aa9 --- /dev/null +++ b/layout/reftests/transform/translatex-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatex(50px) rotate(360deg);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1c.html b/layout/reftests/transform/translatex-1c.html new file mode 100644 index 000000000..656702a30 --- /dev/null +++ b/layout/reftests/transform/translatex-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatex(25px) translatex(25px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1d.html b/layout/reftests/transform/translatex-1d.html new file mode 100644 index 000000000..d135a62b1 --- /dev/null +++ b/layout/reftests/transform/translatex-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatex(25px); position:relative; left:25px; top:0px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-1e.html b/layout/reftests/transform/translatex-1e.html new file mode 100644 index 000000000..1d80e0332 --- /dev/null +++ b/layout/reftests/transform/translatex-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatex(50px) translatex(-100px) translatex(150px) translatex(-50px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatex-2.html b/layout/reftests/transform/translatex-2.html new file mode 100644 index 000000000..65e8b3016 --- /dev/null +++ b/layout/reftests/transform/translatex-2.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 0, 0, 1, 50, 0);"> + Test Text + </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 000000000..f1500dc39 --- /dev/null +++ b/layout/reftests/transform/translatey-1-ref-2.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="margin-top: 50px;"> + Test Text + </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 000000000..af4340c44 --- /dev/null +++ b/layout/reftests/transform/translatey-1-ref.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="position:relative; top:50px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1a.html b/layout/reftests/transform/translatey-1a.html new file mode 100644 index 000000000..874df266f --- /dev/null +++ b/layout/reftests/transform/translatey-1a.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatey(50px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1b.html b/layout/reftests/transform/translatey-1b.html new file mode 100644 index 000000000..5dd1a9ad5 --- /dev/null +++ b/layout/reftests/transform/translatey-1b.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatey(50px) rotate(360deg);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1c.html b/layout/reftests/transform/translatey-1c.html new file mode 100644 index 000000000..9892e195a --- /dev/null +++ b/layout/reftests/transform/translatey-1c.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatey(25px) translatey(25px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1d.html b/layout/reftests/transform/translatey-1d.html new file mode 100644 index 000000000..906412ec9 --- /dev/null +++ b/layout/reftests/transform/translatey-1d.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatey(25px); position:relative; top:25px; left:0px;"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-1e.html b/layout/reftests/transform/translatey-1e.html new file mode 100644 index 000000000..43a2c7aed --- /dev/null +++ b/layout/reftests/transform/translatey-1e.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: translatey(50px) translatey(-100px) translatey(150px) translatey(-50px);"> + Test Text + </div> +</body> +</html> diff --git a/layout/reftests/transform/translatey-2.html b/layout/reftests/transform/translatey-2.html new file mode 100644 index 000000000..3bcaaf32a --- /dev/null +++ b/layout/reftests/transform/translatey-2.html @@ -0,0 +1,9 @@ +<html> +<head> +</head> +<body> + <div style="-moz-transform: matrix(1, 0, 0, 1, 0, 50);"> + Test Text + </div> +</body> +</html> |
