diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms/reference')
48 files changed, 1222 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/reference/backface-visibility-hidden-ref.html b/testing/web-platform/tests/css/css-transforms/reference/backface-visibility-hidden-ref.html new file mode 100644 index 0000000000..6a3e305e5c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/backface-visibility-hidden-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + z-index: 2; + } + + .card { + transform-style: preserve-3d; + } + + .container { + width: 200px; + height: 200px; + perspective: 1000; + transform: rotateY(45deg); + } + + </style> +</head> +<body> + <p>The test passes if there is a green retangle and no red.</p> + <div class="container"> + <div class="card"> + <div class="greenSquare face"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-scale-nested-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css-scale-nested-ref.html new file mode 100644 index 0000000000..fe238e091b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-scale-nested-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Amol Shanbhag" href="mailto:amolvshanbhag@yahoo.com"> + <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <style type="text/css"> + div{ + position: absolute; + } + .greenSquare { + + width: 100px; + height: 100px; + background: green; + + } + p{ + padding-top: 130px; + } + </style> +</head> +<body> + <div class="greenSquare"></div> + <p>The test passes if there is a green square and no red.</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-rotateX-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-rotateX-ref.html new file mode 100644 index 0000000000..1575b30ec7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-rotateX-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms rotateX Reference</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <style> + div { + background-color: green; + border: 20px solid black; + height: 120px; + left: 60px; + position: absolute; + top: 60px; + width: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-rotateZ-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-rotateZ-ref.html new file mode 100644 index 0000000000..308a70d16a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-rotateZ-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: rotate3d on div element</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <style> + div { + background-color: green; + height: 100px; + left: 80px; + position: absolute; + top: 80px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square and no red.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-transform-style-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-transform-style-ref.html new file mode 100644 index 0000000000..a47b14756d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-transform-3d-transform-style-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: rotateY with transform-style on nested elements</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <style> + div { + position: absolute; + } + div.container { + height: 100px; + top: 60px; + width: 400px; + } + div.blue { + background-color: blue; + height: 100px; + left: 200px; + width: 100px; + } + div.green { + background-color: green; + height: 100px; + left: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if there is a <b>green</b> square and a <b>blue</b> square, and no any <b>red</b>.</p> + <div class="container"> + <div class="blue"></div> + <div class="green"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-transform-scale-ref-001.html b/testing/web-platform/tests/css/css-transforms/reference/css-transform-scale-ref-001.html new file mode 100644 index 0000000000..9f4b82b983 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-transform-scale-ref-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com"> + <style type="text/css"> + .container { + position: absolute; + } + .greenSquare { + position: absolute; + width: 200px; + height: 200px; + background-color:green; + } + </style> +</head> +<body> +<p>The test passes if you hover over the green square and it completely covers the red square.</p> + <div class="container"> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-transform-scale-ref-002.html b/testing/web-platform/tests/css/css-transforms/reference/css-transform-scale-ref-002.html new file mode 100644 index 0000000000..def3870bcb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-transform-scale-ref-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference - CSS Transforms Test: transform property with scale function and move its origin</title> + <link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com"> + <style type="text/css"> + .container { + position: absolute; + } + .greenSquare { + position: absolute; + width: 200px; + height: 200px; + background-color:green; + } + </style> +</head> +<body> +<p>The test passes if the green square completely covers the red square.</p> + <div class="container"> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-transforms-3d-anonymous-block-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css-transforms-3d-anonymous-block-ref.html new file mode 100644 index 0000000000..74d36162c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-transforms-3d-anonymous-block-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Transforms Test: Reference file</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="reviewer" title="Edward O'Connor" href="mailto:eoconnor@apple.com" /> <!-- 2012-10-27 --> +</head> +<body> + <p>You should see three lines of text written from left to right and unmirrored.<p> + <div> + <span>Test</span> + <p>Test</p> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css-transforms-transformlist-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css-transforms-transformlist-ref.html new file mode 100644 index 0000000000..f96d7b9021 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css-transforms-transformlist-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Transforms Test: UNIQUE TEST DESCRIPTION</title> + <link rel="author" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <style type="text/css"> + + #result { + width:100px; + height:100px; + background-color: green; + } + + </style> + +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div id="result"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css3-transform-perspective-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css3-transform-perspective-ref.html new file mode 100644 index 0000000000..3e0ddec2c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css3-transform-perspective-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: transform perspective Reference</title> + <link rel="author" title="caoqixing" href="mailto:robin.webkit@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com" /> <!-- 2013-09-03 --> + <style type="text/css"> + div { + width: 200px; + height: 200px; + } + #container { + position: relative; + background-color: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/css3-transform-scale-ref.html b/testing/web-platform/tests/css/css-transforms/reference/css3-transform-scale-ref.html new file mode 100644 index 0000000000..2d09498f3b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/css3-transform-scale-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" /> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-04 --> + <style type="text/css"> + .green { + width: 200px; + height: 200px; + background-color: green; + position: absolute; + top: 100px; + left: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="green"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/green.html b/testing/web-platform/tests/css/css-transforms/reference/green.html new file mode 100644 index 0000000000..f7714d2b8b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/green.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: A green box</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<p>Pass if there is NO red below:</p> +<div id="ref" style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/reference/perspective-origin-reftest.html b/testing/web-platform/tests/css/css-transforms/reference/perspective-origin-reftest.html new file mode 100644 index 0000000000..c39661796a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/perspective-origin-reftest.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com"> + <style type="text/css"> + .container { + position: absolute; + width: 150px; + height: 150px; + top: 100px; + left: 100px; + } + .greenSquare { + position: absolute; + top: 0px; + left: 0px; + width: 150px; + height: 150px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/perspective-reftest.html b/testing/web-platform/tests/css/css-transforms/reference/perspective-reftest.html new file mode 100644 index 0000000000..c39661796a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/perspective-reftest.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com"> + <style type="text/css"> + .container { + position: absolute; + width: 150px; + height: 150px; + top: 100px; + left: 100px; + } + .greenSquare { + position: absolute; + top: 0px; + left: 0px; + width: 150px; + height: 150px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/rotate-180-degrees-001.html b/testing/web-platform/tests/css/css-transforms/reference/rotate-180-degrees-001.html new file mode 100644 index 0000000000..efe1e09dcf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/rotate-180-degrees-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Reference</title> + <link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/> + <style type="text/css"> + #greenBottomDiv { + position: absolute; + background: green; + border-left: transparent; + border-bottom-color: transparent; + border-right-color: transparent; + border-top-color: black; + border-width: 5px; + border-style: solid; + height: 100px; + width: 100px; + } + + </style> +</head> +<body> + <p>Test passes if there is a black line on the top of green box and no red.</p> + <div id="greenBottomDiv"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/rotate-270-degrees-001.html b/testing/web-platform/tests/css/css-transforms/reference/rotate-270-degrees-001.html new file mode 100644 index 0000000000..79619d1381 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/rotate-270-degrees-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Reference</title> + <link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/> + <style type="text/css"> + #greenBottomDiv { + position: absolute; + background: green; + border-left: transparent; + border-bottom-color: transparent; + border-right-color: black; + border-top-color: transparent; + border-width: 5px; + border-style: solid; + height: 100px; + width: 100px; + } + + </style> +</head> +<body> + <p>Test passes if there is a black line on the right of green box and no red.</p> + <div id="greenBottomDiv"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/rotate-90-degrees-001.html b/testing/web-platform/tests/css/css-transforms/reference/rotate-90-degrees-001.html new file mode 100644 index 0000000000..3495b38789 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/rotate-90-degrees-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Reference</title> + <link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/> + <style type="text/css"> + #greenBottomDiv { + position: absolute; + background: green; + border-left: black; + border-bottom-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + border-width: 5px; + border-style: solid; + height: 100px; + width: 100px; + } + + </style> +</head> +<body> + <p>Test passes if there is a black line on the left of green box and no red.</p> + <div id="greenBottomDiv"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/rotateY-ref.html b/testing/web-platform/tests/css/css-transforms/reference/rotateY-ref.html new file mode 100644 index 0000000000..6658691645 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/rotateY-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Zou Rui" href="mailto:zrxldl@gmail.com"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + } + .container { + position: relative; + width: 200px; + height: 200px; + } + + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="greenSquare"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/reference/scale-optional-second-ref.html b/testing/web-platform/tests/css/css-transforms/reference/scale-optional-second-ref.html new file mode 100644 index 0000000000..47725ee242 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/scale-optional-second-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/scale-zero-ref.html b/testing/web-platform/tests/css/css-transforms/reference/scale-zero-ref.html new file mode 100644 index 0000000000..3e90578504 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/scale-zero-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/skew-test1-ref.html b/testing/web-platform/tests/css/css-transforms/reference/skew-test1-ref.html new file mode 100644 index 0000000000..394de2b6c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/skew-test1-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en"> +<!-- Submitted from TestTWF Paris --> + <head> + <meta charset="utf-8"> + <title>Testing 1 - skew()</title> + <link rel="author" title="Myriam Goude" href="mailto:mymygo@gmail.com"> + <meta name="flags" content="svg"> + <style> + + h4 {clear:both;} + + /* Test 1 - skew on block types */ + + svg { + position:absolute; + } + + </style> +</head> +<body> + + <h3> + Test 1 - Tests with degrees on block elements. + </h3> + <h4> + There should be a green block on the page. + </h4> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"> + <polygon points="0,0 150,54.595535 236.602540,204.595535 86.602540,150" style="fill:lime"/> + </svg> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-001-ref.html b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-001-ref.html new file mode 100644 index 0000000000..db26f0d006 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Reference Test: Subpixel transform changes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> + +<div id="translateX1" style="transform: translateX(0.48px);">transform: translateX(0.48px);</div> +<div id="translateX2" style="transform: translateX(3.17px);">transform: translateX(3.17px);</div> +<div id="translateX3" style="transform: translateX(0.34px);">transform: translateX(0.34px);</div> + +<div id="translateY1" style="transform: translateY(0.48px);">transform: translateY(0.48px);</div> +<div id="translateY2" style="transform: translateY(3.17px);">transform: translateY(3.17px);</div> +<div id="translateY3" style="transform: translateY(0.34px);">transform: translateY(0.34px);</div> + +<div id="translateZ1" style="transform: translateZ(0.48px);">transform: translateZ(0.48px);</div> +<div id="translateZ2" style="transform: translateZ(3.17px);">transform: translateZ(3.17px);</div> +<div id="translateZ3" style="transform: translateZ(0.34px);">transform: translateZ(0.34px);</div> diff --git a/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-002-ref.html b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-002-ref.html new file mode 100644 index 0000000000..b536d5c274 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-002-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Reference Test: Subpixel transform changes 'backface-visibility: hidden'</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div { + backface-visibility: hidden; +} +</style> + +<div id="translateX1" style="transform: translateX(0.48px);">transform: translateX(0.48px);</div> +<div id="translateX2" style="transform: translateX(3.17px);">transform: translateX(3.17px);</div> +<div id="translateX3" style="transform: translateX(0.34px);">transform: translateX(0.34px);</div> + +<div id="translateY1" style="transform: translateY(0.48px);">transform: translateY(0.48px);</div> +<div id="translateY2" style="transform: translateY(3.17px);">transform: translateY(3.17px);</div> +<div id="translateY3" style="transform: translateY(0.34px);">transform: translateY(0.34px);</div> + +<div id="translateZ1" style="transform: translateZ(0.48px);">transform: translateZ(0.48px);</div> +<div id="translateZ2" style="transform: translateZ(3.17px);">transform: translateZ(3.17px);</div> +<div id="translateZ3" style="transform: translateZ(0.34px);">transform: translateZ(0.34px);</div> + diff --git a/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-003-ref.html b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-003-ref.html new file mode 100644 index 0000000000..2ba8f8a1d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-003-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Reference Test: Subpixel transform changes fixed positioning</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div { + position: fixed; + left: 10px; +} +</style> + +<div id="translateX1" style="transform: translateX(0.48px); top: 0px;">transform: translateX(0.48px);</div> +<div id="translateX2" style="transform: translateX(3.17px); top: 30px;">transform: translateX(3.17px);</div> +<div id="translateX3" style="transform: translateX(0.34px); top: 60px;">transform: translateX(0.34px);</div> + +<div id="translateY1" style="transform: translateY(0.48px); top: 90px;">transform: translateY(0.48px);</div> +<div id="translateY2" style="transform: translateY(3.17px); top: 120px;">transform: translateY(3.17px);</div> +<div id="translateY3" style="transform: translateY(0.34px); top: 150px;">transform: translateY(0.34px);</div> + +<div id="translateZ1" style="transform: translateZ(0.48px); top: 180px;">transform: translateZ(0.48px);</div> +<div id="translateZ2" style="transform: translateZ(3.17px); top: 210px;">transform: translateZ(3.17px);</div> +<div id="translateZ3" style="transform: translateZ(0.34px); top: 240px;">transform: translateZ(0.34px);</div> + +<!-- Force overflow on the body element. --> +<div style="width: 200vw; height: 300vh;"></div> diff --git a/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html new file mode 100644 index 0000000000..5eca08a1fa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Reference Test: Subpixel transform changes trivial 3D</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> + +<div id="translateX1" style="transform: translate3d(0.48px, 0px, 0px);">transform: translate3d(0.48px, 0px, 0px);</div> +<div id="translateX2" style="transform: translate3d(3.17px, 0px, 0px);">transform: translate3d(3.17px, 0px, 0px);</div> +<div id="translateX3" style="transform: translate3d(0.34px, 0px, 0px);">transform: translate3d(0.34px, 0px, 0px);</div> + +<div id="translateY1" style="transform: translate3d(0px, 0.48px, 0px);">transform: translate3d(0px, 0.48px, 0px);</div> +<div id="translateY2" style="transform: translate3d(0px, 3.17px, 0px);">transform: translate3d(0px, 3.17px, 0px);</div> +<div id="translateY3" style="transform: translate3d(0px, 0.34px, 0px);">transform: translate3d(0px, 0.34px, 0px);</div> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transform-3d-rotateY-stair-above-ref-001.xht b/testing/web-platform/tests/css/css-transforms/reference/transform-3d-rotateY-stair-above-ref-001.xht new file mode 100644 index 0000000000..9a8d7e8593 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transform-3d-rotateY-stair-above-ref-001.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Apple" href="http://www.apple.com/"/> + <style type="text/css"><![CDATA[ +div { + background-color: green; + height: 200px; + width: 200px; +} + ]]></style> + </head> + <body> +<div></div> +<p>You should see a green box. There should be no red.</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transform-applies-to-001-ref.xht b/testing/web-platform/tests/css/css-transforms/reference/transform-applies-to-001-ref.xht new file mode 100644 index 0000000000..fe646caebd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transform-applies-to-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> + <style type="text/css"><![CDATA[ + div { + position: relative; + } + div p { + position: absolute; + top: 0; + left: 0; + display: block; + } + #ref { + width: 100px; + height: 100px; + background-color: green; + } + ]]></style> + </head> + <body> + <p>You should see a green box. There should be no red.</p> + <div> + <p id="ref"></p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transform-applies-to-002-ref.xht b/testing/web-platform/tests/css/css-transforms/reference/transform-applies-to-002-ref.xht new file mode 100644 index 0000000000..8c38382516 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transform-applies-to-002-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div { + position: relative; + color: green; + } + div p { + width: 10em; + font-family: Ahem; + position: absolute; + top: 0; + left: 0; + line-height: 2; + } + ]]></style> + </head> + <body> + <p> + You should see two lines of 5 green boxes each. You should see no + red. + </p> + <div> + <p>X X <span>X X X X X X</span> X X</p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transform-origin-01-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transform-origin-01-ref.html new file mode 100644 index 0000000000..e6bac93790 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transform-origin-01-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>Reference File</title> + <link rel="author" title="CJ Gammon" href="mailto:youremail@address.com"> + <style type="text/css"> + + #container{ + position: relative; + } + + .square{ + position: absolute; + } + + #green{ + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + } + + </style> +</head> +<body> + <p>The test passes if there is a green square and no red or blue square.</p> + + <div id="container"> + <div id="green" class="square"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transform-origin-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transform-origin-ref.html new file mode 100644 index 0000000000..980a273e0d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transform-origin-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform-origin</title> + <link rel="author" title="Michael Downey" href="mailto:miked782000@yahoo.com"> + <style type="text/css"> + body {margin:0} + .greenSquare { + position: absolute; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background: green; + } + #relativeContainer { + position: relative; + } + </style> +</head> +<body> +<p>The test passes if there is a green square and no red.</p> +<div id="relativeContainer"> + <div class="greenSquare"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transform-scale-test-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transform-scale-test-ref.html new file mode 100644 index 0000000000..5f5a9af957 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transform-scale-test-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Oleg Janeiko" href="mailto:oleg@the-incredible.me"> + <style type="text/css"> + div { + background-color: green; + float: left; + margin: 50px; + width: 30px; + height: 30px; + } + </style> +</head> +<body> + <p>The test passes if there are two green squares of the same size.</p> + <div></div> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transform-translatex-006-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transform-translatex-006-ref.html new file mode 100644 index 0000000000..a1cee2aa91 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transform-translatex-006-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Tranforms Reference File</title> + <link rel="author" title="Serena Wales" href="mailto:serena@codeforamerica.org"> + <style type="text/css"> + .container { + position: absolute; + } + .greenSquare { + position: absolute; + width: 100px; + height: 100px; + /* Position the div so its identical to the div in the test file */ + /* Add fill color to match the test file */ + top: 0px; + left: 50px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transformed-preserve-3d-1-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transformed-preserve-3d-1-ref.html new file mode 100644 index 0000000000..06f7257c50 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transformed-preserve-3d-1-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms API Test: transform preserve-3d</title> + <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com"> + <style> + div { + height: 150px; + width: 150px; + } + .container { + background-color: green; + } + </style> + </head> + + <body> + <p>You should only see a GREEN box if this test passes!</p> + <div class="container"> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/reference/transformed-rotateX-3-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transformed-rotateX-3-ref.html new file mode 100644 index 0000000000..aeb72f5df2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transformed-rotateX-3-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms API Test: transform rotateX</title> + <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com"> + <style> + div { + height: 150px; + width: 150px; + } + .container { + background-color: green; + } + </style> + </head> + + <body> + <p>You should only see a GREEN box if this test passes!</p> + <div class="container"> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/reference/transformed-rotateY-1-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transformed-rotateY-1-ref.html new file mode 100644 index 0000000000..9c3419e6f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transformed-rotateY-1-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms API Test: transform rotateY</title> + <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com"> + <style> + div { + height: 150px; + width: 150px; + } + .container { + border: 1px solid black; + background-color: green; + } + </style> + </head> + + <body> + <p>You should only see a GREEN box if this test passes!</p> + <div class="container"> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-degree-45-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-degree-45-ref.html new file mode 100644 index 0000000000..b79cc47167 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-degree-45-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with rotate function and one parameter</title> + <link rel="reviewer author" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-04 --> + <style type="text/css"> + svg { + position: absolute; + top: 0; + left: 0; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg width="300" height="300"> + <rect x="100" y="100" width="100" height="100" transform="rotate(45, 150, 150)" style="fill: green"></rect> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-degree-90-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-degree-90-ref.html new file mode 100644 index 0000000000..4151743ede --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-degree-90-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: transform property with rotate function and one parameter</title> + <link rel="author" title="Jacy-Bai" href="mailto:jinxin.bai@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .greenRectangle { + position: absolute; + top: 75px; + left: 125px; + width: 100px; + height: 150px; + background: green; + } + </style> + </head> + <body> + <p>The test passes if there is a green rectangle and no red.</p> + <div class="greenRectangle"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-translate-scale-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-translate-scale-ref.html new file mode 100644 index 0000000000..fcf83240c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotate-translate-scale-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function and rotate function with one parameter</title> + <link rel="author" title="Ji Kai" href="mailto:7jikai@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-04 --> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 100px; + width: 150px; + height: 150px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transforms-rotateY-degree-60-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotateY-degree-60-ref.html new file mode 100644 index 0000000000..5c65f5677d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transforms-rotateY-degree-60-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Ji Kai" href="mailto:7jikai@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-04 --> + <style> + div { + background-color: green; + position: absolute; + top: 100px; + width: 25px; + height: 100px; + } + + #left { + left: 100px; + } + + #right { + left: 175px; + } + </style> +</head> +<body> + <p>The test passes if there are two green rectangles.</p> + <div id="left"></div> + <div id="right"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transforms-skewX-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transforms-skewX-ref.html new file mode 100644 index 0000000000..e243edf1d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transforms-skewX-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: transform property with skew function for X axis.</title> + <link rel="author" title="Jacy-Bai" href="mailto:jinxin.bai@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .triangle-topright { + position: absolute; + width: 0; + height: 0; + top: 50px; + left: 50px; + border-top: 100px solid green; + border-left: 100px solid transparent; + } + + .triangle-bottomleft { + position: absolute; + width: 0; + height: 0; + top: 50px; + left: 150px; + border-bottom: 100px solid green; + border-right: 100px solid transparent; + } + </style> + </head> + <body> + <p>The test passes if there is a parallelogram and no red.</p> + <div class="triangle-topright"></div> + <div class="triangle-bottomleft"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/transforms-skewY-ref.html b/testing/web-platform/tests/css/css-transforms/reference/transforms-skewY-ref.html new file mode 100644 index 0000000000..8b7604f425 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/transforms-skewY-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: transform property with skew function for Y axis.</title> + <link rel="author" title="Jacy-Bai" href="mailto:jinxin.bai@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> + <style type="text/css"> + .triangle-bottomleft { + position: absolute; + top: 50px; + left: 100px; + width: 0; + height: 0; + border-bottom: 100px solid green; + border-right: 100px solid transparent; + } + .triangle-topright { + position: absolute; + top: 150px; + left: 100px; + width: 0; + height: 0; + border-top: 100px solid green; + border-left: 100px solid transparent; + } + </style> + </head> + <body> + <p>The test passes if there is a green parallelogram and no red.</p> + <div class="triangle-topright"></div> + <div class="triangle-bottomleft"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/translate-optional-second-ref.html b/testing/web-platform/tests/css/css-transforms/reference/translate-optional-second-ref.html new file mode 100644 index 0000000000..11742fef0c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/translate-optional-second-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 100px; + width: 100px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/ttwf-css-3d-polygon-cycle-ref.html b/testing/web-platform/tests/css/css-transforms/reference/ttwf-css-3d-polygon-cycle-ref.html new file mode 100644 index 0000000000..e5c99eae72 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/ttwf-css-3d-polygon-cycle-ref.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Transforms Test: 3d transform polygon cycle</title> + <link rel="author" title="Leo Ziegler" href="mailto:leo.ziegler@gmail.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + #container { + position: absolute; + top: 100px; + left: 100px; + } + .rect { + position: absolute; + } + #red0 { + background-color: red; + left: 6px; + width: 100px; + height: 50px; + } + #green0 { + background-color: green; + top: 6px; + width: 50px; + height: 100px; + } + #blue0 { + background-color: blue; + width: 50px; + height: 100px; + transform: translate(40px, 81px) rotate(45deg); + } + #red1 { + background-color: red; + width: 100px; + height: 50px; + transform: translate(94px, 0px); + } + #green1 { + background-color: green; + width: 50px; + height: 100px; + transform: translate(0px, 94px); + } + #blue1 { + background-color: blue; + width: 50px; + height: 100px; + transform: translate(102px, 19px) rotate(45deg); + } + </style> +</head> +<body> + <p>The test passes if there red is over green, green is over blue and blue is over red.</p> + <div id="container"> + <div class="rect" id="blue0"></div> + <div class="rect" id="green0"></div> + <div class="rect" id="red0"></div> + <div class="rect" id="red1"></div> + <div class="rect" id="green1"></div> + <div class="rect" id="blue1"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-rotate-ref.html b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-rotate-ref.html new file mode 100644 index 0000000000..4d262683ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-rotate-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Michael Downey" href="mailto:miked782000@yahoo.com"> + <style type="text/css"> + body {margin:0} + .greenSquare { + position: absolute; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background: green; + } + #relativeContainer { + position: relative; + } + </style> +</head> +<body> +<p>The test passes if there is a green square and no red.</p> +<div id="relativeContainer"> + <div class="greenSquare"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-skewx-001.html b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-skewx-001.html new file mode 100644 index 0000000000..c174c7fcde --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-skewx-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 50px; + } + </style> +</head> +<body> + <p>The test passes if there is a green shape and no red.</p> + <div class="greenSquare"> + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="200px" height="100px" viewBox="0 0 200 100" xml:space="preserve"> + <polygon fill="green" points="200,100 100,100 0,0 100,0 "/> + </svg> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-skewy-001.html b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-skewy-001.html new file mode 100644 index 0000000000..ec721cfb55 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-skewy-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green shape and no red.</p> + <div class="greenSquare"> + <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="100px" height="200px" viewBox="0 0 100 200" xml:space="preserve"> + <polygon fill="green" points="100,200 0,99.999 0,0 100,100 "/> + </svg> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-translatex-001.html b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-translatex-001.html new file mode 100644 index 0000000000..68ab44af78 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-translatex-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 150px; + width: 100px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-translatey-001.html b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-translatey-001.html new file mode 100644 index 0000000000..12214ad615 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/reference/ttwf-reftest-transform-translatey-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Reference File</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 200px; + left: 100px; + width: 100px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="greenSquare"></div> +</body> +</html> |