diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-transforms | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-transforms')
1217 files changed, 39007 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-transforms/2d-rotate-001.html b/testing/web-platform/tests/css/css-transforms/2d-rotate-001.html new file mode 100644 index 0000000000..ffba5b9c95 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/2d-rotate-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: CSS Transform using 2d rotate()</title> + <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="2d-rotate-ref.html"> + <meta name="fuzzy" content="maxDifference=87-159;totalPixels=643-1290"> + <meta name="flags" content="svg"> + <meta name="assert" content="asserting that you can rotate an element with CSS"> + <style type="text/css"> + article, svg{ + position: absolute; + top: 220px; + left: 60px; + } + article{ + border: 10px solid green; + display: block; + height: 100px; + width: 100px; + z-index: 2; + } + section article{ + transform: rotate(30deg); + transform-origin: 19% 197%; + } + </style> + </head> + <body> + <p>You should only see one block with color green, and you should not see any red</p> + <section> + <article></article> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200"> + <style type="text/css"> + rect{ + stroke-width: 10; + stroke: red; + fill: none; + } + </style> + <rect height="110" width="110" y="-38" x="120" transform="rotate(30)" /> + </svg> + </section> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/2d-rotate-js.html b/testing/web-platform/tests/css/css-transforms/2d-rotate-js.html new file mode 100644 index 0000000000..11597fb319 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/2d-rotate-js.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>JS test: Rotate via javascript must show the correct computed rotation</title> + <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-the-computed-value"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-transform-functions"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <meta name="flags" content="svg"> + <meta name="assert" content="Asserting that you can rotate an element with JS and it show up in CSS computed values as a matrix"> + <style> + #box{ + margin-top:30px; + display: block; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + <h1>Rotate via JS</h1> + <div id="log"></div> + <div id="box"></div> + <script> + test(function() { + var box = document.getElementById("box"); + box.style.transform = "rotate(30deg)"; + assert_equals(box.style.transform, "rotate(30deg)"); + assert_equals(window.getComputedStyle(box).getPropertyValue("transform"), + "matrix(0.866025, 0.5, -0.5, 0.866025, 0, 0)"); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/2d-rotate-notref.html b/testing/web-platform/tests/css/css-transforms/2d-rotate-notref.html new file mode 100644 index 0000000000..0c6941a027 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/2d-rotate-notref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: CSS Transform using 2d rotate()</title> + <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs"> + <link rel="mismatch" href="2d-rotate-ref.html"> + <meta name="flags" content="svg"> + <style type="text/css"> + article, svg{ + position: absolute; + top: 220px; + left: 60px; + } + article{ + border: 10px solid green; + display: block; + height: 100px; + width: 100px; + z-index: 2; + cursor:pointer; + } + section article{ + transform: rotate(30deg); + transform-origin: 19% 197%; + } + + </style> + </head> + <body> + <p>You should only see one block with color green, and you should not see any red</p> + <section> + <article></article> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200"> + <style type="text/css"> + rect{ + stroke-width: 10; + stroke: red; + fill: none; + } + </style> + <rect transform="FAIL_ME(30)" height="110" width="110" y="-38" x="120"/> + </svg> + </section> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/2d-rotate-ref.html b/testing/web-platform/tests/css/css-transforms/2d-rotate-ref.html new file mode 100644 index 0000000000..b3047db85e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/2d-rotate-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test: CSS Transform using 2d rotate()</title> + <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs"> + <link rel="mismatch" href="2d-rotate-notref.html"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg{ + position: absolute; + top: 220px; + left: 60px; + } + </style> + </head> + <body> + <p>You should only see one block with color green, and you should not see any red</p> + <section> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200"> + <style type="text/css"> + rect{ + stroke-width: 10; + stroke: green; + fill: none; + } + </style> + <rect height="110" width="110" y="-38" x="120" transform="rotate(30)"/> + </svg> + </section> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/2d-transform-inline-js.html b/testing/web-platform/tests/css/css-transforms/2d-transform-inline-js.html new file mode 100644 index 0000000000..0c842ddd66 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/2d-transform-inline-js.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <title>JS test: Inline renderer must return the correct computed transform</title> + <link rel="author" title="Joone Hur" href="https://joone.github.io"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-the-computed-value"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-transform-functions"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <meta name="assert" content="Asserting that you can apply transform to an inline element and it show up in CSS computed values as a matrix"> + <style> + .container { + height: 100px; + width: 200px; + margin: 30px; + outline: 1px solid black; + } + .box { + height: 100%; + width: 100%; + padding: 5px; + margin: 5px; + border: 5px solid gray; + transform-origin: 20% 50%; + } + #test-div { + background-color: blue; + } + + #test-span { + background-color: red; + } + </style> + + </head> + <body> + <h1>Transform values should be indentical between + the blue box(block element) and red box(inline element) </h1> + <div class="container"> + <div id="test-div" class="box"></div> + </div> + <span id="test-span" class="box"></span> + <script> + const testCases = [ + { 'transform' : 'translate(80px, 90px)', 'result' : 'matrix(1, 0, 0, 1, 80, 90)' }, + { 'transform' : 'scale(1.2, 0.8)', 'result' : 'matrix(1.2, 0, 0, 0.8, 0, 0)' }, + { 'transform' : 'skew(-0.7rad, 20deg)', 'result' : 'matrix(1, 0.36397, -0.842288, 1, 0, 0)' }, + { 'transform' : 'rotate(45deg)', 'result' : 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)' }, + ]; + + test(function() { + var testBox = document.getElementById('test-div'); + var testSpan = document.getElementById('test-span'); + + testCases.forEach(function(curTest) { + // set one of our test transforms + testBox.style.transform = curTest.transform; + testSpan.style.transform = curTest.transform; + + // read back computed style + var computedTransform = window.getComputedStyle(testBox).transform; + var computedSpanTransform = window.getComputedStyle(testSpan).transform; + + assert_equals(computedTransform, curTest.result); + assert_equals(computedSpanTransform, curTest.result); + }); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-abspos.html b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-abspos.html new file mode 100644 index 0000000000..c5eef46b5e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-abspos.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (absolute positioning)</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts"> +<meta name="assert" content="Absolutely positioned elements participate in 3D Rendering Contexts based on their parent, not their containing block."> +<link rel="match" href="reference/green.html"> + +<style> + +div { + width: 100px; + height: 100px; +} + +.cb { + transform-style: preserve-3d; + background: red; + position: relative; +} + +.parent { +} + +.abspos { + position: absolute; + top: 0; + left: 0; + /* Since this element is not in the 3D Rendering Context, this translation + does not put it above the <div class="sibling">. */ + transform: translateZ(20px); + background: red; +} + +.sibling { + position: absolute; + top: 0; + left: 0; + transform: translateZ(10px); + background: green; +} + +</style> + +<p>Pass if there is NO red below:</p> + +<div class="cb"> + <div class="parent"> + <div class="abspos"> + </div> + </div> + <div class="sibling"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-fixpos.html b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-fixpos.html new file mode 100644 index 0000000000..e763e8b703 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-fixpos.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (fixed positioning)</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts"> +<meta name="assert" content="Fixed positioned elements participate in 3D Rendering Contexts based on their parent, not their containing block."> +<link rel="match" href="reference/green.html"> + +<style> + +div { + width: 100px; + height: 100px; +} + +.cb { + transform-style: preserve-3d; + transform: translateX(0); + background: red; + position: relative; +} + +.parent { +} + +.abspos { + position: fixed; + top: 0; + left: 0; + /* Since this element is not in the 3D Rendering Context, this translation + does not put it above the <div class="sibling">. */ + transform: translateZ(20px); + background: red; +} + +.sibling { + position: absolute; + top: 0; + left: 0; + transform: translateZ(10px); + background: green; +} + +</style> + +<p>Pass if there is NO red below:</p> + +<div class="cb"> + <div class="parent"> + <div class="abspos"> + </div> + </div> + <div class="sibling"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-inline.html b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-inline.html new file mode 100644 index 0000000000..815140d7e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-inline.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (inlines)</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts"> +<meta name="assert" content="Blocks inside of inlines participate in 3D Rendering Contexts based on their parent, not their containing block."> +<link rel="match" href="transform-blank-ref.html"> + +<style> + +.outer { + display: block; + width: 100px; + height: 100px; + transform-style: preserve-3d; + transform: rotateX(90deg); +} + +.middle { + display: inline; +} + +.inner { + display: block; + width: 100px; + height: 100px; + transform: rotateX(-90deg); + background: red; +} + +</style> + +<p>Nothing should appear except this sentence.</p> + +<div class="outer"> + <div class="middle"> + <div class="inner"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-001.html b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-001.html new file mode 100644 index 0000000000..d07c59a5db --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Sorting outside of the 3-D Rendering Context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="The #wrapper element is the root of the 3-D rendering context, so #tooltip should render on top of it per normal CSS z-ordering rules."> +<link rel="match" href="transform-lime-square-ref.html"> +<style> + +#contain { + position: relative; + padding-top: 5px; +} + +#wrapper { + width: 30px; + height: 30px; + margin-top: 20px; + margin-left: 20px; +} + +#cube { + width: 15px; + height: 15px; + transform-style: preserve-3d; +} + +#face { + width: 15px; + height: 15px; + transform: translateZ(75px); + background: red; +} + +#tooltip { + position: absolute; + background: lime; + width: 100px; + height: 100px; + top: 0; + left: 0; +} + +</style> + +<div id="contain"> + <div id="wrapper"> + <div id="cube"> + <div id="face"></div> + </div> + </div> + + <div id="tooltip"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-002.html b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-002.html new file mode 100644 index 0000000000..11faa1462a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Sorting outside of the 3-D Rendering Context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="The #wrapper element is the root of the 3-D rendering context, so #tooltip should render on top of it per normal CSS z-ordering rules."> +<link rel="match" href="transform-lime-square-ref.html"> +<style> + +#contain { + position: relative; + padding-top: 5px; +} + +#wrapper { + width: 30px; + height: 30px; + margin-top: 20px; + margin-left: 20px; + + perspective: 700px; +} + +#cube { + width: 15px; + height: 15px; + transform-style: preserve-3d; +} + +#face { + width: 15px; + height: 15px; + transform: translateZ(75px); + background: red; +} + +#tooltip { + position: absolute; + background: lime; + width: 100px; + height: 100px; + top: 0; + left: 0; +} + +</style> + +<div id="contain"> + <div id="wrapper"> + <div id="cube"> + <div id="face"></div> + </div> + </div> + + <div id="tooltip"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-003.html b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-003.html new file mode 100644 index 0000000000..0e97e1d5e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-and-z-ordering-003.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Sorting outside of the 3-D Rendering Context</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Philip Rogers" href="mailto:pdr@google.com"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="The #wrapper element is the root of the 3-D rendering context, so #tooltip should render on top of it per normal CSS z-ordering rules."> +<link rel="match" href="transform-lime-square-ref.html"> +<style> + +#contain { + position: relative; + padding-top: 5px; +} + +#wrapper { + width: 30px; + height: 30px; + margin-top: 20px; + margin-left: 20px; +} + +#cube { + width: 15px; + height: 15px; + transform-style: preserve-3d; + column-count: 5; +} + +#face { + width: 15px; + height: 15px; + transform: translateX(5px); + background: red; + column-span: all; +} + +#tooltip { + position: absolute; + background: lime; + width: 100px; + height: 100px; + top: 0; + left: 0; +} + +</style> + +<div id="contain"> + <div id="wrapper"> + <div id="cube"> + <div id="face"></div> + </div> + </div> + + <div id="tooltip"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3d-rendering-context-behavior.html b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-behavior.html new file mode 100644 index 0000000000..94e476c342 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-rendering-context-behavior.html @@ -0,0 +1,126 @@ +<!doctype HTML> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + div { + width: 200px; + height: 200px; + } + + .rotate45 { + transform: rotateY(45deg) + } + .rotateNeg45 { + transform: rotateY(-45deg) + } + + .parent { + transform-style: preserve-3d; + } + + .perspective { + perspective: 200px; + } +</style> + +<div class="parent rotateNeg45"> + <div id=childOfPreserve3D class="child rotate45"></div> +</div> + +<div class="parent rotateNeg45"> + <div id=absChildOfPreserve3D class="child rotate45" style="position: absolute"></div> +</div> + +<div class="parent rotateNeg45"> + <div id=fixedChildOfPreserve3D class="child rotate45" style="position: fixed"></div> +</div> + +<div class="parent rotateNeg45"> + <div> + <div id=childWithIntermediate class="child rotate45"></div> + </div> +</div> + +<div class="parent rotateNeg45"> + <div> + <div id=absWithIntermediate class="child rotate45" style="position: absolute"></div> + </div> +</div> + +<div class="parent rotateNeg45"> + <div> + <div id=fixedWithIntermediate class="child rotate45" style="position: fixed"></div> + </div> +</div> + +<div class="perspective"> + <div id=childWithPerspectiveParent class="child rotate45"></div> + <div id=absWithPerspectiveParent class="child rotate45" style="position: absolute"></div> + <div id=fixedWithPerspectiveParent class="child rotate45" style="position: fixed"></div> +</div> + +<div class="perspective"> + <div> + <div id=childWithIntermediateAndPerspectiveParent class="child rotate45"></div> + <div id=absWithIntermediateAndPerspectiveParent class="child rotate45" style="position: absolute"></div> + <div id=fixedWithIntermediateAndPerspectiveParent class="child rotate45" style="position: fixed"></div> + </div> +</div> + +<script> + test(function() { + assert_equals(childOfPreserve3D.getBoundingClientRect().width, 200); + }, "Direct DOM parent is root of rendering context (normal flow)"); + test(function() { + assert_equals(absChildOfPreserve3D.getBoundingClientRect().width, 200); + }, "Direct DOM parent is root of rendering context (absolute)"); + test(function() { + assert_equals(fixedChildOfPreserve3D.getBoundingClientRect().width, 200); + }, "Direct DOM parent is root of rendering context (fixed)"); + + test(function() { + assert_equals(childWithIntermediate.getBoundingClientRect().width, 100); + }, "Intermediate DOM nodes cause rendering context to end (normal flow)"); + test(function() { + assert_equals(absWithIntermediate.getBoundingClientRect().width, 100); + }, "Intermediate DOM nodes cause rendering context to end (absolute)"); + test(function() { + assert_equals(fixedWithIntermediate.getBoundingClientRect().width, 100); + }, "Intermediate DOM nodes cause rendering context to end (fixed)"); + + test(function() { + assert_approx_equals( + childWithPerspectiveParent.getBoundingClientRect().width, 161, 1); + }, "Perspective applies to direct DOM normal-flow children"); + + test(function() { + assert_approx_equals( + absWithPerspectiveParent.getBoundingClientRect().width, 161, 1); + }, "Perspective applies to direct DOM abs-pos children"); + + test(function() { + assert_approx_equals( + fixedWithPerspectiveParent.getBoundingClientRect().width, 161, 1); + }, "Perspective applies to direct DOM fixed-pos children"); + + test(function() { + assert_approx_equals( + childWithIntermediateAndPerspectiveParent.getBoundingClientRect().width, + 141, 1); + }, "Perspective does not apply to DOM normal-flow grandchildren"); + + test(function() { + assert_approx_equals( + absWithIntermediateAndPerspectiveParent.getBoundingClientRect().width, + 141, 1); + }, "Perspective does not apply to DOM abs-pos grandchildren"); + + test(function() { + assert_approx_equals( + fixedWithIntermediateAndPerspectiveParent.getBoundingClientRect().width, + 141, 1); + }, "Perspective does not apply to DOM fixed-pos grandchildren"); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/3d-scene-with-iframe-001-ref.html b/testing/web-platform/tests/css/css-transforms/3d-scene-with-iframe-001-ref.html new file mode 100644 index 0000000000..d984f8a6e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-scene-with-iframe-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> + +#container { + perspective: 400px; + perspective-origin: 0 0; +} +#ref { + background-color: green; + width: 150px; + height: 100px; + transform: translateZ(200px); +} + +</style> + +<div id="container"> + <div id="ref"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3d-scene-with-iframe-001.html b/testing/web-platform/tests/css/css-transforms/3d-scene-with-iframe-001.html new file mode 100644 index 0000000000..075e4ad1bc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3d-scene-with-iframe-001.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="UTF-8"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1264783"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-rendering-contexts"> +<link rel="match" href="3d-scene-with-iframe-001-ref.html"> +<meta name="assert" content="The iframe should be covered by the green div."> + +<style> + +#container { + perspective: 400px; + perspective-origin: 0 0; +} +#scene { + transform-style: preserve-3d; + transform: translate(100px, 100px); + width: 300px; + height: 300px; +} +.transform1, .transform2 { + position: absolute; + transform-style: preserve-3d; + top: 0; + left: 0; +} +.transform1 { + transform: translateZ(200px); +} +.transform1 > div { + background-color: green; + width: 150px; + height: 100px; + transform: translate(-100px, -100px) +} +.transform2 { + transform: translateZ(100px); +} +.transform2 > iframe { + display: block; + transform: translate(-50px, -75px); +} + +</style> + +<div id="container"> + <div id="scene"> + <div class="transform1"> + <div></div> + </div> + <div class="transform2"> + <iframe width="150" height="100"></iframe> + </div> + </div> +</div> + +<script> + +let iframe = document.getElementsByTagName("iframe")[0]; +iframe.addEventListener("load", function() { + let root = iframe.contentDocument.documentElement; + root.style.height = "10000px"; + root.style.background = "red"; + document.documentElement.classList.remove("reftest-wait"); +}); +iframe.src = "/resources/blank.html"; + +</script> diff --git a/testing/web-platform/tests/css/css-transforms/3dtransform-and-filter-no-perspective-001-ref.html b/testing/web-platform/tests/css/css-transforms/3dtransform-and-filter-no-perspective-001-ref.html new file mode 100644 index 0000000000..bb7ae235fe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3dtransform-and-filter-no-perspective-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Filter on a 3d transformed element</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> + +body { + margin: 0; +} + +.cover { + position: absolute; + top: 0; + left: 0; + width: 600px; + height: 220px; +} + +</style> + +<svg class="cover"> + <polygon fill="blue" + style="transform: translateZ(0)" + points="278.470,115.594 + 553.80005,15.38214 + 587.9345,109.1657 + 312.6045,209.3776" /> +</svg> + +<svg class="cover"> + <polygon fill="transparent" stroke="aqua" stroke-width="4" + points="278.470,115.594 + 553.80005,15.38214 + 587.9345,109.1657 + 312.6045,209.3776" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/3dtransform-and-filter-no-perspective-001.html b/testing/web-platform/tests/css/css-transforms/3dtransform-and-filter-no-perspective-001.html new file mode 100644 index 0000000000..d40e47352c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3dtransform-and-filter-no-perspective-001.html @@ -0,0 +1,69 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Filter on a 3d transformed element</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<meta name="assert" content="The filtered element is rendered correctly without clipping, despite the interesting transform."> +<link rel="match" href="3dtransform-and-filter-no-perspective-001-ref.html"> + +<style> + +body { + margin: 0; +} + +div { + height: 500px; + width: 750px; + overflow: hidden; + position: relative; +} + +span { + background: blue; + display: inline-block; + top: 0; + left: 200px; + position: absolute; + width: 293px; + height: 174px; + transform-origin: 0px -400px 0px; + margin-top: 300px; + transform: rotateZ(-20deg) rotateX(55deg); + filter: drop-shadow(0px 60px 40px rgba(0,0,0,0)); +} + +svg.cover { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 600px; + height: 220px; +} + +/* + +The device-to-local transform here is: +left margin-top transform-origin transform -transform-origin +translateX(200px) translateY(300px) translateY(-400px) rotateZ(-20deg) rotateX(55deg) translateY(400px) +which is equivalent to: +matrix3d(0.939693, -0.34202, 0, 0, 0.196175, 0.538986, 0.819152, 0, -0.280166, -0.769751, 0.573576, 0, 278.47, 115.594, 327.661, 1) + +*/ + +</style> + +<div> + <span></span> +</div> + +<!-- cover the blurred edge so we can match to a reference --> +<svg class="cover"> + <polygon fill="transparent" stroke="aqua" stroke-width="4" + points="278.470,115.594 + 553.80005,15.38214 + 587.9345,109.1657 + 312.6045,209.3776" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-001.html b/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-001.html new file mode 100644 index 0000000000..aec3b442bb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-001.html @@ -0,0 +1,52 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): position:sticky on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-insets"> +<meta name="assert" content="3D scene intersection is done correctly in the presence of position: sticky."> +<link rel="match" href="3dtransform-and-position-sticky-ref.html"> + +<style> + +div, img { + height: 100px; + width: 100px; +} + +#outer { + transform-style: preserve-3d; + perspective: 300px; +} + +#middle { + transform-style: preserve-3d; + position: relative; +} + +#inner1 { + background: aqua; + /* isn't really sticky because of the containing block established by transform and by transform-style */ + position: sticky; + top: 0; + transform: translateZ(0); +} + +#inner2 { + background: olive; + position: absolute; + top: 0; + left: 0; + transform: rotateX(30deg); +} + +</style> + +<div id="outer"> + <div id="middle"> + <div id="inner1"> + </div> + <div id="inner2"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-002.html b/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-002.html new file mode 100644 index 0000000000..bde8e27e5d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): position:sticky on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-insets"> +<meta name="assert" content="3D scene intersection is done correctly in the presence of position: sticky."> +<link rel="match" href="3dtransform-and-position-sticky-ref.html"> + +<style> + +div, img { + height: 100px; + width: 100px; +} + +#outer { + transform-style: preserve-3d; + perspective: 300px; +} + +#middle { + transform-style: preserve-3d; + position: relative; +} + +#inner1 { + background: aqua; + /* isn't really sticky because of the containing block established by transform and by transform-style */ + position: sticky; + top: 0; + transform: translateZ(0); + transform-style: preserve-3d; +} + +#inner2 { + background: olive; + position: absolute; + top: 0; + left: 0; + transform: rotateX(30deg); +} + +</style> + +<div id="outer"> + <div id="middle"> + <div id="inner1"> + </div> + <div id="inner2"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-ref.html b/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-ref.html new file mode 100644 index 0000000000..a12ce72329 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/3dtransform-and-position-sticky-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<title>CSS Test Reference (Transforms): position:sticky on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> + +div, img { + height: 100px; + width: 100px; +} + +#outer { + transform-style: preserve-3d; + perspective: 300px; +} + +#middle { + transform-style: preserve-3d; + position: relative; + background: aqua; +} + +#inner2 { + background: olive; + position: absolute; + top: 0; + left: 0; + transform: rotateX(30deg); +} + +</style> + +<div id="outer"> + <div id="middle"> + <div id="inner2"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/META.yml b/testing/web-platform/tests/css/css-transforms/META.yml new file mode 100644 index 0000000000..a6d5672c9d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/META.yml @@ -0,0 +1,7 @@ +spec: https://drafts.csswg.org/css-transforms/ +suggested_reviewers: + - dbaron + - plinss + - dirkschulze + - smfr + - grorg diff --git a/testing/web-platform/tests/css/css-transforms/add-child-in-empty-layer-ref.html b/testing/web-platform/tests/css/css-transforms/add-child-in-empty-layer-ref.html new file mode 100644 index 0000000000..38ab96aaf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/add-child-in-empty-layer-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/"> +<style> +.empty-layer { + transform: rotateY(30deg) rotateX(-30deg); + width: 100px; + height: 100px; +} +.inserted { + width: 50px; + height: 50px; + background-color: red; +} +</style> +<!-- + Force to create composited layer with empty then inserts a child the layer. +--> +<div id="empty-layer" class="empty-layer"> + <div id="inserted" class="inserted"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/add-child-in-empty-layer.html b/testing/web-platform/tests/css/css-transforms/add-child-in-empty-layer.html new file mode 100644 index 0000000000..71b5b24d35 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/add-child-in-empty-layer.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Adding a child to an empty layer</title> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/"> +<link rel="match" href="add-child-in-empty-layer-ref.html"> +<style> +.empty-layer { + transform: rotateY(30deg) rotateX(-30deg); + width: 100px; + height: 100px; +} +.inserted { + width: 50px; + height: 50px; + background-color: red; +} +</style> +<!-- + Force to create composited layer with empty then inserts a child the layer. +--> +<div id="empty-layer" class="empty-layer"></div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + var div = document.getElementById("empty-layer"); + div.innerHTML = '<div id="inserted" class="inserted"></div>'; + requestAnimationFrame(() => { + document.documentElement.removeAttribute('class'); + }); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/backface-visibility-no-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/backface-visibility-no-interpolation.html new file mode 100644 index 0000000000..b7b9f2d5f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/backface-visibility-no-interpolation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'backface-visibility', + from: 'initial', + to: 'hidden' +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation-ref.html b/testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation-ref.html new file mode 100644 index 0000000000..6610c6f68b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>CSS Test: translate webgl canvas in an animation via set current time (ref).</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/> +<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"/> +<script src="/common/reftest-wait.js"></script> + +<style> +canvas { + will-change: transform; + transform: translate(150px); +} +</style> + +<canvas id="canvas" width="150" height="150"></canvas> + +<script> +async function runReference() { + const gl = canvas.getContext("webgl"); + gl.clearColor(0.0, 1.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + + requestAnimationFrame(takeScreenshot); +} +onload = () => requestAnimationFrame(() => requestAnimationFrame(runReference)); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation.html b/testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation.html new file mode 100644 index 0000000000..e1138a87e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/canvas-webgl-translate-in-animation.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class=reftest-wait> +<title>CSS Test: translate webgl canvas in an animation via set current time.</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"/> +<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"/> +<link rel="match" href="canvas-webgl-translate-in-animation-ref.html"/> +<meta name="assert" content="canvas is translated by half the total distance"/> +<script src="/common/reftest-wait.js"></script> + +<style> +@keyframes move { + to { transform: translate(300px); } +} + +canvas { + will-change: transform; + animation: move; + animation-duration: 1s; + animation-timing-function: linear; + animation-play-state: paused; +} +</style> + +<canvas id="canvas" width="150" height="150"></canvas> + +<script> +async function runTest() { + const gl = canvas.getContext("webgl"); + gl.clearColor(0.0, 1.0, 0.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + + requestAnimationFrame(() => { + document.getAnimations().forEach((animation) => { + animation.currentTime = 500; + }); + takeScreenshot(); + }); +} +onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/animation/composited-transform.html b/testing/web-platform/tests/css/css-transforms/animation/composited-transform.html new file mode 100644 index 0000000000..182321b9d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/composited-transform.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Composition of transform animations</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#combining-transform-lists"> +<meta name="assert" content="transform animations should composite correctly"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="target"><div> + +<script> +test(() => { + var anim1 = target.animate( + { transform: [ 'translateX(0)', 'translateX(100px)' ]}, + 1000 + ); + var anim2 = target.animate( + { transform: [ 'translateY(0)', 'translateY(100px)' ]}, + {duration: 1000, composite: 'add'} + ); + + anim1.pause(); + anim2.pause(); + + anim1.currentTime = 200; + anim2.currentTime = 800; + + // The computation here should be: + // underlying_value = 'translateX(0)' --> 'translateX(100px)' @ 0.2 + // = 'translateX(20px)' + // final_value = 0.2 * ('translateX(20px) translateY(0)') + + // 0.8 * ('translateX(20px) translateY(100px)') + // = 'translateX(20px) translateY(80px)' + // = 'matrix(1, 0, 0, 1, 20, 80)' + assert_equals(getComputedStyle(target).transform, 'matrix(1, 0, 0, 1, 20, 80)') +}, 'An additive transform animation on-top of a replace transform animation ' + + 'should composite correctly'); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/list-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/list-interpolation.html new file mode 100644 index 0000000000..85701e9efa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/list-interpolation.html @@ -0,0 +1,208 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<title>Transform list interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#interpolation-of-transforms"> +<meta name="assert" content="Interpolation of transform function lists is performed as follows"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> +</head> +<body> +<script> +test_interpolation( + { + property: 'transform', + from: 'none', + to: 'none', + }, + [{ at: 0.25, expect: 'none' }], + 'none -> none' +); + +test_interpolation( + { + property: 'transform', + from: 'none', + to: 'translate(200px) rotate(720deg)', + }, + [{ at: 0.25, expect: 'translate(50px) rotate(180deg)' }], + 'none -> something' +); + +test_interpolation( + { + property: 'transform', + from: 'translate(200px) rotate(720deg)', + to: 'none', + }, + [{ at: 0.25, expect: 'translate(150px) rotate(540deg)' }], + 'something -> none' +); + +test_interpolation( + { + property: 'transform', + from: 'translate(100px)', + to: 'translate(200px) rotate(720deg)', + }, + [{ at: 0.25, expect: 'translate(125px) rotate(180deg)' }], + 'Mismatched lengths (from is shorter), common part matches' +); + +test_interpolation( + { + property: 'transform', + from: 'translate(100px) rotate(720deg)', + to: 'translate(200px)', + }, + [{ at: 0.25, expect: 'translate(125px) rotate(540deg)' }], + 'Mismatched lengths (to is shorter), common part matches' +); + +test_interpolation( + { + property: 'transform', + from: 'scale(2) rotate(360deg) translate(100px) matrix(1, 0, 0, 1, 100, 0) skew(0deg)', + to: 'scale(3) rotate(1080deg) translate(200px) matrix(1, 0, 0, 1, 0, 200) skew(720deg)', + }, + [ + { + at: 0.25, + expect: 'scale(2.25) rotate(540deg) translate(125px) matrix(1, 0, 0, 1, 75, 50) skew(180deg)', + }, + ], + 'Perfect match' +); + +test_interpolation( + { + property: 'transform', + from: 'translateX(100px) scaleX(3) translate(500px) scale(2)', + to: 'translateY(200px) scale(5) translateX(100px) scaleY(3)', + }, + [{ at: 0.25, expect: 'translate(75px, 50px) scale(3.5, 2) translate(400px, 0px) scale(1.75, 2.25)' }], + 'Matches on primitives' +); + +test_interpolation( + { + property: 'transform', + from: 'rotateX(90deg) translateX(100px)', + to: 'rotate3d(50, 0, 0, 180deg) translateY(200px)', + }, + [{ at: 0.25, expect: 'rotateX(112.5deg) translate(75px, 50px)' }], + 'Match on rotation vector' +); + +test_interpolation( + { + property: 'transform', + from: 'rotateX(90deg) translateX(100px)', + to: 'rotateY(0deg) translateY(200px)', + }, + [{ at: 0.25, expect: 'rotateX(67.5deg) translate(75px, 50px)' }], + 'Match on rotation due to 0deg angle' +); + +test_interpolation( + { + property: 'transform', + from: 'rotate3d(1, 1, 1, -60deg) translateX(100px)', + to: 'rotate3d(2, 2, 2, 60deg) translateY(200px)', + }, [{ at: 0.25, expect: 'rotate3d(1, 1, 1, -30deg) translate(75px, 50px)' }], + 'Match on rotation using collinear rotation axes' +); + +test_interpolation( + { + property: 'transform', + from: 'rotate3d(1, 0, 0, 360deg) translateX(100px)', + to: 'rotate3d(0, 1, 0, -720deg) translateY(200px)', + }, [{ at: 0.25, expect: 'rotate3d(0, 0, 1, 0deg) translate(75px, 50px)' }], + 'Match on rotation with spherical interpolation' +); + +test_interpolation( + { + property: 'transform', + from: 'rotate(0deg) translate(100px)', + to: 'rotate(720deg) scale(2) translate(200px)', + }, + [{ at: 0.25, expect: 'rotate(180deg) matrix(1.25, 0, 0, 1.25, 175, 0)' }], + 'Common prefix' +); + +test_interpolation( + { + property: 'transform', + from: 'scale(2) rotate(0deg) translate(100px)', + to: 'rotate(720deg) scale(2) translate(200px)', + }, + [{ at: 0.25, expect: 'matrix(2, 0, 0, 2, 250, 0)' }], + 'Complete mismatch (except length)' +); + +test_interpolation( + { + property: 'transform', + from: 'scale(2) rotate(0deg)', + to: 'rotate(720deg) scale(2) translate(200px)', + }, + [{ at: 0.25, expect: 'matrix(2, 0, 0, 2, 100, 0)' }], + 'Complete mismatch including length' +); + +test_interpolation( + { + property: 'transform', + from: 'rotate(0deg) scaleX(1)', + to: 'rotate(720deg) translateX(0px) scaleX(2)' + }, + [{at: 0.25, expect: 'rotate(180deg) matrix(1.25, 0, 0, 1, 0, 0)'}], + 'Mismatched lengths (from is shorter), partial match' +); + +test_interpolation( + { + property: 'transform', + from: 'rotate(720deg) translateX(0px) scaleX(2)', + to: 'rotate(0deg) scaleX(1)' + }, + [{at: 0.25, expect: 'rotate(540deg) matrix(1.75, 0, 0, 1, 0, 0)'}], + 'Mismatched lengths (to is shorter), partial match' +); + +test_interpolation( + { + property: 'transform', + from: 'scaleX(-3) scaleY(2)', + to: 'scaleY(-3) translateX(0px) scaleX(2)' + }, + [{at: 0.25, expect: 'scale(-2, 0) matrix(1.25, 0, 0, 1.75, 0, 0)'}], + 'Mismatched lengths (from is shorter), partial match on primitive' +); + +test_interpolation( + { + property: 'transform', + from: 'scaleY(-3) translateX(0px) scaleX(2)', + to: 'scaleX(-3) scaleY(2)' + }, + [{at: 0.25, expect: 'scale(0, -2) matrix(1.75, 0, 0, 1.25, 0, 0)'}], + 'Mismatched lengths (to is shorter), partial match on primitive' +); + +test_interpolation( + { + property: 'transform', + from: 'scaleY(-3) translateX(0px)', + to: 'scaleX(-3) scaleY(2)' + }, + [{at: 0.25, expect: 'scale(0, -2) matrix(1, 0, 0, 1.25, 0, 0)'}], + 'Common prefix on primitive' +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/animation/matrix-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/matrix-interpolation.html new file mode 100644 index 0000000000..a326e7c92f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/matrix-interpolation.html @@ -0,0 +1,36 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Matrix interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#interpolation-of-3d-matrices"> +<meta name="assert" content="When interpolating between two matrices, each matrix is decomposed into the corresponding translation, rotation, scale, skew and (for a 3D matrix) perspective values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> +<body> +<script> +// Test interpolation of quaternions when the dot product is -1. +// +// We need to be particularly careful not to use a rotate function with a zero +// angle since the handling of zero angle rotations may change in future as per: +// +// https://github.com/w3c/csswg-drafts/issues/3236 +// +// For rotateY(360deg) we should get a quaternion of: +// [ 0, sin(2 * PI / 2), 0, cos(2 * PI / 2) ] +// = [ 0, 0, 0, -1 ] +// +// For rotateX(720deg) we should get a quaternion of: +// [ 0, 0, sin(4 * PI / 2), cos(4 * PI / 2) ] +// = [ 0, 0, 0, 1 ] +// +// Dot product = 0 * 0 + 0 * 0 + 0 * 0 + 1 * -1 = -1 +test_interpolation( + { + property: 'transform', + from: 'rotateY(360deg)', + to: 'rotateX(720deg)', + }, + [{ at: 0.5, expect: 'matrix(1, 0, 0, 1, 0, 0)' }] +); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/perspective-composition.html b/testing/web-platform/tests/css/css-transforms/animation/perspective-composition.html new file mode 100644 index 0000000000..6fa745d6ed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/perspective-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> perspective composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective"> +<meta name="assert" content="perspective supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'perspective', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'perspective', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'perspective', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'perspective', + underlying: '100px', + addFrom: '100px', + addTo: 'none', +}, [ + {at: -0.3, expect: '200px'}, + {at: 0, expect: '200px'}, + {at: 0.5, expect: 'none'}, + {at: 1, expect: 'none'}, + {at: 1.5, expect: 'none'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/perspective-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/perspective-interpolation.html new file mode 100644 index 0000000000..d3f165db22 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/perspective-interpolation.html @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> perspective interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective"> +<meta name="assert" content="perspective supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + perspective: 30px; +} +.target { + perspective: 10px; +} +.transformed { + width: 50px; + height: 50px; + background: black; + transform: rotateY(45deg); +} +.expected .transformed { + background: green; +} +.expected { + position: relative; + left: -50px; + opacity: 0.75; +} +</style> +<body> +<template id="target-template"> +<div><div class="transformed"></div></div> +</template> +<script> +test_interpolation({ + property: 'perspective', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -20, expect: '0px'}, + {at: -1, expect: '0px'}, + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_no_interpolation({ + property: 'perspective', + from: 'initial', + to: '20px', +}); + +test_interpolation({ + property: 'perspective', + from: 'inherit', + to: '20px', +}, [ + {at: -20, expect: '230px'}, + {at: -1, expect: '40px'}, + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_no_interpolation({ + property: 'perspective', + from: 'unset', + to: '20px', +}); + +test_interpolation({ + property: 'perspective', + from: '50px', + to: '100px', +}, [ + {at: -20, expect: '0px'}, // perspective does not accept negative values + {at: -1, expect: '0px'}, // perspective does not accept negative values + {at: -0.3, expect: '35px'}, + {at: 0, expect: '50px'}, + {at: 0.3, expect: '65px'}, + {at: 0.6, expect: '80px'}, + {at: 1, expect: '100px'}, + {at: 1.5, expect: '125px'}, +]); + +test_interpolation({ + property: 'perspective', + from: '0px', // Test that there's no special handling of 0px, as for perspective() + to: '10px', +}, [ + {at: -20, expect: '0px'}, // perspective does not accept negative values + {at: -1, expect: '0px'}, // perspective does not accept negative values + {at: -0.3, expect: '0px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '3px'}, + {at: 0.6, expect: '6px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '15px'}, +]); + +test_no_interpolation({ + property: 'perspective', + from: '50px', + to: 'none', +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/perspective-origin-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/perspective-origin-interpolation.html new file mode 100644 index 0000000000..0a1e74cb8e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/perspective-origin-interpolation.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>perspective-origin interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> +<meta name="assert" content="perspective-origin supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + perspective-origin: 30px 10px; +} +.target { + display: inline-block; + perspective: 50; + margin-top: 50px; + margin-bottom: 25px; + perspective-origin: 10px 30px; +} +.transformed { + width: 50px; + height: 50px; + background: black; + transform: rotateY(45deg); +} +.expected .transformed { + background: green; +} +.expected { + position: relative; + left: -50px; + opacity: 0.75; +} +</style> +<body> +<template id="target-template"> +<div><div class="transformed"></div></div> +</template> +<script> +test_interpolation({ + property: 'perspective-origin', + from: neutralKeyframe, + to: '20px 20px', +}, [ + {at: -0.3, expect: '7px 33px'}, + {at: 0, expect: '10px 30px'}, + {at: 0.3, expect: '13px 27px'}, + {at: 0.6, expect: '16px 24px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '25px 15px'}, +]); + +test_interpolation({ + property: 'perspective-origin', + from: 'initial', + to: '20px 20px', +}, [ + {at: -0.3, expect: '26.5px 26.5px'}, + {at: 0, expect: '25px 25px'}, + {at: 0.3, expect: '23.5px 23.5px'}, + {at: 0.6, expect: '22px 22px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '17.5px 17.5px'}, +]); + +test_interpolation({ + property: 'perspective-origin', + from: 'inherit', + to: '20px 20px', +}, [ + {at: -0.3, expect: '33px 7px'}, + {at: 0, expect: '30px 10px'}, + {at: 0.3, expect: '27px 13px'}, + {at: 0.6, expect: '24px 16px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '15px 25px'}, +]); + +test_interpolation({ + property: 'perspective-origin', + from: 'unset', + to: '20px 20px', +}, [ + {at: -0.3, expect: '26.5px 26.5px'}, + {at: 0, expect: '25px 25px'}, + {at: 0.3, expect: '23.5px 23.5px'}, + {at: 0.6, expect: '22px 22px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '17.5px 17.5px'}, +]); + +test_interpolation({ + property: 'perspective-origin', + from: '0% 50%', + to: '100% 150%' +}, [ + {at: -0.3, expect: '-30% 20%'}, + {at: 0, expect: '0% 50%'}, + {at: 0.3, expect: '30% 80%'}, + {at: 0.6, expect: '60% 110%'}, + {at: 1, expect: '100% 150%'}, + {at: 1.5, expect: '150% 200%'} +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-on-svg-ref.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-on-svg-ref.html new file mode 100644 index 0000000000..fda02db187 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-on-svg-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>Animating the "rotate" property on an SVG element</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + +<style> + +svg { + width: 400px; + height: 400px; +} + +rect { + width: 100px; + height: 100px; + transform-origin: 100px 100px; + rotate: 180deg; +} + +</style> +</head> +<body> +<svg><rect></rect></svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-on-svg.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-on-svg.html new file mode 100644 index 0000000000..fed931b00a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-on-svg.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating the "rotate" property on an SVG element</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> +<link rel="match" href="rotate-animation-on-svg-ref.html"> + +<style> + +@keyframes rotate-animation { + from { rotate: 0; } + to { rotate: 180deg; } +} + +svg { + width: 400px; + height: 400px; + overflow: visible; +} + +rect { + width: 100px; + height: 100px; + transform-origin: 100px 100px; + animation: rotate-animation 1ms linear forwards; +} + +</style> +</head> +<body> +<svg><rect></rect></svg> + +<script> + +(async function() { + await Promise.all(document.getAnimations().map(animation => animation.finished)); + document.documentElement.classList.remove("reftest-wait"); +})(); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001-ref.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001-ref.html new file mode 100644 index 0000000000..0dd93d3f7b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): Transform and perspective with w negative</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> + +div { + width: 100px; + height: 100px; + transform: rotateY(44deg); + background: fuchsia; + transform-origin: 100px 0; + will-change: transform; +} + +</style> + +<div></div> diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001.html new file mode 100644 index 0000000000..9d330e1573 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): Transform and perspective with w negative</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=696374"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> +<link rel="match" href="rotate-animation-with-will-change-transform-001-ref.html"> + +<!-- + +This is a simplified version of one case within the Blink web test +virtual/threaded-no-composited-antialiasing/animations/composited-animations-rotate-zero-degrees.html +but with will-change: transform added, so that it fails with the bug +that is introduced in the intermediate state of fixing +https://bugs.chromium.org/p/chromium/issues/detail?id=696374 + +--> + +<style> + +@keyframes a { + from { rotate: 0 1 0 44deg; } + to { rotate: 0 1 0 44deg; } +} + +div { + width: 100px; + height: 100px; + animation: a linear 10s infinite; + /* rotate: 0 1 0 44deg; */ + background: fuchsia; + transform-origin: 100px 0; + will-change: transform; +} + +</style> + +<div></div> diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-composition.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-composition.html new file mode 100644 index 0000000000..18b5308ae8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-composition.html @@ -0,0 +1,227 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title> rotate composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> +<meta name="assert" content="rotate supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// Numerical precision may cause an axis aligned rotation to appear slightly +// misaligned. Convert to (x, y, z, angle) form with rounding for comparison. +function parseRotation(args) { + const array = args.split(' '); + if (array.length == 1) { + // Angle or 'none'. + return !!parseFloat(args) ? roundNumbers('0 0 1 ' + args) : args; + } + if (array.length == 2) { + // Axis name + angle + let axis = array[0]; + let angle = array[1]; + switch (array[0]) { + case 'x': + axis = '1 0 0 '; + break; + case 'y': + axis = '0 1 0'; + break; + case 'z': + axis = '0 0 1'; + break; + } + return roundNumbers(axis + ' ' + angle); + } + if (array.length == 4) { + // Axis as [x,y,z] triplet + angle. + // Normalize the axis (if possible) for comparison. + let x = parseFloat(array[0]); + let y = parseFloat(array[1]); + let z = parseFloat(array[2]); + const angle = array[3]; + const length = Math.sqrt(x*x + y*y + z*z); + if (length > 1e-4) { + x /= length; + y /= length; + z /= length; + } + return roundNumbers(`${x} ${y} ${z} ${angle}`); + } + return args; +} + +function compareRotations(actual, expected) { + assert_equals(parseRotation(actual), parseRotation(expected)); +} + +test_composition({ + property: 'rotate', + underlying: '100deg', + addFrom: '10deg', + addTo: '30deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '90deg'}, + {at: 0, expect: '110deg'}, + {at: 0.25, expect: '115deg'}, + {at: 0.75, expect: '125deg'}, + {at: 1, expect: '130deg'}, + {at: 2, expect: '150deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '1 0 0 200deg', + addFrom: '1 0 0 -100deg', + replaceTo: '1 0 0 40deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '1 0 0 160deg'}, + {at: 0, expect: '1 0 0 100deg'}, + {at: 0.25, expect: '1 0 0 85deg'}, + {at: 0.75, expect: '1 0 0 55deg'}, + {at: 1, expect: '1 0 0 40deg'}, + {at: 2, expect: '1 0 0 -20deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '0 1 0 -40deg', + replaceFrom: '0 1 0 50deg', + addTo: '0 1 0 10deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0 1 0 130deg'}, + {at: 0, expect: '0 1 0 50deg'}, + {at: 0.25, expect: '0 1 0 30deg'}, + {at: 0.75, expect: '0 1 0 -10deg'}, + {at: 1, expect: '0 1 0 -30deg'}, + {at: 2, expect: '0 1 0 -110deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '1 2 3 40deg', + addFrom: '2 4 6 10deg', + addTo: '3 6 9 50deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0.27 0.53 0.8 10deg'}, + {at: 0, expect: '0.27 0.53 0.8 50deg'}, + {at: 0.25, expect: '0.27 0.53 0.8 60deg'}, + {at: 0.75, expect: '0.27 0.53 0.8 80deg'}, + {at: 1, expect: '0.27 0.53 0.8 90deg'}, + {at: 2, expect: '0.27 0.53 0.8 130deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '1 2 3 270deg', + addFrom: '1 2 3 90deg', + replaceTo: '0 1 0 100deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0 -1 0 100deg'}, + {at: 0, expect: '0deg'}, + {at: 0.25, expect: 'y 25deg'}, + {at: 0.75, expect: 'y 75deg'}, + {at: 1, expect: 'y 100deg'}, + // Accept both the SLERP and the common axis solution, which are equivalent. + {at: 2, expect: '0 -1 0 160deg', option: 'y 200deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '1 2 3 90deg', + addFrom: '2 4 6 270deg', + replaceTo: '0 1 0 100deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0 -1 0 100deg'}, + {at: 0, expect: '0deg'}, + {at: 0.25, expect: 'y 25deg'}, + {at: 0.75, expect: 'y 75deg'}, + {at: 1, expect: 'y 100deg'}, + // Accept both the SLERP and the common axis solution, which are equivalent. + {at: 2, expect: '0 -1 0 160deg', option: 'y 200deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '1 0 0 0deg', + addFrom: '1 1 0 90deg', + replaceTo: '0 1 1 135deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0.67 -0.06 -0.74 124.97deg'}, + {at: 0, expect: '0.71 0.71 0 90deg'}, + {at: 0.25, expect: '0.54 0.8 0.26 94.83deg'}, + {at: 0.75, expect: '0.17 0.78 0.61 118.68deg'}, + {at: 1, expect: '0 0.71 0.71 135deg'}, + {at: 2, expect: '-0.52 0.29 0.81 208.96deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: 'none', + addFrom: 'none', + replaceTo: '0 1 0 100deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: 'y -100deg'}, + {at: 0, expect: 'y 0deg'}, + {at: 0.25, expect: 'y 25deg'}, + {at: 0.75, expect: 'y 75deg'}, + {at: 1, expect: 'y 100deg'}, + {at: 2, expect: 'y 200deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: 'none', + addFrom: '2 4 6 270deg', + replaceTo: 'none', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0.27 0.53 0.8 540deg'}, + {at: 0, expect: '0.27 0.53 0.8 270deg'}, + {at: 0.25, expect: '0.27 0.53 0.8 202.5deg'}, + {at: 0.75, expect: '0.27 0.53 0.8 67.5deg'}, + {at: 1, expect: '0.27 0.53 0.8 0deg'}, + {at: 2, expect: '0.27 0.53 0.8 -270deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '1 2 3 90deg', + addFrom: 'none', + replaceTo: '0 1 0 100deg', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0.31 -0.22 0.92 131.66deg'}, + {at: 0, expect: '1 2 3 90deg'}, + {at: 0.25, expect: '0.21 0.73 0.64 86.72deg'}, + {at: 0.75, expect: '0.07 0.97 0.21 92.05deg'}, + {at: 1, expect: '0 1 0 100deg'}, + {at: 2, expect: '-0.2 0.79 -0.59 151.11deg'}, +]); + +test_composition({ + property: 'rotate', + underlying: '1 2 3 90deg', + addFrom: '2 4 6 270deg', + replaceTo: 'none', + comparisonFunction: compareRotations +}, [ + {at: -1, expect: '0.27 0.53 0.8 720deg'}, + {at: 0, expect: '0.27 0.53 0.8 360deg'}, + {at: 0.25, expect: '0.27 0.53 0.8 270deg'}, + {at: 0.75, expect: '0.27 0.53 0.8 90deg'}, + {at: 1, expect: '0.27 0.53 0.8 0deg'}, + {at: 2, expect: '0.27 0.53 0.8 -360deg'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-interpolation.html new file mode 100644 index 0000000000..17fb7e499c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-interpolation.html @@ -0,0 +1,250 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>rotate interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> +<meta name="assert" content="rotate supports animation."> +<meta name="timeout" content="long"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> +</head> + +<style> +.parent { + rotate: 90deg; +} + +.target { + width: 40px; + height: 20px; + background-color: grey; + rotate: 10deg; +} + +.expected { + background-color: green; +} +</style> + +<template id="target-template"> +<div class="parent"> + <div class="target">Text</div> +</div> +</template> + +<body> +<script> +test_interpolation({ + property: 'rotate', + from: '100deg', + to: '180deg', +}, [ + {at: -1, expect: '20deg'}, + {at: 0, expect: '100deg'}, + {at: 0.125, expect: '110deg'}, + {at: 0.875, expect: '170deg'}, + {at: 1, expect: '180deg'}, + {at: 2, expect: '260deg'} +]); + +test_interpolation({ + property: 'rotate', + from: '45deg', + to: '-1 1 0 60deg', +}, [ + {at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'}, + {at: 0, expect: '45deg'}, + {at: 0.125, expect: '-0.136456 0.136456 0.981203 40.6037deg'}, + {at: 0.875, expect: '-0.70246 0.70246 0.114452 53.1994deg'}, + {at: 1, expect: '-0.71 0.71 0 60deg'}, + {at: 2, expect: '-0.637897 0.637897 -0.431479 124.975deg'} +]); + +test_interpolation({ + property: 'rotate', + from: 'none', + to: '7 -8 9 400grad', +}, [ + {at: -1, expect: '0.5 -0.57 0.65 -400grad'}, + {at: 0, expect: '0.5 -0.57 0.65 0deg'}, + {at: 0.125, expect: '0.5 -0.57 0.65 50grad'}, + {at: 0.875, expect: '0.5 -0.57 0.65 350grad'}, + {at: 1, expect: '0.5 -0.57 0.65 400grad'}, + {at: 2, expect: '0.5 -0.57 0.65 800grad'} +]); + +test_interpolation({ + property: 'rotate', + from: 'none', + to: 'none', +}, [ + {at: -1, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.125, expect: 'none'}, + {at: 0.875, expect: 'none'}, + {at: 1, expect: 'none'}, + {at: 2, expect: 'none'} +]); + +test_interpolation({ + property: 'rotate', + from: 'none', + to: '30deg', +}, [ + {at: -1, expect: '-30deg'}, + {at: 0, expect: '0deg'}, + {at: 0.25, expect: '7.5deg'}, + {at: 0.75, expect: '22.5deg'}, + {at: 1, expect: '30deg'}, + {at: 2, expect: '60deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: neutralKeyframe, + to: '30deg', +}, [ + {at: -1, expect: '-10deg'}, + {at: 0, expect: '10deg'}, + {at: 0.25, expect: '15deg'}, + {at: 0.75, expect: '25deg'}, + {at: 1, expect: '30deg'}, + {at: 2, expect: '50deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: 'inherit', + to: '270deg', +}, [ + {at: -1, expect: '-90deg'}, + {at: 0, expect: '90deg'}, + {at: 0.25, expect: '135deg'}, + {at: 0.75, expect: '225deg'}, + {at: 1, expect: '270deg'}, + {at: 2, expect: '450deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: 'unset', + to: '30deg', +}, [ + {at: -1, expect: '-30deg'}, + {at: 0, expect: '0deg'}, + {at: 0.25, expect: '7.5deg'}, + {at: 0.75, expect: '22.5deg'}, + {at: 1, expect: '30deg'}, + {at: 2, expect: '60deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: '100deg', + to: '-100deg', +}, [ + {at: -1, expect: '300deg'}, + {at: 0, expect: '100deg'}, + {at: 0.25, expect: '50deg'}, + {at: 0.75, expect: '-50deg'}, + {at: 1, expect: '-100deg'}, + {at: 2, expect: '-300deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: '0 1 0 100deg', + to: '0 1 0 -100deg', +}, [ + {at: -1, expect: '0 1 0 300deg'}, + {at: 0, expect: '0 1 0 100deg'}, + {at: 0.25, expect: '0 1 0 50deg'}, + {at: 0.75, expect: '0 1 0 -50deg'}, + {at: 1, expect: '0 1 0 -100deg'}, + {at: 2, expect: '0 1 0 -300deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: '1 -2.5 3.64 100deg', + to: '1 -2.5 3.64 -100deg', +}, [ + {at: -1, expect: '0.22 -0.55 0.8 300deg'}, + {at: 0, expect: '0.22 -0.55 0.8 100deg'}, + {at: 0.25, expect: '0.22 -0.55 0.8 50deg'}, + {at: 0.75, expect: '0.22 -0.55 0.8 -50deg'}, + {at: 1, expect: '0.22 -0.55 0.8 -100deg'}, + {at: 2, expect: '0.22 -0.55 0.8 -300deg'}, +]); + +// The rotation angle gets interpolated numerically and the rotation vector +// of the non-zero angle is used or (0, 0, 1) if both angles are zero. +// So, we have to convert "1 0 0 0deg" into "0 1 0 0deg", and apply the same +// concept for other test cases. +// https://drafts.csswg.org/css-transforms-2/#interpolation-of-transform-functions +test_interpolation({ + property: 'rotate', + from: '1 0 0 0deg', + to: '0 1 0 10deg', +}, [ + {at: -1, expect: '0 1 0 -10deg'}, + {at: 0, expect: '0 1 0 0deg'}, + {at: 0.25, expect: '0 1 0 2.5deg'}, + {at: 0.75, expect: '0 1 0 7.5deg'}, + {at: 1, expect: '0 1 0 10deg'}, + {at: 2, expect: '0 1 0 20deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: '1 1 0 90deg', + to: '0 1 1 135deg', +}, [ + {at: -1, expect: '0.67 -0.06 -0.74 124.97deg'}, + {at: 0, expect: '0.71 0.71 0 90deg'}, + {at: 0.25, expect: '0.54 0.8 0.26 94.83deg'}, + {at: 0.75, expect: '0.17 0.78 0.61 118.68deg'}, + {at: 1, expect: '0 0.71 0.71 135deg'}, + // The result in Blink is '0.52 -0.29 -0.81 151.04deg', and the result in + // Gecko is `-0.52 0.29 0.8 208.96deg`. Both of them can be represented as the + // same 3d rotation (but by an opposite direction vector and angle). + // The spec only mentions we should use Slerp to do interpolation for rotate + // property, but it seems the implementation detail for extrapolation are + // different (because this is not in the range of [0, 1]). + // For now, we make both results pass because their rendering results are the + // same. + {at: 2, expect: '0.52 -0.29 -0.81 151.04deg', + option: '-0.52 0.29 0.81 208.96deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: '0 1 0 0deg', + to: '1 0 0 450deg', +}, [ + {at: -1, expect: '1 0 0 -450deg'}, + {at: 0, expect: '1 0 0 0deg'}, + {at: 0.25, expect: '1 0 0 112.5deg'}, + {at: 0.75, expect: '1 0 0 337.5deg'}, + {at: 1, expect: '1 0 0 450deg'}, + {at: 2, expect: '1 0 0 900deg'}, +]); + +test_interpolation({ + property: 'rotate', + from: '1 0 0 450deg', + to: '0 1 0 0deg', +}, [ + {at: -1, expect: '1 0 0 900deg'}, + {at: 0, expect: '1 0 0 450deg'}, + {at: 0.25, expect: '1 0 0 337.5deg'}, + {at: 0.75, expect: '1 0 0 112.5deg'}, + {at: 1, expect: '1 0 0 0deg'}, + {at: 2, expect: '1 0 0 -450deg'}, +]); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html new file mode 100644 index 0000000000..e95e62be88 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html @@ -0,0 +1,54 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Reference for rotate transform equivalent</title> +<script src="/common/reftest-wait.js"></script> +<style> + .block { + border: 2px solid white; /* Avoid anti-aliasing artifacts */ + height: 100px; + width: 100px; + position: absolute; + left: 100px; + top: 100px; + } + + .overlay { + background: green; + z-index: 2; + } +</style> +<body> + <div id="transform" class="block overlay"></div> + +<script> + 'use strict'; + + async function waitForNextFrame() { + return new Promise(resolve => { + window.requestAnimationFrame(() => { + resolve(); + }); + }); + } + + async function createAnimation(elementName, keyframes) { + const element = document.getElementById(elementName); + const anim = element.animate(keyframes, 1000); + anim.pause(); + anim.currentTime = 500; + return anim.ready; + } + + onload = async function() { + await waitForNextFrame(); + + await createAnimation('transform', [ + {transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'}, + {transform: 'matrix(0, 1, -1, 0, 0, 0)'}]); + + await waitForNextFrame(); + takeScreenshot(); + }; +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/rotate-transform-equivalent.html b/testing/web-platform/tests/css/css-transforms/animation/rotate-transform-equivalent.html new file mode 100644 index 0000000000..5748d86608 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/rotate-transform-equivalent.html @@ -0,0 +1,74 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Rotate transform equivalent</title> +<link rel="match" href="rotate-transform-equivalent-ref.html"> +<meta name="fuzzy" content="maxDifference=0-46;totalPixels=0-277"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> +<script src="/common/reftest-wait.js"></script> +<style> + .block { + border: 2px solid white; /* Avoid anti-aliasing artifacts */ + height: 100px; + width: 100px; + position: absolute; + left: 100px; + top: 100px; + } + + .rotation { + background: red; + } + + .overlay { + background: green; + } + + #rotateAdd { + rotate: 1 0 0 45deg; + } +</style> +<body> + <div id="rotateAdd" class="block rotation"></div> + <div id="rotateReplace" class="block rotation"></div> + <div id="transform" class="block overlay"></div> + +<script> + 'use strict'; + + async function waitForNextFrame() { + return new Promise(resolve => { + window.requestAnimationFrame(() => { + resolve(); + }); + }); + } + + async function createAnimation(elementName, keyframes) { + const element = document.getElementById(elementName); + const anim = element.animate(keyframes, 1000); + anim.pause(); + anim.currentTime = 500; + return anim.ready; + } + + onload = async function() { + await waitForNextFrame(); + + await createAnimation('rotateAdd', [ + {rotate: '1 0 0 45deg', composite: 'add'}, + {rotate: '0 0 1 90deg'}]); + await createAnimation('rotateReplace', [ + {rotate: '1 0 0 90deg'}, + {rotate: '0 0 1 90deg'}]); + + await createAnimation('transform', [ + {transform: 'matrix3d(1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1)'}, + {transform: 'matrix(0, 1, -1, 0, 0, 0)'}]); + + await waitForNextFrame(); + takeScreenshot(); + }; +</script> +</body> + diff --git a/testing/web-platform/tests/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes-ref.html b/testing/web-platform/tests/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes-ref.html new file mode 100644 index 0000000000..e3cf99f9f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<title>Animating both the "scale" and "rotate" property</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + +<style> + +#target { + position: absolute; + width: 100px; + height: 100px; + background-color: black; + + transform-origin: bottom left; + rotate: 90deg; +} + +</style> +</head> +<body> +<div id="target"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes.html b/testing/web-platform/tests/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes.html new file mode 100644 index 0000000000..708bfa4966 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/scale-and-rotate-both-specified-on-animation-keyframes.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating both the "scale" and "rotate" property</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> +<link rel="match" href="scale-and-rotate-both-specified-on-animation-keyframes-ref.html"> + +<style> + +@keyframes scale-and-rotate-animation { + 0% { scale: 1.5; rotate: 0deg; } + 0.001% { scale: 1; rotate: 90deg; } + 100% { scale: 1; rotate: 90deg; } +} + +#target { + position: absolute; + width: 100px; + height: 100px; + background-color: black; + + transform-origin: bottom left; + animation: scale-and-rotate-animation linear 100s; +} + +</style> +</head> +<body> +<div id="target"></div> + +<script> + +(async function() { + // We need to wait for the animation to have started and progressed for one frame + // before taking the snapshot. + await Promise.all(document.getAnimations().map(animation => animation.ready)); + await new Promise(requestAnimationFrame); + document.documentElement.classList.remove("reftest-wait"); +})(); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/scale-animation-on-svg-ref.html b/testing/web-platform/tests/css/css-transforms/animation/scale-animation-on-svg-ref.html new file mode 100644 index 0000000000..d555a5fbe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/scale-animation-on-svg-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>Animating the "scale" property on an SVG element</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + +<style> + +svg { + width: 400px; + height: 400px; +} + +rect { + width: 100px; + height: 100px; + transform-origin: top left; + scale: 2; +} + +</style> +</head> +<body> +<svg><rect></rect></svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/scale-animation-on-svg.html b/testing/web-platform/tests/css/css-transforms/animation/scale-animation-on-svg.html new file mode 100644 index 0000000000..8862545688 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/scale-animation-on-svg.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating the "scale" property on an SVG element</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> +<link rel="match" href="scale-animation-on-svg-ref.html"> + +<style> + +@keyframes scale-animation { + from { scale: 1; } + to { scale: 2; } +} + +svg { + width: 400px; + height: 400px; +} + +rect { + width: 100px; + height: 100px; + transform-origin: top left; + animation: scale-animation 1ms linear forwards; +} + +</style> +</head> +<body> +<svg><rect></rect></svg> + +<script> + +(async function() { + await Promise.all(document.getAnimations().map(animation => animation.finished)); + document.documentElement.classList.remove("reftest-wait"); +})(); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/scale-composition.html b/testing/web-platform/tests/css/css-transforms/animation/scale-composition.html new file mode 100644 index 0000000000..107aa0b273 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/scale-composition.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>scale composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> +<meta name="assert" content="scale supports animation."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'scale', + underlying: '2 1', + addFrom: '3 1', + addTo: '4 1', +}, [ + {at: -0.5, expect: '5 1'}, + {at: 0, expect: '6 1'}, + {at: 0.25, expect: '6.5 1'}, + {at: 0.5, expect: '7 1'}, + {at: 0.75, expect: '7.5 1'}, + {at: 1, expect: '8 1'}, + {at: 1.5, expect: '9 1'}, +]); + +test_composition({ + property: 'scale', + underlying: '1 2 3', + addFrom: '4 5 6', + replaceTo: '7 8 9', +}, [ + {at: -0.5, expect: '2.5 11 22.5'}, + {at: 0, expect: '4 10 18'}, + {at: 0.25, expect: '4.75 9.5 15.75'}, + {at: 0.5, expect: '5.5 9 13.5'}, + {at: 0.75, expect: '6.25 8.5 11.25'}, + {at: 1, expect: '7 8 9'}, + {at: 1.5, expect: '8.5 7 4.5'}, +]); + +test_composition({ + property: 'scale', + underlying: 'none', + addFrom: 'none', + replaceTo: '1.5 1', +}, [ + {at: -1, expect: '0.5 1'}, + {at: 0, expect: '1'}, + {at: 0.25, expect: '1.125 1'}, + {at: 0.75, expect: '1.375 1'}, + {at: 1, expect: '1.5 1'}, + {at: 2, expect: '2 1'}, +]); + +test_composition({ + property: 'scale', + underlying: 'none', + addFrom: '4 5 6', + replaceTo: 'none', +}, [ + {at: -1, expect: '7 9 11'}, + {at: 0, expect: '4 5 6'}, + {at: 0.25, expect: '3.25 4 4.75'}, + {at: 0.75, expect: '1.75 2 2.25'}, + {at: 1, expect: '1'}, + {at: 2, expect: '-2 -3 -4'}, +]); + +test_composition({ + property: 'scale', + underlying: '1 2 3', + addFrom: 'none', + replaceTo: '7 8 9', +}, [ + {at: -0.5, expect: '-2 -1 0'}, + {at: 0, expect: '1 2 3'}, + {at: 0.25, expect: '2.5 3.5 4.5'}, + {at: 0.5, expect: '4 5 6'}, + {at: 0.75, expect: '5.5 6.5 7.5'}, + {at: 1, expect: '7 8 9'}, + {at: 1.5, expect: '10 11 12'}, +]); + +test_composition({ + property: 'scale', + underlying: '1 2 3', + addFrom: '4 5 6', + replaceTo: 'none', +}, [ + {at: -0.5, expect: '5.5 14.5 26.5'}, + {at: 0, expect: '4 10 18'}, + {at: 0.25, expect: '3.25 7.75 13.75'}, + {at: 0.5, expect: '2.5 5.5 9.5'}, + {at: 0.75, expect: '1.75 3.25 5.25'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '-0.5 -3.5 -7.5'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/scale-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/scale-interpolation.html new file mode 100644 index 0000000000..0e33371955 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/scale-interpolation.html @@ -0,0 +1,242 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>scale interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> + <meta name="assert" content="scale supports animation."> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + <style> + .parent { + scale: 0.5 1 2 + } + .target { + width: 10px; + height: 10px; + background-color: black; + scale: 1.1 1; + } + .expected { + background-color: green; + } + </style> + </head> + <body> + <template id="target-template"> + <div class="parent"> + <div class="target"></div> + </div> + </template> + + <script> + // Matching two <number> version. + test_interpolation({ + property: 'scale', + from: '-10 5', + to: '10 -5', + }, [ + {at: -1, expect: '-30 15'}, + {at: 0, expect: '-10 5'}, + {at: 0.25, expect: '-5 2.5'}, + {at: 0.75, expect: '5 -2.5'}, + {at: 1, expect: '10 -5'}, + {at: 2, expect: '30 -15'}, + ]); + + // Matching three <number> version. + test_interpolation({ + property: 'scale', + from: '2 30 400', + to: '10 110 1200', + }, [ + {at: -1, expect: '-6 -50 -400'}, + {at: 0, expect: '2 30 400'}, + {at: 0.125, expect: '3 40 500'}, + {at: 0.875, expect: '9 100 1100'}, + {at: 1, expect: '10 110 1200'}, + {at: 2, expect: '18 190 2000'} + ]); + + // From three <number> to two <number>; test that it expands correctly. + test_interpolation({ + property: 'scale', + from: '26 17 9', + to: '2 1', + }, [ + {at: -1, expect: '50 33 17'}, + {at: 0, expect: '26 17 9'}, + {at: 0.125, expect: '23 15 8'}, + {at: 0.875, expect: '5 3 2'}, + {at: 1, expect: '2 1'}, + {at: 2, expect: '-22 -15 -7'} + ]); + + // Test one <number> is expanded correctly. + test_interpolation({ + property: 'scale', + from: '1', + to: '10 -5 0', + }, [ + {at: -1, expect: '-8 7 2'}, + {at: 0, expect: '1'}, + {at: 0.25, expect: '3.25 -0.5 0.75'}, + {at: 0.75, expect: '7.75 -3.5 0.25'}, + {at: 1, expect: '10 -5 0'}, + {at: 2, expect: '19 -11 -1'}, + ]); + + test_interpolation({ + property: 'scale', + from: '-10 5 1', + to: '1', + }, [ + {at: -1, expect: '-21 9'}, + {at: 0, expect: '-10 5'}, + {at: 0.25, expect: '-7.25 4'}, + {at: 0.75, expect: '-1.75 2'}, + {at: 1, expect: '1'}, + {at: 2, expect: '12 -3'}, + ]); + + // Handling of the none value. + test_interpolation({ + property: 'scale', + from: 'none', + to: 'none', + }, [ + {at: -1, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.125, expect: 'none'}, + {at: 0.875, expect: 'none'}, + {at: 1, expect: 'none'}, + {at: 2, expect: 'none'} + ]); + + // Going from none to a valid value; test that it converts properly. + test_interpolation({ + property: 'scale', + from: 'none', + to: '4 3 2', + }, [ + {at: -1, expect: '-2 -1 0'}, + {at: 0, expect: '1'}, + {at: 0.125, expect: '1.375 1.25 1.125'}, + {at: 0.875, expect: '3.625 2.75 1.875'}, + {at: 1, expect: '4 3 2'}, + {at: 2, expect: '7 5 3'} + ]); + + // Test neutral keyframe; make sure it adds the underlying. + test_interpolation({ + property: 'scale', + from: neutralKeyframe, + to: '1.5 1', + }, [ + {at: -1, expect: '0.7 1'}, + {at: 0, expect: '1.1 1'}, + {at: 0.25, expect: '1.2 1'}, + {at: 0.75, expect: '1.4 1'}, + {at: 1, expect: '1.5 1'}, + {at: 2, expect: '1.9 1'}, + ]); + + // Test initial value; for 'scale' this is 'none'. + test_interpolation({ + property: 'scale', + from: 'initial', + to: '2 0.5 1', + }, [ + {at: -1, expect: '0 1.5'}, + {at: 0, expect: '1'}, + {at: 0.25, expect: '1.25 0.875'}, + {at: 0.75, expect: '1.75 0.625'}, + {at: 1, expect: '2 0.5'}, + {at: 2, expect: '3 0'}, + ]); + + test_interpolation({ + property: 'scale', + from: '2 0.5 1', + to: 'initial', + }, [ + {at: -1, expect: '3 0'}, + {at: 0, expect: '2 0.5'}, + {at: 0.25, expect: '1.75 0.6251'}, + {at: 0.75, expect: '1.25 0.875'}, + {at: 1, expect: '1'}, + {at: 2, expect: '0 1.5'}, + ]); + + + // Test unset value; for 'scale' this is 'none'. + test_interpolation({ + property: 'scale', + from: 'unset', + to: '1.5 1', + }, [ + {at: -1, expect: '0.5 1'}, + {at: 0, expect: '1'}, + {at: 0.25, expect: '1.125 1'}, + {at: 0.75, expect: '1.375 1'}, + {at: 1, expect: '1.5 1'}, + {at: 2, expect: '2 1'}, + ]); + + // Test inherited value. + test_interpolation({ + property: 'scale', + from: 'inherit', + to: '2 0.5 1', + }, [ + {at: -1, expect: '-1 1.5 3'}, + {at: 0, expect: '0.5 1 2'}, + {at: 0.25, expect: '0.875 0.875 1.75'}, + {at: 0.75, expect: '1.625 0.625 1.25'}, + {at: 1, expect: '2 0.5'}, + {at: 2, expect: '3.5 0 0'}, + ]); + + test_interpolation({ + property: 'scale', + from: '2 0.5 1', + to: 'inherit', + }, [ + {at: -1, expect: '3.5 0 0'}, + {at: 0, expect: '2 0.5'}, + {at: 0.25, expect: '1.625 0.625 1.25'}, + {at: 0.75, expect: '0.875 0.875 1.75'}, + {at: 1, expect: '0.5 1 2'}, + {at: 2, expect: '-1 1.5 3'}, + ]); + + // Test combination of initial and inherit. + test_interpolation({ + property: 'scale', + from: 'initial', + to: 'inherit', + }, [ + {at: -1, expect: '1.5 1 0'}, + {at: 0, expect: '1'}, + {at: 0.25, expect: '0.875 1 1.25'}, + {at: 0.75, expect: '0.625 1 1.75'}, + {at: 1, expect: '0.5 1 2'}, + {at: 2, expect: '0 1 3'}, + ]); + + test_interpolation({ + property: 'scale', + from: 'inherit', + to: 'initial', + }, [ + {at: -1, expect: '0 1 3'}, + {at: 0, expect: '0.5 1 2'}, + {at: 0.25, expect: '0.625 1 1.75'}, + {at: 0.75, expect: '0.875 1 1.25'}, + {at: 1, expect: '1'}, + {at: 2, expect: '1.5 1 0'}, + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js b/testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js new file mode 100644 index 0000000000..d79cbedefe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/support/transform-interpolation-reftests.js @@ -0,0 +1,193 @@ +'use strict'; + +// Each test is an array of [endpoint, midpoint, endpoint] and tests +// whether the endpoints interpolate to the same visual state as the midpoint +const transformTests = { + translate: [ + ['translateX(0px)', 'translateX(25px)', 'translateX(50px)'], + ['translateY(0px)', 'translateY(25px)', 'translateY(50px)'], + ['translateX(0%)', 'translateX(25%)', 'translateX(50%)'], + ['translateY(0%)', 'translateY(25%)', 'translateY(50%)'], + ['translateX(50%)', 'translate(25%, 25%)', 'translateY(50%)'], + ['translateX(50%)', 'translate(25%, 25px)', 'translateY(50px)'], + ['translateX(50px)', 'translateX(calc(25px + 25%))', 'translateX(50%)'] + ], + translateEm: [ + ['translateX(0em)', 'translateX(2em)', 'translateX(4em)'], + ['translateX(-50px)', 'translateX(calc(2em - 25px))', 'translateX(4em)'], + ['translateX(50%)', 'translateX(calc(25% - 2em))', 'translateX(-4em)'] + ], + rotate: [ + // Rotation about named-axis. + ['rotate(30deg)', 'rotate(60deg)', 'rotate(90deg)'], + ['rotateX(30deg)', 'rotateX(60deg)', 'rotateX(90deg)'], + ['rotateY(30deg)', 'rotateY(60deg)', 'rotateY(90deg)'], + ['rotate(30deg)', 'rotate(60deg)', 'rotateZ(90deg)'], + ['rotate(0deg)', 'rotate(180deg)', 'rotate(360deg)'], + // Common axis rotations. + ['rotate3d(7, 8, 9, 0deg)', 'rotate3d(7, 8, 9, 45deg)', 'rotate3d(7, 8, 9, 90deg)'], + ['rotate3d(1, 2, 3, 0deg)', 'rotate3d(3, 6, 9, 45deg)', 'rotate3d(2, 4, 6, 90deg)'], + // Axis is arbitrary if angle is zero. Use non-zero rotation to determine + // the rotation axis. + ['rotateX(0deg)', 'rotate(45deg)', 'rotate(90deg)'], + ['rotateX(90deg)', 'rotateX(45deg)', 'rotate(0deg)'] + ], + rotateSlerp: [ + // First endpoint is the same rotation as rotateZ(0deg) but triggers SLERP + ['rotateX(360deg)', 'rotateZ(45deg)', 'rotateZ(90deg)'], + // Interpolation with inverse. Second case is a common-axis case, but + // included here to group it with its equivalent SLERP test. + ['rotate(45deg)', 'rotate(0deg)', 'rotate3d(0, 0, -1, 45deg)'], + ['rotate(45deg)', 'rotate(0deg)', 'rotate(-45deg)'], + // Interpolate axis and angle of rotation. + // 70.5288deg = acos(1/3). + ['rotateX(90deg)', 'rotate3d(1, 1, 0, 70.5288deg)', 'rotateY(90deg)'], + // Not nice analytical solution for this last one. + // (1, 1, 0, 90deg) --> (x, y, z, w) = (1/2, 1/2, 0, 1/root2) + // (0, 1, 1, 180deg) --> (x, y, z, w) = (0, 1/root2, 1/root2, 0) + // Trace of the "to" transformation matrix is -1. Requires special handling + // to ensure correctness of the quaternion. + // SLERP @0.5: (x, y, z, w) = (0.30389062997686395, + // 0.7336568918027127, + // 0.4297662618258487, + // 0.4297662618258487) + // --> rotate3d(0.3365568, 0.8125199, 0.4759632, 129.094547486deg) + ['rotate3d(1, 1, 0, 90deg)', + 'rotate3d(0.3365568, 0.8125199, 0.4759632, 129.094547486deg)', + 'rotate3d(0, 1, 1, 180deg)'], + ], + scale: [ + ['scaleX(0.5)', 'scaleX(0.75)', 'scaleX(1)'], + ['scaleY(0.5)', 'scaleY(0.75)', 'scaleY(1)'], + ['scale(0.5)', 'scale(0.75)', 'scale(1)'], + ['scaleX(0.5)', 'scale(0.75)', 'scaleY(0.5)'], + ['scale3d(0.5, 1, 2)', 'scale3d(0.75, 0.75, 3)', 'scale3d(1, 0.5, 4)'] + ], + skew: [ + ['skewX(0deg)', 'skewX(30deg)', 'skewX(60deg)'], + ['skewY(0deg)', 'skewY(30deg)', 'skewY(60deg)'], + ['skew(60deg, 0deg)', 'skew(30deg, 30deg)', 'skew(0deg, 60deg)'], + ['skewX(0deg) rotate(0deg)', 'skewX(0deg) rotate(180deg)', 'skewX(0deg) rotate(360deg)'], + ['skewX(0deg) rotate(0deg)', 'matrix(1, 0, 0, 1, 0, 0)', 'skewY(0deg) rotate(360deg)'] + ], + matrix: [ + // matched matrix parameters do not collapse the values after them + ['matrix(1,0,0,1,0,0) rotate(0deg)', 'matrix(1.5,0,0,1.5,0,0) rotate(180deg)', 'matrix(2,0,0,2,0,0) rotate(360deg)'] + ], + perspective: [ + // Since perspective doesn't do anything on its own, we need to + // combine it with a transform that does. + ['perspective(none) translateZ(15px)', 'perspective(none) translateZ(15px)', 'perspective(none) translateZ(15px)'], + ['perspective(100px) translateZ(50px)', 'perspective(200px) translateZ(50px)', 'perspective(none) translateZ(50px)'], + ['perspective(none) translateZ(15px)', 'perspective(50px) translateZ(15px)', 'perspective(25px) translateZ(15px)'], + ['perspective(100px) translateZ(15px)', 'perspective(40px) translateZ(15px)', 'perspective(25px) translateZ(15px)'], + + // Test that perspective is clamped to 1px. + ['perspective(0.1px) translateZ(0.25px)', 'perspective(1px) translateZ(0.25px)', 'perspective(0.1px) translateZ(0.25px)'], + ['perspective(0px) translateZ(0.25px)', 'perspective(1px) translateZ(0.25px)', 'perspective(0px) translateZ(0.25px)'], + ['perspective(0px) translateZ(0.5px)', 'perspective(1.5px) translateZ(0.5px)', 'perspective(3px) translateZ(0.5px)'], + { test: ['perspective(10px) translateZ(0.5px)', 'translateZ(0.5px)', 'perspective(1px) translateZ(0.5px)'], midpoint: -1 }, + { test: ['perspective(1px) translateZ(0.5px)', 'perspective(1px) translateZ(0.5px)', 'perspective(10px) translateZ(0.5px)'], midpoint: -1 } + ] +}; + +// Initial setup, which includes properties that will be overridden to +// test invalidation. +function initialStyle(div) { + div.style.width = '180px'; + div.style.height = '150px'; + div.style.margin = '50px'; + div.style.borderLeft = 'solid 40px blue'; + div.style.backgroundColor = 'green'; + div.style.willChange = 'transform'; + div.style.fontSize = '30px'; +} + +function finalStyle(div) { + div.style.width = '80px'; + div.style.height = '80px'; + div.style.fontSize = '15px'; +} + +function styleBody(){ + let body = document.body; + body.style.display = 'flex'; + body.style.flexDirection = 'row'; + body.style.flexWrap = 'wrap'; +} + +// Simulate a static image at 50% progress with a running animation. +// The easing curve has zero slope and curvature at its midpoint of 50% -> 50%. +// The timing values are chosen so as so that a delay of up to 10s will not +// cause a visual change. +const duration = 1e9; +const midpointOptions = { + easing: 'cubic-bezier(0,1,1,0)', + duration: duration, + delay: -duration/2 +}; + +// Similar to midpointOptions, but to produce the interpolation result +// at -1 instead of the interpolation result at 0.5. This easing curve +// has zero slope at its midpoint of -100% (though does have curvature). +const negoneOptions = { + easing: 'cubic-bezier(0,-1,1,-2)', + duration: duration, + delay: -duration/2 +}; + +// Indices to unpack a test case, which is in the format +// [start, midpoint, end] +const startIndex = 0; +const midIndex = 1; +const endIndex = 2; + +async function createTests(tests) { + styleBody(); + for (const obj of tests) { + let test = ("test" in obj) ? obj.test : obj; + let midpoint = ("midpoint" in obj) ? obj.midpoint : 0.5; + let options; + if (midpoint == 0.5) { + options = midpointOptions; + } else if (midpoint == -1) { + options = negoneOptions; + } else { + document.appendChild(document.createTextNode("unexpected midpoint " + midpoint)); + } + let div = document.createElement('div'); + document.body.appendChild(div); + initialStyle(div); + var anim = + div.animate({transform: [test[startIndex], test[endIndex]]}, options); + await anim.ready; + finalStyle(div); // Change size to test invalidation. + } + + await new Promise(requestAnimationFrame); + await new Promise(requestAnimationFrame); + takeScreenshot(); +} + +// Create references using an animation with identical keyframes for start +// and end so as to avoid rounding and anti-aliasing differences between +// animated and non-animated pathways. +async function createRefs(tests) { + styleBody(); + for (const obj of tests) { + let test = ("test" in obj) ? obj.test : obj; + let div = document.createElement('div'); + document.body.appendChild(div); + initialStyle(div); + finalStyle(div); + var anim = div.animate( + {transform: [test[midIndex], test[midIndex]]}, + midpointOptions); + await anim.ready; + } + + await new Promise(requestAnimationFrame); + await new Promise(requestAnimationFrame); + takeScreenshot(); +} + diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-composition.html new file mode 100644 index 0000000000..928da71a9b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-composition.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<meta name="assert" content="transform supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// This file contains tests for the composition behavior of transforms that is +// unrelated to the individual transform functions. For the transform functions +// themselves, see the transform-*-composition.html subtests. + +// ------------------ Addition ----------------- +test_composition({ + property: 'transform', + underlying: 'rotateX(100deg) rotateY(100deg)', + addFrom: 'translate(10px, 20px)', + replaceTo: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)', +}, [ + {at: -0.5, expect: 'rotateX(50deg) rotateY(50deg) translate(-40px, -80px)'}, + {at: 0, expect: 'rotateX(100deg) rotateY(100deg) translate(10px, 20px)'}, + {at: 0.25, expect: 'rotateX(125deg) rotateY(125deg) translate(35px, 70px)'}, + {at: 0.5, expect: 'rotateX(150deg) rotateY(150deg) translate(60px, 120px)'}, + {at: 0.75, expect: 'rotateX(175deg) rotateY(175deg) translate(85px, 170px)'}, + {at: 1, expect: 'rotateX(200deg) rotateY(200deg) translate(110px, 220px)'}, + {at: 1.5, expect: 'rotateX(250deg) rotateY(250deg) translate(160px, 320px)'}, +]); + +// Shorter list is extended with corresponding identity transforms for pairwise +// interpolation. +test_composition({ + property: 'transform', + underlying: 'rotateX(45deg)', + addFrom: 'none', + addTo: 'rotateY(360deg)', +}, [ + {at: -0.5, expect: 'rotateX(45deg) rotateY(-180deg)'}, + {at: 0, expect: 'rotateX(45deg) rotateY(0deg)'}, + {at: 0.25, expect: 'rotateX(45deg) rotateY(90deg)'}, + {at: 0.5, expect: 'rotateX(45deg) rotateY(180deg)'}, + {at: 0.75, expect: 'rotateX(45deg) rotateY(270deg)'}, + {at: 1, expect: 'rotateX(45deg) rotateY(360deg)'}, + {at: 1.5, expect: 'rotateX(45deg) rotateY(540deg)'}, +]); + +// Matrix decomposition cases +test_composition({ + property: 'transform', + underlying: 'rotateX(90deg)', + addFrom: 'translate(100px, 100px)', + addTo: 'scale(2)', +}, [ + {at: -0.5, expect: 'matrix3d(0.5, 0, 0, 0, 0, 1.11022e-16, 0.5, 0, 0, -1, 2.22045e-16, 0, 150, 9.18485e-15, 150, 1)'}, + {at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 6.12323e-17, 1, 0, 0, -1, 6.12323e-17, 0, 100, 6.12323e-15, 100, 1)'}, + {at: 0.25, expect: 'matrix3d(1.25, 0, 0, 0, 0, 2.77556e-16, 1.25, 0, 0, -1, 2.22045e-16, 0, 75, 4.59243e-15, 75, 1)'}, + {at: 0.5, expect: 'matrix3d(1.5, 0, 0, 0, 0, 3.33067e-16, 1.5, 0, 0, -1, 2.22045e-16, 0, 50, 3.06162e-15, 50, 1)'}, + {at: 0.75, expect: 'matrix3d(1.75, 0, 0, 0, 0, 3.88578e-16, 1.75, 0, 0, -1, 2.22045e-16, 0, 25, 1.53081e-15, 25, 1)'}, + {at: 1, expect: 'matrix3d(2, 0, 0, 0, 0, 1.22465e-16, 2, 0, 0, -1, 6.12323e-17, 0, 0, 0, 0, 1)'}, + {at: 1.5, expect: 'matrix3d(2.5, 0, 0, 0, 0, 5.55112e-16, 2.5, 0, 0, -1, 2.22045e-16, 0, -50, -3.06162e-15, -50, 1)'}, +]); + +// Force a fallback to matrix interpolation. +test_composition({ + property: 'transform', + underlying: 'rotateX(45deg)', + addFrom: 'scaleX(1)', + addTo: 'rotateY(360deg)', +}, [ + {at: -0.5, expect: 'rotateX(45deg)'}, + {at: 0, expect: 'rotateX(45deg)'}, + {at: 0.25, expect: 'rotateX(45deg)'}, + {at: 0.5, expect: 'rotateX(45deg)'}, + {at: 0.75, expect: 'rotateX(45deg)'}, + {at: 1, expect: 'rotateX(45deg)'}, + {at: 1.5, expect: 'rotateX(45deg)'}, +]); + +// ------------------ Accumulation ----------------- + +// TODO(smcgruer): Add tests for accumulation behaviors. +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-001.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-001.html new file mode 100644 index 0000000000..94bb87c6e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-001.html @@ -0,0 +1,325 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<meta name="assert" content="transform supports animation as a transform list"> +<meta name="timeout" content="long"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + color: white; + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + overflow: hidden; +} +.expected { + background-color: green; +} +.target > div { + width: 10px; + height: 10px; + display: inline-block; + background: orange; + margin: 1px; +} +.test { + overflow: hidden; +} +</style> + +<body> + <template id="target-template"> + <div></div> + </template> +</body> + +<script> + +// The default comparison function calls normalizeValue, which rounds +// everything to two decimal places, which isn't OK for the matrices +// that result from large perspective values. +const compareWithPerspective = (actual, expected) => { + // TODO: This RegExp should be more precise to capture only what is a + // valid float, and this code should be merged with other code doing + // the same thing, e.g., RoundMatrix in + // web-animations/animation-model/animation-types/property-list.js . + const matrixRegExp = /^matrix3d\(((?:(?:[-0-9.e]+), ){15}(?:[-0-9.]+))\)$/; + const actualMatch = actual.match(matrixRegExp); + const expectedMatch = expected.match(matrixRegExp); + assert_not_equals(actualMatch, null, `${actual} should be a matrix`); + assert_not_equals(expectedMatch, null, `${expected} should be a matrix`); + if (actualMatch === null || expectedMatch === null) { + return; + } + const actualArray = actualMatch[1].split(", ").map(Number); + const expectedArray = expectedMatch[1].split(", ").map(Number); + assert_equals(actualArray.length, 16); + assert_equals(expectedArray.length, 16); + + if (actualArray.length != expectedArray.length) { + return; + } + + for (let i in actualArray) { + const error = Math.abs((actualArray[i] - expectedArray[i])) / + Math.max(1e-6, + Math.min(Math.abs(expectedArray[i]), + Math.abs(actualArray[i]))); + assert_less_than(error, 1e-5, `comparing (at index ${i} actual value "${actual}" [${actualArray[i]}] and expected value "${expected}" [${expectedArray[i]}]`); + } +}; + +// The spec at +// https://drafts.csswg.org/css-transforms-2/#interpolation-of-transform-functions +// requires that perspective be interpolated by decomposing the matrix +// (which is trivial for perspective) and then interpolating the pieces. +// The piece that's interpolated (the z part of the perspective array) +// contains the negative reciprocal of the argument to perspective(). +const interpolatePerspective = (from, to, progress) => { + return 1.0/((1.0 - progress) * (1.0/from) + progress * (1.0/to)); +}; + +// Perspective +test_interpolation({ + property: 'transform', + from: 'perspective(400px)', + to: 'perspective(500px)', + comparisonFunction: compareWithPerspective +}, [ + {at: -1, expect: `perspective(${interpolatePerspective(400, 500, -1)}px)`}, + {at: 0, expect: `perspective(${interpolatePerspective(400, 500, 0)}px)`}, + {at: 0.25, expect: `perspective(${interpolatePerspective(400, 500, 0.25)}px)`}, + {at: 0.75, expect: `perspective(${interpolatePerspective(400, 500, 0.75)}px)`}, + {at: 1, expect: `perspective(${interpolatePerspective(400, 500, 1)}px)`}, + {at: 2, expect: `perspective(${interpolatePerspective(400, 500, 2)}px)`}, +]); +test_interpolation({ + property: 'transform', + from: 'skewX(10rad) perspective(400px)', + to: 'skewX(20rad) perspective(500px)', + comparisonFunction: compareWithPerspective +}, [ + {at: -1, expect: `skewX(0rad) perspective(${interpolatePerspective(400, 500, -1)}px)`}, + {at: 0, expect: `skewX(10rad) perspective(${interpolatePerspective(400, 500, 0)}px)`}, + {at: 0.25, expect: `skewX(12.5rad) perspective(${interpolatePerspective(400, 500, 0.25)}px)`}, + {at: 0.75, expect: `skewX(17.5rad) perspective(${interpolatePerspective(400, 500, 0.75)}px)`}, + {at: 1, expect: `skewX(20rad) perspective(${interpolatePerspective(400, 500, 1)}px)`}, + {at: 2, expect: `skewX(30rad) perspective(${interpolatePerspective(400, 500, 2)}px)`}, +]); +test_interpolation({ + property: 'transform', + from: 'scaleZ(1) perspective(400px)', + to: 'scaleZ(2) perspective(500px)', + comparisonFunction: compareWithPerspective +}, [ + {at: -1, expect: `scaleZ(0) perspective(${interpolatePerspective(400, 500, -1)}px)`}, + {at: 0, expect: `scaleZ(1.0) perspective(${interpolatePerspective(400, 500, 0)}px)`}, + {at: 0.25, expect: `scaleZ(1.25) perspective(${interpolatePerspective(400, 500, 0.25)}px)`}, + {at: 0.75, expect: `scaleZ(1.75) perspective(${interpolatePerspective(400, 500, 0.75)}px)`}, + {at: 1, expect: `scaleZ(2) perspective(${interpolatePerspective(400, 500, 1)}px)`}, + {at: 2, expect: `scaleZ(3) perspective(${interpolatePerspective(400, 500, 2)}px)`}, +]); +// Test that the transform identity function for perspective is perspective(none) +test_interpolation({ + property: 'transform', + from: 'scaleZ(2)', + to: 'scaleZ(2) perspective(500px)', + comparisonFunction: compareWithPerspective +}, [ + {at: -1, expect: `scaleZ(2)`}, + {at: 0, expect: `scaleZ(2)`}, + {at: 0.5, expect: `scaleZ(2) perspective(1000px)`}, + {at: 1, expect: `scaleZ(2) perspective(500px)`}, + {at: 2, expect: `scaleZ(2) perspective(250px)`}, +]); +test_interpolation({ + property: 'transform', + from: 'perspective(none)', + to: 'perspective(500px)', +}, [ + {at: -1, expect: `perspective(none)`}, + {at: 0, expect: `perspective(none)`}, + {at: 0.5, expect: `perspective(1000px)`}, + {at: 1, expect: `perspective(500px)`}, + {at: 2, expect: `perspective(250px)`}, +]); + +// Rotate +test_interpolation({ + property: 'transform', + from: 'rotate(30deg)', + to: 'rotate(330deg)' +}, [ + {at: -1, expect: 'rotate(-270deg)'}, + {at: 0, expect: 'rotate(30deg)'}, + {at: 0.25, expect: 'rotate(105deg)'}, + {at: 0.75, expect: 'rotate(255deg)'}, + {at: 1, expect: 'rotate(330deg)'}, + {at: 2, expect: 'rotate(630deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotateX(0deg)', + to: 'rotateX(700deg)' +}, [ + {at: -1, expect: 'rotateX(-700deg)'}, + {at: 0, expect: 'rotateX(0deg)'}, + {at: 0.25, expect: 'rotateX(175deg)'}, + {at: 0.75, expect: 'rotateX(525deg)'}, + {at: 1, expect: 'rotateX(700deg)'}, + {at: 2, expect: 'rotateX(1400deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotateY(0deg)', + to: 'rotateY(800deg)' +}, [ + {at: -1, expect: 'rotateY(-800deg)'}, + {at: 0, expect: 'rotateY(0deg)'}, + {at: 0.25, expect: 'rotateY(200deg)'}, + {at: 0.75, expect: 'rotateY(600deg)'}, + {at: 1, expect: 'rotateY(800deg)'}, + {at: 2, expect: 'rotateY(1600deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotateZ(0deg)', + to: 'rotateZ(900deg)' +}, [ + {at: -1, expect: 'rotateZ(-900deg)'}, + {at: 0, expect: 'rotateZ(0deg)'}, + {at: 0.25, expect: 'rotateZ(225deg)'}, + {at: 0.75, expect: 'rotateZ(675deg)'}, + {at: 1, expect: 'rotateZ(900deg)'}, + {at: 2, expect: 'rotateZ(1800deg)'}, +]); +// Interpolation is about a common axis if either endpoint has a rotation angle +// of zero. +test_interpolation({ + property: 'transform', + from: 'rotateX(0deg)', + to: 'rotateY(900deg)' +}, [ + {at: -1, expect: 'rotateY(-900deg)'}, + {at: 0, expect: 'rotateY(0deg)'}, + {at: 0.25, expect: 'rotateY(225deg)'}, + {at: 0.75, expect: 'rotateY(675deg)'}, + {at: 1, expect: 'rotateY(900deg)'}, + {at: 2, expect: 'rotateY(1800deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotateY(900deg)', + to: 'rotateZ(0deg)' +}, [ + {at: -1, expect: 'rotateY(1800deg)'}, + {at: 0, expect: 'rotateY(900deg)'}, + {at: 0.25, expect: 'rotateY(675deg)'}, + {at: 0.75, expect: 'rotateY(225deg)'}, + {at: 1, expect: 'rotateY(0deg)'}, + {at: 2, expect: 'rotateY(-900deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotate3d(7, 8, 9, 100deg)', + to: 'rotate3d(7, 8, 9, 260deg)' +}, [ + {at: -1, expect: 'rotate3d(7, 8, 9, -60deg)'}, + {at: 0, expect: 'rotate3d(7, 8, 9, 100deg)'}, + {at: 0.25, expect: 'rotate3d(7, 8, 9, 140deg)'}, + {at: 0.75, expect: 'rotate3d(7, 8, 9, 220deg)'}, + {at: 1, expect: 'rotate3d(7, 8, 9, 260deg)'}, + {at: 2, expect: 'rotate3d(7, 8, 9, 420deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotate3d(7, 8, 9, 0deg)', + to: 'rotate3d(7, 8, 9, 450deg)' +}, [ + {at: -1, expect: 'rotate3d(7, 8, 9, -450deg)'}, + {at: 0, expect: 'rotate3d(7, 8, 9, 0deg)'}, + {at: 0.25, expect: 'rotate3d(7, 8, 9, 112.5deg)'}, + {at: 0.75, expect: 'rotate3d(7, 8, 9, 337.5deg)'}, + {at: 1, expect: 'rotate3d(7, 8, 9, 450deg)'}, + {at: 2, expect: 'rotate3d(7, 8, 9, 900deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotate3d(0, 1, 0, 0deg)', + to: 'rotate3d(0, 1, 0, 450deg)' +}, [ + {at: -1, expect: 'rotate3d(0, 1, 0, -450deg)'}, + {at: 0, expect: 'rotate3d(0, 1, 0, 0deg)'}, + {at: 0.25, expect: 'rotate3d(0, 1, 0, 112.5deg)'}, + {at: 0.75, expect: 'rotate3d(0, 1, 0, 337.5deg)'}, + {at: 1, expect: 'rotate3d(0, 1, 0, 450deg)'}, + {at: 2, expect: 'rotate3d(0, 1, 0, 900deg)'}, +]); +// Rotation is about a common axis if the axes are colinear. +test_interpolation({ + property: 'transform', + from: 'rotate3d(0, 1, 0, 0deg)', + to: 'rotate3d(0, 2, 0, 450deg)' +}, [ + {at: -1, expect: 'rotate3d(0, 1, 0, -450deg)'}, + {at: 0, expect: 'rotate3d(0, 1, 0, 0deg)'}, + {at: 0.25, expect: 'rotate3d(0, 1, 0, 112.5deg)'}, + {at: 0.75, expect: 'rotate3d(0, 1, 0, 337.5deg)'}, + {at: 1, expect: 'rotate3d(0, 1, 0, 450deg)'}, + {at: 2, expect: 'rotate3d(0, 1, 0, 900deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotate3d(1, 1, 0, 90deg)', + to: 'rotate3d(0, 1, 1, 180deg)' +}, [ + {at: -1, expect: 'rotate3d(0.41, -0.41, -0.82, 120deg)'}, + {at: 0, expect: 'rotate3d(1, 1, 0, 90deg)'}, + {at: 0.25, expect: 'rotate3d(0.524083, 0.804261, 0.280178, 106.91deg)'}, + {at: 0.75, expect: 'rotate3d(0.163027, 0.774382, 0.611354, 153.99deg)'}, + {at: 1, expect: 'rotate3d(0, 1, 1, 180deg)'}, + {at: 2, expect: 'rotate3d(0.71, 0, -0.71, 90deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'none', + to: 'rotate(90deg)' +}, [ + {at: -1, expect: 'rotate(-90deg)'}, + {at: 0, expect: 'rotate(0deg)'}, + {at: 0.25, expect: 'rotate(22.5deg)'}, + {at: 0.75, expect: 'rotate(67.5deg)'}, + {at: 1, expect: 'rotate(90deg)'}, + {at: 2, expect: 'rotate(180deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotate(90deg)', + to: 'none' +}, [ + {at: -1, expect: 'rotate(180deg)'}, + {at: 0, expect: 'rotate(90deg)'}, + {at: 0.25, expect: 'rotate(67.5deg)'}, + {at: 0.75, expect: 'rotate(22.5deg)'}, + {at: 1, expect: 'rotate(0deg)'}, + {at: 2, expect: 'rotate(-90deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)', + to: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)' +}, [ + {at: -1, expect: 'rotateX(-700deg) rotateY(-800deg) rotateZ(-900deg)'}, + {at: 0, expect: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg)'}, + {at: 0.25, expect: 'rotateX(175deg) rotateY(200deg) rotateZ(225deg)'}, + {at: 0.75, expect: 'rotateX(525deg) rotateY(600deg) rotateZ(675deg)'}, + {at: 1, expect: 'rotateX(700deg) rotateY(800deg) rotateZ(900deg)'}, + {at: 2, expect: 'rotateX(1400deg) rotateY(1600deg) rotateZ(1800deg)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-002.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-002.html new file mode 100644 index 0000000000..fec0de1f53 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-002.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<meta name="assert" content="transform supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + color: white; + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + overflow: hidden; +} +.expected { + background-color: green; +} +.target > div { + width: 10px; + height: 10px; + display: inline-block; + background: orange; + margin: 1px; +} +.test { + overflow: hidden; +} +</style> + +<body> + <template id="target-template"> + <div></div> + </template> +</body> + +<script> +// Scale +test_interpolation({ + property: 'transform', + from: 'scale(10, 5)', + to: 'scale(20, 9)' +}, [ + {at: -1, expect: 'scale(0, 1)'}, + {at: 0, expect: 'scale(10, 5)'}, + {at: 0.25, expect: 'scale(12.5, 6)'}, + {at: 0.75, expect: 'scale(17.5, 8)'}, + {at: 1, expect: 'scale(20, 9)'}, + {at: 2, expect: 'scale(30, 13)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scaleX(10)', + to: 'scaleX(20)' +}, [ + {at: -1, expect: 'scaleX(0)'}, + {at: 0, expect: 'scaleX(10)'}, + {at: 0.25, expect: 'scaleX(12.5)'}, + {at: 0.75, expect: 'scaleX(17.5)'}, + {at: 1, expect: 'scaleX(20)'}, + {at: 2, expect: 'scaleX(30)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scaleY(5)', + to: 'scaleY(9)' +}, [ + {at: -1, expect: 'scaleY(1)'}, + {at: 0, expect: 'scaleY(5)'}, + {at: 0.25, expect: 'scaleY(6)'}, + {at: 0.75, expect: 'scaleY(8)'}, + {at: 1, expect: 'scaleY(9)'}, + {at: 2, expect: 'scaleY(13)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scaleZ(1)', + to: 'scaleZ(2)' +}, [ + {at: -1, expect: 'scaleZ(0)'}, + {at: 0, expect: 'scaleZ(1)'}, + {at: 0.25, expect: 'scaleZ(1.25)'}, + {at: 0.75, expect: 'scaleZ(1.75)'}, + {at: 1, expect: 'scaleZ(2)'}, + {at: 2, expect: 'scaleZ(3)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scale3d(10, 0.5, 1)', + to: 'scale3d(20, 1, 2)' +}, [ + {at: -1, expect: 'scale3d(0, 0, 0)'}, + {at: 0, expect: 'scale3d(10, 0.5, 1)'}, + {at: 0.25, expect: 'scale3d(12.5, 0.625, 1.25)'}, + {at: 0.75, expect: 'scale3d(17.5, 0.875, 1.75)'}, + {at: 1, expect: 'scale3d(20, 1, 2)'}, + {at: 2, expect: 'scale3d(30, 1.5, 3)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scaleX(0)', + to: 'scaleY(0)', +}, [ + {at: -1, expect: 'scale(-1, 2)'}, + {at: 0, expect: 'scale(0, 1)'}, + {at: 0.25, expect: 'scale(0.25, 0.75)'}, + {at: 0.75, expect: 'scale(0.75, 0.25)'}, + {at: 1, expect: 'scale(1, 0)'}, + {at: 2, expect: 'scale(2, -1)'}, +]); +test_interpolation({ + property: 'transform', + from: 'none', + to: 'scale3d(2, 3, 5)' +}, [ + {at: -1, expect: 'scale3d(0, -1, -3)'}, + {at: 0, expect: 'scale3d(1, 1, 1)'}, + {at: 0.25, expect: 'scale3d(1.25, 1.5, 2)'}, + {at: 0.75, expect: 'scale3d(1.75, 2.5, 4)'}, + {at: 1, expect: 'scale3d(2, 3, 5)'}, + {at: 2, expect: 'scale3d(3, 5, 9)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scale3d(2, 3, 5)', + to: 'none' +}, [ + {at: -1, expect: 'scale3d(3, 5, 9)'}, + {at: 0, expect: 'scale3d(2, 3, 5)'}, + {at: 0.25, expect: 'scale3d(1.75, 2.5, 4)'}, + {at: 0.75, expect: 'scale3d(1.25, 1.5, 2)'}, + {at: 1, expect: 'scale3d(1, 1, 1)'}, + {at: 2, expect: 'scale3d(0, -1, -3)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scaleX(10) scaleY(0.5) scaleZ(1)', + to: 'scaleX(20) scaleY(1) scaleZ(2)' +}, [ + {at: -1, expect: 'scaleX(0) scaleY(0) scaleZ(0)'}, + {at: 0, expect: 'scaleX(10) scaleY(0.5) scaleZ(1)'}, + {at: 0.25, expect: 'scaleX(12.5) scaleY(0.625) scaleZ(1.25)'}, + {at: 0.75, expect: 'scaleX(17.5) scaleY(0.875) scaleZ(1.75)'}, + {at: 1, expect: 'scaleX(20) scaleY(1) scaleZ(2)'}, + {at: 2, expect: 'scaleX(30) scaleY(1.5) scaleZ(3)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-003.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-003.html new file mode 100644 index 0000000000..4386bdbfa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-003.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<meta name="assert" content="transform supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + color: white; + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + overflow: hidden; +} +.expected { + background-color: green; +} +.target > div { + width: 10px; + height: 10px; + display: inline-block; + background: orange; + margin: 1px; +} +.test { + overflow: hidden; +} +</style> + +<body> +<template id="target-template"> +<div></div> +</template> +</body> + +<script> +test_interpolation({ + property: 'transform', + from: 'skewX(10rad) scaleZ(1)', + to: 'skewX(20rad) scaleZ(2)' +}, [ + {at: -1, expect: 'skewX(0rad) scaleZ(0)'}, + {at: 0, expect: 'skewX(10rad) scaleZ(1)'}, + {at: 0.25, expect: 'skewX(12.5rad) scaleZ(1.25)'}, + {at: 0.75, expect: 'skewX(17.5rad) scaleZ(1.75)'}, + {at: 1, expect: 'skewX(20rad) scaleZ(2)'}, + {at: 2, expect: 'skewX(30rad) scaleZ(3)'}, +]); +test_interpolation({ + property: 'transform', + from: 'skewX(10rad)', + to: 'skewX(20rad) scaleZ(2)' +}, [ + {at: -1, expect: 'skewX(0rad) scaleZ(0)'}, + {at: 0, expect: 'skewX(10rad) scaleZ(1)'}, + {at: 0.25, expect: 'skewX(12.5rad) scaleZ(1.25)'}, + {at: 0.75, expect: 'skewX(17.5rad) scaleZ(1.75)'}, + {at: 1, expect: 'skewX(20rad) scaleZ(2)'}, + {at: 2, expect: 'skewX(30rad) scaleZ(3)'}, +]); +test_interpolation({ + property: 'transform', + from: 'scaleZ(3) perspective(400px)', + to: 'scaleZ(4) skewX(1rad) perspective(500px)' +}, [ + {at: -1, expect: 'scaleZ(2) matrix3d(1, 0, 0, 0, -1.55741, 1, 0, 0, 0, 0, 1, -0.003, 0, 0, 0, 1)'}, + {at: 0, expect: 'scaleZ(3) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'}, + {at: 0.25, expect: 'scaleZ(3.25) matrix3d(1, 0, 0, 0, 0.389352, 1, 0, 0, 0, 0, 1, -0.002375, 0, 0, 0, 1)'}, + {at: 0.75, expect: 'scaleZ(3.75) matrix3d(1, 0, 0, 0, 1.16806, 1, 0, 0, 0, 0, 1, -0.002125, 0, 0, 0, 1)'}, + {at: 1, expect: 'scaleZ(4) matrix3d(1, 0, 0, 0, 1.55741, 1, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'}, + {at: 2, expect: 'scaleZ(5) matrix3d(1, 0, 0, 0, 3.11482, 1, 0, 0, 0, 0, 1, -0.0015, 0, 0, 0, 1)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translateY(70%) scaleZ(1)', + to: 'translateY(90%) scaleZ(2)' +}, [ + {at: -1, expect: 'translateY(50%) scaleZ(0)'}, + {at: 0, expect: 'translateY(70%) scaleZ(1)'}, + {at: 0.25, expect: 'translateY(75%) scaleZ(1.25)'}, + {at: 0.75, expect: 'translateY(85%) scaleZ(1.75)'}, + {at: 1, expect: 'translateY(90%) scaleZ(2)'}, + {at: 2, expect: 'translateY(110%) scaleZ(3)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translateY(70%)', + to: 'translateY(90%) scaleZ(2)' +}, [ + {at: -1, expect: 'translateY(50%) scaleZ(0)'}, + {at: 0, expect: 'translateY(70%)'}, + {at: 0.25, expect: 'translateY(75%) scaleZ(1.25)'}, + {at: 0.75, expect: 'translateY(85%) scaleZ(1.75)'}, + {at: 1, expect: 'translateY(90%) scaleZ(2)'}, + {at: 2, expect: 'translateY(110%) scaleZ(3)'}, +]); + +// Skew +test_interpolation({ + property: 'transform', + from: 'skewX(10rad)', + to: 'skewX(20rad)' +}, [ + {at: -1, expect: 'skewX(0rad)'}, + {at: 0, expect: 'skewX(10rad)'}, + {at: 0.25, expect: 'skewX(12.5rad)'}, + {at: 0.75, expect: 'skewX(17.5rad)'}, + {at: 1, expect: 'skewX(20rad)'}, + {at: 2, expect: 'skewX(30rad)'}, +]); +test_interpolation({ + property: 'transform', + from: 'skewY(10rad)', + to: 'skewY(20rad)' +}, [ + {at: -1, expect: 'skewY(0rad)'}, + {at: 0, expect: 'skewY(10rad)'}, + {at: 0.25, expect: 'skewY(12.5rad)'}, + {at: 0.75, expect: 'skewY(17.5rad)'}, + {at: 1, expect: 'skewY(20rad)'}, + {at: 2, expect: 'skewY(30rad)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-004.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-004.html new file mode 100644 index 0000000000..a6b3c75c62 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-004.html @@ -0,0 +1,187 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<meta name="assert" content="transform supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + color: white; + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + overflow: hidden; +} +.expected { + background-color: green; +} +.target > div { + width: 10px; + height: 10px; + display: inline-block; + background: orange; + margin: 1px; +} +.test { + overflow: hidden; +} +</style> + +<body> + <template id="target-template"> + <div></div> + </template> +</body> + +<script> +// Translate +test_interpolation({ + property: 'transform', + from: 'translate(12px, 70%)', + to: 'translate(13px, 90%)' +}, [ + {at: -1, expect: 'translate(11px, 50%)'}, + {at: 0, expect: 'translate(12px, 70%)'}, + {at: 0.25, expect: 'translate(12.25px, 75%)'}, + {at: 0.75, expect: 'translate(12.75px, 85%)'}, + {at: 1, expect: 'translate(13px, 90%)'}, + {at: 2, expect: 'translate(14px, 110%)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translateX(12px)', + to: 'translateX(13px)' +}, [ + {at: -1, expect: 'translateX(11px)'}, + {at: 0, expect: 'translateX(12px)'}, + {at: 0.25, expect: 'translateX(12.25px)'}, + {at: 0.75, expect: 'translateX(12.75px)'}, + {at: 1, expect: 'translateX(13px)'}, + {at: 2, expect: 'translateX(14px)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translateY(70%)', + to: 'translateY(90%)' +}, [ + {at: -1, expect: 'translateY(50%)'}, + {at: 0, expect: 'translateY(70%)'}, + {at: 0.25, expect: 'translateY(75%)'}, + {at: 0.75, expect: 'translateY(85%)'}, + {at: 1, expect: 'translateY(90%)'}, + {at: 2, expect: 'translateY(110%)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translateZ(2em)', + to: 'translateZ(3em)' +}, [ + {at: -1, expect: 'translateZ(1em)'}, + {at: 0, expect: 'translateZ(2em)'}, + {at: 0.25, expect: 'translateZ(2.25em)'}, + {at: 0.75, expect: 'translateZ(2.75em)'}, + {at: 1, expect: 'translateZ(3em)'}, + {at: 2, expect: 'translateZ(4em)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translate3d(12px, 70%, 2em)', + to: 'translate3d(13px, 90%, 3em)' +}, [ + {at: -1, expect: 'translate3d(11px, 50%, 1em)'}, + {at: 0, expect: 'translate3d(12px, 70%, 2em)'}, + {at: 0.25, expect: 'translate3d(12.25px, 75%, 2.25em)'}, + {at: 0.75, expect: 'translate3d(12.75px, 85%, 2.75em)'}, + {at: 1, expect: 'translate3d(13px, 90%, 3em)'}, + {at: 2, expect: 'translate3d(14px, 110%, 4em)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translateX(12px) translateY(70%) translateZ(2em)', + to: 'translateX(13px) translateY(90%) translateZ(3em)' +}, [ + {at: -1, expect: 'translateX(11px) translateY(50%) translateZ(1em)'}, + {at: 0, expect: 'translateX(12px) translateY(70%) translateZ(2em)'}, + {at: 0.25, expect: 'translateX(12.25px) translateY(75%) translateZ(2.25em)'}, + {at: 0.75, expect: 'translateX(12.75px) translateY(85%) translateZ(2.75em)'}, + {at: 1, expect: 'translateX(13px) translateY(90%) translateZ(3em)'}, + {at: 2, expect: 'translateX(14px) translateY(110%) translateZ(4em)'}, +]); +test_interpolation({ + property: 'transform', + from: 'skewX(10rad) translateY(70%)', + to: 'skewX(20rad) translateY(90%)' +}, [ + {at: -1, expect: 'skewX(0rad) translateY(50%)'}, + {at: 0, expect: 'skewX(10rad) translateY(70%)'}, + {at: 0.25, expect: 'skewX(12.5rad) translateY(75%)'}, + {at: 0.75, expect: 'skewX(17.5rad) translateY(85%)'}, + {at: 1, expect: 'skewX(20rad) translateY(90%)'}, + {at: 2, expect: 'skewX(30rad) translateY(110%)'}, +]); +test_interpolation({ + property: 'transform', + from: 'skewX(1rad)', + to: 'translate3d(8px, -4px, 12px) skewX(2rad)' +}, [ + {at: -1, expect: 'matrix3d(1, 0, 0, 0, 5.2998553125713235, 1, 0, 0, 0, 0, 1, 0, -8, 4, -12, 1)'}, + {at: 0, expect: 'matrix(1, 0, 1.5574077246549023, 1, 0, 0)'}, + {at: 0.25, expect: 'matrix3d(1, 0, 0, 0, 0.621795827675797, 1, 0, 0, 0, 0, 1, 0, 2, -1, 3, 1)'}, + {at: 0.75, expect: 'matrix3d(1, 0, 0, 0, -1.2494279662824135, 1, 0, 0, 0, 0, 1, 0, 6, -3, 9, 1)'}, + {at: 1, expect: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 1, 0, 0, 0, 0, 1, 0, 8, -4, 12, 1)'}, + {at: 2, expect: 'matrix3d(1, 0, 0, 0, -5.9274874511779405, 1, 0, 0, 0, 0, 1, 0, 16, -8, 24, 1)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)', + to: 'scaleY(2) skewX(2rad) perspective(500px)' +}, [ + {at: -1, expect: 'matrix3d(1, 0, 0, 0, 0, 0, 0, 0, -0.03876288659793814, 0.01938144329896907, 0.94, -0.0029653608247422686, 16, -8, 24, 0.986144329896907)'}, + {at: 0, expect: 'matrix3d(1, 0, 0, 0, 1.5574077246549023, 1, 0, 0, -0.02, 0.01, 0.97, -0.0025, 8, -4, 12, 1)'}, + {at: 0.25, expect: 'matrix3d(1, 0, 0, 0, 1.1186572632293585, 1.25, 0, 0, -0.0151159793814433, 0.00755798969072165, 0.9775, -0.002378247422680413, 6, -3, 9, 1.0012989690721648)'}, + {at: 0.75, expect: 'matrix3d(1, 0, 0, 0, -0.7525665307288518, 1.75, 0, 0, -0.005115979381443298, 0.002557989690721649, 0.9924999999999999, -0.002128247422680412, 2, -1, 3, 1.001298969072165)'}, + {at: 1, expect: 'matrix3d(1, 0, 0, 0, -2.185039863261519, 2, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'}, + {at: 2, expect: 'matrix3d(1, 0, 0, 0, -11.227342763749263, 3, 0, 0, 0.021237113402061854, -0.010618556701030927, 1.03, -0.0014653608247422677, -8, 4, -12, 0.9861443298969074)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)', + to: 'translate3d(4px, -12px, 8px) scaleY(2) perspective(500px)' +}, [ + {at: -1, expect: 'translate3d(12px, 4px, 16px) matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -0.003, 0, 0, 0, 1)'}, + {at: 0, expect: 'translate3d(8px, -4px, 12px) matrix3d(1, 0, 0, 0, 1.55741, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'}, + {at: 0.25, expect: 'translate3d(7px, -6px, 11px) matrix3d(1, 0, 0, 0, 1.46007, 1.25, 0, 0, 0, 0, 1, -0.002375, 0, 0, 0, 1)'}, + {at: 0.75, expect: 'translate3d(5px, -10px, 9px) matrix3d(1, 0, 0, 0, 0.681366, 1.75, 0, 0, 0, 0, 1, -0.002125, 0, 0, 0, 1)'}, + {at: 1, expect: 'translate3d(4px, -12px, 8px) matrix3d(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, -0.002, 0, 0, 0, 1)'}, + {at: 2, expect: 'translate3d(0px, -20px, 4px) matrix3d(1, 0, 0, 0, -4.67222, 3, 0, 0, 0, 0, 1, -0.0015, 0, 0, 0, 1)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translate3d(8px, -4px, 12px) skewX(1rad) perspective(400px)', + to: 'translate3d(4px, -12px, 8px) skewX(2rad) scaleY(2)' +}, [ + {at: -1, expect: 'translate3d(12px, 4px, 16px) skewX(0rad) matrix3d(1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, -0.005, 0, 0, 0, 1)'}, + {at: 0, expect: 'translate3d(8px, -4px, 12px) skewX(1rad) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)'}, + {at: 0.25, expect: 'translate3d(7px, -6px, 11px) skewX(1.25rad) matrix3d(1, 0, 0, 0, 0, 1.25, 0, 0, 0, 0, 1, -0.001875, 0, 0, 0, 1)'}, + {at: 0.75, expect: 'translate3d(5px, -10px, 9px) skewX(1.75rad) matrix3d(1, 0, 0, 0, 0, 1.75, 0, 0, 0, 0, 1, -0.000625, 0, 0, 0, 1)'}, + {at: 1, expect: 'translate3d(4px, -12px, 8px) skewX(2rad) matrix(1, 0, 0, 2, 0, 0)'}, + {at: 2, expect: 'translate3d(0px, -20px, 4px) skewX(3rad) matrix3d(1, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0.0025, 0, 0, 0, 1)'}, +]); +test_interpolation({ + property: 'transform', + from: 'translate3D(100px, 200px, 300px)', + to: 'none' +}, [ + {at: -1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 400, 600, 1)'}, + {at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 200, 300, 1)'}, + {at: 0.25, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 75, 150, 225, 1)'}, + {at: 0.75, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25, 50, 75, 1)'}, + {at: 1, expect: 'matrix(1, 0, 0, 1, 0, 0) '}, + {at: 2, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -100, -200, -300, 1)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-005.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-005.html new file mode 100644 index 0000000000..879ff3f435 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-005.html @@ -0,0 +1,268 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<meta name="assert" content="transform supports animation as a transform list"> +<meta name="timeout" content="long"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + color: white; + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + overflow: hidden; +} +.expected { + background-color: green; +} +.target > div { + width: 10px; + height: 10px; + display: inline-block; + background: orange; + margin: 1px; +} +.test { + overflow: hidden; +} +</style> + +<body> + <template id="target-template"> + <div></div> + </template> +</body> + +<script> +// Matrix transforms: + +// 2D matrix transforms: +// +// [m11 m21 0 m41] [1 0 0 Tx] [cos(R) -sin(R) 0 0] [1 K 0 0] [Sx 0 0 0] +// [m12 m22 0 m42] = [0 1 0 Ty] [sin(R) cos(R) 0 0] [0 1 0 0] [0 Sy 0 0] +// [ 0 0 1 0 ] [0 0 1 0 ] [ 0 0 1 0] [0 0 1 0] [0 0 1 0] +// [ 0 0 0 1 ] [0 0 0 1 ] [ 0 0 0 1] [0 0 0 1] [0 0 0 1] +// +// M = translate * rotate * skew * scale +// See also webkit-transform-interpolation-005.html +// + +const cos30 = Math.cos(Math.PI / 6); +const sin30 = Math.sin(Math.PI / 6); +const cos45 = Math.cos(Math.PI / 4); +const sin45 = Math.sin(Math.PI / 4); +const cos60 = Math.cos(Math.PI / 3); +const sin60 = Math.sin(Math.PI / 3); + +// translateY(-6px) -> translateX(6px) rotate(90deg) scaleX(7) +test_interpolation({ + property: 'transform', + from: 'matrix(1, 0, 0, 1, 0, -6)', + to: 'matrix(0, 7, -1, 0, 6, 0)' +}, [ + {at: -1, expect: 'matrix(0, 5, 1, 0, -6, -12)'}, + {at: 0, expect: 'matrix(1, 0, 0, 1, 0, -6)'}, + { + at: 1/3, + expect: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)` + }, + { + at: 0.5, + expect: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)` + }, + { + at: 2/3, + expect: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)` + }, + {at: 1, expect: 'matrix(0, 7, -1, 0, 6, 0)'}, + {at: 2, expect: 'matrix(-13, 0, 0, -1, 12, 6)'} +]); + +// translateX(6px) rotate(90deg) scaleX(7) -> translateY(-6px) +test_interpolation({ + property: 'transform', + from: 'matrix(0, 7, -1, 0, 6, 0)', + to: 'matrix(1, 0, 0, 1, 0, -6)', +}, [ + {at: -1, expect: 'matrix(-13, 0, 0, -1, 12, 6)'}, + {at: 0, expect: 'matrix(0, 7, -1, 0, 6, 0)'}, + { + at: 1/3, + expect: `matrix(${5 * cos60}, ${5 * sin60}, -${sin60}, ${cos60}, 4, -2)` + }, + { + at: 0.5, + expect: `matrix(${4 * cos45}, ${4 * sin45}, -${sin45}, ${cos45}, 3, -3)` + }, + { + at: 2/3, + expect: `matrix(${3 * cos30}, ${3 * sin30}, -${sin30}, ${cos30}, 2, -4)` + }, + {at: 1, expect: 'matrix(1, 0, 0, 1, 0, -6)'}, + {at: 2, expect: 'matrix(0, 5, 1, 0, -6, -12)'} +]); + +// scaleY(7) -> skewX(45deg) scaleX(7) +test_interpolation({ + property: 'transform', + from: 'matrix(1, 0, 0, 7, 0, 0)', + to: 'matrix(7, 0, 1, 1, 0, 0)' +}, [ + {at: -1, expect: 'matrix(-5, 0, -13, 13, 0, 0)'}, + {at: 0, expect: 'matrix(1, 0, 0, 7, 0, 0)'}, + {at: 1/3, expect: 'matrix(3, 0, 1.6667, 5, 0, 0)'}, + {at: 0.5, expect: 'matrix(4, 0, 2, 4, 0, 0)'}, + {at: 2/3, expect: 'matrix(5, 0, 2, 3, 0, 0)'}, + {at: 1, expect: `matrix(7, 0, 1, 1, 0, 0)`}, + {at: 2, expect: `matrix(13, 0, -10, -5, 0, 0)`} +]); + +// none -> translateX(6px) skewX(45deg) scaleX(7) scaleY(2) +test_interpolation({ + property: 'transform', + from: 'none', + to: 'matrix(7, 0, 2, 2, 6, 0)' +}, [ + {at: -1, expect: 'matrix(-5, 0, 0, 0, -6, 0)'}, + {at: 0, expect: 'matrix(1, 0, 0, 1, 0, 0)'}, + {at: 0.25, expect: 'matrix(2.5, 0, 0.31, 1.25, 1.5, 0)'}, + {at: 0.5, expect: 'matrix(4, 0, 0.75, 1.5, 3, 0)'}, + {at: 0.75, expect: 'matrix(5.5, 0, 1.31, 1.75, 4.5, 0)'}, + {at: 1, expect: 'matrix(7, 0, 2, 2, 6, 0)'}, + {at: 2, expect: 'matrix(13, 0, 6, 3, 12, 0)'} +]); + +// translateY(-6px) scale(3, 5) -> none +test_interpolation({ + property: 'transform', + from: 'matrix(3, 0, 0, 5, 0, -6)', + to: 'none' +}, [ + {at: -1, expect: 'matrix(5, 0, 0, 9, 0, -12)'}, + {at: 0, expect: 'matrix(3, 0, 0, 5, 0, -6)'}, + {at: 0.25, expect: 'matrix(2.5, 0, 0, 4, 0, -4.5)'}, + {at: 0.5, expect: 'matrix(2, 0, 0, 3, 0, -3)'}, + {at: 0.75, expect: 'matrix(1.5, 0, 0, 2, 0, -1.5)'}, + {at: 1, expect: 'matrix(1, 0, 0, 1, 0, 0)'}, + {at: 2, expect: 'matrix(-1, 0, 0, -3, 0, 6)'} +]); + +// 3-D matrix transforms. +// TODO(kevers): Revisit 3D transform examples. It is difficult to infer +// the quality of the matrix decompositions from the expected output. +test_interpolation({ + property: 'transform', + from: 'none', + to: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)' +}, [ + {at: -1, expect: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'}, + {at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, + {at: 0.25, expect: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'}, + {at: 0.75, expect: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'}, + {at: 1, expect: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'}, + {at: 2, expect: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'}, +]); +test_interpolation({ + property: 'transform', + from: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)', + to: 'none' +}, [ + {at: -1, expect: 'matrix3d(-1.2484405096414273, 0, -2.727892280477045, 0, 0, 5, 0, 0, 6.365081987779772, 0, -2.9130278558299967, 0, 0, 0, 0, 1)'}, + {at: 0, expect: 'matrix3d(1.0806046117362795, 0, -1.682941969615793, 0, 0, 3, 0, 0, 3.365883939231586, 0, 2.161209223472559, 0, 0, 0, 0, 1)'}, + {at: 0.25, expect: 'matrix3d(1.2804555205291865, 0, -1.1928678300408346, 0, 0, 2.5, 0, 0, 2.215325970075836, 0, 2.377988823839918, 0, 0, 0, 0, 1)'}, + {at: 0.75, expect: 'matrix3d(1.211140527138306, 0, -0.30925494906815365, 0, 0, 1.5, 0, 0, 0.43295692869541513, 0, 1.6955967379936283, 0, 0, 0, 0, 1)'}, + {at: 1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, + {at: 2, expect: 'matrix3d(0, 0, 0, 0, 0, -1, 0, 0, 1.682941969615793, 0, -1.0806046117362795, 0, 0, 0, 0, 1)'}, +]); +test_interpolation({ + property: 'transform', + from: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)', + to: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)' +}, [ + {at: -1, expect: 'matrix3d(1.9877532948000005, 0.0, 0.0, 0.0, 0.0, 2.7492749567000003, 0.0, 0.0, 0.0, 0.0, 2.5165290423999997, 0.0, 20.2343946258, 21.1087405532, 21.371164870599998, 1.0)'}, + {at: 0, expect: 'matrix3d(2.3505561943, 0.0, 0.0, 0.0, 0.0, 2.6068943664, 0.0, 0.0, 0.0, 0.0, 2.6591082592, 0.0, 20.3339914256, 20.6709033765, 20.9147808456, 1.0)'}, + {at: 0.25, expect: 'matrix3d(2.441256919175, 0.0, 0.0, 0.0, 0.0, 2.571299218825, 0.0, 0.0, 0.0, 0.0, 2.6947530634, 0.0, 20.35889062555, 20.561444082325, 20.800684839349998, 1.0)'}, + {at: 0.75, expect: 'matrix3d(2.622658368925, 0.0, 0.0, 0.0, 0.0, 2.500108923675, 0.0, 0.0, 0.0, 0.0, 2.7660426718, 0.0, 20.408689025450002, 20.342525493975, 20.572492826850002, 1.0)'}, + {at: 1, expect: 'matrix3d(2.7133590938, 0.0, 0.0, 0.0, 0.0, 2.4645137761, 0.0, 0.0, 0.0, 0.0, 2.801687476, 0.0, 20.4335882254, 20.2330661998, 20.4583968206, 1.0)'}, + {at: 2, expect: 'matrix3d(3.0761619932999995, 0.0, 0.0, 0.0, 0.0, 2.3221331858, 0.0, 0.0, 0.0, 0.0, 2.9442666928000003, 0.0, 20.5331850252, 19.7952290231, 20.002012795600002, 1.0)'}, +]); +test_interpolation({ + property: 'transform', + from: 'none', + to: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)' +}, [ + {at: -1, expect: 'matrix3d(-0.0000000000000002377810622383943, -1.0671050586638147, -0.08972656766237302, 1.3740432449326199, 0.98484601036295, -2.653201092395309, 0.6753819540610847, 3.6127240080250744, -2.7988839807429846, -1.2090004194153336, -0.5183744226115445, -0.7936088631686278, 1.1875, 0.0625, -1.3125, 5.340768914473683)'}, + {at: 0, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, + {at: 0.25, expect: 'matrix3d(0.9041890962319094, 0.3522701519297133, -0.15240204298176957, -0.1428256720529315, -0.7579798772527586, 0.6803606288839232, -0.05133336076757235, 0.37904689530895724, -0.1957679784745485, 0.38554138029509327, 0.8226186974340638, 0.3370288143441876, -0.296875, -0.015625, 0.328125, 0.5930529142680923)'}, + {at: 0.75, expect: 'matrix3d(0.35007413226026135, 0.7254385504141292, -0.4977009150941454, 0.09582061929004702, -1.1027525038949482, -0.5884810398827429, 0.4516829688651701, 0.5447944343861767, -0.68717798815684, 0.2657772247405681, 0.5465690479810023, 1.0836207863885503, -0.890625, -0.046875, 0.984375, 0.5930529142680927)'}, + {at: 1, expect: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'}, + {at: 2, expect: 'matrix3d(-0.5844534449366048, -0.42278005999296053, -0.4650580659922564, -0.6817595809063256, 0.9156938760088464, 0.3851647027225889, 0.9244443507516923, 0.7218225020358241, -0.0803568793574344, 0.1719974850210706, -0.49676609633513097, -0.25968177786904373, -2.375, -0.125, 2.625, 5.340768914473685)'}, +]); +test_interpolation({ + property: 'transform', + from: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)', + to: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)' +}, [ + {at: -1, expect: 'matrix3d(-0.6299594065765657, -0.10825090106268696, -0.20133311671001855, 5.485724217214554, 6.358051978686152, 0.16496896269344588, 1.5760051143537075, -54.21568355620423, 0.7106057459805782, -1.1596356050622005, -0.11495342545397585, -4.913752963990824, -1.03125, -1.125, 3.5625, -5.901513951904114)'}, + {at: 0, expect: 'matrix3d(0, 0.6875, -0.625, 0.3125, -0.6666666666666665, -1, 0.8333333333333334, 0.125, -0.6666666666666665, 0, 0.5, 1.0625, -1.1875, -0.0625, 1.3125, 1)'}, + {at: 0.25, expect: 'matrix3d(0.33652832679595723, 0.55254445148386, -0.7544724447833296, 0.22700224951774267, -0.69720168363685, -0.036373245768780864, 0.28149188169180933, -0.2845156818045006, -0.24737156018941048, 0.31207160370190334, 0.4564821058052897, 0.9220853089096839, -1.2265625, 0.203125, 0.75, 1.647016932991011)'}, + {at: 0.75, expect: 'matrix3d(0.6861191524977764, -0.18025672746204927, -0.8710297237546482, 0.6072134247444672, 0.2819931018922366, 0.27778974607679663, -0.6540128246146626, 0.5063632314069845, 0.5509562084361049, -0.3215202993119732, 0.5459062603735321, 2.8697154005492105, -1.3046875, 0.734375, -0.375, 1.6470169329910096)'}, + {at: 1, expect: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'}, + {at: 2, expect: 'matrix3d(-1.1789992641434441, -0.7109729379601547, -0.4455746537954199, -21.703089533128907, -0.11137581475421703, -0.08822983871000473, -0.05695380894007451, -2.22667264132605, -3.1443917136741506, 1.8952588096345078, 2.426615889772007, -21.697523130750138, -1.5, 2.0625, -3.1875, -5.901513951904121)'}, +]); +test_interpolation({ + property: 'transform', + from: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)', + to: 'none' +}, [ + {at: -1, expect: 'matrix3d(-0.6413028394192518, -1.0702420910513302, -0.5807595966791961, -18.02447171345163, 0.8211815704840004, 1.0980679097347057, 0.9399408862655454, 22.460730852026064, 0.28421009261178104, -0.5408346238741739, 0.5194791363698213, 3.075163035391172, -2.6875, 2, -1.875, -14.881239394516232)'}, + {at: 0, expect: 'matrix3d(0.571428571428571, -0.625, -0.8333333333333346, -0.66666666666669, 0.5, -0.1875, -0.8125, 0.3125, 0.34375, -1, 0.8333333333333327, 1.34375, -1.34375, 1, -0.9375, 1)'}, + {at: 0.25, expect: 'matrix3d(0.7912976716694541, -0.4517927901159618, -0.6868745974719376, 1.2522201536338506, 0.7952183069582651, 0.06340410955800829, -0.7956629784232128, 2.2561737435012983, 0.345639443327071, -0.8934490945546473, 0.830131443385676, 1.2606901484983566, -1.0078125, 0.75, -0.703125, 2.4888661932358946)'}, + {at: 0.75, expect: 'matrix3d(1.0093457700315165, -0.12746048375025829, -0.24746788943106088, 1.3202120308857304, 0.6128364656690982, 0.7600694601651116, -0.22233359857303325, 1.4081483224940277, 0.21669805381113447, -0.3786082265932788, 0.908354523914928, 0.6747509193960347, -0.3359375, 0.25, -0.234375, 2.4888661932358964)'}, + {at: 1, expect: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'}, + {at: 2, expect: 'matrix3d(0.39048513570444376, 0.14780794797065988, 0.6963068100217401, -4.857907861239344, -2.967682789284791, 0.6004978769584385, -3.5472376016872444, 26.675324787979896, -2.5953724498995308, 1.6280843851961373, 0.8163834310586356, 9.001735256585825, 1.34375, -1, 0.9375, -14.881239394516227)'}, +]); + +// Mismatched interpolation with an empty list should not use decomposition. +test_interpolation({ + property: 'transform', + from: 'none', + to: 'rotate(180deg)' +}, [ + {at: -1, expect: 'rotate(-180deg)'}, + {at: 0, expect: 'rotate(0deg)'}, + {at: 0.25, expect: 'rotate(45deg)'}, + {at: 0.75, expect: 'rotate(135deg)'}, + {at: 1, expect: 'rotate(180deg)'}, + {at: 2, expect: 'rotate(360deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'rotate(180deg)', + to: 'none' +}, [ + {at: -1, expect: 'rotate(360deg)'}, + {at: 0, expect: 'rotate(180deg)'}, + {at: 0.25, expect: 'rotate(135deg)'}, + {at: 0.75, expect: 'rotate(45deg)'}, + {at: 1, expect: 'rotate(0deg)'}, + {at: 2, expect: 'rotate(-180deg)'}, +]); +test_interpolation({ + property: 'transform', + from: 'none', + to: 'rotate(360deg)' +}, [ + {at: -1, expect: 'rotate(-360deg)'}, + {at: 0, expect: 'rotate(0deg)'}, + {at: 0.25, expect: 'rotate(90deg)'}, + {at: 0.75, expect: 'rotate(270deg)'}, + {at: 1, expect: 'rotate(360deg)'}, + {at: 2, expect: 'rotate(720deg)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-006.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-006.html new file mode 100644 index 0000000000..c69bad7c93 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-006.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<meta name="assert" content="transform supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + transform: translate(30px); +} +.target { + color: white; + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + overflow: hidden; + transform: translate(10px); +} +.expected { + background-color: green; +} +.parent { + transform: 30px; +} +.target > div { + width: 10px; + height: 10px; + display: inline-block; + background: orange; + margin: 1px; +} +.test { + overflow: hidden; +} +</style> + +<body> + <template id="target-template"> + <div></div> + </template> +</body> + +<script> +test_interpolation({ + property: 'transform', + from: neutralKeyframe, + to: 'translate(20px)', +}, [ + {at: -1, expect: 'translate(0px)'}, + {at: 0, expect: 'translate(10px)'}, + {at: 0.25, expect: 'translate(12.5px)'}, + {at: 0.75, expect: 'translate(17.5px)'}, + {at: 1, expect: 'translate(20px)'}, + {at: 2, expect: 'translate(30px)'}, +]); + +test_interpolation({ + property: 'transform', + from: 'initial', + to: 'translate(20px)', +}, [ + {at: -1, expect: 'translate(-20px)'}, + {at: 0, expect: 'translate(0px)'}, + {at: 0.25, expect: 'translate(5px)'}, + {at: 0.75, expect: 'translate(15px)'}, + {at: 1, expect: 'translate(20px)'}, + {at: 2, expect: 'translate(40px)'}, +]); + +test_interpolation({ + property: 'transform', + from: 'inherit', + to: 'translate(20px)', +}, [ + {at: -1, expect: 'translate(40px)'}, + {at: 0, expect: 'translate(30px)'}, + {at: 0.25, expect: 'translate(27.5px)'}, + {at: 0.75, expect: 'translate(22.5px)'}, + {at: 1, expect: 'translate(20px)'}, + {at: 2, expect: 'translate(10px)'}, +]); + +test_interpolation({ + property: 'transform', + from: 'unset', + to: 'translate(20px)', +}, [ + {at: -1, expect: 'translate(-20px)'}, + {at: 0, expect: 'translate(0px)'}, + {at: 0.25, expect: 'translate(5px)'}, + {at: 0.75, expect: 'translate(15px)'}, + {at: 1, expect: 'translate(20px)'}, + {at: 2, expect: 'translate(40px)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-animated-ref.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-animated-ref.html new file mode 100644 index 0000000000..0930a7469a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-animated-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +const testName = window.location.search.substr(1); +createRefsWithAnimation(transformTests[testName]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-computed-value.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-computed-value.html new file mode 100644 index 0000000000..4a836f3ca1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-computed-value.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#transformvalue-objects"> +<meta name="assert" content="transform gives the correct computed values when interpolated"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> + +<body> +<script> +function interpolation_test(from, to, expected_50) { + test(t => { + let div = createDiv(t); + let anim = div.animate({transform: [from, to]}, 2000); + anim.pause(); + anim.currentTime = 1000; + let halfway = div.computedStyleMap().get('transform').toString(); + assert_equals(halfway, expected_50, "The value at 50% progress is as expected"); + }, "Interpolation between " + from + " and " + to + " gives the correct " + + "computed value halfway according to computedStyleMap."); + + test(t => { + let div = createDiv(t); + div.style.zoom = 1.25; + let anim = div.animate({transform: [from, to]}, 2000); + anim.pause(); + anim.currentTime = 1000; + let halfway = div.computedStyleMap().get('transform').toString(); + assert_equals(halfway, expected_50, "The value at 50% progress is as expected"); + }, "Interpolation between " + from + " and " + to + " gives the correct " + + "computed value halfway according to computedStyleMap with zoom active."); +} + +interpolation_test('translateX(0px)', 'translateX(50px)', 'translate(25px, 0px)'); +interpolation_test('translateX(0%)', 'translateX(50%)', 'translate(25%, 0px)'); +interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%, 0px)'); +interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)'); +interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)'); +interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)'); +interpolation_test('translateZ(-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)'); +interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%, 0px)'); +interpolation_test('translate(50%)', 'translate(100%, 50%)', 'translate(75%, 25%)'); +interpolation_test('translate(0%, 50%)', 'translate(50%, 100%)', 'translate(25%, 75%)'); +interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)'); +interpolation_test('translate(50px, 0px)', 'translate(100px, 0px)', 'translate(75px, 0px)'); +interpolation_test('translate(50px, -50px)', 'translate(100px, 50px)', 'translate(75px, 0px)'); + +interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)'); +interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 60deg)'); +interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)'); +interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)'); +interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)'); + +interpolation_test('scale(1)', 'scale(2)', 'scale(1.5, 1.5)'); +interpolation_test('scale(1, 3)', 'scale(2)', 'scale(1.5, 2.5)'); +interpolation_test('scaleX(1)', 'scaleX(2)', 'scale(1.5, 1)'); +interpolation_test('scaleY(1)', 'scaleY(2)', 'scale(1, 1.5)'); +interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scale3d(1, 1, 1.5)'); +interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5, 1.5)'); +interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)'); +interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)'); +interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)'); +interpolation_test('scale3d(1, 2, 3)', 'scale3d(4, 5, 6)', 'scale3d(2.5, 3.5, 4.5)'); +interpolation_test('scale3d(1, 2, 3)', 'scale(4, 5)', 'scale3d(2.5, 3.5, 2)'); +interpolation_test('scale(1, 2)', 'scale3d(3, 4, 5)', 'scale3d(2, 3, 3)'); + +interpolation_test('skewX(0deg)', 'skewX(60deg)', 'skewX(30deg)'); +interpolation_test('skewX(0deg)', 'skewX(90deg)', 'skewX(45deg)'); +interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)'); +interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)'); +interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)'); + +interpolation_test('perspective(10px)', 'perspective(2.5px)', 'perspective(4px)'); +interpolation_test('perspective(10px)', 'perspective(none)', 'perspective(20px)'); +interpolation_test('perspective(none)', 'perspective(none)', 'perspective(none)'); + +// A matrix() with just scale and translation. +interpolation_test('matrix(2, 0, 0, 2, 10, 30)', 'matrix(4, 0, 0, 6, 14, 10)', 'matrix(3, 0, 0, 4, 12, 20)'); + +// A matrix3d() with just scale and translation. +interpolation_test('matrix3d(1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 5, 10, 4, 1)', 'matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, -11, 2, 2, 1)', 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, -3, 6, 3, 1)'); +// A matrix3d() with just perspective. +interpolation_test('matrix3d(1, 0, 0, 3, 0, 1, 0, 2, 0, 0, 1, 8, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 5, 0, 1, 0, 8, 0, 0, 1, 14, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 4, 0, 1, 0, 5, 0, 0, 1, 11, 0, 0, 0, 1)'); + +// NOTE: New tests added here should also be added in +// transform-interpolation-inline-value.html. + +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-inline-value.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-inline-value.html new file mode 100644 index 0000000000..7b453358cf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-inline-value.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#interpolation-of-transform-functions"> +<meta name="assert" content="transform gives the correct inline values when interpolated"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/web-animations/testcommon.js"></script> + +<body> +<script> +function interpolation_test(from, to, expected_50) { + test(t => { + let div = createDiv(t); + let anim = div.animate({transform: [from, to]}, 2000); + anim.pause(); + anim.currentTime = 1000; + anim.commitStyles() + let halfway = div.style.transform; + assert_equals(halfway, expected_50, "The value at 50% progress is as expected"); + }, "Interpolation between " + from + " and " + to + " gives the correct " + + "computed value halfway according to commitStyles."); +} + +interpolation_test('translateX(0px)', 'translateX(50px)', 'translateX(25px)'); +interpolation_test('translateX(0%)', 'translateX(50%)', 'translateX(25%)'); +interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%)'); +interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)'); +interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)'); +interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)'); +interpolation_test('translateZ(-50px)','translateZ(50px)', 'translateZ(0px)'); +interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%)'); +interpolation_test('translate(50%)', 'translate(100%, 50%)', 'translate(75%, 25%)'); +interpolation_test('translate(0%, 50%)', 'translate(50%, 100%)', 'translate(25%, 75%)'); +interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)'); +interpolation_test('translate(50px, 0px)', 'translate(100px, 0px)', 'translate(75px)'); +interpolation_test('translate(50px, -50px)', 'translate(100px, 50px)', 'translate(75px)'); + +interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)'); +interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotateZ(60deg)'); +interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)'); +interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotateX(45deg)'); +interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)'); + +interpolation_test('scale(1)', 'scale(2)', 'scale(1.5)'); +interpolation_test('scale(1, 3)', 'scale(2)', 'scale(1.5, 2.5)'); +interpolation_test('scaleX(1)', 'scaleX(2)', 'scaleX(1.5)'); +interpolation_test('scaleY(1)', 'scaleY(2)', 'scaleY(1.5)'); +interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scaleZ(1.5)'); +interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5)'); +interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)'); +interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)'); +interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)'); +interpolation_test('scale3d(1, 2, 3)', 'scale3d(4, 5, 6)', 'scale3d(2.5, 3.5, 4.5)'); +interpolation_test('scale3d(1, 2, 3)', 'scale(4, 5)', 'scale3d(2.5, 3.5, 2)'); +interpolation_test('scale(1, 2)', 'scale3d(3, 4, 5)', 'scale3d(2, 3, 3)'); + +interpolation_test('skewX(0deg)', 'skewX(60deg)', 'skewX(30deg)'); +interpolation_test('skewX(0deg)', 'skewX(90deg)', 'skewX(45deg)'); +interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)'); +interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)'); +interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)'); + +interpolation_test('perspective(10px)', 'perspective(2.5px)', 'perspective(4px)'); +interpolation_test('perspective(10px)', 'perspective(none)', 'perspective(20px)'); +interpolation_test('perspective(none)', 'perspective(none)', 'perspective(none)'); + +// A matrix() with just scale and translation. +interpolation_test('matrix(2, 0, 0, 2, 10, 30)', 'matrix(4, 0, 0, 6, 14, 10)', 'matrix(3, 0, 0, 4, 12, 20)'); + +// A matrix3d() with just scale and translation. +interpolation_test('matrix3d(1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 5, 10, 4, 1)', 'matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, -11, 2, 2, 1)', 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, -3, 6, 3, 1)'); +// A matrix3d() with just perspective. +interpolation_test('matrix3d(1, 0, 0, 3, 0, 1, 0, 2, 0, 0, 1, 8, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 5, 0, 1, 0, 8, 0, 0, 1, 14, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 4, 0, 1, 0, 5, 0, 0, 1, 11, 0, 0, 0, 1)'); + +// NOTE: New tests added here should also be added in +// transform-interpolation-computed-value.html. + +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-matrix.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-matrix.html new file mode 100644 index 0000000000..b5f9c3cd30 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-matrix.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?matrix"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.matrix); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-perspective.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-perspective.html new file mode 100644 index 0000000000..bb1e17b3c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-perspective.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?perspective"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.perspective); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-ref.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-ref.html new file mode 100644 index 0000000000..2fee6f7c1f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +const testName = window.location.search.substr(1); +createRefs(transformTests[testName]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-rotate-slerp.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-rotate-slerp.html new file mode 100644 index 0000000000..73d4bd8a1f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-rotate-slerp.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?rotateSlerp"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> +<meta name="fuzzy" content="0-160;0-500"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.rotateSlerp); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-rotate.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-rotate.html new file mode 100644 index 0000000000..cba2d2086f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-rotate.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?rotate"> +<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-246"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.rotate); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-scale.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-scale.html new file mode 100644 index 0000000000..ef0da0d1f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-scale.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?scale"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.scale); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-skew.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-skew.html new file mode 100644 index 0000000000..95277d4b8c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-skew.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?skew"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> +<!-- +Fuzzy match is needed because the browser may raster in different scales for the +test and the reference. For example, in the first case the test animates skew +from 0deg to 60deg and take snapshot when the skew is 30deg, while the reference +animates skew from 30deg to 30deg, and the browser may choose a higher raster +scale for the former because at 60deg the ideal scale is higher. + 3000: 130 * 6 * 2 + 80 * 9 * 2 + 130, 80: width and height of the div + 6: number of antialiased horizontal edges + 9: number of antialiased vertical edges + 2: number of antialiased pixels for each pixel on the edge +--> +<meta name=fuzzy content="0-255;0-3000"> +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.skew); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-translate-em.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-translate-em.html new file mode 100644 index 0000000000..aff613ab09 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-translate-em.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?translateEm"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.translateEm); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-translate.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-translate.html new file mode 100644 index 0000000000..5abeb24093 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-translate.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="match" href="transform-interpolation-ref.html?translate"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> + +<script src="../../../common/reftest-wait.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<body> +<script> +createTests(transformTests.translate); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-verify-reftests.html b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-verify-reftests.html new file mode 100644 index 0000000000..367b7af306 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-interpolation-verify-reftests.html @@ -0,0 +1,35 @@ +<!DOCTYPE HTML> +<meta charset="UTF-8"> +<title>transform interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#interpolation-of-transforms"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> +<script src="support/transform-interpolation-reftests.js"></script> + +<!-- + +The tests in transform-interpolation-reftests.js are used for reftests +that are designed to test animation that happens on the compositor. +Here we run those same tests through test_interpolation to check that +they match the non-compositor codepath. + +--> + +<body> +<script> +for (const set in transformTests) { + for (const obj of transformTests[set]) { + let test = ("test" in obj) ? obj.test : obj; + let midpoint = ("midpoint" in obj) ? obj.midpoint : 0.5; + test_interpolation({ + property: 'transform', + from: test[0], + to: test[2] + }, [ + { at: midpoint, expect: test[1] }, + ]); + } +} +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-matrix-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-matrix-composition.html new file mode 100644 index 0000000000..2586ff3d4a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-matrix-composition.html @@ -0,0 +1,208 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform-matrix composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> +<meta name="assert" content="transform-matrix supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// For matrix and matrix3d, addition is defined as concatenation whilst +// accumulation works by decomposing the matrix and then accumulating the +// decomposed functions. We can therefore test the difference between the +// two by mixing functions such that a naive multiplication would look +// different than the accumulation behavior. +// +// Note that due to the complexities of decomposition the test space here is +// huge; we cover some basic cases and hope that the tests for the individual +// functions provide a lot of the remaining coverage. + +// Creates a matrix3d function, encoding the passed rotation and translation. +// Note that the translate will not be affected by the rotation. +function create3dMatrix(x, y, z, radians, translateX) { + // Normalize the rotation axes. + const length = Math.sqrt(x*x + y*y + z*z); + x /= length; + y /= length; + z /= length; + + const sc = Math.sin(radians / 2) * Math.cos(radians / 2); + const sq = Math.sin(radians / 2) * Math.sin(radians / 2); + + // https://drafts.csswg.org/css-transforms-2/#Rotate3dDefined + // https://drafts.csswg.org/css-transforms-2/#Translate3dDefined + return 'matrix3d(' + [ + 1 - 2 * (y*y + z*z) * sq, + 2 * (x * y * sq + z * sc), + 2 * (x * z * sq - y * sc), + 0, + 2 * (x * y * sq - z * sc), + 1 - 2 * (x*x + z*z) * sq, + 2 * (y * z * sq + x * sc), + 0, + 2 * (x * z * sq + y * sc), + 2 * (y * z * sq - x * sc), + 1 - 2 * (x*x + y*y) * sq, + 0, + translateX, 0, 0, 1].join() + ')'; +} + +// ------------ Addition tests -------------- + +test_composition({ + property: 'transform', + // translateX(100px) rotate(90deg) + underlying: 'matrix(0, 1, -1, 0, 100, 0)', + // translateX(100px) + addFrom: 'matrix(1, 0, 0, 1, 100, 0)', + // translateX(200px) + addTo: 'matrix(1, 0, 0, 1, 200, 0)', +}, [ + {at: -0.5, expect: 'matrix(0, 1, -1, 0, 100, 50)'}, + {at: 0, expect: 'matrix(0, 1, -1, 0, 100, 100)'}, + {at: 0.25, expect: 'matrix(0, 1, -1, 0, 100, 125)'}, + {at: 0.5, expect: 'matrix(0, 1, -1, 0, 100, 150)'}, + {at: 0.75, expect: 'matrix(0, 1, -1, 0, 100, 175)'}, + {at: 1, expect: 'matrix(0, 1, -1, 0, 100, 200)'}, + {at: 1.5, expect: 'matrix(0, 1, -1, 0, 100, 250)'}, +]); + +test_composition({ + property: 'transform', + // translateX(100px) rotate3d(1, 1, 0, 45deg) + underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100), + // translateX(100px) + addFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)', + // translateX(200px) + addTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)', +}, [ + // matrix3ds are hard to read; these are the decomposed forms for clarity + {at: -0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(50px)'}, + {at: 0, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(100px)'}, + {at: 0.25, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(125px)'}, + {at: 0.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(150px)'}, + {at: 0.75, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(175px)'}, + {at: 1, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(200px)'}, + {at: 1.5, expect: 'translateX(100px) rotate3d(1, 1, 0, 45deg) translateX(250px)'}, +]); + +// Addition of non-invertible matrices is still defined as concatenation so +// includes the underlying value. + +test_composition({ + property: 'transform', + // Non-invertible. + underlying: 'matrix(1, 1, 0, 0, 0, 100)', + // translateX(100px) + addFrom: 'matrix(1, 0, 0, 1, 100, 0)', + // translateX(200px) + addTo: 'matrix(1, 0, 0, 1, 200, 0)', +}, [ + {at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 200)'}, + {at: 0, expect: 'matrix(1, 1, 0, 0, 100, 200)'}, + {at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 200)'}, + {at: 0.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'}, + {at: 0.75, expect: 'matrix(1, 1, 0, 0, 200, 300)'}, + {at: 1, expect: 'matrix(1, 1, 0, 0, 200, 300)'}, + {at: 1.5, expect: 'matrix(1, 1, 0, 0, 200, 300)'}, +]); + +test_composition({ + property: 'transform', + // translateX(100px) + underlying: 'matrix(1, 0, 0, 1, 100, 0)', + // Non-invertible + addFrom: 'matrix(1, 1, 0, 0, 0, 100)', + // translateX(200px) + addTo: 'matrix(1, 0, 0, 1, 200, 0)', +}, [ + {at: -0.5, expect: 'matrix(1, 1, 0, 0, 100, 100)'}, + {at: 0, expect: 'matrix(1, 1, 0, 0, 100, 100)'}, + {at: 0.25, expect: 'matrix(1, 1, 0, 0, 100, 100)'}, + {at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, + {at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, + {at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, + {at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, +]); + +// ------------ Accumulation tests -------------- + +test_composition({ + property: 'transform', + // translateX(100px) rotate(90deg) + underlying: 'matrix(0, 1, -1, 0, 100, 0)', + // translateX(100px) + accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)', + // translateX(200px) + accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)', +}, [ + {at: -0.5, expect: 'matrix(0, 1, -1, 0, 150, 0)'}, + {at: 0, expect: 'matrix(0, 1, -1, 0, 200, 0)'}, + {at: 0.25, expect: 'matrix(0, 1, -1, 0, 225, 0)'}, + {at: 0.5, expect: 'matrix(0, 1, -1, 0, 250, 0)'}, + {at: 0.75, expect: 'matrix(0, 1, -1, 0, 275, 0)'}, + {at: 1, expect: 'matrix(0, 1, -1, 0, 300, 0)'}, + {at: 1.5, expect: 'matrix(0, 1, -1, 0, 350, 0)'}, +]); + +test_composition({ + property: 'transform', + // translateX(100px) rotate3d(1, 1, 0, 45deg) + underlying: create3dMatrix(1, 1, 0, Math.PI / 4, 100), + // translateX(100px) + accumulateFrom: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1)', + // translateX(200px) + accumulateTo: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 200, 0, 0, 1)', +}, [ + // matrix3ds are hard to read; these are the decomposed forms for clarity + {at: -0.5, expect: 'translateX(150px) rotate3d(1, 1, 0, 45deg)'}, + {at: 0, expect: 'translateX(200px) rotate3d(1, 1, 0, 45deg)'}, + {at: 0.25, expect: 'translateX(225px) rotate3d(1, 1, 0, 45deg)'}, + {at: 0.5, expect: 'translateX(250px) rotate3d(1, 1, 0, 45deg)'}, + {at: 0.75, expect: 'translateX(275px) rotate3d(1, 1, 0, 45deg)'}, + {at: 1, expect: 'translateX(300px) rotate3d(1, 1, 0, 45deg)'}, + {at: 1.5, expect: 'translateX(350px) rotate3d(1, 1, 0, 45deg)'}, +]); + +// Accumulation of non-invertible matrices falls back to replace behavior. + +test_composition({ + property: 'transform', + // Non-invertible. + underlying: 'matrix(1, 1, 0, 0, 0, 100)', + // translateX(100px) + accumulateFrom: 'matrix(1, 0, 0, 1, 100, 0)', + // translateX(200px) + accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)', +}, [ + {at: -0.5, expect: 'matrix(1, 0, 0, 1, 50, 0)'}, + {at: 0, expect: 'matrix(1, 0, 0, 1, 100, 0)'}, + {at: 0.25, expect: 'matrix(1, 0, 0, 1, 125, 0)'}, + {at: 0.5, expect: 'matrix(1, 0, 0, 1, 150, 0)'}, + {at: 0.75, expect: 'matrix(1, 0, 0, 1, 175, 0)'}, + {at: 1, expect: 'matrix(1, 0, 0, 1, 200, 0)'}, + {at: 1.5, expect: 'matrix(1, 0, 0, 1, 250, 0)'}, +]); + +test_composition({ + property: 'transform', + // translateX(100px) + underlying: 'matrix(1, 0, 0, 1, 100, 0)', + // Non-invertible + accumulateFrom: 'matrix(1, 1, 0, 0, 0, 100)', + // translateX(200px) + accumulateTo: 'matrix(1, 0, 0, 1, 200, 0)', +}, [ + {at: -0.5, expect: 'matrix(1, 1, 0, 0, 0, 100)'}, + {at: 0, expect: 'matrix(1, 1, 0, 0, 0, 100)'}, + {at: 0.25, expect: 'matrix(1, 1, 0, 0, 0, 100)'}, + {at: 0.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, + {at: 0.75, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, + {at: 1, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, + {at: 1.5, expect: 'matrix(1, 0, 0, 1, 300, 0)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-origin-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/transform-origin-interpolation.html new file mode 100644 index 0000000000..02b8b59b0b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-origin-interpolation.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform-origin interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<meta name="assert" content="transform supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + transform-origin: 30px 10px; +} +.target { + display: inline-block; + margin-top: 50px; + margin-bottom: 25px; + width: 50px; + height: 50px; + background: red; + transform: scale(1.5); + transform-origin: 10px 30px; +} +.expected { + background: green; + position: relative; + left: -50px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'transform-origin', + from: neutralKeyframe, + to: '20px 20px', +}, [ + {at: -0.3, expect: '7px 33px'}, + {at: 0, expect: '10px 30px'}, + {at: 0.3, expect: '13px 27px'}, + {at: 0.6, expect: '16px 24px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '25px 15px'}, +]); + +test_interpolation({ + property: 'transform-origin', + from: 'initial', + to: '20px 20px', +}, [ + {at: -0.3, expect: '26.5px 26.5px'}, + {at: 0, expect: '25px 25px'}, + {at: 0.3, expect: '23.5px 23.5px'}, + {at: 0.6, expect: '22px 22px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '17.5px 17.5px'}, +]); + +test_interpolation({ + property: 'transform-origin', + from: 'inherit', + to: '20px 20px', +}, [ + {at: -0.3, expect: '33px 7px'}, + {at: 0, expect: '30px 10px'}, + {at: 0.3, expect: '27px 13px'}, + {at: 0.6, expect: '24px 16px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '15px 25px'}, +]); + +test_interpolation({ + property: 'transform-origin', + from: 'unset', + to: '20px 20px', +}, [ + {at: -0.3, expect: '26.5px 26.5px'}, + {at: 0, expect: '25px 25px'}, + {at: 0.3, expect: '23.5px 23.5px'}, + {at: 0.6, expect: '22px 22px'}, + {at: 1, expect: '20px 20px'}, + {at: 1.5, expect: '17.5px 17.5px'}, +]); + +test_interpolation({ + property: 'transform-origin', + from: 'top left', + to: 'bottom right', +}, [ + {at: -0.3, expect: '-15px -15px'}, + {at: 0, expect: '0px 0px'}, + {at: 0.3, expect: '15px 15px'}, + {at: 0.6, expect: '30px 30px'}, + {at: 1, expect: '50px 50px'}, + {at: 1.5, expect: '75px 75px'}, +]); + +test_interpolation({ + property: 'transform-origin', + from: 'center center', + to: '0% 100px', +}, [ + {at: -0.3, expect: '32.5px 2.5px'}, + {at: 0, expect: '25px 25px'}, + {at: 0.3, expect: '17.5px 47.5px'}, + {at: 0.6, expect: '10px 70px'}, + {at: 1, expect: '0px 100px'}, + {at: 1.5, expect: '-12.5px 137.5px'}, +]); + +test_interpolation({ + property: 'transform-origin', + from: '0% 50% 5px', + to: '100% 150% 0px' +}, [ + {at: -0.3, expect: '-30% 20% 6.5px'}, + {at: 0, expect: '0% 50% 5px'}, + {at: 0.3, expect: '30% 80% 3.5px'}, + {at: 0.6, expect: '60% 110% 2px'}, + {at: 1, expect: '100% 150% 0px'}, + {at: 1.5, expect: '150% 200% -2.5px'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-ref.html b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-ref.html new file mode 100644 index 0000000000..8025539309 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<style> + +div { + width: 200px; + height: 200px; + background-color: black; + transform: translate(50%, 50%); +} + +</style> +</head> +<body> +<div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-separate-ref.html b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-separate-ref.html new file mode 100644 index 0000000000..8025539309 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-separate-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<style> + +div { + width: 200px; + height: 200px; + background-color: black; + transform: translate(50%, 50%); +} + +</style> +</head> +<body> +<div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-separate.html b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-separate.html new file mode 100644 index 0000000000..d03ba24f93 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height-separate.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating the "transform" property with a percent value while also animating "width" and "height" using two separate animations</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> +<link rel="match" href="transform-percent-with-width-and-height-separate-ref.html"> +<script src="../../../common/reftest-wait.js"></script> +<style> + +div { + width: 10px; + height: 10px; + background-color: black; + animation-duration: 10s; + animation-name: size, transform; +} + +@keyframes size { + 0.000000001%, to { + width: 200px; + height: 200px; + } +} + +@keyframes transform { + 0.000000001%, to { + transform: translate(50%, 50%); + } +} + +</style> +</head> +<body> +<div></div> +<script> +(async function() { + await Promise.all(document.getAnimations().map(animation => animation.ready)); + await new Promise(requestAnimationFrame); + await new Promise(requestAnimationFrame); + takeScreenshot(); +})(); +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height.html b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height.html new file mode 100644 index 0000000000..a207435db4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-percent-with-width-and-height.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating the "transform" property with percent values while also animating "width" and "height"</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> +<link rel="match" href="transform-percent-with-width-and-height-ref.html"> +<script src="../../../common/reftest-wait.js"></script> +<style> + +div { + width: 10px; + height: 10px; + background-color: black; + animation: anim 10s linear forwards; +} + +@keyframes anim { + 0.000000001%, to { + width: 200px; + height: 200px; + transform: translate(50%, 50%); + } +} + +</style> +</head> +<body> +<div></div> +<script> +(async function() { + await Promise.all(document.getAnimations().map(animation => animation.ready)); + await new Promise(requestAnimationFrame); + await new Promise(requestAnimationFrame); + takeScreenshot(); +})(); +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-perspective-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-perspective-composition.html new file mode 100644 index 0000000000..1266f081e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-perspective-composition.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform-perspective composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#three-d-transform-functions"> +<meta name="assert" content="transform-perspective supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// Addition and accumulation of perspective values are very similar, but not +// identical. We can test the difference by constructing a scenario where a +// perspective parameter would go negative in one case (and thus be clamped +// to 0), and would not go negative in the other case. +// +// In the test below, the values differ at 1.5 progress. The reason for this +// is that at 1.5 progress, the addition case (which uses concatenation) +// computes to: +// +// perspective(10px) perspective(-50px) +// +// Since perspective cannot go negative, this is clamped to: +// +// perspective(10px) perspective(none) +// +// The accumulation case, on the other hand, combines the components +// and so ends up blending from perspective(5px) to perspective(8.33...px) at +// 1.5 progress, which results in perspective(12.5px) - this is what you would +// get with addition too, if not for the clamping behavior. + +// ------------ Addition tests -------------- + +test_composition({ + property: 'transform', + underlying: 'perspective(10px)', + addFrom: 'perspective(10px)', + addTo: 'perspective(50px)', +}, [ + {at: -0.5, expect: 'perspective(4.12px)'}, + {at: 0, expect: 'perspective(5px)'}, + {at: 0.25, expect: 'perspective(5.45px)'}, + {at: 0.5, expect: 'perspective(6.15px)'}, + {at: 0.75, expect: 'perspective(7.06px)'}, + {at: 1, expect: 'perspective(8.33px)'}, + {at: 1.5, expect: 'perspective(10px)'}, +]); + +// ------------ Accumulation tests -------------- + +test_composition({ + property: 'transform', + underlying: 'perspective(10px)', + accumulateFrom: 'perspective(10px)', + accumulateTo: 'perspective(50px)', +}, [ + {at: -0.5, expect: 'perspective(4.12px)'}, + {at: 0, expect: 'perspective(5px)'}, + {at: 0.25, expect: 'perspective(5.45px)'}, + {at: 0.5, expect: 'perspective(6.15px)'}, + {at: 0.75, expect: 'perspective(7.06px)'}, + {at: 1, expect: 'perspective(8.33px)'}, + {at: 1.5, expect: 'perspective(12.5px)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-rotate-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-rotate-composition.html new file mode 100644 index 0000000000..e062860e72 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-rotate-composition.html @@ -0,0 +1,164 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform-rotate composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#funcdef-transform-rotate"> +<meta name="assert" content="transform-rotate supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// ------------ Addition tests -------------- + +test_composition({ + property: 'transform', + underlying: 'rotateX(20deg)', + addFrom: 'rotateX(40deg)', + addTo: 'rotateX(60deg)', +}, [ + {at: -0.5, expect: 'rotateX(50deg)'}, + {at: 0, expect: 'rotateX(60deg)'}, + {at: 0.25, expect: 'rotateX(65deg)'}, + {at: 0.5, expect: 'rotateX(70deg)'}, + {at: 0.75, expect: 'rotateX(75deg)'}, + {at: 1, expect: 'rotateX(80deg)'}, + {at: 1.5, expect: 'rotateX(90deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'rotateY(20deg)', + addFrom: 'rotateY(40deg)', + addTo: 'rotateY(60deg)', +}, [ + {at: -0.5, expect: 'rotateY(50deg)'}, + {at: 0, expect: 'rotateY(60deg)'}, + {at: 0.25, expect: 'rotateY(65deg)'}, + {at: 0.5, expect: 'rotateY(70deg)'}, + {at: 0.75, expect: 'rotateY(75deg)'}, + {at: 1, expect: 'rotateY(80deg)'}, + {at: 1.5, expect: 'rotateY(90deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'rotateZ(20deg)', + addFrom: 'rotateZ(40deg)', + addTo: 'rotateZ(60deg)', +}, [ + {at: -0.5, expect: 'rotateZ(50deg)'}, + {at: 0, expect: 'rotateZ(60deg)'}, + {at: 0.25, expect: 'rotateZ(65deg)'}, + {at: 0.5, expect: 'rotateZ(70deg)'}, + {at: 0.75, expect: 'rotateZ(75deg)'}, + {at: 1, expect: 'rotateZ(80deg)'}, + {at: 1.5, expect: 'rotateZ(90deg)'}, +]); + +// When testing rotate functions in isolation, the additive and accumulation +// behaviors are functionally identical. This test includes a skew to ensure +// both methods are implemented; add should append the from/to after the skew. +test_composition({ + property: 'transform', + underlying: 'rotate(45deg) skew(10deg, 20deg)', + addFrom: 'rotate(45deg)', + addTo: 'rotate(225deg)', +}, [ + {at: -0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(-45deg)'}, + {at: 0, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(45deg)'}, + {at: 0.25, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(90deg)'}, + {at: 0.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(135deg)'}, + {at: 0.75, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(180deg)'}, + {at: 1, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(225deg)'}, + {at: 1.5, expect: 'rotate(45deg) skew(10deg, 20deg) rotate(315deg)'}, +]); +// ------------ Accumulation tests -------------- + +test_composition({ + property: 'transform', + underlying: 'rotateX(20deg)', + accumulateFrom: 'rotateX(40deg)', + accumulateTo: 'rotateX(60deg)', +}, [ + {at: -0.5, expect: 'rotateX(50deg)'}, + {at: 0, expect: 'rotateX(60deg)'}, + {at: 0.25, expect: 'rotateX(65deg)'}, + {at: 0.5, expect: 'rotateX(70deg)'}, + {at: 0.75, expect: 'rotateX(75deg)'}, + {at: 1, expect: 'rotateX(80deg)'}, + {at: 1.5, expect: 'rotateX(90deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'rotateY(20deg)', + accumulateFrom: 'rotateY(40deg)', + accumulateTo: 'rotateY(60deg)', +}, [ + {at: -0.5, expect: 'rotateY(50deg)'}, + {at: 0, expect: 'rotateY(60deg)'}, + {at: 0.25, expect: 'rotateY(65deg)'}, + {at: 0.5, expect: 'rotateY(70deg)'}, + {at: 0.75, expect: 'rotateY(75deg)'}, + {at: 1, expect: 'rotateY(80deg)'}, + {at: 1.5, expect: 'rotateY(90deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'rotateZ(20deg)', + accumulateFrom: 'rotateZ(40deg)', + accumulateTo: 'rotateZ(60deg)', +}, [ + {at: -0.5, expect: 'rotateZ(50deg)'}, + {at: 0, expect: 'rotateZ(60deg)'}, + {at: 0.25, expect: 'rotateZ(65deg)'}, + {at: 0.5, expect: 'rotateZ(70deg)'}, + {at: 0.75, expect: 'rotateZ(75deg)'}, + {at: 1, expect: 'rotateZ(80deg)'}, + {at: 1.5, expect: 'rotateZ(90deg)'}, +]); + +// The rotate functions all share the same primitive type (rotate3d), so can be +// accumulated between. If primitive type matching is not properly being +// performed, this test would likely fail with a fallback to replace behavior. +test_composition({ + property: 'transform', + underlying: 'rotateX(45deg)', + accumulateFrom: 'rotateY(30deg)', + accumulateTo: 'rotateY(70deg)', +}, [ + // Due to how rotation is accumulated (addition of underlying angles), the + // behavior is identical to concatenating the components. The expectations + // are expressed as concatenations for readability. + {at: -0.5, expect: 'rotateX(45deg) rotateY(10deg)'}, + {at: 0, expect: 'rotateX(45deg) rotateY(30deg)'}, + {at: 0.25, expect: 'rotateX(45deg) rotateY(40deg)'}, + {at: 0.5, expect: 'rotateX(45deg) rotateY(50deg)'}, + {at: 0.75, expect: 'rotateX(45deg) rotateY(60deg)'}, + {at: 1, expect: 'rotateX(45deg) rotateY(70deg)'}, + {at: 1.5, expect: 'rotateX(45deg) rotateY(90deg)'}, +]); + +// When testing rotate functions in isolation, the additive and accumulation +// behaviors are functionally identical. This test includes a skew to ensure +// both methods are implemented; accumulate should combine the rotate before +// the skew. +test_composition({ + property: 'transform', + underlying: 'rotate(45deg) skew(10deg, 20deg)', + accumulateFrom: 'rotate(45deg)', + accumulateTo: 'rotate(225deg)', +}, [ + {at: -0.5, expect: 'rotate(0deg) skew(10deg, 20deg)'}, + {at: 0, expect: 'rotate(90deg) skew(10deg, 20deg)'}, + {at: 0.25, expect: 'rotate(135deg) skew(10deg, 20deg)'}, + {at: 0.5, expect: 'rotate(180deg) skew(10deg, 20deg)'}, + {at: 0.75, expect: 'rotate(225deg) skew(10deg, 20deg)'}, + {at: 1, expect: 'rotate(270deg) skew(10deg, 20deg)'}, + {at: 1.5, expect: 'rotate(360deg) skew(10deg, 20deg)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-scale-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-scale-composition.html new file mode 100644 index 0000000000..87c33a85ed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-scale-composition.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform-scale composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions"> +<meta name="assert" content="transform-scale supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// Addition (aka concatenation) of scale functions results in multiplying their +// values (scale(2) scale(3) == scale(6)), whereas accumulation does a 1-based +// sum of the components (accumulate(scale(2), scale(3)) == scale(2 + 3 - 1) == +// scale(4)). + +// ------------ Addition tests -------------- + +test_composition({ + property: 'transform', + underlying: 'scaleX(2)', + addFrom: 'scaleX(3)', + addTo: 'scaleX(4)', +}, [ + {at: -0.5, expect: 'scaleX(5)'}, + {at: 0, expect: 'scaleX(6)'}, + {at: 0.25, expect: 'scaleX(6.5)'}, + {at: 0.5, expect: 'scaleX(7)'}, + {at: 0.75, expect: 'scaleX(7.5)'}, + {at: 1, expect: 'scaleX(8)'}, + {at: 1.5, expect: 'scaleX(9)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'scaleY(2)', + addFrom: 'scaleY(3)', + addTo: 'scaleY(4)', +}, [ + {at: -0.5, expect: 'scaleY(5)'}, + {at: 0, expect: 'scaleY(6)'}, + {at: 0.25, expect: 'scaleY(6.5)'}, + {at: 0.5, expect: 'scaleY(7)'}, + {at: 0.75, expect: 'scaleY(7.5)'}, + {at: 1, expect: 'scaleY(8)'}, + {at: 1.5, expect: 'scaleY(9)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'scaleZ(2)', + addFrom: 'scaleZ(3)', + addTo: 'scaleZ(4)', +}, [ + {at: -0.5, expect: 'scaleZ(5)'}, + {at: 0, expect: 'scaleZ(6)'}, + {at: 0.25, expect: 'scaleZ(6.5)'}, + {at: 0.5, expect: 'scaleZ(7)'}, + {at: 0.75, expect: 'scaleZ(7.5)'}, + {at: 1, expect: 'scaleZ(8)'}, + {at: 1.5, expect: 'scaleZ(9)'}, +]); + +// ------------ Accumulation tests -------------- + +test_composition({ + property: 'transform', + underlying: 'scaleX(2)', + accumulateFrom: 'scaleX(3)', + accumulateTo: 'scaleX(4)', +}, [ + {at: -0.5, expect: 'scaleX(3.5)'}, + {at: 0, expect: 'scaleX(4)'}, + {at: 0.25, expect: 'scaleX(4.25)'}, + {at: 0.5, expect: 'scaleX(4.5)'}, + {at: 0.75, expect: 'scaleX(4.75)'}, + {at: 1, expect: 'scaleX(5)'}, + {at: 1.5, expect: 'scaleX(5.5)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'scaleY(2)', + accumulateFrom: 'scaleY(3)', + accumulateTo: 'scaleY(4)', +}, [ + {at: -0.5, expect: 'scaleY(3.5)'}, + {at: 0, expect: 'scaleY(4)'}, + {at: 0.25, expect: 'scaleY(4.25)'}, + {at: 0.5, expect: 'scaleY(4.5)'}, + {at: 0.75, expect: 'scaleY(4.75)'}, + {at: 1, expect: 'scaleY(5)'}, + {at: 1.5, expect: 'scaleY(5.5)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'scaleZ(2)', + accumulateFrom: 'scaleZ(3)', + accumulateTo: 'scaleZ(4)', +}, [ + {at: -0.5, expect: 'scaleZ(3.5)'}, + {at: 0, expect: 'scaleZ(4)'}, + {at: 0.25, expect: 'scaleZ(4.25)'}, + {at: 0.5, expect: 'scaleZ(4.5)'}, + {at: 0.75, expect: 'scaleZ(4.75)'}, + {at: 1, expect: 'scaleZ(5)'}, + {at: 1.5, expect: 'scaleZ(5.5)'}, +]); + +// The scale functions all share the same primitive type (scale3d), so can be +// accumulated between. +test_composition({ + property: 'transform', + underlying: 'scale(2, 4)', + accumulateFrom: 'scaleZ(3)', + accumulateTo: 'scaleZ(4)', +}, [ + {at: -0.5, expect: 'scale3d(2, 4, 2.5)'}, + {at: 0, expect: 'scale3d(2, 4, 3)'}, + {at: 0.25, expect: 'scale3d(2, 4, 3.25)'}, + {at: 0.5, expect: 'scale3d(2, 4, 3.5)'}, + {at: 0.75, expect: 'scale3d(2, 4, 3.75)'}, + {at: 1, expect: 'scale3d(2, 4, 4)'}, + {at: 1.5, expect: 'scale3d(2, 4, 4.5)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-skew-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-skew-composition.html new file mode 100644 index 0000000000..cda44b60c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-skew-composition.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform-skew composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions"> +<meta name="assert" content="transform-skew supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +// Addition (aka concatenation) of two skew functions skew(a) and skew(b) +// results in computing tan(a) + tan(b), whereas accumulation results in summing +// the components to get tan(a + b). + +// ------------ Addition tests -------------- + +test_composition({ + property: 'transform', + underlying: 'skewX(10deg)', + addFrom: 'skewX(30deg)', + addTo: 'skewX(50deg)', +}, [ + {at: -0.5, expect: 'skewX(10deg) skewX(20deg)'}, + {at: 0, expect: 'skewX(10deg) skewX(30deg)'}, + {at: 0.25, expect: 'skewX(10deg) skewX(35deg)'}, + {at: 0.5, expect: 'skewX(10deg) skewX(40deg)'}, + {at: 0.75, expect: 'skewX(10deg) skewX(45deg)'}, + {at: 1, expect: 'skewX(10deg) skewX(50deg)'}, + {at: 1.5, expect: 'skewX(10deg) skewX(60deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'skewY(10deg)', + addFrom: 'skewY(30deg)', + addTo: 'skewY(50deg)', +}, [ + {at: -0.5, expect: 'skewY(10deg) skewY(20deg)'}, + {at: 0, expect: 'skewY(10deg) skewY(30deg)'}, + {at: 0.25, expect: 'skewY(10deg) skewY(35deg)'}, + {at: 0.5, expect: 'skewY(10deg) skewY(40deg)'}, + {at: 0.75, expect: 'skewY(10deg) skewY(45deg)'}, + {at: 1, expect: 'skewY(10deg) skewY(50deg)'}, + {at: 1.5, expect: 'skewY(10deg) skewY(60deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'skew(10deg, 20deg)', + addFrom: 'skew(30deg, 10deg)', + addTo: 'skew(50deg, 50deg)', +}, [ + {at: -0.5, expect: 'skew(10deg, 20deg) skew(20deg, -10deg)'}, + {at: 0, expect: 'skew(10deg, 20deg) skew(30deg, 10deg)'}, + {at: 0.25, expect: 'skew(10deg, 20deg) skew(35deg, 20deg)'}, + {at: 0.5, expect: 'skew(10deg, 20deg) skew(40deg, 30deg)'}, + {at: 0.75, expect: 'skew(10deg, 20deg) skew(45deg, 40deg)'}, + {at: 1, expect: 'skew(10deg, 20deg) skew(50deg, 50deg)'}, + {at: 1.5, expect: 'skew(10deg, 20deg) skew(60deg, 70deg)'}, +]); + +// ------------ Accumulation tests -------------- + +test_composition({ + property: 'transform', + underlying: 'skewX(45deg)', + accumulateFrom: 'skewX(30deg)', + accumulateTo: 'skewX(70deg)', +}, [ + {at: -0.5, expect: 'skewX(55deg)'}, + {at: 0, expect: 'skewX(75deg)'}, + {at: 0.25, expect: 'skewX(85deg)'}, + {at: 0.5, expect: 'skewX(95deg)'}, + {at: 0.75, expect: 'skewX(105deg)'}, + {at: 1, expect: 'skewX(115deg)'}, + {at: 1.5, expect: 'skewX(135deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'skewY(45deg)', + accumulateFrom: 'skewY(30deg)', + accumulateTo: 'skewY(70deg)', +}, [ + {at: -0.5, expect: 'skewY(55deg)'}, + {at: 0, expect: 'skewY(75deg)'}, + {at: 0.25, expect: 'skewY(85deg)'}, + {at: 0.5, expect: 'skewY(95deg)'}, + {at: 0.75, expect: 'skewY(105deg)'}, + {at: 1, expect: 'skewY(115deg)'}, + {at: 1.5, expect: 'skewY(135deg)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'skew(10deg, 45deg)', + accumulateFrom: 'skew(20deg, 30deg)', + accumulateTo: 'skew(40deg, 70deg)', +}, [ + {at: -0.5, expect: 'skew(20deg, 55deg)'}, + {at: 0, expect: 'skew(30deg, 75deg)'}, + {at: 0.25, expect: 'skew(35deg, 85deg)'}, + {at: 0.5, expect: 'skew(40deg, 95deg)'}, + {at: 0.75, expect: 'skew(45deg, 105deg)'}, + {at: 1, expect: 'skew(50deg, 115deg)'}, + {at: 1.5, expect: 'skew(60deg, 135deg)'}, +]); + +// The skew{X,Y} functions DO NOT share the same primitive type, so cannot be +// accumlated between directly. Instead, they fall back to matrix accumulation, +// which this tests for. +test_composition({ + property: 'transform', + underlying: 'skewX(45deg)', + accumulateFrom: 'skewY(45deg)', + accumulateTo: 'skewY(45deg)', +}, [ + // Note that this is not equivalent to any form of combined skews. + {at: 0.5, expect: 'matrix(1, 1, 0.5, 1.5, 0, 0)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/transform-translate-composition.html b/testing/web-platform/tests/css/css-transforms/animation/transform-translate-composition.html new file mode 100644 index 0000000000..49214c4a93 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/transform-translate-composition.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>transform-translate composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#two-d-transform-functions"> +<meta name="assert" content="transform-translate supports animation as a transform list"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script src="../interpolation/resources/interpolation-test.js"></script> +<script> +// ------------ Addition tests -------------- + +test_composition({ + property: 'transform', + underlying: 'translate(10px, 20px)', + addFrom: 'translate(100px, 200px)', + addTo: 'translate(200px, 400px)', +}, [ + {at: -0.5, expect: 'translate(60px, 120px)'}, + {at: 0, expect: 'translate(110px, 220px)'}, + {at: 0.25, expect: 'translate(135px, 270px)'}, + {at: 0.5, expect: 'translate(160px, 320px)'}, + {at: 0.75, expect: 'translate(185px, 370px)'}, + {at: 1, expect: 'translate(210px, 420px)'}, + {at: 1.5, expect: 'translate(260px, 520px)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'translate(10px, 20px)', + addFrom: 'translate(100px, 200px)', + replaceTo: 'translate(210px, 420px)', +}, [ + {at: -0.5, expect: 'translate(60px, 120px)'}, + {at: 0, expect: 'translate(110px, 220px)'}, + {at: 0.25, expect: 'translate(135px, 270px)'}, + {at: 0.5, expect: 'translate(160px, 320px)'}, + {at: 0.75, expect: 'translate(185px, 370px)'}, + {at: 1, expect: 'translate(210px, 420px)'}, + {at: 1.5, expect: 'translate(260px, 520px)'}, +]); + +// When testing translate functions in isolation, the additive and accumulation +// behaviors are functionally identical. This test includes a rotate to ensure +// both methods are implemented; add should append the from/to after the rotate. +test_composition({ + property: 'transform', + underlying: 'translateX(100px) rotate(90deg)', + addFrom: 'translateX(100px)', + addTo: 'translateX(200px)', +}, [ + {at: -0.5, expect: 'translateX(100px) rotate(90deg) translateX(50px)'}, + {at: 0, expect: 'translateX(100px) rotate(90deg) translateX(100px)'}, + {at: 0.25, expect: 'translateX(100px) rotate(90deg) translateX(125px)'}, + {at: 0.5, expect: 'translateX(100px) rotate(90deg) translateX(150px)'}, + {at: 0.75, expect: 'translateX(100px) rotate(90deg) translateX(175px)'}, + {at: 1, expect: 'translateX(100px) rotate(90deg) translateX(200px)'}, + {at: 1.5, expect: 'translateX(100px) rotate(90deg) translateX(250px)'}, +]); + +// ------------ Accumulation tests -------------- + +test_composition({ + property: 'transform', + underlying: 'translateX(100px)', + accumulateFrom: 'translateX(50px)', + accumulateTo: 'translateX(250px)', +}, [ + {at: -0.5, expect: 'translateX(50px)'}, + {at: 0, expect: 'translateX(150px)'}, + {at: 0.25, expect: 'translateX(200px)'}, + {at: 0.5, expect: 'translateX(250px)'}, + {at: 0.75, expect: 'translateX(300px)'}, + {at: 1, expect: 'translateX(350px)'}, + {at: 1.5, expect: 'translateX(450px)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'translateY(100px)', + accumulateFrom: 'translateY(50px)', + accumulateTo: 'translateY(250px)', +}, [ + {at: -0.5, expect: 'translateY(50px)'}, + {at: 0, expect: 'translateY(150px)'}, + {at: 0.25, expect: 'translateY(200px)'}, + {at: 0.5, expect: 'translateY(250px)'}, + {at: 0.75, expect: 'translateY(300px)'}, + {at: 1, expect: 'translateY(350px)'}, + {at: 1.5, expect: 'translateY(450px)'}, +]); + +test_composition({ + property: 'transform', + underlying: 'translateZ(100px)', + accumulateFrom: 'translateZ(50px)', + accumulateTo: 'translateZ(250px)', +}, [ + {at: -0.5, expect: 'translateZ(50px)'}, + {at: 0, expect: 'translateZ(150px)'}, + {at: 0.25, expect: 'translateZ(200px)'}, + {at: 0.5, expect: 'translateZ(250px)'}, + {at: 0.75, expect: 'translateZ(300px)'}, + {at: 1, expect: 'translateZ(350px)'}, + {at: 1.5, expect: 'translateZ(450px)'}, +]); + +// The translate functions all share the same primitive type (translate3d), so +// can be accumulated between. +test_composition({ + property: 'transform', + underlying: 'translate(100px, 50px)', + accumulateFrom: 'translateZ(50px)', + accumulateTo: 'translateZ(250px)', +}, [ + {at: -0.5, expect: 'translate3d(100px, 50px, -50px)'}, + {at: 0, expect: 'translate3d(100px, 50px, 50px)'}, + {at: 0.25, expect: 'translate3d(100px, 50px, 100px)'}, + {at: 0.5, expect: 'translate3d(100px, 50px, 150px)'}, + {at: 0.75, expect: 'translate3d(100px, 50px, 200px)'}, + {at: 1, expect: 'translate3d(100px, 50px, 250px)'}, + {at: 1.5, expect: 'translate3d(100px, 50px, 350px)'}, +]); + +// When testing translate functions in isolation, the additive and accumulation +// behaviors are functionally identical. This test includes a rotate to ensure +// both methods are implemented; accumulate should combine the transform before +// the rotate. +test_composition({ + property: 'transform', + underlying: 'translateX(100px) rotate(90deg)', + accumulateFrom: 'translateX(100px)', + accumulateTo: 'translateX(200px)', +}, [ + {at: -0.5, expect: 'translateX(150px) rotate(90deg)'}, + {at: 0, expect: 'translateX(200px) rotate(90deg)'}, + {at: 0.25, expect: 'translateX(225px) rotate(90deg)'}, + {at: 0.5, expect: 'translateX(250px) rotate(90deg)'}, + {at: 0.75, expect: 'translateX(275px) rotate(90deg)'}, + {at: 1, expect: 'translateX(300px) rotate(90deg)'}, + {at: 1.5, expect: 'translateX(350px) rotate(90deg)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-animation-on-svg-ref.html b/testing/web-platform/tests/css/css-transforms/animation/translate-animation-on-svg-ref.html new file mode 100644 index 0000000000..d503f33851 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-animation-on-svg-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<title>Animating the "translate" property on an SVG element</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + +<style> + +svg { + width: 400px; + height: 400px; +} + +rect { + width: 200px; + height: 200px; + transform-origin: top left; + translate: 100px 100px; +} + +</style> +</head> +<body> +<svg><rect></rect></svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-animation-on-svg.html b/testing/web-platform/tests/css/css-transforms/animation/translate-animation-on-svg.html new file mode 100644 index 0000000000..e5cc697360 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-animation-on-svg.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating the "translate" property on an SVG element</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> +<link rel="match" href="translate-animation-on-svg-ref.html"> + +<style> + +@keyframes translate-animation { + from { translate: 0 0; } + to { translate: 100px 100px; } +} + +svg { + width: 400px; + height: 400px; +} + +rect { + width: 100px; + height: 100px; + transform-origin: top left; + animation: translate-animation 1ms linear forwards; +} + +</style> +</head> +<body> +<svg><rect></rect></svg> + +<script> + +(async function() { + await Promise.all(document.getAnimations().map(animation => animation.finished)); + document.documentElement.classList.remove("reftest-wait"); +})(); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-composition.html b/testing/web-platform/tests/css/css-transforms/animation/translate-composition.html new file mode 100644 index 0000000000..3250d746a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-composition.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>translate composition</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<meta name="assert" content="translate supports <length> and <percentage> animation."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<style> +.target { + width: 100px; + height: 100px; +} +</style> +<script> +test_composition({ + property: 'translate', + underlying: '100px 200px 300px', + addFrom: '-50px 50%', + addTo: '100%', +}, [ + {at: -1, expect: '-100% calc(200px + 100%) 300px'}, + {at: 0, expect: 'calc(50px + 0%) calc(200px + 50%) 300px'}, + {at: 0.25, expect: 'calc(62.5px + 25%) calc(200px + 37.5%) 300px'}, + {at: 0.75, expect: 'calc(87.5px + 75%) calc(200px + 12.5%) 300px'}, + {at: 1, expect: 'calc(100px + 100%) calc(200px + 0%) 300px'}, + {at: 2, expect: 'calc(150px + 200%) calc(200px - 50%) 300px'}, +]); + +test_composition({ + property: 'translate', + underlying: '100px 200px 300px', + addFrom: '50% 100px', + replaceTo: '200px 50% 100px', +}, [ + {at: -1, expect: '100% calc(600px - 50%) 500px'}, + {at: 0, expect: 'calc(100px + 50%) calc(300px + 0%) 300px'}, + {at: 0.25, expect: 'calc(125px + 37.5%) calc(225px + 12.5%) 250px'}, + {at: 0.75, expect: 'calc(175px + 12.5%) calc(75px + 37.5%) 150px'}, + {at: 1, expect: 'calc(200px + 0%) 50% 100px'}, + {at: 2, expect: 'calc(300px - 50%) calc(-300px + 100%) -100px'}, +]); + +test_composition({ + property: 'translate', + underlying: '100px 200px 300px', + replaceFrom: '50% 100px', + addTo: '200px 50% 100px', +}, [ + {at: -1, expect: 'calc(-300px + 100%) -50% -400px'}, + {at: 0, expect: '50% calc(100px + 0%)'}, + {at: 0.25, expect: 'calc(75px + 37.5%) calc(125px + 12.5%) 100px'}, + {at: 0.75, expect: 'calc(225px + 12.5%) calc(175px + 37.5%) 300px'}, + {at: 1, expect: 'calc(300px + 0%) calc(200px + 50%) 400px'}, + {at: 2, expect: 'calc(600px - 50%) calc(300px + 100%) 800px'}, +]); + +test_composition({ + property: 'translate', + underlying: 'none', + replaceFrom: 'none', + addTo: '100px', +}, [ + {at: -1, expect: '-100px'}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: '25px'}, + {at: 0.75, expect: '75px'}, + {at: 1, expect: '100px'}, + {at: 2, expect: '200px'}, +]); + +test_composition({ + property: 'translate', + underlying: 'none', + addFrom: 'none', + addTo: '100px', +}, [ + {at: -1, expect: '-100px'}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: '25px'}, + {at: 0.75, expect: '75px'}, + {at: 1, expect: '100px'}, + {at: 2, expect: '200px'}, +]); + +test_composition({ + property: 'translate', + underlying: 'none', + replaceFrom: '0px 40px 60px', + replaceTo: 'none', +}, [ + {at: -1, expect: '0px 80px 120px'}, + {at: 0, expect: '0px 40px 60px'}, + {at: 0.25, expect: '0px 30px 45px'}, + {at: 0.75, expect: '0px 10px 15px'}, + {at: 1, expect: '0px'}, + {at: 2, expect: '0px -40px -60px'}, +]); + +test_composition({ + property: 'translate', + underlying: 'none', + replaceFrom: '0px 40px 60px', + addTo: 'none', +}, [ + {at: -1, expect: '0px 80px 120px'}, + {at: 0, expect: '0px 40px 60px'}, + {at: 0.25, expect: '0px 30px 45px'}, + {at: 0.75, expect: '0px 10px 15px'}, + {at: 1, expect: '0px'}, + {at: 2, expect: '0px -40px -60px'}, +]); + +test_composition({ + property: 'translate', + underlying: '80px 20px', + addFrom: 'none', + replaceTo: '0px 40px 60px', +}, [ + {at: -1, expect: '160px 0px -60px'}, + {at: 0, expect: '80px 20px'}, + {at: 0.25, expect: '60px 25px 15px'}, + {at: 0.5, expect: '40px 30px 30px'}, + {at: 0.75, expect: '20px 35px 45px'}, + {at: 1, expect: '0px 40px 60px'}, + {at: 2, expect: '-80px 60px 120px'}, +]); + +test_composition({ + property: 'translate', + underlying: '80px 20px', + addFrom: '0px 40px 60px', + replaceTo: 'none', +}, [ + {at: -1, expect: '160px 120px 120px'}, + {at: 0, expect: '80px 60px 60px'}, + {at: 0.25, expect: '60px 45px 45px'}, + {at: 0.5, expect: '40px 30px 30px'}, + {at: 0.75, expect: '20px 15px 15px'}, + {at: 1, expect: '0px'}, + {at: 2, expect: '-80px -60px -60px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-interpolation.html b/testing/web-platform/tests/css/css-transforms/animation/translate-interpolation.html new file mode 100644 index 0000000000..4ece9721b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-interpolation.html @@ -0,0 +1,271 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>translate interpolation</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> + <meta name="assert" content="translate supports <length> and <percentage> animation."> + <meta name="timeout" content="long"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/interpolation-testcommon.js"></script> + <style> + .parent { + translate: 100px 200px 300px; + } + .target { + width: 100px; + height: 100px; + background-color: black; + translate: 10px; + } + .expected { + background-color: green; + } + </style> + </head> + <body> + <template id="target-template"> + <div class="parent"> + <div class="target"></div> + </div> + </template> + <script> + // Matching one-length (pixels) animation. + test_interpolation({ + property: 'translate', + from: '-100px', + to: '100px', + }, [ + {at: -1, expect: '-300px'}, + {at: 0, expect: '-100px'}, + {at: 0.25, expect: '-50px'}, + {at: 0.75, expect: '50px'}, + {at: 1, expect: '100px'}, + {at: 2, expect: '300px'}, + ]); + + // Matching one-length (percentage) animation. + test_interpolation({ + property: 'translate', + from: '-100%', + to: '100%', + }, [ + {at: -1, expect: '-300%'}, + {at: 0, expect: '-100%'}, + {at: 0.25, expect: '-50%'}, + {at: 0.75, expect: '50%'}, + {at: 1, expect: '100%'}, + {at: 2, expect: '300%'}, + ]); + + // Matching two-length (all pixels) animation. + test_interpolation({ + property: 'translate', + from: '-100px -50px', + to: '100px 50px', + }, [ + {at: -1, expect: '-300px -150px'}, + {at: 0, expect: '-100px -50px'}, + {at: 0.25, expect: '-50px -25px'}, + {at: 0.75, expect: '50px 25px'}, + {at: 1, expect: '100px 50px'}, + {at: 2, expect: '300px 150px'}, + ]); + + // Matching three-length (all pixels) animation. + test_interpolation({ + property: 'translate', + from: '220px 240px 260px', + to: '300px 400px 500px', + }, [ + {at: -1, expect: '140px 80px 20px'}, + {at: 0, expect: '220px 240px 260px'}, + {at: 0.125, expect: '230px 260px 290px'}, + {at: 0.875, expect: '290px 380px 470px'}, + {at: 1, expect: '300px 400px 500px'}, + {at: 2, expect: '380px 560px 740px'} + ]); + + // Going from one length to three lengths. + test_interpolation({ + property: 'translate', + from: '0px', + to: '-100px -50px 100px', + }, [ + {at: -1, expect: '100px 50px -100px'}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: '-25px -12.5px 25px'}, + {at: 0.75, expect: '-75px -37.5px 75px'}, + {at: 1, expect: '-100px -50px 100px'}, + {at: 2, expect: '-200px -100px 200px'}, + ]); + + // Going from three lengths to one length. + test_interpolation({ + property: 'translate', + from: '-100px -50px 100px', + to: '0px', + }, [ + {at: -1, expect: '-200px -100px 200px'}, + {at: 0, expect: '-100px -50px 100px'}, + {at: 0.25, expect: '-75px -37.5px 75px'}, + {at: 0.75, expect: '-25px -12.5px 25px'}, + {at: 1, expect: '0px'}, + {at: 2, expect: '100px 50px -100px'}, + ]); + + // Going from three-lengths to two-percentages. + test_interpolation({ + property: 'translate', + from: '480px 400px 320px', + to: '240% 160%', + }, [ + {at: -1, expect: 'calc(960px - 240%) calc(800px - 160%) 640px'}, + {at: 0, expect: 'calc(0% + 480px) calc(0% + 400px) 320px'}, + {at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%) 280px'}, + {at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px) 40px'}, + {at: 1, expect: '240% 160%'}, + {at: 2, expect: 'calc(480% - 480px) calc(320% - 400px) -320px'} + ]); + + // Handling of the none value. + test_interpolation({ + property: 'translate', + from: 'none', + to: 'none', + }, [ + {at: -1, expect: 'none'}, + {at: 0, expect: 'none'}, + {at: 0.125, expect: 'none'}, + {at: 0.875, expect: 'none'}, + {at: 1, expect: 'none'}, + {at: 2, expect: 'none'} + ]); + + // Going from none to a valid value; test that it converts properly. + test_interpolation({ + property: 'translate', + from: 'none', + to: '8px 80% 800px', + }, [ + {at: -1, expect: '-8px -80% -800px'}, + {at: 0, expect: '0px 0%'}, + {at: 0.125, expect: '1px 10% 100px'}, + {at: 0.875, expect: '7px 70% 700px'}, + {at: 1, expect: '8px 80% 800px'}, + {at: 2, expect: '16px 160% 1600px'} + ]); + + // Test neutral keyframe; make sure it adds the underlying. + test_interpolation({ + property: 'translate', + from: neutralKeyframe, + to: '20px', + }, [ + {at: -1, expect: '0px'}, + {at: 0, expect: '10px'}, + {at: 0.25, expect: '12.5px'}, + {at: 0.75, expect: '17.5px'}, + {at: 1, expect: '20px'}, + {at: 2, expect: '30px'}, + ]); + + // Test initial value; for 'scale' this is 'none'. + test_interpolation({ + property: 'translate', + from: 'initial', + to: '200px 100px 200px', + }, [ + {at: -1, expect: '-200px -100px -200px'}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: '50px 25px 50px'}, + {at: 0.75, expect: '150px 75px 150px'}, + {at: 1, expect: '200px 100px 200px'}, + {at: 2, expect: '400px 200px 400px'}, + ]); + + test_interpolation({ + property: 'translate', + from: '200px 100px 400px', + to: 'initial', + }, [ + {at: -1, expect: '400px 200px 800px'}, + {at: 0, expect: '200px 100px 400px'}, + {at: 0.25, expect: '150px 75px 300px'}, + {at: 0.75, expect: '50px 25px 100px'}, + {at: 1, expect: '0px'}, + {at: 2, expect: '-200px -100px -400px'}, + ]); + + + // Test unset value; for 'translate' this is 'none'. + test_interpolation({ + property: 'translate', + from: 'unset', + to: '20px', + }, [ + {at: -1, expect: '-20px'}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: '5px'}, + {at: 0.75, expect: '15px'}, + {at: 1, expect: '20px'}, + {at: 2, expect: '40px'}, + ]); + + // Test inherited value. + test_interpolation({ + property: 'translate', + from: 'inherit', + to: '200px 100px 200px', + }, [ + {at: -1, expect: '0px 300px 400px'}, + {at: 0, expect: '100px 200px 300px'}, + {at: 0.25, expect: '125px 175px 275px'}, + {at: 0.75, expect: '175px 125px 225px'}, + {at: 1, expect: '200px 100px 200px'}, + {at: 2, expect: '300px 0px 100px'}, + ]); + + test_interpolation({ + property: 'translate', + from: '200px 100px 200px', + to: 'inherit', + }, [ + {at: -1, expect: '300px 0px 100px'}, + {at: 0, expect: '200px 100px 200px'}, + {at: 0.25, expect: '175px 125px 225px'}, + {at: 0.75, expect: '125px 175px 275px'}, + {at: 1, expect: '100px 200px 300px'}, + {at: 2, expect: '0px 300px 400px'}, + ]); + + // Test combination of initial and inherit. + test_interpolation({ + property: 'translate', + from: 'initial', + to: 'inherit', + }, [ + {at: -1, expect: '-100px -200px -300px'}, + {at: 0, expect: '0px'}, + {at: 0.25, expect: '25px 50px 75px'}, + {at: 0.75, expect: '75px 150px 225px'}, + {at: 1, expect: '100px 200px 300px'}, + {at: 2, expect: '200px 400px 600px'}, + ]); + + test_interpolation({ + property: 'translate', + from: 'inherit', + to: 'initial', + }, [ + {at: -1, expect: '200px 400px 600px'}, + {at: 0, expect: '100px 200px 300px'}, + {at: 0.25, expect: '75px 150px 225px'}, + {at: 0.75, expect: '25px 50px 75px'}, + {at: 1, expect: '0px'}, + {at: 2, expect: '-100px -200px -300px'}, + ]); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-ref.html b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-ref.html new file mode 100644 index 0000000000..ddd7d01b69 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<style> + +div { + width: 200px; + height: 200px; + background-color: black; + translate: 50%, 50%; +} + +</style> +</head> +<body> +<div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-separate-ref.html b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-separate-ref.html new file mode 100644 index 0000000000..62ec4d9b3d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-separate-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<style> + +div { + width: 200px; + height: 200px; + background-color: black; + translate: 50% 50%; +} + +</style> +</head> +<body> +<div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-separate.html b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-separate.html new file mode 100644 index 0000000000..bfd5d483fe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height-separate.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating the "translate" property with a percent value while also animating "width" and "height" using two separate animations</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> +<link rel="match" href="translate-percent-with-width-and-height-separate-ref.html"> +<script src="../../../common/reftest-wait.js"></script> +<style> + +div { + width: 10px; + height: 10px; + background-color: black; + animation-duration: 10s; + animation-name: size, translate; +} + +@keyframes size { + 0.000000001%, to { + width: 200px; + height: 200px; + } +} + +@keyframes translate { + 0.000000001%, to { + translate: 50% 50%; + } +} + +</style> +</head> +<body> +<div></div> +<script> +(async function() { + await Promise.all(document.getAnimations().map(animation => animation.ready)); + await new Promise(requestAnimationFrame); + await new Promise(requestAnimationFrame); + takeScreenshot(); +})(); +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height.html b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height.html new file mode 100644 index 0000000000..fa7ea84463 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/animation/translate-percent-with-width-and-height.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<title>Animating the "translate" property with percent values while also animating "width" and "height"</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/"> +<link rel="match" href="translate-percent-with-width-and-height-ref.html"> +<script src="../../../common/reftest-wait.js"></script> +<style> + +div { + width: 10px; + height: 10px; + background-color: black; + animation: anim 10s linear forwards; +} + +@keyframes anim { + 0.000000001%, to { + width: 200px; + height: 200px; + translate: 50%, 50%; + } +} + +</style> +</head> +<body> +<div></div> +<script> +(async function() { + await Promise.all(document.getAnimations().map(animation => animation.ready)); + await new Promise(requestAnimationFrame); + await new Promise(requestAnimationFrame); + takeScreenshot(); +})(); +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-001.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-001.html new file mode 100644 index 0000000000..cfba13db63 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> +<link rel="match" href="backface-visibility-001.ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-1"> +<meta name="assert" content="backface-visibility should have no effect when no transforms are present"> +<style> +.box { + border: 1px solid black; + width: 200px; + height: 200px; + backface-visibility: hidden; +} +</style> +<div class="box"> + This text should be visible +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-001.ref.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-001.ref.html new file mode 100644 index 0000000000..c4660f1cd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-001.ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@google.com"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> +<meta name="assert" content="backface-visibility should have no effect when no transforms are present"> +<style> +.box { + border: 1px solid black; + width: 200px; + height: 200px; +} +</style> +<div class="box"> + This text should be visible +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-001.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-001.html new file mode 100644 index 0000000000..2476f5b4e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-001.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with backface visibility = hidden</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <link rel="match" href="reference/backface-visibility-hidden-ref.html"> + <meta name="fuzzy" content="maxDifference=0-79;totalPixels=0-200"> + <meta name="assert" content="When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + z-index: 2; + } + + .redSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: red; + z-index: 1; + transform: rotateY(180deg); + } + + .face { + backface-visibility: hidden; + } + + .card { + transform-style: preserve-3d; + } + + .container { + width: 200px; + height: 200px; + perspective: 1000px; + 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="redSquare face"></div> + <div class="greenSquare face"></div> + </div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-002-ref.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-002-ref.html new file mode 100644 index 0000000000..eab3c4e38b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-002-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>backface visibility: hidden self-transform</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + +<p>The test passes if there is a green rectangle and no red.</p> +<style> + div { + width: 100px; + height: 100px; + } +</style> +<div style="backface-visibility:hidden"></div> +<div style="background: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-002.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-002.html new file mode 100644 index 0000000000..d30ba64ebb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>backface visibility: hidden self-transform</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> +<link rel="match" href="backface-visibility-hidden-002-ref.html"> + +<p>The test passes if there is a green rectangle and no red.</p> +<style> + div { + width: 100px; + height: 100px; + } + .target { + transform: rotateY(180deg); + } +</style> +<div class=target style="backface-visibility: hidden; background: red"></div> +<div class=target style="background: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-003-ref.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-003-ref.html new file mode 100644 index 0000000000..b21977caa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-003-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>backface visibility: hidden</title> +<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + +<p>The test passes if there is a green rectangle and no red.</p> +<style> + div { + width: 100px; + height: 100px; + } +</style> +<div style="background: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-003.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-003.html new file mode 100644 index 0000000000..bda82b697a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>backface visibility: hidden creates containing block and stacking context when participating in a 3D rendering context</title> +<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> +<link rel="match" href="backface-visibility-hidden-003-ref.html"> + +<p>The test passes if there is a green rectangle and no red.</p> +<style> +.outer { + transform-style: preserve-3d; + width: 100px; + height: 100px; + background-color: red; +} + +.inner { + backface-visibility: hidden; +} + +.positioned { + position: absolute; + top: -100px; + z-index: -1; + width: 100px; + height: 100px; + background-color: green; +} + +.sibling { + width: 100px; + height: 100px; + background-color: blue; +} + +</style> + +<div class="outer"> + <div class="sibling"></div> + <div class="inner"> + <div class="positioned"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-004-ref.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-004-ref.html new file mode 100644 index 0000000000..94c1fc496a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-004-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>backface visibility: hidden does not apply to child pseudo-stacking contexts</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + +<p>The test passes if there is a green rectangle and no red</p> +<style> + div { + width: 100px; + height: 100px; + } +</style> +<div class=target style="backface-visibility: hidden"> + <div style="background: green; isolation: isolate"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-004.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-004.html new file mode 100644 index 0000000000..8a8834c39e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-004.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>backface visibility: hidden creates containing block and stacking context when participating in a 3D rendering context</title> +<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> +<link rel="match" href="backface-visibility-hidden-003-ref.html"> + +<p>The test passes if there is a green rectangle and no red.</p> +<style> +.outer { + transform-style: preserve-3d; + transform: rotateX(180deg); + width: 100px; + height: 100px; +} + +.card { + width: 100px; + height: 100px; + position: absolute; + backface-visibility: hidden; +} + +.front { + background-color: red; +} + +.back { + background-color: green; + transform: rotateX(180deg); +} + +.inner { + position: fixed; + width: 100px; + height: 100px; + background-color: red; +} + +</style> + +<div class="outer"> + <div class="card back"></div> + <div class="card front"> + <div class="inner"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-005-ref.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-005-ref.html new file mode 100644 index 0000000000..bba35ec8fe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-005-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>backface visibility: hidden inside preserve-3d applies to pseudo-stacking contexts</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + +<p>The test passes if there is a green rectangle and no red</p> +<style> + div { + width: 100px; + height: 100px; + } +</style> +<div style="transform-style: preserve-3d"> + <div class=target style="backface-visibility: hidden"> + <div style="background: green; isolation: isolate"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-005.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-005.html new file mode 100644 index 0000000000..4a77466fe4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-005.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>backface visibility: hidden creates containing block and stacking context when transformed</title> +<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> +<link rel="match" href="backface-visibility-hidden-003-ref.html"> + +<p>The test passes if there is a green rectangle and no red.</p> +<style> +.background { + width: 100px; + height: 100px; + background-color: green; +} + +.flipper { + backface-visibility:hidden; + transform: rotateY(180deg); + width: 100px; + top: -100px; + margin-top: -100px; +} + +.scroll { + overflow-y: scroll; + width: 100px; + height: 100px; +} + +.inner { + height: 900px; + background: red; +} + +</style> + +<div class="background"></div> +<div class="flipper"> + <div class="scroll"> + <div class="inner"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-006-ref.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-006-ref.html new file mode 100644 index 0000000000..a9584d2329 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-006-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<title>backface visibility: hidden scrolling contents if backface-invisible</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-006.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-006.html new file mode 100644 index 0000000000..096145efec --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-006.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>backface visibility: hidden scrolling contents if backface-invisible</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> +<link rel="match" href="backface-visibility-hidden-006-ref.html"> +<div style="transform: rotateY(180deg); backface-visibility: hidden; overflow: scroll; height: 300px;"> + <p style="display: inline-block; height: 300px"> + This text should be invisible + </p> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-001.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-001.html new file mode 100644 index 0000000000..6cdefad662 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-001.html @@ -0,0 +1,51 @@ +<!doctype html> +<html class=reftest-wait> + <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility"> + <link rel="match" href="backface-visibility-hidden-animated-ref.html"> + <style> + @keyframes show-backface { + 0% { transform: rotateY(60deg); } + 0.01% { transform: rotateY(180deg); } + 100% { transform: rotateY(180deg); } + } + + .flip { + animation: 10s linear 0s infinite forwards show-backface; + height: 100px; + width: 100px; + transform: rotateY(60deg); + transform-style: preserve-3d; + } + + #back { + background: lightblue; + transform: rotateY(180deg); + position: absolute; + top: 0; + left: 0; + width: 200px; + height: 200px; + backface-visibility: hidden; + } + + #posabs { + position: absolute; + bottom: 0; + right: 0; + background: yellow; + } + </style> + <div id="flip"> + <div id="back"> + <i id="posabs">Text</i> + </div> + </div> + <script> + onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { + flip.classList.add("flip"); + requestAnimationFrame(() => requestAnimationFrame(() => + document.documentElement.classList.remove("reftest-wait"))); + })); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-002.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-002.html new file mode 100644 index 0000000000..b3029f9e46 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-002.html @@ -0,0 +1,53 @@ +<!doctype html> +<html class=reftest-wait> + <link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility"> + <link rel="match" href="backface-visibility-hidden-animated-ref.html"> + <style> + @keyframes show-backface { + 0% { transform: rotateY(60deg); } + 0.01% { transform: rotateY(180deg); } + 100% { transform: rotateY(180deg); } + } + + .flip { + animation: 10s linear 0s infinite forwards show-backface; + height: 100px; + width: 100px; + transform: rotateY(60deg); + transform-style: preserve-3d; + } + + #back { + background: lightblue; + transform: rotateY(180deg); + position: absolute; + top: 0; + left: 0; + width: 200px; + height: 200px; + backface-visibility: hidden; + } + + #posabs { + position: absolute; + /* This is the only difference from backface-visibility-hidden-animated-001.html. */ + will-change: transform; + bottom: 0; + right: 0; + background: yellow; + } + </style> + <div id="flip"> + <div id="back"> + <i id="posabs">Text</i> + </div> + </div> + <script> + onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { + flip.classList.add("flip"); + requestAnimationFrame(() => requestAnimationFrame(() => + document.documentElement.classList.remove("reftest-wait"))); + })); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-ref.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-ref.html new file mode 100644 index 0000000000..3441050a59 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-animated-ref.html @@ -0,0 +1,36 @@ +<!doctype html> +<html> + <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility"> + <style> + #flip { + height: 100px; + width: 100px; + transform: rotateY(180deg); + transform-style: preserve-3d; + } + + #back { + background: lightblue; + transform: rotateY(180deg); + position: absolute; + top: 0; + left: 0; + width: 200px; + height: 200px; + backface-visibility: hidden; + } + + #posabs { + position: absolute; + bottom: 0; + right: 0; + background: yellow; + } + </style> + <div id="flip"> + <div id="back"> + <i id="posabs">Text</i> + </div> + </div> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-child-translate.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-child-translate.html new file mode 100644 index 0000000000..f03d88f018 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-child-translate.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#backface-visibility-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: green; width: 100px"> + <div style="transform: rotateY(180deg); backface-visibility: hidden"> + <div style="background: red; transform: translateX(20px); height: 100px"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-child-will-change-transform.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-child-will-change-transform.html new file mode 100644 index 0000000000..dda7ba6827 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-hidden-child-will-change-transform.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#backface-visibility-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="background: green; width: 100px"> + <div style="transform: rotateY(180deg); backface-visibility: hidden"> + <div style="background: red; will-change: transform; height: 100px"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-transforms/backface-visibility-with-sibling-001.html b/testing/web-platform/tests/css/css-transforms/backface-visibility-with-sibling-001.html new file mode 100644 index 0000000000..a61d4c2309 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/backface-visibility-with-sibling-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<title>backface-visibility test</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-transform-rendering"> +<link rel="match" href="/common/blank.html"> +<meta name="assert" content="The backface-visibility property still works correctly when there is an element outside the 3-D rendering context that is, in tree order, in between the element with backface-visibility and the root of the 3-D Rendering Context"> + +<style> + +div { + width: 100px; + height: 100px; +} + +#outer { + transform-style: preserve-3d; + transform: rotateX(120deg); + position: relative; +} + +#outer > div { + position: absolute; + top: 0; + left: 0; +} + +#grandchild { + transform: translateZ(1px); +} + +#child2 { + transform-style: preserve-3d; + transform: translateX(0); + backface-visibility: hidden; + background: red; +} + +</style> + +<div id="outer"> + <div id="child1"><div id="grandchild"></div></div> + <div id="child2"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/change-perspective-property.html b/testing/web-platform/tests/css/css-transforms/change-perspective-property.html new file mode 100644 index 0000000000..b66cccbdac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/change-perspective-property.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Change perspective property</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://crbug.com/1365255"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#target { + width: 10px; + height: 10px; + background: red; + transform: translateZ(-10px); +} +#container { + width: 100px; + height: 100px; + background: green; + perspective: 100px; + perspective-origin: -10px -10px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="target"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + container.style.perspective = '1px'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/change-scale-wide-range-ref.html b/testing/web-platform/tests/css/css-transforms/change-scale-wide-range-ref.html new file mode 100644 index 0000000000..264c6b6f25 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/change-scale-wide-range-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div style="width: 200px; height: 200px; background: green; border: 10px solid blue"></div> + diff --git a/testing/web-platform/tests/css/css-transforms/change-scale-wide-range.html b/testing/web-platform/tests/css/css-transforms/change-scale-wide-range.html new file mode 100644 index 0000000000..ec41946cfd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/change-scale-wide-range.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Change scale to very big then back</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://crbug.com/1146393"> +<link rel="match" href="change-scale-wide-range-ref.html"> +<style> +#target { + will-change: transform; + transform-origin: 0 0; + width: 200px; + height: 200px; + background: green; + border: 10px solid blue; +} +</style> +<div id="target"></div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.transform = 'scale(100)'; + requestAnimationFrame(() => { + target.style.transform = 'scale(1)'; + document.documentElement.removeAttribute('class'); + }); + }); +}); +</script> + diff --git a/testing/web-platform/tests/css/css-transforms/change-transform-origin-property.html b/testing/web-platform/tests/css/css-transforms/change-transform-origin-property.html new file mode 100644 index 0000000000..2a623eb711 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/change-transform-origin-property.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Change transform-origin property</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://crbug.com/1365255"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> +#target { + will-change: transform; + transform: rotate(90deg); + transform-origin: 100px 100px; + width: 100px; + height: 100px; + background: green; +} +#container { + width: 100px; + height: 100px; + background: red; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="target"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.transformOrigin = '50px 50px'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective-ref.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective-ref.html new file mode 100644 index 0000000000..ebd2d860ce --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective.html new file mode 100644 index 0000000000..71b2fd1cb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): composited under rotateY(180deg) with overflow clip under perspective</title> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2"> +<meta name="assert" content="This tests that a composited element with default + backface-visibility is visible under rotateY(180deg) with overflow clip under + perspective."> +<link rel="match" href="composited-under-rotateY-180deg-clip-perspective-ref.html"> +<div style="perspective: 1px"> + <div style="transform: rotateY(180deg); overflow: hidden; width: 100px"> + <div style="width: 100px; height: 100px; background: green; will-change: transform"></div> + </div> + <div style="transform: rotateY(180deg); overflow: hidden; width: 100px; + height: 100px; background: red; backface-visibility: hidden"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-ref.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-ref.html new file mode 100644 index 0000000000..ebd2d860ce --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip.html new file mode 100644 index 0000000000..5ef960ca0b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-clip.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): composited under rotateY(180deg) with overflow clip</title> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2"> +<meta name="assert" content="This tests that a composited element with default + backface-visibility is visible under rotateY(180deg) with overflow clip."> +<link rel="match" href="composited-under-rotateY-180deg-clip-ref.html"> +<div style="transform: rotateY(180deg); overflow: hidden; width: 100px"> + <div style="width: 100px; height: 100px; background: green; will-change: transform"></div> +</div> +<div style="transform: rotateY(180deg); overflow: hidden; width: 100px; backface-visibility: hidden"> + <div style="width: 100px; height: 100px; background: red; will-change: transform"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-perspective.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-perspective.html new file mode 100644 index 0000000000..c91e6f725f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-perspective.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): composited under rotateY(180deg)</title> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2"> +<meta name="assert" content="This tests that a composited element with default + backface-visibility is visible under rotateY(180deg) and perspective, + and invisible under rotateY(180deg), perspective and backface-visibility:hidden."> +<link rel="match" href="composited-under-rotateY-180deg-ref.html"> +<div style="transform: rotateY(180deg); width: 100px; perspective: 10px"> + <div style="width: 100px; height: 100px; background: green; will-change: transform"></div> +</div> +<div style="transform: rotateY(180deg); width: 100px; backface-visibility: hidden; perspective: 10px"> + <div style="width: 100px; height: 100px; background: red; will-change: transform"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-preserve-3d.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-preserve-3d.html new file mode 100644 index 0000000000..282d0b1c95 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-preserve-3d.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): composited under backface-visibility:hidden, rotateY(180deg) and preserve-3d</title> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2"> +<meta name="assert" content="This tests that a composited element with default + backface-visibility is visible under backface-visibility:hidden, rotateY(180deg) and preserve-3d."> +<link rel="match" href="composited-under-rotateY-180deg-ref.html"> +<div style="transform: rotateY(180deg); width: 100px; backface-visibility: hidden; transform-style: preserve-3d"> + <div style="width: 100px; height: 100px; background: green; will-change: transform"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-ref.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-ref.html new file mode 100644 index 0000000000..ebd2d860ce --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg.html b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg.html new file mode 100644 index 0000000000..674cc4492f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/composited-under-rotateY-180deg.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): composited under rotateY(180deg)</title> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2"> +<meta name="assert" content="This tests that a composited element with default + backface-visibility is visible under rotateY(180deg), and invisible under rotateY(180deg) and backface-visibility:hidden."> +<link rel="match" href="composited-under-rotateY-180deg-ref.html"> +<div style="transform: rotateY(180deg); width: 100px"> + <div style="width: 100px; height: 100px; background: green; will-change: transform"></div> +</div> +<div style="transform: rotateY(180deg); width: 100px; backface-visibility: hidden"> + <div style="width: 100px; height: 100px; background: red; will-change: transform"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/containing-block-dynamic-1-ref.html b/testing/web-platform/tests/css/css-transforms/containing-block-dynamic-1-ref.html new file mode 100644 index 0000000000..34b66abdb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/containing-block-dynamic-1-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: Creating containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<style> + html, body { margin: 0; padding: 0 } + #fixedmoves { + position: absolute; + top: 150px; + left: 150px; + background: green; + height: 100px; + width: 100px; + } +</style> +<body> + <div id="fixedmoves"></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/large-scale3d-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/large-scale3d-001.html new file mode 100644 index 0000000000..e14d89bd7c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/large-scale3d-001.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" href="mailto:0xdevssh@gmail.com"> +<link rel="help" href="https://crbug.com/1246754"> +<div id="test"> +</div> + +<script> + document.getElementById('test').style['transform']='scale3d(0.27729718037880957e1857, 0.27729718037880957e1857, 0.27729718037880957e1857)'; +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/large-scaley-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/large-scaley-001.html new file mode 100644 index 0000000000..8c3cdeb3e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/large-scaley-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Transform with large scaleY()</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@google.com"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1230937"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#two-d-transform-functions"> +<meta name="assert" content="This should not crash."> + +<div style="transform: scaley(99e99);">a</div> +<div style="mix-blend-mode: saturation;">a</div> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/locked-display-transform-crash.html b/testing/web-platform/tests/css/css-transforms/crashtests/locked-display-transform-crash.html new file mode 100644 index 0000000000..0d8b69b079 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/locked-display-transform-crash.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html class=test-wait> +<style type="text/css"> +</style> +<div id="container"> + <div id="div" style="transform:translateX(100px);"></div> +</div> +<script> + function runTest() { + document.getElementById('div').style = 'transform:translateX(200px)'; + var forceLayout = document.body.offsetWidth; + document.getElementById('container').style = 'content-visibility: hidden;'; + requestAnimationFrame(function() { + requestAnimationFrame(function() { + document.documentElement.classList.remove('test-wait'); + }); + }); + } + onload = runTest; +</script> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-001.html new file mode 100644 index 0000000000..3be0af34cf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-001.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<html style="columns: 1"> +<title>CSS Test (Transforms): preserve-3d, inlines, and being a containing block</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1226287"> +<meta name="assert" content="This should not crash."> + +<span style="transform-style: preserve-3d"><span style="position: absolute"></span></span> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-002.html b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-002.html new file mode 100644 index 0000000000..163e977a91 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-002.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): preserve-3d, inlines, and being a containing block</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1226287"> +<meta name="assert" content="This should not crash."> + +<span style="transform-style: preserve-3d"><span style="position: absolute"></span></span> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-br-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-br-001.html new file mode 100644 index 0000000000..869a3a0c7a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-br-001.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): preserve-3d containing a br</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1275856"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> +<meta name="assert" content="This should not crash."> + +<div style="transform-style: preserve-3d"> + <br> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-br-002.html b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-br-002.html new file mode 100644 index 0000000000..8c9e0dc10c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-containing-br-002.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): preserve-3d containing a br</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276151"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> +<meta name="assert" content="This should not crash."> + +<div style="transform-style: preserve-3d; column-count: 128"> + <br> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-inline-hit-test.html b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-inline-hit-test.html new file mode 100644 index 0000000000..b00dbc839e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-inline-hit-test.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): preserve-3d on inline and hit test</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127348"> +<meta name="assert" content="This should not crash."> +<span style="transform-style: preserve-3d; position: relative">TEST</span> +<script> +document.elementFromPoint(10, 10); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-scene-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-scene-001.html new file mode 100644 index 0000000000..1bb1091acf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-scene-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Very large values in matrix3d()</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1224066"> +<meta name="assert" content="This should not crash."> +<style> + +.outer { + column-count:16384; + -webkit-mask-box-image: url('?') 10% 90% repeat; +} + +.middle { + -webkit-transform-style:preserve-3d; + display:list-item; +} + +table { + height:7.1px; + padding-right:4em; + transform:matrix3d(0,7.8,+9,+2,-3.6,3.4,6,8.8,9.5,7,7.3,5.3,6.4,3.7,8.3,8); + border-left: medium black solid; +} + +tbody { + font:icon; +} + +</style> + +<div class="outer"><div class="middle"><table> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-scene-002.html b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-scene-002.html new file mode 100644 index 0000000000..7f0ca6a117 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-scene-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> + +.outer { + column-count:16384; + -webkit-mask-box-image:url('?') 10% 90% repeat; +} +button { + font:icon; +} +.inner { + border-top:solid 1000000000px; + transform-style:preserve-3d; + display:list-item; +} +table { + height:7.1px; + padding-right:4em; + transform:matrix3d(0,7.8,9,2,-3.6,3.4,6,8.8,9.5,7,7.3,5.3,6.4,3.7,8.3,8); + border-left:outset black; + font-size:120%; +} + +</style> + +<div class="outer"><button><div class="inner"><table border></table></div></button></div> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-svg-foreign-object-hit-test.svg b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-svg-foreign-object-hit-test.svg new file mode 100644 index 0000000000..14c772cb2d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/preserve3d-svg-foreign-object-hit-test.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> +<g id="testmeta"> + <title>CSS Test (Transforms): preserve-3d on foreignObject and hit test</title> + <html:link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property" /> + <html:link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1277221" /> + <html:meta name="assert" content="This should not crash." /> +</g> + +<style> +foreignObject { + display:table; + overflow:auto; + transform-style:preserve-3d; +} +</style> +<foreignObject width="200" height="200"></foreignObject> +<script> +document.elementFromPoint(100, 100); +</script> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html new file mode 100644 index 0000000000..8bdbb984f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Transform and marquee with resize, etc.</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1226919"> +<meta name="assert" content="This should not crash."> + +<body style="transform: scalex(0.9)"><marquee style="resize: both"><div><img src="../not-found.png"> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/w-crossing-zero-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/w-crossing-zero-001.html new file mode 100644 index 0000000000..64ba0e85f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/w-crossing-zero-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Transform with w crossing zero</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1230937"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes"> +<meta name="assert" content="This should not crash."> + +<style> +#outer { + transform-style: preserve-3d; +} +#inner { + transform: matrix3d(4,947066.75,3,-57.374,1860.6956175,97,2291.191,-8.1785,9,46.047,5.02880,7.198084,2,8,2009,3.2); + border: medium solid; +} +</style> +<div id="outer"> + <div id="inner"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-001.html new file mode 100644 index 0000000000..d2d5e968d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): Transform and perspective with w negative</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=455874"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes"> +<meta name="assert" content="This should not crash."> + +<style> +* { + transform: perspective(142176px); + mix-blend-mode: darken; + transform-origin: left center 537763.2px; +} +</style> +<hr size="1425"></hr> +<button autofocus></button> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-002.html b/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-002.html new file mode 100644 index 0000000000..a485880f49 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Transform and perspective with w negative</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1173218"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes"> +<meta name="assert" content="This should not crash."> + +<style> +html, body { perspective: 9px } +body, div { transform: translateZ(14px) } +div { filter: hue-rotate(6deg) } +</style> +<div>x</div> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-003.html b/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-003.html new file mode 100644 index 0000000000..9c4cf77e36 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/w-negative-003.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Transform and perspective with w negative</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1229117"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes"> +<meta name="assert" content="This should not crash."> + +<style> +button { + transform:translate3d(1866px, 1794px, 1359px) perspective(848px); + clip-path: ellipse(822px 405px); +} +</style> +<button autofocus='true'></button> diff --git a/testing/web-platform/tests/css/css-transforms/crashtests/zero-perspective-001.html b/testing/web-platform/tests/css/css-transforms/crashtests/zero-perspective-001.html new file mode 100644 index 0000000000..923794ed60 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/crashtests/zero-perspective-001.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1772640"> +<div id="test"> +<style> +* { + overflow-x: scroll; + perspective: 0px; +} +#a { + rotate: 1deg 0 1 0; +} +</style> +<ul id="a">IjzXS</ul> diff --git a/testing/web-platform/tests/css/css-transforms/css-rotate-2d-3d-001-ref.html b/testing/web-platform/tests/css/css-transforms/css-rotate-2d-3d-001-ref.html new file mode 100644 index 0000000000..54940566cd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-rotate-2d-3d-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: 2D rotation with 3D rotation</title> + <link rel="author" title="Philip Rogers" href="mailto:pdr@google.com"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com" /> <!-- 2012-06-16 --> + <style type="text/css"> + .greenSquareRef { + position: absolute; + top: 100px; + 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="greenSquareRef"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-rotate-2d-3d-001.html b/testing/web-platform/tests/css/css-transforms/css-rotate-2d-3d-001.html new file mode 100644 index 0000000000..69a6120a76 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-rotate-2d-3d-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: 2D rotation with 3D rotation</title> + <link rel="author" title="Philip Rogers" href="mailto:pdr@google.com"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com" /> <!-- 2012-06-16 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="css-rotate-2d-3d-001-ref.html"> + <meta name="assert" content="This transform rotates a tall rectangle by 90 degrees then applies a 3D rotation in the X axis."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 100px; + width: 100px; + height: 200px; + background: green; + transform: rotate(90deg) rotate3d(1, 0, 0, 60deg); + } + .redSquare { + position: absolute; + top: 101px; + left: 101px; + width: 98px; + height: 98px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="redSquare"></div> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-scale-nested-001.html b/testing/web-platform/tests/css/css-transforms/css-scale-nested-001.html new file mode 100644 index 0000000000..2d260710c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-scale-nested-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: scale 0 on a parent with a child</title> + <link rel="author" title="Amol Shanbhag" href="mailto:amolvshanbhag@yahoo.com"> + <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="assert" content="Child square element is transformed (scaled to zero) along with the parent element"> + <link rel="match" href="reference/css-scale-nested-ref.html"> + <style type="text/css"> + div{ + position: absolute; + } + .greenSquare { + width: 100px; + height: 100px; + background: green; + } + .parentredSquare { + width: 100px; + height: 100px; + background: red; + transform: scale(0); + } + .childredSquare { + top: 25px; + left: 25px; + width: 50px; + height: 50px; + background: red; + } + p{ + padding-top: 130px; + } + </style> +</head> +<body> + <div class="greenSquare"></div> + <div class="parentredSquare"><div class="childredSquare"></div></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/css-skew-001-ref.html b/testing/web-platform/tests/css/css-transforms/css-skew-001-ref.html new file mode 100644 index 0000000000..70c256ebec --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-skew-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Test Reference: skew function part 1</title> + <link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com"> + <style type="text/css"> + svg { + top:0; + left:0; + position:absolute; + height: 268.778px; + width: 231.642px; + } + </style> +</head> +<body> + <p>The test passes if there is a green quadrilateral and no red.</p> + <svg> + <path d="M 231.64212,268.77841 73.167806,158.54816 0,0 158.58452,110.15942 z" fill="green" /> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-skew-001.html b/testing/web-platform/tests/css/css-transforms/css-skew-001.html new file mode 100644 index 0000000000..f209834121 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-skew-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Test: skew function part 1</title> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com"> + <link rel="match" href="css-skew-001-ref.html"> + <style type="text/css"> + div { + top:5px; + left:5px; + position:absolute; + height: 150px; + width: 150px; + background-color:red; + transform-origin: 0 0; + transform: skew(25deg, 35deg); + } + svg { + top:0; + left:0; + position:absolute; + height: 268.778px; + width: 231.642px; + } + </style> +</head> +<body> + <p>The test passes if there is a green quadrilateral and no red.</p> + <div> </div> + <svg> + <path + d="M 231.64212,268.77841 73.167806,158.54816 0,0 158.58452,110.15942 z" + fill="green" /> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-skew-002-ref.html b/testing/web-platform/tests/css/css-transforms/css-skew-002-ref.html new file mode 100644 index 0000000000..49d75de6b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-skew-002-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Test Reference: skew function part 2</title> + <link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com"> + <style type="text/css"> + div { + top:0px; + left:0px; + position:absolute; + height: 150px; + width: 150px; + background-color:green; + transform-origin: 0 0; + transform: skew(25deg, 35deg); + } + </style> +</head> +<body> + <p>The test passes if there is a green quadrilateral and no red.</p> + <div> </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-skew-002.html b/testing/web-platform/tests/css/css-transforms/css-skew-002.html new file mode 100644 index 0000000000..edafda6cbb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-skew-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Test: skew function part 2</title> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com"> + <link rel="match" href="css-skew-002-ref.html"> + <meta name="fuzzy" content="maxDifference=5-36;totalPixels=12-174"> + <style type="text/css"> + div { + top:0px; + left:0px; + position:absolute; + height: 150px; + width: 150px; + background-color:green; + transform-origin: 0 0; + transform: skew(25deg, 35deg); + } + svg { + top:5px; + left:5px; + position:absolute; + height: 253.667px; + width: 218.333px; + } + </style> +</head> +<body> + <p>The test passes if there is a green quadrilateral and no red.</p> + <svg> + <path + d="M 211.84314,245.80529 66.913984,144.99668 0,0 145.02994,100.74384 z" fill="red" /> + </svg> + <div> </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-X-negative.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-X-negative.html new file mode 100644 index 0000000000..b8193dc09d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-X-negative.html @@ -0,0 +1,37 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate the 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 240px; + left: 80px; + top: 20px; + transform: rotate3d(1,0,0,-60deg); + width: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-X-positive.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-X-positive.html new file mode 100644 index 0000000000..60477bd240 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-X-positive.html @@ -0,0 +1,37 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 240px; + left: 80px; + top: 20px; + transform: rotate3d(1,0,0,60deg); + width: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Y-negative.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Y-negative.html new file mode 100644 index 0000000000..6d6920d2a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Y-negative.html @@ -0,0 +1,37 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 120px; + left: 20px; + top: 80px; + transform: rotate3d(0,1,0,-60deg); + width: 240px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Y-positive.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Y-positive.html new file mode 100644 index 0000000000..4cc0add76c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Y-positive.html @@ -0,0 +1,37 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 120px; + left: 20px; + top: 80px; + transform: rotate3d(0,1,0,60deg); + width: 240px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Z-negative.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Z-negative.html new file mode 100644 index 0000000000..9a742ea050 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Z-negative.html @@ -0,0 +1,44 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateZ-ref.html"> + <meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle."> + <style> + div { + height: 100px; + left: 80px; + position: absolute; + top: 80px; + width: 100px; + } + div.origin { + background-color: green; + } + div.redsquare { + background-color: red; + height: 38px; + left: 80px; + top: 111px; + width: 100px; + } + div.greensquare { + background-color: green; + height: 100px; + left: 110px; + top: 80px; + width: 40px; + transform: rotate3d(0,0,1,-90deg); + } + </style> + </head> + <body> + <p>Test passes if there is a green square and no red.</p> + <div class="origin"></div> + <div class="redsquare"></div> + <div class="greensquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Z-positive.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Z-positive.html new file mode 100644 index 0000000000..3cef0c126a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotate3d-Z-positive.html @@ -0,0 +1,44 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateZ-ref.html"> + <meta name="assert" content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis would cover the horizontal red rectangle."> + <style> + div { + height: 100px; + left: 80px; + position: absolute; + top: 80px; + width: 100px; + } + div.origin { + background-color: green; + } + div.redsquare { + background-color: red; + height: 38px; + left: 80px; + top: 111px; + width: 100px; + } + div.greensquare { + background-color: green; + height: 100px; + left: 110px; + top: 80px; + width: 40px; + transform: rotate3d(0,0,1,90deg); + } + </style> + </head> + <body> + <p>Test passes if there is a green square and no red.</p> + <div class="origin"></div> + <div class="redsquare"></div> + <div class="greensquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateX-negative.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateX-negative.html new file mode 100644 index 0000000000..15d43e5fc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateX-negative.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: rotateX on div element</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 240px; + left: 80px; + top: 20px; + transform: rotateX(-60deg); + width: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateX-positive.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateX-positive.html new file mode 100644 index 0000000000..284204f72a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateX-positive.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: rotateX on div element</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate a 2:1 rectangle on X-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 240px; + left: 80px; + top: 20px; + transform: rotateX(60deg); + width: 120px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateY-negative.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateY-negative.html new file mode 100644 index 0000000000..cff2346f93 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateY-negative.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: rotateY on div element</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for -60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 120px; + left: 20px; + top: 80px; + transform: rotateY(-60deg); + width: 240px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateY-positive.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateY-positive.html new file mode 100644 index 0000000000..e11dbcad0a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateY-positive.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: rotateY on div element</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateX-ref.html"> + <meta name="assert" content="Test checks that rotate a 2:1 rectangle on Y-axis for 60 degree we will get a square and completely cover the red square, and here we use border due to the rectangle not be rotated would cover the red square."> + <style> + div { + position: absolute; + } + div.redsquare { + background-color: red; + border: 20px solid black; + height: 120px; + left: 60px; + top: 60px; + width: 120px; + } + div.green { + background-color: green; + height: 120px; + left: 20px; + top: 80px; + transform: rotateY(60deg); + width: 240px; + } + </style> + </head> + <body> + <p>Test passes if there is a green square with black border around, and no any red.</p> + <div class="redsquare"></div> + <div class="green"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateZ-negative.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateZ-negative.html new file mode 100644 index 0000000000..b9ebd7b392 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateZ-negative.html @@ -0,0 +1,44 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateZ-ref.html"> + <meta name="assert" content="Test checks that rotate a vertical rectangle for -90 degree on Z-axis will cover the horizontal red rectangle."> + <style> + div { + height: 100px; + left: 80px; + position: absolute; + top: 80px; + width: 100px; + } + div.origin { + background-color: green; + } + div.redsquare { + background-color: red; + height: 38px; + left: 80px; + top: 111px; + width: 100px; + } + div.greensquare { + background-color: green; + height: 100px; + left: 110px; + top: 80px; + width: 40px; + transform: rotateZ(-90deg); + } + </style> + </head> + <body> + <p>Test passes if there is a green square and no red.</p> + <div class="origin"></div> + <div class="redsquare"></div> + <div class="greensquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateZ-positive.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateZ-positive.html new file mode 100644 index 0000000000..ce7002879b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-rotateZ-positive.html @@ -0,0 +1,44 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-rotateZ-ref.html"> + <meta name="assert" content="Test checks that rotate a vertical rectangle for 90 degree on Z-axis will cover the horizontal red rectangle."> + <style> + div { + height: 100px; + left: 80px; + position: absolute; + top: 80px; + width: 100px; + } + div.origin { + background-color: green; + } + div.redsquare { + background-color: red; + height: 38px; + left: 80px; + top: 111px; + width: 100px; + } + div.greensquare { + background-color: green; + height: 100px; + left: 110px; + top: 80px; + width: 40px; + transform: rotateZ(90deg); + } + </style> + </head> + <body> + <p>Test passes if there is a green square and no red.</p> + <div class="origin"></div> + <div class="redsquare"></div> + <div class="greensquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-3d-transform-style.html b/testing/web-platform/tests/css/css-transforms/css-transform-3d-transform-style.html new file mode 100644 index 0000000000..68622d019a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-3d-transform-style.html @@ -0,0 +1,50 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="match" href="reference/css-transform-3d-transform-style-ref.html"> + <meta name="assert" content="Test checks that rotate the nested div with transform-style preserve-3d, rotated parent div for -60 degree on Y-axis then and rotated child div for 120 degree, at this time the parent and child should have equal width, then child div could cover the red box."> + <style> + div { + position: absolute; + } + div.container { + height: 100px; + top: 60px; + width: 400px; + } + div.blue { + background-color: blue; + height: 100px; + transform: rotateY(-60deg); + transform-style: preserve-3d; + width: 400px; + } + div.green { + background-color: green; + height: 100px; + transform: rotateY(120deg); + width: 400px; + } + div.red{ + background-color: red; + height: 100px; + left: 100px; + width: 200px; + } + </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="red"></div> + <div class="blue"> + <div class="green"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-animate-translate-implied-y-ref.html b/testing/web-platform/tests/css/css-transforms/css-transform-animate-translate-implied-y-ref.html new file mode 100644 index 0000000000..43d17375b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-animate-translate-implied-y-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> + <style> + #box { + background:red; + width: 200px; + height: 200px; + transform: translate(100px, 0px); + } + </style> + </head> + <body> + <div id=box></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-animate-translate-implied-y.html b/testing/web-platform/tests/css/css-transforms/css-transform-animate-translate-implied-y.html new file mode 100644 index 0000000000..dc0b957ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-animate-translate-implied-y.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Animating between translates where one has an implied `y` value</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> + <meta name="assert" content='This tests that translate(x) is animated as if it were translate(x, 0px)'> + <link rel=match href=css-transform-animate-translate-implied-y-ref.html> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#funcdef-transform-translate"> + <style> + #box { + background:red; + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <div id=box></div> + <script> + let anim = document.getElementById('box').animate([ + { transform: 'translate(180px)' }, + { transform: 'translate(20px, 0px)' } + ], { + duration: 1000, + }); + anim.pause(); + anim.currentTime = 500; + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-inherit-rotate.html b/testing/web-platform/tests/css/css-transforms/css-transform-inherit-rotate.html new file mode 100644 index 0000000000..20267434f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-inherit-rotate.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: CSS transforms rotate inheritance on div element</title> + <link rel="author" title="Delong Gao" href="mailto:gaodl@uw.edu"> + <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <!--<link rel="match" href="reference/ttwf-reftest-tutorial-ref.html"> + <meta name="flags" content="svg">--> + <meta name="assert" content="Rotation on parent element will not be inherited by child element, unless declared. The test is passed if there is a green square and no red. And it is rotated 45 degree."> + <style type="text/css"> + * { + margin: 0; + padding: 0; + } + .flag { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background-color: green; + z-index: 2; + }/*This div is used to show the red square*/ + .parentSquare { + position: absolute; + top: 50px; + left: 50px; + width: 200px; + height: 200px; + transform: rotate(45deg); + background-color: green; + } + .childSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background-color: red; + transform: inherit;/*While inherited, the child div should rotate 90 degree instead of 45*/ + } + p { + position: absolute; + top: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red. And it is rotated 45 degree.</p> + <div class="flag"></div> + <div class="parentSquare"> + <div class="childSquare"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-inherit-scale.html b/testing/web-platform/tests/css/css-transforms/css-transform-inherit-scale.html new file mode 100644 index 0000000000..fa9b5bbbc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-inherit-scale.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: CSS transforms scale 2 inheritance on div elements</title> + <link rel="author" title="Delong Gao" href="mailto:gaodl@uw.edu"> + <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="../reference/ref-filled-green-200px-square.html"> + <meta name="assert" content="While child div inherits property from its parent, scaling 2 on parent div will course the child to scale 4 and totally cover the red div. The test passes if there is a green square and no red. "> + <style type="text/css"> + .test { + position: relative; + } + .red { + position: absolute; + width: 200px; + height: 200px; + background-color: red; + } + .parent { + background: yellow; + width: 50px; + height: 50px; + position: absolute; + top: 75px; + left: 75px; + transform: scale(2); + + } + .child { + position: absolute; + transform: inherit; + width: 50px; + height: 50px; + background-color: green; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="test"> + <div class="red"></div> + <div class="parent"> + <div class="child"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-property-existence.html b/testing/web-platform/tests/css/css-transforms/css-transform-property-existence.html new file mode 100644 index 0000000000..e00e8077c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-property-existence.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: property existence</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#propdef-transform"> + <meta name="flags" content="dom"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="test"></div> + <div id="log"></div> + <script> + [ + 'transform', + 'transform-origin', + 'transform-style', + 'perspective', + 'perspective-origin', + 'backface-visibility', + ].forEach(property => { + test(() => { + assert_true( + property in document.getElementById('test').style, + `expect ${property}`, + ); + }, `Check the existence of ${property}.`); + }); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-scale-001-manual.html b/testing/web-platform/tests/css/css-transforms/css-transform-scale-001-manual.html new file mode 100644 index 0000000000..777951d496 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-scale-001-manual.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function on hover state</title> + <link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-functions"> + <!-- See also: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:hover --> + <link rel="match" href="reference/css-transform-scale-ref-001.html"> + <meta name="assert" content="When the element is hovered over, the transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner."> + <style type="text/css"> + .container { + position: absolute; + } + .greenSquare { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background-color: green; + } + .greenSquare:hover { + transform-origin: 0 0; + transform: scale(2); + } + + /* This div should only be visible if the test fails */ + .redSquare { + position: absolute; + /* It is approximately the same size as the test div, but with a 1px margin */ + width: 98px; + height: 98px; + background-color: red; + left: 100px; + top :100px; + } + </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"> + <!-- This is the square that should not be visible if the test passes --> + <div class="redSquare"></div> + <!-- This is the square being tested with the transform --> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-scale-002.html b/testing/web-platform/tests/css/css-transforms/css-transform-scale-002.html new file mode 100644 index 0000000000..08ebcc6b96 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-scale-002.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function and move its origin</title> + <link rel="author" title="Chris Sanborn" href="mailto:granimalcracker@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-functions"> + <link rel="match" href="reference/css-transform-scale-ref-002.html"> + <meta name="assert" content="The transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner."> + <style type="text/css"> + .container { + position: absolute; + } + .greenSquare { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background-color: green; + transform-origin: 0 0; + transform: scale(2); + } + + + /* This div should only be visible if the test fails */ + .redSquare { + position: absolute; + /* It is approximately the same size as the test div, but with a 1px margin */ + width: 98px; + height: 98px; + background-color: red; + left: 100px; + top :100px; + } + </style> +</head> +<body> + <p>The test passes if the green square completely covers the red square.</p> + <div class="container"> + <!-- This is the square that should not be visible if the test passes --> + <div class="redSquare"></div> + <!-- This is the square being tested with the transform --> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transform-style-evaluation-validation.html b/testing/web-platform/tests/css/css-transforms/css-transform-style-evaluation-validation.html new file mode 100644 index 0000000000..441fa52a64 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transform-style-evaluation-validation.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Transforms Test: property</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="flags" content="dom"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <div id="test"></div> + <div id="log"></div> + <script> + test(function() { + document.getElementById("test").style.transform = "rotate(30deg),rotateX(60deg)" + assert_equals(document.getElementById("test").style.transform, "", "expect NULL"); + }, "transform: Check bad-format multi-expr input."); + + test(function() { + document.getElementById("test").style.transform = "rotate(30deg)|rotateX(60deg)"; + assert_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check multi-expr input with tab."); + + test(function() { + document.getElementById("test").style.transform = " rotate(30deg) rotateX(60deg) "; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check multi-expr input with spaces start and end."); + + test(function() { + document.getElementById("test").style.transform = "rotate(30deg) rotateX(60deg)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check multi-expr input with two spaces."); + + test(function() { + document.getElementById("test").style.transform = "rotate(30deg) rotateX(60deg)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check valied multi-expr input."); + + test(function() { + document.getElementById("test").style.transform = "rotate(0)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotate(0) input."); + + test(function() { + document.getElementById("test").style.transform = "rotateX(0)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotateX(0) input."); + + test(function() { + document.getElementById("test").style.transform = "rotateY(0)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotateY(0) input."); + + test(function() { + document.getElementById("test").style.transform = "rotateZ(0)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotateZ(0) input."); + + test(function() { + document.getElementById("test").style.transform = "rotate(string)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotate(string) input."); + + test(function() { + document.getElementById("test").style.transform = "rotateX(string)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotateX(string) input."); + + test(function() { + document.getElementById("test").style.transform = "rotateY(string)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotateY(string) input."); + + test(function() { + document.getElementById("test").style.transform = "rotateZ(string)"; + assert_not_equals(document.getElementById("test").style.transform, "", "expect not NULL"); + }, "transform: Check rotateZ(string) input."); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transforms-3d-on-anonymous-block-001.html b/testing/web-platform/tests/css/css-transforms/css-transforms-3d-on-anonymous-block-001.html new file mode 100644 index 0000000000..9a432acd5c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transforms-3d-on-anonymous-block-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Transforms Test: No 3D transforms on anonymous block boxes</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 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-rendering"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <link rel="match" href="reference/css-transforms-3d-anonymous-block-ref.html"> + <meta name="assert" content="3D transforms can not be applied to anonymous block boxes."> +</head> +<body> + <p>You should see three lines of text written from left to right and unmirrored.<p> + <div style="transform-style: preserve-3d;"> + <span style="transform-style: preserve-3d; transform: rotateX(90deg)">Test</span> + <p style="transform-style: preserve-3d;">Test</p> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css-transforms-transformlist.html b/testing/web-platform/tests/css/css-transforms/css-transforms-transformlist.html new file mode 100644 index 0000000000..a4620f59e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css-transforms-transformlist.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<!-- Submitted from TestTWF Paris --> +<head> + <title>CSS Test: SVG transform in baseVal list</title> + <link rel="author" title="Rik Cabanier" href="mailto:cabanier@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-dom"> + <link rel="match" href="reference/css-transforms-transformlist-ref.html"> + <meta name="assert" content="This test verifies that the CSS transform does not end up in the list of SVG transforms"> + <style type="text/css"> + + #rect { + fill: green; + transform: translate(10px, 10px); + } + + #result { + width:100px; + height:100px; + background-color: red; + } + + </style> + <script> + window.addEventListener('load', function(){ + var r = document.getElementById("rect"); + var result = document.getElementById("result"); + if (r.transform.baseVal.length == 0) + result.style.backgroundColor = "green"; + + document.getElementById("svgelement").style.display="none"; + }, false); + </script> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg id="svgelement"> + <rect id="rect" style="transform: translate(20px, 20px)" width="100" height="100"></rect> + </svg> + <div id="result"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css3-transform-perspective.html b/testing/web-platform/tests/css/css-transforms/css3-transform-perspective.html new file mode 100644 index 0000000000..8f9648b9a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css3-transform-perspective.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: rotateX 90 degrees with perspective make it invisible</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 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective" /> + <link rel="match" href="reference/css3-transform-perspective-ref.html" /> + <meta name="assert" content="Test passes if rotateX 90 degrees with perspective make it invisible" /> + <style type="text/css"> + div { + width: 200px; + height: 200px; + } + #container { + position: relative; + background-color: green; + perspective: 1000px; + } + #rotated { + background-color: red; + transform: rotateX(90deg); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div id="container"> + <div id="rotated"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css3-transform-rotateY-ref.html b/testing/web-platform/tests/css/css-transforms/css3-transform-rotateY-ref.html new file mode 100644 index 0000000000..24a16829e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css3-transform-rotateY-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Transforms Test: transform property with rotateY function</title> + <link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" /> + <style type="text/css"> + div { + height: 100px; + position: absolute; + top: 80px; + } + .green { + background-color: green; + left: 80px; + width: 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/css3-transform-rotateY.html b/testing/web-platform/tests/css/css-transforms/css3-transform-rotateY.html new file mode 100644 index 0000000000..25c12bfa7c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css3-transform-rotateY.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Transforms Test: transform property with rotateY function</title> + <link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" /> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotate" /> + <link rel="match" href="css3-transform-rotateY-ref.html"/> + <meta name="assert" content="box width should be equal to projection width if transform rotateY applied"> + <style type="text/css"> + div { + height: 100px; + position: absolute; + top: 80px; + } + .red { + background-color: red; + left: 80px; + width: 100px; + } + .green{ + background-color: green; + left: 30px; + transform: rotateY(60deg); + width: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="red"></div> + <div class="green"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css3-transform-scale-002.html b/testing/web-platform/tests/css/css-transforms/css3-transform-scale-002.html new file mode 100644 index 0000000000..9ad0a4c985 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css3-transform-scale-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function</title> + <link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" /> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale" /> + <link rel="match" href="css3-transform-scale-ref-002.html" /> + <meta name="assert" content="box width and height will be twice larger if transform scale(2) applied"> + <style type="text/css"> + .red, + .green{ + width:100px; + height: 100px; + background-color:green; + position: absolute; + top: 150px; + left:150px; + z-index:10; + } + .red{ + background-color:red; + width: 200px; + height: 200px; + left:100px; + top:100px; + z-index:9; + } + .green{ + transform:scale(2); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="red"></div> + <div class="green"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/css3-transform-scale-ref-002.html b/testing/web-platform/tests/css/css-transforms/css3-transform-scale-ref-002.html new file mode 100644 index 0000000000..d17d0a0a07 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css3-transform-scale-ref-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function</title> + <link rel="author" title="Noah Lu" href="mailto:codedancerhua@gmail.com" /> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" /> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale" /> + <style type="text/css"> + .green{ + width: 200px; + height: 200px; + background-color: green; + position: absolute; + left: 100px; + top: 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/css3-transform-scale.html b/testing/web-platform/tests/css/css-transforms/css3-transform-scale.html new file mode 100644 index 0000000000..c4324a1858 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/css3-transform-scale.html @@ -0,0 +1,40 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function</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 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property" /> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale" /> + <link rel="match" href="reference/css3-transform-scale-ref.html" /> + <meta name="assert" content="box width and height will be twice larger if transform scale(2) applied"> + <style type="text/css"> + .red, + .green{ + width: 100px; + height: 100px; + background-color: green; + position: absolute; + top: 150px; + left: 150px; + z-index: 10; + } + .red{ + background-color: red; + width: 200px; + height: 200px; + left: 100px; + top: 100px; + z-index:9; + } + .green{ + transform:scale(2); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="red"></div> + <div class="green"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html b/testing/web-platform/tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html new file mode 100644 index 0000000000..3a95342030 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-001.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-001.html new file mode 100644 index 0000000000..c719d39ee6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG element with presentation attribute style on the same element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: rotate(90deg); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-002.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-002.html new file mode 100644 index 0000000000..96bce830b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG child element with presentation attribute styles on the parent and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG elements should override presentation attribute styles on the same element. Presentation attribute styles on its parent should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels, and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: translateY(-100px); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-003.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-003.html new file mode 100644 index 0000000000..c1fe39dba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG group element and presentation attribute style on child element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG group elements should be pre-multipled on the child elements. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: rotate(90deg); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-004.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-004.html new file mode 100644 index 0000000000..1a7c139028 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Document transform style on SVG group element and presentation attribute style on group and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document transform styles on SVG group elements override presentation attribute styles on the same element. Presentation attribute styles on child elements should be post-multiplied. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: rotate(90deg); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup" transform="scale(0.5)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-005.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-005.html new file mode 100644 index 0000000000..cbf5d103bf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-005.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute style of SVG element with invalid document transform style</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-006.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-006.html new file mode 100644 index 0000000000..71975eea1c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-006.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute styles of SVG element with invalid document transform style and presentation attribute style on group</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-007.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-007.html new file mode 100644 index 0000000000..b88407c0e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-007.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style on SVG child element with valid presentation attribute style on group and invalid presentation attribute style on child</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles on an element are invalid, no transform should be applied. However, valid presentation attribute styles on the group should still be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="testRect" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-008.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-008.html new file mode 100644 index 0000000000..329d09b973 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-008.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document and presentation attribute styles on an SVG element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-009.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-009.html new file mode 100644 index 0000000000..32252e7d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-009.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style on SVG group with valid presentation attribute style on child element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on group elements should not be applied, but valid presentation attribute styles on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-010.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-010.html new file mode 100644 index 0000000000..47cba53a28 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-010.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style on SVG group with valid presentation attribute styles on group and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document transform styles on group elements should fall back to presentation attribute styles on the same element. Presentation attribute styles on the child should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup" transform="rotate(90)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-011.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-011.html new file mode 100644 index 0000000000..cc6fee768f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-011.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid document transform style and invalid presentation attribute style on SVG group and valid presentation attribute style on child</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles on a group are invalid, no transform should be applied. However, the valid presentation attribute style on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + g.testGroup { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="testGroup" transform="scale(invalid)"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-012.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-012.html new file mode 100644 index 0000000000..e649ef2ddf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-012.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Document style of rotate with three arguments on SVG element with presentation attribute style on the same element</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Document style of rotate with three arguments on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: rotate(90deg); + transform-origin: 20px 20px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-013.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-013.html new file mode 100644 index 0000000000..e12bc8f0d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-013.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Fall back to presentation attribute style of rotate with three arguments of SVG element with invalid document style</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid document styles on SVG elements should fall back to presentation attributes styles of rotate with three arguments on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="rotate(90,20,20)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-014.html b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-014.html new file mode 100644 index 0000000000..c7a43b1582 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/document-styles/svg-document-styles-014.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Invalid document and presentation attribute styles on an SVG element using rotate with three arguments</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-document-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the document and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or rotated."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + rect.testRect { + transform: scale(invalid); + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="testRect" width="100" height="100" fill="url(#grad)" transform="rotate(90,invalid,invalid)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change-ref.html b/testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change-ref.html new file mode 100644 index 0000000000..57c86e1d76 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change-ref.html @@ -0,0 +1,47 @@ +<!doctype html> +<title>CSS Test Reference</title> +<meta charset="utf-8"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> +html, +body { + height: 100%; + overflow: hidden; + margin: 0; + padding: 0; + background-color: #222; +} + +body { + display: flex; + transform: scale(0.9); +} + +#fixed { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1; + background: black; +} + +#popup { + position: absolute; + width: 200px; + height: 200px; + left: 0; + top: 0; + z-index: 2; + background: green; + transform: scale( 1.1111 ); +} + +body, #popup { + transform-origin: 50% 50%; +} +</style> +<div id="popup"></div> +<div id="fixed"></div> diff --git a/testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change.html b/testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change.html new file mode 100644 index 0000000000..46e26bfc9e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/dynamic-fixed-pos-cb-change.html @@ -0,0 +1,65 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Test: Checks that dynamic changes to whether we're a fixed-pos containing block are handled correctly</title> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#containing-block-for-all-descendants"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1498873"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="dynamic-fixed-pos-cb-change-ref.html"> +<style> +html, +body { + height: 100%; + overflow: hidden; + margin: 0; + padding: 0; + background-color: #222; +} + +body { + display: flex; +} + +#fixed { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 1; + background: black; +} + +#popup { + position: absolute; + width: 200px; + height: 200px; + left: 0; + top: 0; + z-index: 2; + background: red; + transform: scale( 1.1111 ); +} + +body, #popup { + transform-origin: 50% 50%; +} +</style> +<div id="popup"> + <!-- Seeing this box change color should not move me or change my size. --> +</div> +<div id="fixed"></div> +<script> +onload = function() { + requestAnimationFrame(() => { + document.body.style.transform = "scale(0.9)"; + requestAnimationFrame(() => { + popup.style.backgroundColor = "green"; + requestAnimationFrame(() => { + document.documentElement.className = ""; + }); + }); + }); +} +</script> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/reference/svg-external-styles-ref.html b/testing/web-platform/tests/css/css-transforms/external-styles/reference/svg-external-styles-ref.html new file mode 100644 index 0000000000..3a95342030 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/reference/svg-external-styles-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/support/svg-external-styles.css b/testing/web-platform/tests/css/css-transforms/external-styles/support/svg-external-styles.css new file mode 100644 index 0000000000..ad60fd8117 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/support/svg-external-styles.css @@ -0,0 +1,11 @@ +.rotate { + transform: rotate(90deg); +} + +.translateY { + transform: translateY(-100px); +} + +.invalid { + transform: scale(invalid); +} diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-001.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-001.html new file mode 100644 index 0000000000..36e8811c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: External transform style on SVG element with presentation attribute style on the same element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="External styles on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="rotate" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-002.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-002.html new file mode 100644 index 0000000000..3ef0139a48 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: External transform style on SVG child element with presentation attribute styles on the parent and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="External styles on SVG elements should override presentation attribute styles on the same element. Presentation attribute styles on its parent should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels, and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="translateY" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-003.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-003.html new file mode 100644 index 0000000000..564f230cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-003.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: External transform style on SVG group element and presentation attribute style on child element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="External styles on SVG group elements should be pre-multipled on the child elements. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="rotate"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-004.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-004.html new file mode 100644 index 0000000000..ea51002ba2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-004.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: External transform style on SVG group element and presentation attribute style on group and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="External styles on SVG group elements override presentation attribute styles on the same element. Presentation attribute styles on child elements should be post-multiplied. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="rotate" transform="scale(0.5)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-005.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-005.html new file mode 100644 index 0000000000..93e876bfe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-005.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute style of SVG element with invalid external transform style</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid external transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="invalid" y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-006.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-006.html new file mode 100644 index 0000000000..d43e40a814 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-006.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute styles of SVG element with invalid external transform style and presentation attribute style on group</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid external transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="invalid" width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-007.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-007.html new file mode 100644 index 0000000000..f5745e7830 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-007.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid external transform style on SVG child element with valid presentation attribute style on group and invalid presentation attribute style on child</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the external and presentation attribute styles on an element are invalid, no transform should be applied. However, valid presentation attribute styles on the group should still be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect class="invalid" y="-100" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-008.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-008.html new file mode 100644 index 0000000000..c229269074 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid external and presentation attribute styles on an SVG element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the external and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="invalid" width="100" height="100" fill="url(#grad)" transform="scale(invalid)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-009.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-009.html new file mode 100644 index 0000000000..969951a1f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-009.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid external transform style on SVG group with valid presentation attribute style on child element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid external transform styles on group elements should not be applied, but valid presentation attribute styles on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="invalid"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-010.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-010.html new file mode 100644 index 0000000000..863278fafe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-010.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid external transform style on SVG group with valid presentation attribute styles on group and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid external transform styles on group elements should fall back to presentation attribute styles on the same element. Presentation attribute styles on the child should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="invalid" transform="rotate(90)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-011.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-011.html new file mode 100644 index 0000000000..353f097451 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-011.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid external transform style and invalid presentation attribute style on SVG group and valid presentation attribute style on child</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the external and presentation attribute styles on a group are invalid, no transform should be applied. However, the valid presentation attribute style on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g class="invalid" transform="scale(invalid)"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-013.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-013.html new file mode 100644 index 0000000000..f45639f8c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-013.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Fall back to presentation attribute style of rotate with three arguments of SVG element with invalid external style</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid external styles on SVG elements should fall back to presentation attributes styles of rotate with three arguments on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="invalid" y="-60" width="100" height="100" fill="url(#grad)" transform="rotate(90 20 20)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-014.html b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-014.html new file mode 100644 index 0000000000..6ec267febe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/external-styles/svg-external-styles-014.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Invalid external and presentation attribute styles on an SVG element</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-external-styles-ref.html"> + <link rel="stylesheet" href="support/svg-external-styles.css"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the external and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or rotated."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect class="invalid" width="100" height="100" fill="url(#grad)" transform="rotate(90,)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html b/testing/web-platform/tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html new file mode 100644 index 0000000000..1a0820cc2e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body style="margin: 0"> +Should be fully white, without any red. +</body> diff --git a/testing/web-platform/tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html b/testing/web-platform/tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html new file mode 100644 index 0000000000..4fbc7590c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1330509"> +<link rel="match" href="fractional-scale-gradient-bg-obscure-red-bg-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-350"> +<style> + body { + background: red; + margin: 0; + } + .container { + width: 100vw; + height: 100vh; + background: white; + } + .transform { + transform-origin: 0 0; + will-change: transform; + background: linear-gradient(white, white); + width: 47px; + height: 47px; + position: absolute; + } +</style> +<div class="container"> + Should be fully white, without any red. + <div class="transform" style="transform: scale(3.777)"></div> + <div class="transform" style="transform: scale(2.777)"></div> + <div class="transform" style="transform: scale(1.777)"></div> + <div class="transform" style="transform: scale(1.129)"></div> + <div class="transform" style="transform: scale(0.971)"></div> + <div class="transform" style="transform: scale(0.457)"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-combination-ref.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-combination-ref.html new file mode 100644 index 0000000000..1b74821500 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-combination-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="200" height="200" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ex-unit-ref.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ex-unit-ref.html new file mode 100644 index 0000000000..fc6a9da6f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ex-unit-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ref.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ref.html new file mode 100644 index 0000000000..fc6a9da6f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-relative-ref.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-relative-ref.html new file mode 100644 index 0000000000..51de5dbb65 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-relative-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green bar next to a vertical blue bar.</p> + <svg> + <rect width="50" height="100" fill="green"/> + <rect x="50" width="50" height="100" fill="blue"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-transform-ref.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-transform-ref.html new file mode 100644 index 0000000000..d9a29b6c01 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-transform-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green bar to the left of a vertical yellow bar.</p> + <svg> + <rect width="50" height="100" fill="green"/> + <rect x="50" width="50" height="100" fill="yellow"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-001.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-001.html new file mode 100644 index 0000000000..c953a69232 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG gradientTransform presentation attribute and translateX with translation-value argument without unit</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform"> + <link rel="match" href="reference/svg-gradientTransform-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The gradientTransform attribute must support functions with unit less arguments for translation-value. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400"> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" gradientTransform="translate(50 0)"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="red"/> + </linearGradient> + </defs> + <rect fill="url(#grad)" x="0" y="0" width="100" height="100"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html new file mode 100644 index 0000000000..c43a0de30c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG gradientTransform presentation attribute with translateX applied twice</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-gradientTransform-combination-ref.html"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform"> + <meta name="flags" content="svg"> + <meta name="assert" content="The gradientTransform attribute must support multiple transform functions the same element. The gradient in the test should be moved 100 pixels in the X direction resulting in a solid green rect."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-18000"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <defs> + <linearGradient id="grad" gradientUnits="userSpaceOnUse" gradientTransform="translate(50 0) translate(50 0)"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="red"/> + </linearGradient> + </defs> + <rect fill="url(#grad)" x="0" y="0" width="200" height="200"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-003.html b/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-003.html new file mode 100644 index 0000000000..694119b6ec --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG gradientTransform presentation attribute and translation-value argument with translateX applied in both directions</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-gradientTransform-combination-ref.html"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform"> + <meta name="flags" content="svg"> + <meta name="assert" content="The gradientTransform attribute must support multiple transform functions in both directions. The gradient in the test should be moved 100 pixels in the X direction resulting in a solid green rect."> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-18000"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <defs> + <linearGradient id="grad" gradientTransform="translate(150 0) translate(-50 0)"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="red"/> + </linearGradient> + </defs> + <rect fill="url(#grad)" x="0" y="0" width="200" height="200"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html new file mode 100644 index 0000000000..64bcfbe7df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-ref.html b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-ref.html new file mode 100644 index 0000000000..ea386e774b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/reference/svg-green-square-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="40" y="40" width="80" height="80" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-001.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-001.html new file mode 100644 index 0000000000..e0f7306754 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated, therefore the child element should be translated to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 40)"> + <rect width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-002.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-002.html new file mode 100644 index 0000000000..cb4d7aac46 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translateX on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated horizontally, therefore the child element should be translated horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 0)"> + <rect y="40" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-003.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-003.html new file mode 100644 index 0000000000..6f21fe2c88 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translateY on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated vertically, therefore the child element should be translated vertically to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(0 40)"> + <rect x="40" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-004.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-004.html new file mode 100644 index 0000000000..e22809bb48 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled, therefore the child element should be scaled to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2)"> + <rect x="20" y="20" width="40" height="40" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-005.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-005.html new file mode 100644 index 0000000000..5d5e5ada46 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scaleX on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled horizontally, therefore the child element should be scaled horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="20" y="40" width="40" height="80" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-006.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-006.html new file mode 100644 index 0000000000..2bbf77d26f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scaleY on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled vertically, therefore the child element should be scaled vertically to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(1 2)"> + <rect x="40" y="20" width="80" height="40" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-007.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-007.html new file mode 100644 index 0000000000..ce47ad19d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be rotated, therefore the child element should be rotated. The green rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(90)"> + <rect x="40" y="-120" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-008.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-008.html new file mode 100644 index 0000000000..e095b7f989 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-008.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be skewed horizontally, therefore the child element should be skewed horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 100,99 Z" fill="red"/> + <g transform="skewX(45)"> + <rect width="100" height="100" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-009.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-009.html new file mode 100644 index 0000000000..58f4beeda9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-009.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewY on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be skewed vertically, therefore the child element should be skewed vertically to completely cover the red rect."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 1,99 99,197 99,100 Z" fill="red"/> + <g transform="skewY(45)"> + <rect width="100" height="100" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-010.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-010.html new file mode 100644 index 0000000000..9076cb881c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-010.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should have the transform matrix applied, therefore the child element should be scaled and translated to completely cover the red rect."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="matrix(-2 0 0 -2 120 120)"> + <rect width="40" height="40" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-011.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-011.html new file mode 100644 index 0000000000..59c4e77b27 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-group-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate with three arguments on group</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be rotated and translated, therefore the child element should be rotated and translated. The green rect in this test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(90,20,20)"> + <rect x="40" y="-80" width="80" height="80" fill="green"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-001.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-001.html new file mode 100644 index 0000000000..c3060313df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate on group, translate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated. Additionally, the child rect should be translated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(20 20)"> + <rect width="80" height="80" fill="green" transform="translate(20 20)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-002.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-002.html new file mode 100644 index 0000000000..37e897c14a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateX on group, translateX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated horizontally. Additionally, the child rect should be translated horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(20 0)"> + <rect y="40" width="80" height="80" fill="green" transform="translate(20 0)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-003.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-003.html new file mode 100644 index 0000000000..092946744a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateY on group, translateY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated vertically. Additionally, the child rect should be translated vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(0 20)"> + <rect x="40" width="80" height="80" fill="green" transform="translate(0 20)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-004.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-004.html new file mode 100644 index 0000000000..810c60d293 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scale on group, scale on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled. Additionally, the child rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2)"> + <rect x="10" y="10" width="20" height="20" fill="green" transform="scale(2)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-005.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-005.html new file mode 100644 index 0000000000..ca693d2c34 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, scaleX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="10" y="40" width="20" height="80" fill="green" transform="scale(2 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-006.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-006.html new file mode 100644 index 0000000000..91f1d3e857 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleY on group, scaleY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled vertically. Additionally, the child rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(1 2)"> + <rect x="40" y="10" width="80" height="20" fill="green" transform="scale(1 2)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-007.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-007.html new file mode 100644 index 0000000000..026a5f84cc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, rotate on group, rotate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be rotated. Additionally, the child rect should be rotated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(45)"> + <rect x="40" y="-120" width="80" height="80" fill="green" transform="rotate(45)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-008.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-008.html new file mode 100644 index 0000000000..8348aaeb8d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-008.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewX on group, skewX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-50"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed horizontally. Additionally, the child rect should be skewed horizontally."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 99,1 196,99 100,99 Z" fill="red"/> + <g transform="skewX(27)"> + <rect width="100" height="100" fill="green" transform="skewX(26)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-009.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-009.html new file mode 100644 index 0000000000..fe3b06ac2c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-009.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewY on group, skewY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-1"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed vertically. Additionally, the child rect should be skewed vertically."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,3 1,98 99,196 99,101 Z" fill="red"/> + <g transform="skewY(27)"> + <rect width="100" height="100" fill="green" transform="skewY(26)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-010.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-010.html new file mode 100644 index 0000000000..14e385752f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-010.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, matrix on group, matrix on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled and translated. Additionally, the child rect should be scaled and translated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="matrix(-0.25 0 0 -0.25 50 50)"> + <rect width="160" height="160" fill="green" transform="matrix(2 0 0 2 -280 -280)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-011.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-011.html new file mode 100644 index 0000000000..8c67bafb2e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-011.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translate on group, scale on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated. Additionally, the child rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 40)"> + <rect width="40" height="40" fill="green" transform="scale(2)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-012.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-012.html new file mode 100644 index 0000000000..a6571892df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-012.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateX on group, scaleY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated horizontally. Additionally, the child rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="translate(40 0)"> + <rect y="20" width="80" height="40" fill="green" transform="scale(1 2)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-013.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-013.html new file mode 100644 index 0000000000..355746b1b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-013.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateY on group, skewX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated vertically. Additionally, the child rect should be skewed horizontally."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,26 100,26 198,124 100,124 Z" fill="red"/> + <g transform="translate(0 25)"> + <rect width="100" height="100" fill="green" transform="skewX(45)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-014.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-014.html new file mode 100644 index 0000000000..9da7a80c10 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-014.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scale on group, skewY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled. Additionally, the child rect should be skewed vertically."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 1,98 99,196 99,100 Z" fill="red"/> + <g transform="scale(0.5)"> + <rect width="200" height="200" fill="green" transform="skewY(45)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-015.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-015.html new file mode 100644 index 0000000000..6ec40d41d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-015.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, rotate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be rotated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="40" y="-60" width="80" height="40" fill="green" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-016.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-016.html new file mode 100644 index 0000000000..22db9eaebc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-016.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleY on group, translateX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled vertically. Additionally, the child rect should be translated horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(1 2)"> + <rect y="20" width="80" height="40" fill="green" transform="translate(40 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-017.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-017.html new file mode 100644 index 0000000000..3797318afa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-017.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, rotate on group, translateY on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be rotated. Additionally, the child rect should be translated vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="rotate(90)"> + <rect x="40" y="-160" width="80" height="80" fill="green" transform="translate(0 40)"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-018.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-018.html new file mode 100644 index 0000000000..798078e872 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-018.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewX on group, scaleX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed horizontally. Additionally, the child rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 100,99 Z" fill="red"/> + <g transform="skewX(45)"> + <!-- FIXME: This test will still pass if the transform= is ignored --> + <rect width="200" height="100" fill="green" transform="scale(0.5 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-019.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-019.html new file mode 100644 index 0000000000..4bb658d2f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-019.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, skewY on group, translate on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-250x250-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-299"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed vertically. Additionally, the child rect should be translated."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 21,43 21,139 119,237 119,141 Z" fill="red"/> + <g transform="skewY(45)"> + <rect width="100" height="100" fill="green" transform="translate(20 20)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-020.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-020.html new file mode 100644 index 0000000000..a90af99610 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-020.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, matrix on group, scaleX on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled and translated. Additionally, the child rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="matrix(-1 0 0 -2 120 120)"> + <rect width="40" height="40" fill="green" transform="scale(2 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-021.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-021.html new file mode 100644 index 0000000000..3b8be89f3f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-021.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translate on group, scaleY on child1, rotate on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated. Additionally, the first rect should be scaled vertically and the second rect should be rotated."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="translate(20 20)"> + <rect x="21" y="42" width="78" height="156" fill="red" transform="scale(1 0.5)"/> <!-- false positive if scaleY is negative; need to fix --> + <rect x="20" y="-100" width="80" height="80" fill="green" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-022.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-022.html new file mode 100644 index 0000000000..3ef4bba5a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-022.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateX on group, scaleX on child1, matrix on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated horizontally. Additionally, the first rect should be scaled horizontally and the second rect should have the transform matrix applied."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="translate(20 0)"> + <rect x="42" y="41" width="156" height="78" fill="red" transform="scale(0.5 1)"/> <!-- false positive if scaleX is negative --> + <rect width="40" height="40" fill="green" transform="matrix(-2 0 0 -2 100 120)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-023.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-023.html new file mode 100644 index 0000000000..a240df2f43 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-023.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, translateY on group, translate on child1, scale on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated vertically. Additionally, the first rect should be translated and the second rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="translate(0 25)"> + <rect x="1" y="1" width="78" height="78" fill="red" transform="translate(40 15)"/> + <rect x="80" y="30" width="160" height="160" fill="green" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-024.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-024.html new file mode 100644 index 0000000000..baab7bfa87 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-024.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scale on group, translateX on child1, scaleX on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled. Additionally, the first rect should be translated horizontally and the second rect should be scaled horizontally."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="scale(0.5)"> + <rect x="62" y="82" width="156" height="156" fill="red" transform="translate(20 0)"/> + <rect x="160" y="80" width="320" height="160" fill="green" transform="scale(0.5 1)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-025.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-025.html new file mode 100644 index 0000000000..68958f6f51 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-025.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, translateY on child1, scale on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled horizontally. Additionally, the first rect should be translated vertically and the second rect should be scaled."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="scale(0.5 1)"> + <rect x="82" y="21" width="156" height="78" fill="red" transform="translate(0 20)"/> + <rect x="160" y="80" width="320" height="160" fill="green" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-026.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-026.html new file mode 100644 index 0000000000..5c87506a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-026.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleY on group, translate on child1, rotate on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled vertically. Additionally, the first rect should be translated and the second rect should be rotated."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="scale(1 0.5)"> <!-- false positive if scaleY is negative; need to fix --> + <rect x="21" y="42" width="78" height="156" fill="red" transform="translate(20 40)"/> + <rect x="80" y="-120" width="160" height="80" fill="green" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-027.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-027.html new file mode 100644 index 0000000000..f4119792ff --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-027.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, rotate on group, translateX on child1, scaleY on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be rotated. Additionally, the first rect should be translated horizontally and the second rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="rotate(90)"> + <rect x="20" y="-120" width="80" height="80" fill="green" transform="translate(20 0)"/> + <rect x="40" y="-240" width="80" height="160" fill="green" transform="scale(1 0.5)"/> <!-- false positive if scaleY is negative; need to fix --> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-028.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-028.html new file mode 100644 index 0000000000..69d88bc272 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-028.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, matrix on group, scaleY on child1, translateY on child2</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should have the transform matrix applied. Additionally, the first rect should be translated vertically and the second rect should be scaled vertically."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform --> + <g transform="matrix(-0.5 0 0 -0.5 120 90)"> + <rect x="2" y="-116" width="156" height="312" fill="red" transform="scale(1 0.5)"/> <!-- false positive if scaleY is between 0.4 and -0.3 --> + <rect width="160" height="160" fill="green" transform="translate(0 -60)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-029.html b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-029.html new file mode 100644 index 0000000000..3a28c97a1c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/group/svg-transform-nested-029.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute, scaleX on group, rotate with three arguments on child</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-green-square-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be rotated after the transform origin is translated."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="41" y="41" width="78" height="78" fill="red"/> + <g transform="scale(2 1)"> + <rect x="40" y="-20" width="80" height="40" fill="green" transform="rotate(90,20,20)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/huge-length-tiny-scale-ref.html b/testing/web-platform/tests/css/css-transforms/huge-length-tiny-scale-ref.html new file mode 100644 index 0000000000..f3f8abc50e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/huge-length-tiny-scale-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 200px; height: 200px; background: green; border: 10px solid blue"></div> diff --git a/testing/web-platform/tests/css/css-transforms/huge-length-tiny-scale.html b/testing/web-platform/tests/css/css-transforms/huge-length-tiny-scale.html new file mode 100644 index 0000000000..53f4f7d447 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/huge-length-tiny-scale.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Huge lengths with tiny scale</title> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="help" href="https://crbug.com/1132991"> +<link rel="match" href="huge-length-tiny-scale-ref.html"> +<style> +body { + overflow: hidden; +} +div { + will-change: transform; + transform: scale(0.005); + transform-origin: 0 0; + width: 40000px; + height: 40000px; + background: green; + border: 2000px solid blue; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html new file mode 100644 index 0000000000..7c8eb206a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <style> + .block { + display: inline-block; + width: 50px; + height: 50px; + margin: 50px; + padding: 0; + transform-origin: center center; + background: lime; + transform: rotate(90deg) scale(2, 1); + } + </style> + </head> + <body> + <div> + <div class="block"></div> + <div class="block"></div> + </div> + <div> + <div class="block"></div> + <div class="block"></div> + </div> + <div> + <div class="block"></div> + <div class="block"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-combine.html b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-combine.html new file mode 100644 index 0000000000..9551a3a726 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-combine.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine animated transformations with the underlying style correctly."/> + <link rel="match" href="individual-transform-combine-ref.html"> + <style> + .block { + display: inline-block; + width: 50px; + height: 50px; + margin: 50px; + padding: 0; + transform-origin: center center; + background: lime; + /* Freeze the animation at the midpoint. */ + animation-timing-function: cubic-bezier(0, 1, 1, 0); + animation-duration: 1000000s; + animation-delay: -500000s; + } + + @keyframes anim-1 { + to { rotate: 180deg; } + } + #div-1 { + scale: 2 1; + animation-name: anim-1; + } + + @keyframes anim-2 { + from { scale: 1 1; } + to { scale: 3 1; } + } + #div-2 { + /* The scale property is replaced in the animation. */ + scale: 1 3; + rotate: 90deg; + animation-name: anim-2; + } + + @keyframes anim-3 { + to { rotate: 180deg; } + } + #div-3 { + transform: scale(2, 1); + animation-name: anim-3; + } + + @keyframes anim-4 { + to { transform: scale(7, 1); } + } + #div-4 { + rotate: 90deg; + /* As transform is a separate property from scale, the two scales are + chained together. */ + scale: 0.5 1; + animation-name: anim-4; + } + + /* transform origin tests */ + + @keyframes anim-5 { + to { rotate: 180deg; translate: 100px -50px; } + } + #div-5 { + transform-origin: top left; + scale: 2 1; + animation-name: anim-5; + } + + @keyframes anim-6 { + to { rotate: 180deg; translate: -100px 50px; } + } + #div-6 { + transform-origin: bottom right; + scale: 2 1; + animation-name: anim-6; + } + + </style> + </head> + <body> + <div> + <div id="div-1" class="block"></div> + <div id="div-2" class="block"></div> + </div> + <div> + <div id="div-3" class="block"></div> + <div id="div-4" class="block"></div> + </div> + <div> + <div id="div-5" class="block"></div> + <div id="div-6" class="block"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html new file mode 100644 index 0000000000..b7dce51e8b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <style> + @keyframes anim { + to { + transform: translate(50px, 50px) rotate(45deg) scale(2, 1); + } + } + .block { + display: inline-block; + width: 50px; + height: 50px; + margin: 50px; + padding: 0; + transform-origin: 0 0; + background: lime; + /* Freeze the animation at the midpoint. */ + animation-timing-function: cubic-bezier(0, 1, 1, 0); + animation-duration: 1000000s; + animation-delay: -500000s; + animation-name: anim; + } + </style> + </head> + <body> + <div> + <div class="block"></div> + <div class="block"></div> + </div> + <div> + <div class="block"></div> + <div class="block"></div> + </div> + <div> + <div class="block"></div> + <div class="block"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-ordering.html b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-ordering.html new file mode 100644 index 0000000000..9d127f163b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/animation/individual-transform-ordering.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine transforms in the correct order when animating."/> + <link rel="match" href="individual-transform-ordering-ref.html"> + <style> + .block { + display: inline-block; + width: 50px; + height: 50px; + margin: 50px; + padding: 0; + transform-origin: 0 0; + background: lime; + /* Freeze the animation at the midpoint. */ + animation-timing-function: cubic-bezier(0, 1, 1, 0); + animation-duration: 1000000s; + animation-delay: -500000s; + } + @keyframes anim-1 { + to { + translate: 50px 50px; + rotate: 45deg; + scale: 2 1; + } + } + #div-1 { + animation-name: anim-1; + } + @keyframes anim-2 { + to { + rotate: 45deg; + scale: 2 1; + translate: 50px 50px; + } + } + #div-2 { + animation-name: anim-2; + } + @keyframes anim-3 { + to { + transform: scale(2, 1); + translate: 50px 50px; + rotate: 45deg; + } + } + #div-3 { + animation-name: anim-3; + } + @keyframes anim-4 { + to { + transform: rotate(45deg) scale(2, 1); + translate: 50px 50px; + } + } + #div-4 { + animation-name: anim-4; + } + @Keyframes anim-5 { + to { transform: rotate(45deg); } + } + @Keyframes anim-6 { + from { transform: none; } + to { transform: translate(50px, 50px) rotate(45deg) scale(2, 1); } + } + /* anim-6 replaces anim-5 since both updating the transform property. */ + #div-5 { + animation-name: anim-5, anim-6; + } + @keyframes anim-7 { + to { + rotate: 45deg; + scale: 2 2; + } + } + @keyframes anim-8 { + from { + translate: 0px 0px; + scale: 1 1; + } + to { + translate: 50px 50px; + scale: 2 1; + } + } + /* + * The scale property is overridden in anim-8, but the rotate property + * from anim-7 is still relevant and must be applied in the correct order + * (after translate but before scale). + */ + #div-6 { + animation-name: anim-7, anim-8; + } + </style> + </head> + <body> + <div> + <div id="div-1" class="block"></div> + <div id="div-2" class="block"></div> + </div> + <div> + <div id="div-3" class="block"></div> + <div id="div-4" class="block"></div> + </div> + <div> + <div id="div-5" class="block"></div> + <div id="div-6" class="block"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/change-rotate-property.html b/testing/web-platform/tests/css/css-transforms/individual-transform/change-rotate-property.html new file mode 100644 index 0000000000..e5a8046eff --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/change-rotate-property.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Change rotate property</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://crbug.com/1365255"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> +#target { + will-change: transform; + rotate: 45deg; + width: 100px; + height: 100px; + background: green; +} +#container { + width: 100px; + height: 100px; + background: red; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="target"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.rotate = '0deg'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/change-scale-property.html b/testing/web-platform/tests/css/css-transforms/individual-transform/change-scale-property.html new file mode 100644 index 0000000000..62814a6114 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/change-scale-property.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Change scale property</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://crbug.com/1365255"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> +#target { + will-change: transform; + scale: 0.5; + width: 100px; + height: 100px; + background: green; +} +#container { + width: 100px; + height: 100px; + background: red; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="target"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.scale = '1'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/change-translate-property.html b/testing/web-platform/tests/css/css-transforms/individual-transform/change-translate-property.html new file mode 100644 index 0000000000..d2d57abb9a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/change-translate-property.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Change translate property</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://crbug.com/1365255"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> +#target { + will-change: transform; + transform: translateX(100px); + translate: 100px 100px; + width: 100px; + height: 100px; + background: green; +} +#container { + width: 100px; + height: 100px; + background: red; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <div id="target"></div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.translate = '-100px 0px'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1-ref.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1-ref.html new file mode 100644 index 0000000000..dbc5f05d89 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1-ref.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: compare individual transform with transform functions</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + } + .row_1 { + top: 100px; + } + .scale_1{ + left: 100px; + width: 50px; + height: 100px; + transform: scale(2, 2); + } + .translate_1 { + left: 150px; + transform: translateX(150px); + } + .rotate_1 { + left: 450px; + transform-origin: 50% 50%; + transform: rotate(90deg); + } + + .row_2 { + top: 250px; + } + .scale_2{ + left: 100px; + width: 50px; + height: 50px; + transform: scale(2, 2); + } + .translate_2 { + left: 150px; + top: 200px; + transform: translate(150px, 50px); + } + .rotate_2 { + left: 450px; + transform-origin: 50% 50%; + transform: rotate3d(1, 0, 0, 45deg); + } + .row_3 { + transform: perspective(500px); + top: 400px; + } + .scale_3{ + left: 100px; + width: 50px; + height: 50px; + transform: scale3d(2, 2, 2); + } + .translate_3 { + left: 150px; + transform: translate3d(150px, 10px, 10px); + } + .rotate_3 { + left: 450px; + transform-origin: 50% 50%; + transform: rotate3d(0, 1, 0, 45deg); + } + </style> + </head> + <body> + <div class="scale_1 row_1"></div> + <div class="translate_1 row_1"></div> + <div class="rotate_1 row_1"></div> + <div class="scale_2 row_2"></div> + <div class="translate_2 row_2"></div> + <div class="rotate_2 row_2"></div> + <div class="scale_3 row_3"></div> + <div class="translate_3 row_3"></div> + <div class="rotate_3 row_3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1.html new file mode 100644 index 0000000000..f21954e01d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-1.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: compare individual transform with transform functions</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <meta name="assert" content="Tests whether individual transforms work correctly by comparing the rendering result with transform functions of the 'transform' property."/> + <link rel="match" href="individual-transform-1-ref.html"> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + } + .row_1 { + top: 100px; + } + .scale_1{ + left: 100px; + width: 50px; + height: 100px; + /* test 'scale: <number>' */ + scale: 2; + } + .translate_1 { + left: 150px; + /* test 'translate: <length-percentage>' */ + translate: 150px; + } + .rotate_1 { + left: 450px; + transform-origin: 50% 50%; + /* test 'rotate: <angle>' */ + rotate: 90deg; + } + + .row_2 { + top: 250px; + } + .scale_2{ + left: 100px; + width: 50px; + height: 50px; + /* test 'scale: <number>{2}'' */ + scale: 2 2; + } + .translate_2 { + left: 150px; + top: 200px; + /* test 'translate: <length-percentage><length-percentage>' */ + translate: 150px 50px; + } + .rotate_2 { + left: 450px; + transform-origin: 50% 50%; + /* test 'rotate: axis <angle>'*/ + rotate: x 45deg; + } + .row_3 { + transform: perspective(500px); + top: 400px; + } + .scale_3{ + left: 100px; + width: 50px; + height: 50px; + /* test 'scale: <number>{3}'' */ + scale: 2 2 2; + } + .translate_3 { + left: 150px; + /* test 'translate: <length-percentage><length>' */ + translate: 150px 10px 10px; + } + .rotate_3 { + left: 450px; + transform-origin: 50% 50%; + /* test 'rotate: <number>{3}<angle>'*/ + rotate: 0 1 0 45deg; + } + </style> + </head> + <body> + <div class="scale_1 row_1"></div> + <div class="translate_1 row_1"></div> + <div class="rotate_1 row_1"></div> + <div class="scale_2 row_2"></div> + <div class="translate_2 row_2"></div> + <div class="rotate_2 row_2"></div> + <div class="scale_3 row_3"></div> + <div class="translate_3 row_3"></div> + <div class="rotate_3 row_3"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2-ref.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2-ref.html new file mode 100644 index 0000000000..ee956aa301 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine transforms in the correct order."/> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + top: 200px; + left: 200px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + transform: translate(50px, 50px) rotate(45deg) scale(2, 2); + } + + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2a.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2a.html new file mode 100644 index 0000000000..3f6c97386b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2a.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine transforms in the correct order."/> + <link rel="match" href="individual-transform-2-ref.html"> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + top: 200px; + left: 200px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + translate: 50px 50px; + rotate: 45deg; + scale: 2 2; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2b.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2b.html new file mode 100644 index 0000000000..94dac2f10f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2b.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine transforms in the correct order."/> + <link rel="match" href="individual-transform-2-ref.html"> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + top: 200px; + left: 200px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + rotate: 45deg; + scale: 2 2; + translate: 50px 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2c.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2c.html new file mode 100644 index 0000000000..f84ae22806 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2c.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine transforms in the correct order."/> + <link rel="match" href="individual-transform-2-ref.html"> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + top: 200px; + left: 200px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + translate: 50px 50px; + rotate: 45deg; + transform: scale(2, 2); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2d.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2d.html new file mode 100644 index 0000000000..5b5694f544 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2d.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine transforms in the correct order."/> + <link rel="match" href="individual-transform-2-ref.html"> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + top: 200px; + left: 200px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + translate: 50px 50px; + transform: rotate(45deg) scale(2, 2); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2e.html b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2e.html new file mode 100644 index 0000000000..0350137bed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/individual-transform-2e.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Individual transform: combine individual transform properties</title> + <link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> + <meta name="assert" content="Tests that we combine transforms in the correct order."/> + <link rel="match" href="individual-transform-2-ref.html"> + <style> + div { + position: fixed; + width: 100px; + height: 100px; + top: 200px; + left: 200px; + transform-origin: 0 0; + border-style: solid; + border-width: 10px 0px 10px 0px; + border-color: lime; + translate: 0px 50px; + transform: translateX(50px) rotate(45deg) scale(2, 2); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/stacking-context-001.html b/testing/web-platform/tests/css/css-transforms/individual-transform/stacking-context-001.html new file mode 100644 index 0000000000..1a754c5d70 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/stacking-context-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title> + Individual transform properties' animations create stacking context in delay phase + </title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> + <link rel="match" href="stacking-context-ref.html"> + <meta name="assert" content="Individual transform properties' animations + should create stacking context even in delay + phase."/> + <style> + #back { + height: 100px; + width: 100px; + position: fixed; + background: green; + margin-top: 50px; + } + @keyframes scale { + from, to { scale: 1; } + } + #test { + width: 100px; + height: 100px; + background: blue; + animation: scale 100s 100s; + } + </style> + </head> + <body> + <div id="back"></div> + <div id="test"></div> + </body> + <script> + requestAnimationFrame(() => { + document.documentElement.classList.remove('reftest-wait'); + }); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/stacking-context-ref.html b/testing/web-platform/tests/css/css-transforms/individual-transform/stacking-context-ref.html new file mode 100644 index 0000000000..0b8c52303d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/stacking-context-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title> + Reference: Individual transform properties' animations create stacking context in delay phase + </title> + <style> + #back { + height: 100px; + width: 100px; + position: fixed; + background: green; + margin-top: 50px; + } + #test { + width: 100px; + height: 100px; + background: blue; + will-change: transform; + } + </style> + </head> + <body> + <div id="back"></div> + <div id="test"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/translate-fill-box.html b/testing/web-platform/tests/css/css-transforms/individual-transform/translate-fill-box.html new file mode 100644 index 0000000000..8892d63327 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/translate-fill-box.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>transform-box: fill-box</title> +<link rel="match" href="../transform-box/reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<meta name="assert" content="translate percentages are relative to the reference box."> +<style> +svg { + background-color: red; +} +rect { + transform-box: fill-box; +} +#target1 { + rotate: 90deg; +} +#target2 { + translate: 50% -50%; +} +#target3 { + transform-origin: 25% 25%; + translate: 25% 25%; + rotate: 180deg; +} +#target4 { + transform-origin: 75px 75px; + translate: 25% 25%; + rotate: -180deg; +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="200" height="200"> + <rect id="target1" x="100" y="100" width="100" height="100" fill="green"/> + <rect id="target2" x="50" y="50" width="100" height="100" fill="green"/> + <rect id="target3" x="25" y="25" width="100" height="100" fill="green"/> + <rect id="target4" x="25" y="25" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/individual-transform/translate-view-box.html b/testing/web-platform/tests/css/css-transforms/individual-transform/translate-view-box.html new file mode 100644 index 0000000000..56153594e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/individual-transform/translate-view-box.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>transform-box: view-box</title> +<link rel="match" href="../transform-box/reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<meta name="assert" content="translate percentages are relative to the reference box."> +<style> +svg { + background-color: red; +} +rect { + transform-box: view-box; +} +#target1 { + transform-origin: 25% 25%; + scale: 2; +} +#target2 { + translate: 50%; +} +#target3 { + translate: 0 50%; +} +#target4 { + transform-origin: 50% 50%; + rotate: 180deg; +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="200" height="200"> + <rect id="target1" x="25" y="25" width="50" height="50" fill="green"/> + <rect id="target2" width="100" height="100" fill="green"/> + <rect id="target3" width="100" height="100" fill="green"/> + <rect id="target4" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/inheritance.html b/testing/web-platform/tests/css/css-transforms/inheritance.html new file mode 100644 index 0000000000..2d7b094084 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inheritance.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Transforms properties</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#property-index"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> +<div id="target"></div> +</div> +<style> +#container { + width: 70px; + height: 90px; +} +#target { + width: 60px; + height: 40px; +} +</style> +<script> +assert_not_inherited('backface-visibility', 'visible', 'hidden'); +assert_not_inherited('perspective', 'none', '7px'); +assert_not_inherited('perspective-origin', '30px 20px', '8px 9px'); // '50% 50%' is '30px 20px' +assert_not_inherited('rotate', 'none', '90deg'); +assert_not_inherited('scale', 'none', '10 11 12'); +assert_not_inherited('transform', 'none', 'matrix(2, 0, 0, 3, 1, 4)'); +assert_not_inherited('transform-box', 'view-box', 'fill-box'); +assert_not_inherited('transform-origin', '30px 20px', '5px 6px'); // '50% 50%' is '30px 20px' +assert_not_inherited('transform-style', 'flat', 'preserve-3d'); +assert_not_inherited('translate', 'none', '13px 14px 15px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/reference/svg-inline-styles-ref.html b/testing/web-platform/tests/css/css-transforms/inline-styles/reference/svg-inline-styles-ref.html new file mode 100644 index 0000000000..3a95342030 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/reference/svg-inline-styles-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-001.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-001.html new file mode 100644 index 0000000000..c0afbe4cfe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Inline transform style on SVG element with presentation attribute style on the same element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Inline styles on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect y="-100" width="100" height="100" fill="url(#grad)" + style="transform: rotate(90deg)" transform="scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-002.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-002.html new file mode 100644 index 0000000000..5228afc5f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-002.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Inline transform style on SVG child element with presentation attribute styles on the parent and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Inline styles on SVG elements should override presentation attribute styles on the same element. Presentation attribute styles on its parent should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels, and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect width="100" height="100" fill="url(#grad)" + style="transform: translateY(-100px)" transform="scale(0.5)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-003.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-003.html new file mode 100644 index 0000000000..327ff1341e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Inline transform style on SVG group element and presentation attribute style on child element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Inline styles on SVG group elements should be pre-multipled on the child elements. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g style="transform: rotate(90deg)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-004.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-004.html new file mode 100644 index 0000000000..0a0dc027ba --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Inline transform style on SVG group element and presentation attribute style on group and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Inline styles on SVG group elements override presentation attribute styles on the same element. Presentation attribute styles on child elements should be post-multiplied. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g style="transform: rotate(90deg)" transform="scale(0.5)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-005.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-005.html new file mode 100644 index 0000000000..cbb3304eef --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-005.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute style of SVG element with invalid inline transform style</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid inline transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect y="-100" width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-006.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-006.html new file mode 100644 index 0000000000..2885cbc989 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-006.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Fall back to presentation attribute styles of SVG element with invalid inline transform style and presentation attribute style on group</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid inline transform styles on SVG elements should fall back to presentation attributes styles on the same element. The rect in the test should be rotated by 90 degrees clockwise and moved up 100 pixels."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-007.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-007.html new file mode 100644 index 0000000000..249e4285ce --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-007.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid inline transform style on SVG child element with valid presentation attribute style on group and invalid presentation attribute style on child</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the inline and presentation attribute styles on an element are invalid, no transform should be applied. However, valid presentation attribute styles on the group should still be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g transform="rotate(90)"> + <rect y="-100" width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="scale(invalid)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-008.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-008.html new file mode 100644 index 0000000000..767363004a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-008.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid inline and presentation attribute styles on an SVG element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the inline and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or flipped"> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="scale(invalid)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-009.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-009.html new file mode 100644 index 0000000000..16aaf36e3c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-009.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid inline transform style on SVG group with valid presentation attribute style on child element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid inline styles on group elements should not be applied, but valid presentation attribute styles on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g style="transform: scale(invalid)"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-010.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-010.html new file mode 100644 index 0000000000..f8d6ad35ae --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-010.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid inline transform style on SVG group with valid presentation attribute styles on group and child elements</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid inline transform styles on group elements should fall back to presentation attribute styles on the same element. Presentation attribute styles on the child should also be applied. The rect in the test should be rotated by 90 degrees clockwise, moved up 100 pixels and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g style="transform: scale(invalid)" transform="rotate(90)"> + <rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-011.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-011.html new file mode 100644 index 0000000000..0d45742e5c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-011.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: Invalid inline transform style and invalid presentation attribute style on SVG group and valid presentation attribute style on child</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the inline and presentation attribute styles on a group are invalid, no transform should be applied. However, the valid presentation attribute style on the child should be applied. The rect in the test should be rotated by 90 degrees clockwise and not scaled down or flipped."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <g style="transform: scale(invalid)" transform="scale(invalid)"> + <rect y="-100" width="100" height="100" fill="url(#grad)" transform="rotate(90)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-012.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-012.html new file mode 100644 index 0000000000..ceb25953e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-012.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Inline style of rotate with 3 arguments on SVG element with presentation attribute style on the same element</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Rotate with three arguments inline style on SVG elements should override presentation attribute styles on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions and not scaled."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect y="-60" width="100" height="100" fill="url(#grad)" + style="transform: translate(20px, 20px) rotate(90deg) translate(-20px, -20px)" + transform="scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-013.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-013.html new file mode 100644 index 0000000000..100f90e516 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-013.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Fall back to presentation attribute style of rotate with three arguments of SVG element with invalid inline style</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Invalid inline styles on SVG elements should fall back to presentation attributes style of rotate with three arguments on the same element. The rect in the test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions."> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="yellow"/> + <stop offset="50%" stop-color="green"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect y="-60" width="100" height="100" fill="url(#grad)" + style="transform: scale(invalid)" transform="rotate(90,20,20)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-014.html b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-014.html new file mode 100644 index 0000000000..9d17363d1e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-styles/svg-inline-styles-014.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Invalid inline and presentation attribute styles on an SVG element using rotate with three arguments</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-specificity"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-inline-styles-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="When both the inline and presentation attribute styles are invalid, no transform should be applied. The rect in the test should not be scaled down or rotated"> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical green stripe to the left of a yellow vertical stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="green"/> + <stop offset="50%" stop-color="yellow"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="rotate(90,invalid,invalid)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/inline-with-filter-and-hidden-backface.html b/testing/web-platform/tests/css/css-transforms/inline-with-filter-and-hidden-backface.html new file mode 100644 index 0000000000..dda788537c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/inline-with-filter-and-hidden-backface.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1321302"> +<span id="elm" style="filter:blur(1px); backface-visibility:hidden;">x</span> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(elm, document.elementFromPoint(10, 10)); + }, "Hit test"); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/large-matrix-crash.html b/testing/web-platform/tests/css/css-transforms/large-matrix-crash.html new file mode 100644 index 0000000000..5e8ba9ff79 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/large-matrix-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Very large values in matrix3d()</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<style> +html, body, div { + transform: matrix3d(1, 1, 1, 1, 72770296304691886506301192829784762776379253934637144527855766046737093, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1); +} +</style> +<div>This should not crash.</div> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html new file mode 100644 index 0000000000..1989c044ca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="100" y="50" width="40" height="40" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html new file mode 100644 index 0000000000..fa16f97b3b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <rect x="0" y="0" width="50" height="50" fill="green"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-001.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-001.html new file mode 100644 index 0000000000..2e17c1ed78 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up horizontally only: 2 0 0 1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="0" y="0" width="25" height="50" fill="green"/> + <rect x="25" y="0" width="25" height="50" fill="fuchsia"/> + <rect x="0" y="50" width="25" height="50" fill="yellow"/> + <rect x="25" y="50" width="25" height="50" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(2 0 0 1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-002.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-002.html new file mode 100644 index 0000000000..4f1926580e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-002.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down horizontally only: 0.5 0 0 1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="0" y="0" width="100" height="50" fill="green"/> + <rect x="100" y="0" width="100" height="50" fill="fuchsia"/> + <rect x="0" y="50" width="100" height="50" fill="yellow"/> + <rect x="100" y="50" width="100" height="50" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-003.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-003.html new file mode 100644 index 0000000000..35639bc8fc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-003.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up vertically only: 1 0 0 2 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="0" y="0" width="50" height="25" fill="green"/> + <rect x="50" y="0" width="50" height="25" fill="fuchsia"/> + <rect x="0" y="25" width="50" height="25" fill="yellow"/> + <rect x="50" y="25" width="50" height="25" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(1 0 0 2 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-004.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-004.html new file mode 100644 index 0000000000..e2f7b2667b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down vertically only: 1 0 0 0.5 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="0" y="0" width="50" height="100" fill="green"/> + <rect x="50" y="0" width="50" height="100" fill="fuchsia"/> + <rect x="0" y="100" width="50" height="100" fill="yellow"/> + <rect x="50" y="100" width="50" height="100" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 0 0.5 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-005.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-005.html new file mode 100644 index 0000000000..4fb8ccbe89 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping left and scaling up horizontally: -2 0 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally."> + <style type="text/css"> + svg { + width: 600px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="0" y="0" width="25" height="50" fill="fuchsia"/> + <rect x="25" y="0" width="25" height="50" fill="green"/> + <rect x="0" y="50" width="25" height="50" fill="blue"/> + <rect x="25" y="50" width="25" height="50" fill="yellow"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 1 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-006.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-006.html new file mode 100644 index 0000000000..a0cb233fa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-006.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping left and scaling down horizontally: -0.5 0 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="0" y="0" width="100" height="50" fill="fuchsia"/> + <rect x="100" y="0" width="100" height="50" fill="green"/> + <rect x="0" y="50" width="100" height="50" fill="blue"/> + <rect x="100" y="50" width="100" height="50" fill="yellow"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 1 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-007.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-007.html new file mode 100644 index 0000000000..61c2dc6e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-007.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling up vertically: 1 0 0 -2 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="0" y="0" width="50" height="25" fill="yellow"/> + <rect x="50" y="0" width="50" height="25" fill="blue"/> + <rect x="0" y="25" width="50" height="25" fill="green"/> + <rect x="50" y="25" width="50" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(1 0 0 -2 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-008.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-008.html new file mode 100644 index 0000000000..57fc8003d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-008.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling down vertically: 1 0 0 -0.5 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="0" y="0" width="50" height="100" fill="yellow"/> + <rect x="50" y="0" width="50" height="100" fill="blue"/> + <rect x="0" y="100" width="50" height="100" fill="green"/> + <rect x="50" y="100" width="50" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 0 -0.5 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-009.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-009.html new file mode 100644 index 0000000000..cee19cb723 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-009.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 0.2e1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="0" y="0" width="25" height="25" fill="green"/> + <rect x="25" y="0" width="25" height="25" fill="fuchsia"/> + <rect x="0" y="25" width="25" height="25" fill="yellow"/> + <rect x="25" y="25" width="25" height="25" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(0.2e1 0 0 0.2e1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-010.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-010.html new file mode 100644 index 0000000000..c52eef236b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-010.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 -0.2e1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="0" y="0" width="25" height="25" fill="blue"/> + <rect x="25" y="0" width="25" height="25" fill="yellow"/> + <rect x="0" y="25" width="25" height="25" fill="fuchsia"/> + <rect x="25" y="25" width="25" height="25" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(-0.2e1 0 0 -0.2e1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-011.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-011.html new file mode 100644 index 0000000000..bb9a528752 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-011.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down horizontally and vertically in scientific numbers with negative exponents: 5e-1 0 0 5e-1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="fuchsia"/> + <rect x="0" y="100" width="100" height="100" fill="yellow"/> + <rect x="100" y="100" width="100" height="100" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(5e-1 0 0 5e-1 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-012.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-012.html new file mode 100644 index 0000000000..ba7331eb6a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-012.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling down horizontally and vertically with scientific numbers with negative exponents: -5e-1 0 0 -5e-1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-5e-1 0 0 -5e-1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-013.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-013.html new file mode 100644 index 0000000000..a977822286 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-013.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling up horizontally and down vertically: 2 0 0 0.5 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="0" y="0" width="25" height="100" fill="green"/> + <rect x="25" y="0" width="25" height="100" fill="fuchsia"/> + <rect x="0" y="100" width="25" height="100" fill="yellow"/> + <rect x="25" y="100" width="25" height="100" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(2 0 0 0.5 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-014.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-014.html new file mode 100644 index 0000000000..46633c1d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-014.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix scaling down horizontally and up vertically: 0.5 0 0 2 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="0" y="0" width="100" height="25" fill="green"/> + <rect x="100" y="0" width="100" height="25" fill="fuchsia"/> + <rect x="0" y="25" width="100" height="25" fill="yellow"/> + <rect x="100" y="25" width="100" height="25" fill="blue"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 2 0 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-015.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-015.html new file mode 100644 index 0000000000..e6ea9a0792 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-015.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling up horizontally and down vertically: -2 0 0 -0.5 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="0" y="0" width="25" height="100" fill="blue"/> + <rect x="25" y="0" width="25" height="100" fill="yellow"/> + <rect x="0" y="100" width="25" height="100" fill="fuchsia"/> + <rect x="25" y="100" width="25" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-016.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-016.html new file mode 100644 index 0000000000..980c9feb2b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-016.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and left and scaling down horizontally and up vertically: -0.5 0 0 -2 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="0" y="0" width="100" height="25" fill="blue"/> + <rect x="100" y="0" width="100" height="25" fill="yellow"/> + <rect x="0" y="25" width="100" height="25" fill="fuchsia"/> + <rect x="100" y="25" width="100" height="25" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 -2 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-017.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-017.html new file mode 100644 index 0000000000..2aa3df21b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-017.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling up horizontally and vertically: 2 0 0 -2 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="0" y="0" width="25" height="25" fill="yellow"/> + <rect x="25" y="0" width="25" height="25" fill="blue"/> + <rect x="0" y="25" width="25" height="25" fill="green"/> + <rect x="25" y="25" width="25" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(2 0 0 -2 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-018.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-018.html new file mode 100644 index 0000000000..ae9a910db0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-018.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping up and scaling down horizontally and vertically: 0.5 0 0 -0.5 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="yellow"/> + <rect x="100" y="0" width="100" height="100" fill="blue"/> + <rect x="0" y="100" width="100" height="100" fill="green"/> + <rect x="100" y="100" width="100" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 -0.5 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-019.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-019.html new file mode 100644 index 0000000000..78936949bc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-019.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix flipping left and scaling down horizontally and vertically: -0.5 0 0 0.5 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="green"/> + <rect x="0" y="0" width="100" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 0.5 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-020.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-020.html new file mode 100644 index 0000000000..deea3527a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-020.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling up horizontally and down vertically: 2 0 0 -0.5 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="0" y="0" width="25" height="100" fill="yellow"/> + <rect x="25" y="0" width="25" height="100" fill="blue"/> + <rect x="0" y="100" width="25" height="100" fill="green"/> + <rect x="25" y="100" width="25" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(2 0 0 -0.5 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-021.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-021.html new file mode 100644 index 0000000000..7c2d27cb00 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-021.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling up horizontally and down vertically: -2 0 0 0.5 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally and down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="200"> + <rect x="25" y="100" width="25" height="100" fill="yellow"/> + <rect x="0" y="100" width="25" height="100" fill="blue"/> + <rect x="25" y="0" width="25" height="100" fill="green"/> + <rect x="0" y="0" width="25" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="200" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 0.5 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-022.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-022.html new file mode 100644 index 0000000000..bd50757793 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-022.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling down horizontally and up vertically: 0.5 0 0 -2 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="0" y="0" width="100" height="25" fill="yellow"/> + <rect x="100" y="0" width="100" height="25" fill="blue"/> + <rect x="0" y="25" width="100" height="25" fill="green"/> + <rect x="100" y="25" width="100" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 -2 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-023.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-023.html new file mode 100644 index 0000000000..e45d17c058 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-023.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling down horizontally and up vertically: -0.5 0 0 2 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled down horizontally and up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="50"> + <rect x="100" y="25" width="100" height="25" fill="yellow"/> + <rect x="0" y="25" width="100" height="25" fill="blue"/> + <rect x="100" y="0" width="100" height="25" fill="green"/> + <rect x="0" y="0" width="100" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="50" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 2 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-024.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-024.html new file mode 100644 index 0000000000..73b4212df0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-024.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling up horizontally and vertically: -2 0 0 2 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and scaled up horizontally and vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50"> + <rect x="25" y="25" width="25" height="25" fill="yellow"/> + <rect x="0" y="25" width="25" height="25" fill="blue"/> + <rect x="25" y="0" width="25" height="25" fill="green"/> + <rect x="0" y="0" width="25" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="50" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 2 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-025.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-025.html new file mode 100644 index 0000000000..c1bf20b9c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-025.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left: -1 0 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="yellow"/> + <rect x="0" y="50" width="50" height="50" fill="blue"/> + <rect x="50" y="0" width="50" height="50" fill="green"/> + <rect x="0" y="0" width="50" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 1 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-026.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-026.html new file mode 100644 index 0000000000..8f8513130a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-026.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up: 1 0 0 0 -1 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="0" y="0" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="green"/> + <rect x="50" y="50" width="50" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(1 0 0 -1 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-027.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-027.html new file mode 100644 index 0000000000..7d4d9ef995 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-027.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and up: -1 0 0 0 -1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and up."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="0" width="50" height="50" fill="yellow"/> + <rect x="0" y="0" width="50" height="50" fill="blue"/> + <rect x="50" y="50" width="50" height="50" fill="green"/> + <rect x="0" y="50" width="50" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 -1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-028.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-028.html new file mode 100644 index 0000000000..4be4c927d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-028.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling up horizontally: 2 0 0 -1 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="0" y="0" width="25" height="50" fill="yellow"/> + <rect x="25" y="0" width="25" height="50" fill="blue"/> + <rect x="0" y="50" width="25" height="50" fill="green"/> + <rect x="25" y="50" width="25" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(2 0 0 -1 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-029.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-029.html new file mode 100644 index 0000000000..eb6d763b71 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-029.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left and scaling up horizontally with scientific numbers: -2 0 0 -1 10e1 10e1</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="100"> + <rect x="25" y="0" width="25" height="50" fill="yellow"/> + <rect x="0" y="0" width="25" height="50" fill="blue"/> + <rect x="25" y="50" width="25" height="50" fill="green"/> + <rect x="0" y="50" width="25" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="50" height="100" fill="url(#coloredBoxes)" transform="matrix(-2 0 0 -1 10e1 10e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-030.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-030.html new file mode 100644 index 0000000000..ca8f1c4bb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-030.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and scaling down horizontally: 0.5 0 0 -1 0 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and scaled down horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="0" y="0" width="100" height="50" fill="yellow"/> + <rect x="100" y="0" width="100" height="50" fill="blue"/> + <rect x="0" y="50" width="100" height="50" fill="green"/> + <rect x="100" y="50" width="100" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 -1 0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-031.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-031.html new file mode 100644 index 0000000000..1a3313ccc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-031.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left and scaling down horizontally: -0.5 0 0 -1 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled down horizontally."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="100"> + <rect x="100" y="0" width="100" height="50" fill="yellow"/> + <rect x="0" y="0" width="100" height="50" fill="blue"/> + <rect x="100" y="50" width="100" height="50" fill="green"/> + <rect x="0" y="50" width="100" height="50" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="100" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 -1 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-032.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-032.html new file mode 100644 index 0000000000..5c3701eb56 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-032.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling up vertically: -1 0 0 2 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="50" y="25" width="50" height="25" fill="yellow"/> + <rect x="0" y="25" width="50" height="25" fill="blue"/> + <rect x="50" y="0" width="50" height="25" fill="green"/> + <rect x="0" y="0" width="50" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 2 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-033.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-033.html new file mode 100644 index 0000000000..9c4649c6ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-033.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left and scaling up vertically with scientific numbers with negative exponents: -1 0 0 -2 1000e-1 1000e-1</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left scaled up vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="50"> + <rect x="50" y="0" width="50" height="25" fill="yellow"/> + <rect x="0" y="0" width="50" height="25" fill="blue"/> + <rect x="50" y="25" width="50" height="25" fill="green"/> + <rect x="0" y="25" width="50" height="25" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="50" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 -2 1000e-1 1000e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-034.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-034.html new file mode 100644 index 0000000000..1a20217e77 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-034.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and scaling down vertically: -1 0 0 0.5 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="50" y="100" width="50" height="100" fill="yellow"/> + <rect x="0" y="100" width="50" height="100" fill="blue"/> + <rect x="50" y="0" width="50" height="100" fill="green"/> + <rect x="0" y="0" width="50" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 0.5 100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-035.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-035.html new file mode 100644 index 0000000000..a5c98f170c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-035.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left and up and scaling down vertically: -1 0 0 -0.5 100 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped left and up scaled down vertically."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="200"> + <rect x="50" y="0" width="50" height="100" fill="yellow"/> + <rect x="0" y="0" width="50" height="100" fill="blue"/> + <rect x="50" y="100" width="50" height="100" fill="green"/> + <rect x="0" y="100" width="50" height="100" fill="fuchsia"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="200" fill="url(#coloredBoxes)" transform="matrix(-1 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-036.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-036.html new file mode 100644 index 0000000000..1b9e295e99 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-036.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing right: 1 0 1 1 0 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should skewed right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 1 1 0 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-037.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-037.html new file mode 100644 index 0000000000..bbd0b5be95 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-037.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing down: 1 1 0 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should skewed down horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 1 0 1 100 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-038.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-038.html new file mode 100644 index 0000000000..bac73d63df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-038.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing left: 1 0 -1 100 50</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed left horinzontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0 -1 1 100 50)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-039.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-039.html new file mode 100644 index 0000000000..ed3ea7aa12 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-039.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing up: 1 -1 0 1 50 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed up vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 -1 0 1 50 100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-040.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-040.html new file mode 100644 index 0000000000..a8b446f343 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-040.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing up and left with scientific numbers: 1 -0.05e1 -0.05e1 1 100 50</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be skewed up vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 -0.05e1 -0.05e1 1 100 50)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-041.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-041.html new file mode 100644 index 0000000000..9e08b96762 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-041.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing down and right with scientific numbers: 1 0.05e1 0.05e1 1 50 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers. The rect in the test should be skewed down vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0.05e1 0.05e1 1 50 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-042.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-042.html new file mode 100644 index 0000000000..dad9be8cf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-042.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing down and left: 1 -0.5 0.5 1 50 50</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed down vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 -0.5 0.5 1 50 50)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-043.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-043.html new file mode 100644 index 0000000000..ba22980e26 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-043.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and skewing up and right: 1 0.5 -0.5 1 100 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be skewed up vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="100" width="100" height="100" fill="red"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + <rect x="100" y="0" width="100" height="100" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(1 0.5 -0.5 1 100 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-044.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-044.html new file mode 100644 index 0000000000..6439e3716c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-044.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and scaling up and skewing down and right: 2 0.5 0.5 2 50 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled up vertically and horizontally and skewed down vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + <rect x="50" y="0" width="50" height="50" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(2 0.5 0.5 2 50 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-045.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-045.html new file mode 100644 index 0000000000..3e3ffb4e7f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-045.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and scaling down and skewing up and left: 0.75 -0.5 -0.5 0.75 190 150</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be scaled down vertically and horizontally and skewed up vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> + <rect x="200" y="200" width="200" height="200" fill="red"/> + <rect x="0" y="200" width="200" height="200" fill="red"/> + <rect x="0" y="0" width="200" height="200" fill="green"/> + <rect x="200" y="0" width="200" height="200" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect x="-450" y="-450" width="400" height="400" fill="url(#coloredBoxes)" transform="matrix(0.75 -0.5 -0.5 0.75 190 150)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-046.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-046.html new file mode 100644 index 0000000000..8f7a7f73f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-046.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping left, scaling up, and skewing down and right with scientific numbers with negative exponents: -2 5e-1 5e-1 2 250 0</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped left, scaled up, and skewed down vertically and right horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="50" width="50" height="50" fill="red"/> + <rect x="0" y="0" width="50" height="50" fill="red"/> + <rect x="50" y="0" width="50" height="50" fill="green"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(-2 5e-1 5e-1 2 250 0)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-047.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-047.html new file mode 100644 index 0000000000..6fc2a2639c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-047.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up, scaling down, and skewing up and left with scientific numbers with negative exponents: 0.5 -5e-1 0 -5e-1 250 100</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped down, scaled down, and skewed up vertically and left horizontally."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> + <rect x="200" y="200" width="200" height="200" fill="red"/> + <rect x="0" y="200" width="200" height="200" fill="green"/> + <rect x="0" y="0" width="200" height="200" fill="red"/> + <rect x="200" y="0" width="200" height="200" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect x="-450" width="400" height="400" fill="url(#coloredBoxes)" transform="matrix(0.5 -5e-1 0 -5e-1 250 100)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-048.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-048.html new file mode 100644 index 0000000000..580716a0e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-048.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix and flipping up and left, scaling up horizontally and down vertically, and skewing right and down: -2 0.25 0.25 -0.5 200 200</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-clipped-rect-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left, scaled up horizontally and down vertically, and skewed right and down."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="400"> + <rect x="50" y="200" width="50" height="200" fill="green"/> + <rect x="0" y="200" width="50" height="200" fill="red"/> + <rect x="0" y="0" width="50" height="200" fill="red"/> + <rect x="50" y="0" width="50" height="200" fill="red"/> + </pattern> + <!-- Clip a rect to avoid antialiasing issues and to isolate the green portion of the pattern--> + <clipPath id="clip"> + <rect x="100" y="50" width="40" height="40"/> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <rect width="100" height="400" fill="url(#coloredBoxes)" transform="matrix(-2 0.25 0.25 -0.5 200 200)"/> + </g> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-049.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-049.html new file mode 100644 index 0000000000..9cc5928fa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-049.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas and no spaces</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5,0,0,-0.5,100,100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-050.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-050.html new file mode 100644 index 0000000000..2051fa8f05 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-050.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with spaces before the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 ,0 ,0 ,-0.5 ,100 ,100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-051.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-051.html new file mode 100644 index 0000000000..edbd3b4448 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-051.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with spaces after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5, 0, 0, -0.5, 100, 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-052.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-052.html new file mode 100644 index 0000000000..52191979d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-052.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with spaces before and after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 , 0 , 0 , -0.5 , 100 , 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-053.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-053.html new file mode 100644 index 0000000000..56d4ac4a8d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-053.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with multiple spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 ,0 ,0 ,-0.5 ,100 ,100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-054.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-054.html new file mode 100644 index 0000000000..0e4f1f4665 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-054.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with multiple spaces after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with multiple spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5, 0, 0, -0.5, 100, 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-055.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-055.html new file mode 100644 index 0000000000..6a8cdf1f7a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-055.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before and after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by commas with multiple spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 , 0 , 0 , -0.5 , 100 , 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-056.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-056.html new file mode 100644 index 0000000000..a5177e02b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-056.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by multiple spaces</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by multiple spaces. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-057.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-057.html new file mode 100644 index 0000000000..55dc3499b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-057.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function arguments separated by a mix of spaces and commas</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function must support arguments separated by a mix of spaces and commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <rect x="0" y="0" width="100" height="100" fill="blue"/> + <rect x="100" y="0" width="100" height="100" fill="yellow"/> + <rect x="0" y="100" width="100" height="100" fill="fuchsia"/> + <rect x="100" y="100" width="100" height="100" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="200" height="200" fill="url(#coloredBoxes)" transform="matrix(-0.5,0 ,0, -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-058.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-058.html new file mode 100644 index 0000000000..4465b83b64 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-058.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'a' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage values. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(50% 0 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-059.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-059.html new file mode 100644 index 0000000000..e292d6be83 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-059.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'b' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support degree units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 45deg 0 -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-060.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-060.html new file mode 100644 index 0000000000..434e325469 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-060.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'c' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support gradian units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 50grad -0.5 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-061.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-061.html new file mode 100644 index 0000000000..0c27b67506 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-061.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'd' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 50% 100 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-062.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-062.html new file mode 100644 index 0000000000..f628426554 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-062.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'e' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support px units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 0.5 100px 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-063.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-063.html new file mode 100644 index 0000000000..da21e0a8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-063.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'f' value</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support pt units. If one argument is invalid, no transform should take place so the rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0 0.5 100 100pt)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-064.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-064.html new file mode 100644 index 0000000000..116acf9bea --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-064.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'a' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage values. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(50% 0 0 -0.5 100 100) translate(100 0)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-065.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-065.html new file mode 100644 index 0000000000..b372f4b9dd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-065.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'b' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support radian units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 45rad 0 -0.5 100 100) translate(0 100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-066.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-066.html new file mode 100644 index 0000000000..175ee37f63 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-066.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'c' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support turn units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.125turn -0.5 100 100) translate(100)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-067.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-067.html new file mode 100644 index 0000000000..60422fb5c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-067.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'd' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support percentage units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 50% 100 100) scale(0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-068.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-068.html new file mode 100644 index 0000000000..7232ebe44d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-068.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'e' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support pc units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100pc 100) scale(0.5 1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-069.html b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-069.html new file mode 100644 index 0000000000..bf50033693 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/matrix/svg-matrix-069.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and matrix function with invalid 'f' value with another transform function</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <link rel="match" href="reference/svg-matrix-four-color-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The matrix function does not support mm units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if you see a four color square where the top left is green, the top right is fuchsia, the bottom left is yellow, and the bottom right is blue. You should see no red.</p> + <svg> + <defs> + <pattern id="coloredBoxes" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100"> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + <rect x="0" y="50" width="50" height="50" fill="yellow"/> + <rect x="50" y="0" width="50" height="50" fill="fuchsia"/> + <rect x="0" y="0" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100 100mm) scale(1 0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/paint-order-with-transform-change-ref.html b/testing/web-platform/tests/css/css-transforms/paint-order-with-transform-change-ref.html new file mode 100644 index 0000000000..fcead1ea77 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/paint-order-with-transform-change-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: green;"></div> diff --git a/testing/web-platform/tests/css/css-transforms/paint-order-with-transform-change.html b/testing/web-platform/tests/css/css-transforms/paint-order-with-transform-change.html new file mode 100644 index 0000000000..c3f280d880 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/paint-order-with-transform-change.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>Changes to transform should not affect paint order</title> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<link rel="help" href="https://crbug.com/1267689"> +<link rel="match" href="paint-order-with-transform-change-ref.html"> +<style> + #bottom { + will-change: transform; + position: absolute; + top: 0; + left: 100px; + width: 100px; + height: 100px; + background: red; + } + #top { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background: green; + } +</style> +<div id="bottom"></div> +<div id="top"></div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + bottom.style.transform = 'translate(-100px, 0px)'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-computed.html new file mode 100644 index 0000000000..470424f8d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: getComputedStyle().backfaceVisibility</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> +<meta name="assert" content="backface-visibility computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("backface-visibility", "visible"); +test_computed_value("backface-visibility", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-invalid.html new file mode 100644 index 0000000000..c6c563124a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing backface-visibility with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> +<meta name="assert" content="backface-visibility supports only the grammar 'visible | hidden'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("backface-visibility", "auto"); +test_invalid_value("backface-visibility", "visible hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-valid.html new file mode 100644 index 0000000000..eb7431078c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/backface-visibility-valid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing backface-visibility with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> +<meta name="assert" content="backface-visibility supports the full grammar 'visible | hidden'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("backface-visibility", "visible"); +test_valid_value("backface-visibility", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-computed.html new file mode 100644 index 0000000000..effeb2974e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-computed.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: getComputedStyle().perspectiveOrigin</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> +<meta name="assert" content="perspective-origin computed value is a pair of absolute lengths"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + width: 200px; + height: 300px; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("perspective-origin", "10%", "20px 150px"); +test_computed_value("perspective-origin", "10% center", "20px 150px"); +test_computed_value("perspective-origin", "20% 30px", "40px 30px"); +test_computed_value("perspective-origin", "30px center", "30px 150px"); +test_computed_value("perspective-origin", "40px top", "40px 0px"); +test_computed_value("perspective-origin", "bottom 10% right 20%", "160px 270px"); +test_computed_value("perspective-origin", "bottom right", "200px 300px"); +test_computed_value("perspective-origin", "center", "100px 150px"); +test_computed_value("perspective-origin", "center 50px", "100px 50px"); +test_computed_value("perspective-origin", "center bottom", "100px 300px"); +test_computed_value("perspective-origin", "center center", "100px 150px"); +test_computed_value("perspective-origin", "center left", "0px 150px"); +test_computed_value("perspective-origin", "left", "0px 150px"); +test_computed_value("perspective-origin", "left 10px", "0px 10px"); +test_computed_value("perspective-origin", "left bottom", "0px 300px"); +test_computed_value("perspective-origin", "left center", "0px 150px"); +test_computed_value("perspective-origin", "right 40%", "200px 120px"); +test_computed_value("perspective-origin", "right 30% top -60px", "140px -60px"); +test_computed_value("perspective-origin", "top", "100px 0px"); +test_computed_value("perspective-origin", "right 20px bottom 30px", "180px 270px"); + +test_computed_value("perspective-origin", "right calc(10px - 0.5em) top calc(10px - 0.5em)", "210px -10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-invalid.html new file mode 100644 index 0000000000..f4f01a3399 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-invalid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing perspective-origin with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> +<meta name="assert" content="perspective-origin supports only the '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("perspective-origin", "auto"); +test_invalid_value("perspective-origin", "1px 2px 3px"); +test_invalid_value("perspective-origin", "left right"); +test_invalid_value("perspective-origin", "bottom 10% top 20%"); + +// The following were supported in an earlier version of the spec. +// https://github.com/w3c/csswg-drafts/issues/2140 +test_invalid_value("perspective-origin", "center left 1px"); +test_invalid_value("perspective-origin", "center top 2px"); +test_invalid_value("perspective-origin", "right 3% center"); +test_invalid_value("perspective-origin", "left 4px top"); +test_invalid_value("perspective-origin", "right top 5px"); +test_invalid_value("perspective-origin", "bottom 6% center"); +test_invalid_value("perspective-origin", "bottom 7% left"); +test_invalid_value("perspective-origin", "bottom right 8%"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-valid.html new file mode 100644 index 0000000000..7653d7eceb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/perspective-origin-valid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing perspective-origin with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-origin-property"> +<meta name="assert" content="perspective-origin supports the full '<position>' grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Blink and WebKit append center. Edge and Firefox append 50% +test_valid_value("perspective-origin", "10%", ["10% center", "10% 50%"]); +test_valid_value("perspective-origin", "20% 30px"); +test_valid_value("perspective-origin", "30px center"); +test_valid_value("perspective-origin", "40px top"); +test_valid_value("perspective-origin", "bottom 10% right 20%", "right 20% bottom 10%"); +test_valid_value("perspective-origin", "bottom right", "right bottom"); +test_valid_value("perspective-origin", "center", ["center center", "center 50%"]); +test_valid_value("perspective-origin", "center 50px"); +test_valid_value("perspective-origin", "center bottom"); +test_valid_value("perspective-origin", "center center"); +test_valid_value("perspective-origin", "center left", "left center"); +test_valid_value("perspective-origin", "left", ["left center", "left 50%"]); +test_valid_value("perspective-origin", "left bottom"); +test_valid_value("perspective-origin", "left center"); +test_valid_value("perspective-origin", "right 40%"); +test_valid_value("perspective-origin", "right 30% top 60px"); +test_valid_value("perspective-origin", "top", ["center top", "50% top"]); +test_valid_value("perspective-origin", "top center", "center top"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-computed.html new file mode 100644 index 0000000000..ae1cade666 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-computed.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: rotate computed values.</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +// https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization + +// Serialize as the keyword none if and only if none was originally specified. +test_computed_value("rotate", "none"); + +// If a 2d rotation is specified, the property must serialize as just an <angle>. +test_computed_value("rotate", "0deg"); + +// If a 3d rotation is specified, the property must serialize with an axis specified. +test_computed_value("rotate", "100 200 300 400grad", "100 200 300 360deg"); +test_computed_value("rotate", "400grad 100 200 300", "100 200 300 360deg"); +test_computed_value("rotate", "0 0 0 400grad", "0 0 0 360deg"); + +// If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword. +test_computed_value("rotate", "x 400grad", "x 360deg"); +test_computed_value("rotate", "400grad x", "x 360deg"); +test_computed_value("rotate", "0.5 0 0 400grad", "x 360deg"); +test_computed_value("rotate", "1 0 0 400grad", "x 360deg"); + +test_computed_value("rotate", "y 400grad", "y 360deg"); +test_computed_value("rotate", "400grad y", "y 360deg"); +test_computed_value("rotate", "0 0.5 0 400grad", "y 360deg"); +test_computed_value("rotate", "0 1 0 400grad", "y 360deg"); + +// If the axis is parallel with the z axis the property must serialize as just an <angle>. +test_computed_value("rotate", "400grad", "360deg"); +test_computed_value("rotate", "400grad z", "360deg"); +test_computed_value("rotate", "0 0 0.5 400grad", "360deg"); +test_computed_value("rotate", "0 0 1 400grad", "360deg"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-invalid.html new file mode 100644 index 0000000000..4b6d7cf2ad --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing rotate with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> +<meta name="assert" content="rotate supports only the grammar 'none | <number>{3}? <angle>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("rotate", "100px"); + +test_invalid_value("rotate", "100 400deg"); +test_invalid_value("rotate", "100 200 400deg"); +test_invalid_value("rotate", "100 200 300 500 400deg"); + +test_invalid_value("rotate", "x y 45deg"); +test_invalid_value("rotate", "45deg x y"); +test_invalid_value("rotate", "z"); +test_invalid_value("rotate", "1 2"); +test_invalid_value("rotate", "1 2 3"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html new file mode 100644 index 0000000000..82544b094f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/rotate-parsing-valid.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing rotate with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate"> +<meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization + +// Serialize as the keyword none if and only if none was originally specified. +test_valid_value("rotate", "none"); + +// If a 2d rotation is specified, the property must serialize as just an <angle>. +test_valid_value("rotate", "0deg"); + +// If a 3d rotation is specified, the property must serialize with an axis specified. +test_valid_value("rotate", "100 200 300 400grad"); +test_valid_value("rotate", "400grad 100 200 300", "100 200 300 400grad"); +test_valid_value("rotate", "0 0 0 400grad", "0 0 0 400grad"); + +// If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword. +test_valid_value("rotate", "x 400grad"); +test_valid_value("rotate", "400grad x", "x 400grad"); +test_valid_value("rotate", "0.5 0 0 400grad", "x 400grad"); +test_valid_value("rotate", "1 0 0 400grad", "x 400grad"); + +test_valid_value("rotate", "y 400grad"); +test_valid_value("rotate", "400grad y", "y 400grad"); +test_valid_value("rotate", "0 0.5 0 400grad", "y 400grad"); +test_valid_value("rotate", "0 1 0 400grad", "y 400grad"); + +// If the axis is parallel with the z axis the property must serialize as just an <angle>. +test_valid_value("rotate", "400grad"); +test_valid_value("rotate", "400grad z", "400grad"); +test_valid_value("rotate", "0 0 0.5 400grad", "400grad"); +test_valid_value("rotate", "0 0 1 400grad", "400grad"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-computed.html new file mode 100644 index 0000000000..e01550b396 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-computed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: scale computed values.</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<meta name="assert" content="scale supports the full grammar 'none | <number>{1,3}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("scale", "none"); + +test_computed_value("scale", "1"); +test_computed_value("scale", "1%", "0.01"); + +test_computed_value("scale", "100"); +test_computed_value("scale", "100%", "1"); +test_computed_value("scale", "100 100", "100"); +test_computed_value("scale", "100% 100%", "1"); +test_computed_value("scale", "100 100 1", "100"); +test_computed_value("scale", "100% 100% 1", "1"); + +test_computed_value("scale", "-100"); +test_computed_value("scale", "-100%", "-1"); +test_computed_value("scale", "-100 -100", "-100"); +test_computed_value("scale", "-100% -100%", "-1"); +test_computed_value("scale", "-100 -100 1", "-100"); +test_computed_value("scale", "-100% -100% 1", "-1"); + +test_computed_value("scale", "100 200"); +test_computed_value("scale", "100% 200%", "1 2"); +test_computed_value("scale", "100 200 1", "100 200"); +test_computed_value("scale", "100% 200% 1", "1 2"); +test_computed_value("scale", "100 200 300"); +test_computed_value("scale", "100 100 2", "100 100 2"); +test_computed_value("scale", "100% 200% 300%", "1 2 3"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-invalid.html new file mode 100644 index 0000000000..a36db1b5a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing scale with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> +<meta name="assert" content="scale supports only the grammar 'none | <number>{1,3}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("scale", "100px"); + +test_invalid_value("scale", "100 200 300 400"); + +test_invalid_value("scale", "1 junk"); +test_invalid_value("scale", "1 2 junk"); +test_invalid_value("scale", "1 2 3 junk"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html new file mode 100644 index 0000000000..ecdc5c038b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/scale-parsing-valid.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing scale with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> +<meta name="assert" content="scale supports the full grammar 'none | <number>{1,3}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("scale", "none"); + +test_valid_value("scale", "1"); +test_valid_value("scale", "1%", "0.01"); + +test_valid_value("scale", "100"); +test_valid_value("scale", "100%", "1"); +test_valid_value("scale", "100 100", "100"); +test_valid_value("scale", "100% 100%", "1"); +test_valid_value("scale", "100 100 1", "100"); +test_valid_value("scale", "100% 100% 1", "1"); + +test_valid_value("scale", "-100"); +test_valid_value("scale", "-100%", "-1"); +test_valid_value("scale", "-100 -100", "-100"); +test_valid_value("scale", "-100% -100%", "-1"); +test_valid_value("scale", "-100 -100 1", "-100"); +test_valid_value("scale", "-100% -100% 1", "-1"); + +test_valid_value("scale", "100 200"); +test_valid_value("scale", "100% 200%", "1 2"); +test_valid_value("scale", "100 200 1", "100 200"); +test_valid_value("scale", "100% 200% 1", "1 2"); +test_valid_value("scale", "100 200 300"); +test_valid_value("scale", "100 100 2", "100 100 2"); +test_valid_value("scale", "100% 200% 300%", "1 2 3"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-box-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-computed.html new file mode 100644 index 0000000000..d21beb2081 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-computed.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: getComputedStyle().transformBox</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box-property"> +<meta name="assert" content="Computed transform-box is the specified keyword."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<body> +<div id="target"></div> +<script> +test_computed_value("transform-box", "content-box"); +test_computed_value("transform-box", "border-box"); +test_computed_value("transform-box", "fill-box"); +test_computed_value("transform-box", "stroke-box"); +test_computed_value("transform-box", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-box-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-invalid.html new file mode 100644 index 0000000000..af07a7e406 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-box with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box-property"> +<meta name="assert" content="transform-box supports only the grammar 'content-box | border-box | fill-box | stroke-box | view-box'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("transform-box", "margin-box"); +test_invalid_value("transform-box", "padding-box"); +test_invalid_value("transform-box", "fill-box view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-box-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-valid.html new file mode 100644 index 0000000000..df53d327ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-box-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-box with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box-property"> +<meta name="assert" content="transform-box supports the full grammar 'content-box | border-box | fill-box | stroke-box | view-box'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("transform-box", "content-box"); +test_valid_value("transform-box", "border-box"); +test_valid_value("transform-box", "fill-box"); +test_valid_value("transform-box", "stroke-box"); +test_valid_value("transform-box", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-computed.html new file mode 100644 index 0000000000..8759fd28be --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: getComputedStyle().transform</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-the-computed-value"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + width: 200px; + height: 300px; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("transform", "perspective(none)", "matrix(1, 0, 0, 1, 0, 0)"); +test_computed_value("transform", "perspective(10px)", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.1, 0, 0, 0, 1)"); + +// FIXME: This needs more tests to cover all the other transform functions. +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html new file mode 100644 index 0000000000..8985720622 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-invalid.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing transform with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-property"> +<meta name="assert" content="transform supports only the grammar 'none | <transform-list>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("transform", "none scale(2)"); +test_invalid_value("transform", "translateX(3%) none"); + +test_invalid_value("transform", "matrix(1, 2)"); + +test_invalid_value("transform", "translate(1px, 2px, 3px)"); + +test_invalid_value("transform", "translateX(-4px, 5px)"); + +test_invalid_value("transform", "translateY(4%, 5%)"); + +test_invalid_value("transform", "scale(6, 7, 8)"); +test_invalid_value("transform", "scale(6%, 7%, 8%)"); + +test_invalid_value("transform", "scaleX(1, 2)"); +test_invalid_value("transform", "scaleX(1%, 2%)"); + +test_invalid_value("transform", "scaleY(3, 4)"); +test_invalid_value("transform", "scaleY(3%, 4%)"); + +test_invalid_value("transform", "rotate(0, 0)"); +test_invalid_value("transform", "rotate(0, 0, 0)"); +test_invalid_value("transform", "rotate(0, 0, 0, 0)"); + +test_invalid_value("transform", "skew(0, 0, 0)"); + +test_invalid_value("transform", "skewX(0, 0)"); + +test_invalid_value("transform", "skewY(0, 0)"); + +test_invalid_value("transform", "scaleX(2), scaleY(3)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-computed.html new file mode 100644 index 0000000000..b8648b8a11 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-computed.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: getComputedStyle().transformOrigin</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<meta name="assert" content="transform-origin computed value is two or three absolute lengths"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + width: 200px; + height: 300px; + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("transform-origin", "10%", "20px 150px"); +test_computed_value("transform-origin", "10% center", "20px 150px"); +test_computed_value("transform-origin", "20% 30px", "40px 30px"); +test_computed_value("transform-origin", "30px center", "30px 150px"); +test_computed_value("transform-origin", "40px top", "40px 0px"); +test_computed_value("transform-origin", "bottom right", "200px 300px"); +test_computed_value("transform-origin", "center", "100px 150px"); +test_computed_value("transform-origin", "center 50px", "100px 50px"); +test_computed_value("transform-origin", "center bottom", "100px 300px"); +test_computed_value("transform-origin", "center center", "100px 150px"); +test_computed_value("transform-origin", "center left", "0px 150px"); +test_computed_value("transform-origin", "left", "0px 150px"); +test_computed_value("transform-origin", "left 10px", "0px 10px"); +test_computed_value("transform-origin", "left bottom", "0px 300px"); +test_computed_value("transform-origin", "left center", "0px 150px"); +test_computed_value("transform-origin", "right 40%", "200px 120px"); +test_computed_value("transform-origin", "top", "100px 0px"); + +test_computed_value("transform-origin", "-1px bottom 5px", "-1px 300px 5px"); +test_computed_value("transform-origin", "left center 6px", "0px 150px 6px"); +test_computed_value("transform-origin", "center top", "100px 0px"); +test_computed_value("transform-origin", "right bottom 7px", "200px 300px 7px"); +test_computed_value("transform-origin", "-1px -2px -3px"); + +test_computed_value("transform-origin", "calc(-100% + 10px - 0.5em) calc(10px - 0.5em) calc(10px - 0.5em)", "-210px -10px -10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-invalid.html new file mode 100644 index 0000000000..5533be4e22 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-origin with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<meta name="assert" content="transform-origin supports only the grammar from spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("transform-origin", "1px 2px 3%"); +test_invalid_value("transform-origin", "1px 2px left"); +test_invalid_value("transform-origin", "1px 2px 3px 4px"); +test_invalid_value("transform-origin", "1px left"); +test_invalid_value("transform-origin", "top 1px"); // Blink fails. +test_invalid_value("transform-origin", "right left"); +test_invalid_value("transform-origin", "top bottom"); + +test_invalid_value("transform-origin", "bottom 10% right 20%"); +test_invalid_value("transform-origin", "right 30% top -60px"); +test_invalid_value("transform-origin", "right 20px bottom 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-valid.html new file mode 100644 index 0000000000..d5c952ed0f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-origin-valid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 1: parsing transform-origin with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<meta name="assert" content="transform-origin supports the full grammar from spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("transform-origin", "left", ["left center 0px", "left 50% 0px", "left center"]); +test_valid_value("transform-origin", "center", ["center center 0px", "center 50% 0px", "center center"]); +test_valid_value("transform-origin", "right", ["right center 0px", "right 50% 0px", "right center"]); +test_valid_value("transform-origin", "top", ["center top 0px", "50% top 0px", "center top"]); +test_valid_value("transform-origin", "bottom", ["center bottom 0px", "50% bottom 0px", "center bottom"]); +test_valid_value("transform-origin", "-1px", ["-1px center 0px", "-1px 50% 0px", "-1px center"]); +test_valid_value("transform-origin", "calc(2em + 3ex)", ["calc(2em + 3ex) center 0px", "calc(2em + 3ex) 50% 0px", "calc(2em + 3ex) center"]); +test_valid_value("transform-origin", "-4%", ["-4% center 0px", "-4% 50% 0px", "-4% center"]); + +test_valid_value("transform-origin", "left center", ["left center 0px", "left center"]); +test_valid_value("transform-origin", "center top", ["center top 0px", "center top"]); +test_valid_value("transform-origin", "right -4%", ["right -4% 0px", "right -4%"]); +test_valid_value("transform-origin", "-1px bottom 5px"); + +test_valid_value("transform-origin", "center left 6px", "left center 6px"); +test_valid_value("transform-origin", "top center", ["center top 0px", "center top"]); +test_valid_value("transform-origin", "bottom right 7px", "right bottom 7px"); +test_valid_value("transform-origin", "-1px -2px -3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html new file mode 100644 index 0000000000..89a8b519b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/transform-valid.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing transform with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-property"> +<meta name="assert" content="transform supports the full grammar 'none | <transform-list>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("transform", "none"); + +test_valid_value("transform", "matrix(1, 0, 0, 1, 0, 0)"); +test_valid_value("transform", "matrix(1, 2, 3, 4, 5, 6)"); +test_valid_value("transform", "matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6)"); + +test_valid_value("transform", "translate(1px)"); +test_valid_value("transform", "translate(1px, 0%)"); +test_valid_value("transform", "translate(2%, -3%)"); + +test_valid_value("transform", "translateX(-4px)"); + +test_valid_value("transform", "translateY(5%)"); + +test_valid_value("transform", "scale(2)"); +test_valid_value("transform", "scale(3, 4)"); + +test_valid_value("transform", "scale(-2)"); +test_valid_value("transform", "scale(-5, -6)"); + +test_valid_value("transform", "scale(250%)", "scale(2.5)"); +test_valid_value("transform", "scale(325%, 475%)", "scale(3.25, 4.75)"); +test_valid_value("transform", "scale(1, 200%)", "scale(1, 2)"); + +test_valid_value("transform", "scale(-250%)", "scale(-2.5)"); +test_valid_value("transform", "scale(-500%, -620%)", "scale(-5, -6.2)"); + +test_valid_value("transform", "scaleX(7)"); +test_valid_value("transform", "scaleX(720%)", "scaleX(7.2)"); + +test_valid_value("transform", "scaleY(-8)"); +test_valid_value("transform", "scaleY(-85%)", "scaleY(-0.85)"); + +test_valid_value("transform", "scaleZ(4)"); +test_valid_value("transform", "scaleZ(25%)", "scaleZ(0.25)"); + +test_valid_value("transform", "scale3d(0.5, 2.5, 3)"); +test_valid_value("transform", "scale3d(50%, 250%, 300%)", "scale3d(0.5, 2.5, 3)"); + +test_valid_value("transform", "scale3d(-0.5, 2.5, -3)"); +test_valid_value("transform", "scale3d(-50%, 250%, -300%)", "scale3d(-0.5, 2.5, -3)"); +test_valid_value("transform", "scale3d(1, 200%, 3)", "scale3d(1, 2, 3)"); + +test_valid_value("transform", "rotate(0)", "rotate(0deg)"); +test_valid_value("transform", "rotate(90deg)"); + +test_valid_value("transform", "skew(0)", "skew(0deg)"); +test_valid_value("transform", "skew(90deg)"); +test_valid_value("transform", "skew(0, -90deg)", "skew(0deg, -90deg)"); +test_valid_value("transform", "skew(90deg, 0)", ["skew(90deg)", "skew(90deg, 0deg)"]); + +test_valid_value("transform", "skewX(0)", "skewX(0deg)"); +test_valid_value("transform", "skewX(90deg)"); + +test_valid_value("transform", "skewY(0)", "skewY(0deg)"); +test_valid_value("transform", "skewY(-90deg)"); + +test_valid_value("transform", "perspective(10px)"); +test_valid_value("transform", "perspective(none)"); + +test_valid_value("transform", "translate(1px, 2%) scale(3, 4) rotate(-90deg)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-computed.html b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-computed.html new file mode 100644 index 0000000000..a88cc652fa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-computed.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: translate computed values.</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<meta name="assert" content="translate supports the full grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("translate", "none"); + +test_computed_value("translate", "0px"); +test_computed_value("translate", "100%"); + +test_computed_value("translate", "100px 0px", "100px"); +test_computed_value("translate", "100px 0.1px", "100px 0.1px"); +test_computed_value("translate", "100px 0%"); +test_computed_value("translate", "100px calc(10px - 10%)", "100px calc(-10% + 10px)"); +test_computed_value("translate", "100px 200%"); +test_computed_value("translate", "100% 200px"); + +test_computed_value("translate", "100px 200px 0px", "100px 200px"); +test_computed_value("translate", "100px 0px 300px", "100px 0px 300px"); +test_computed_value("translate", "100px 0px 0px", "100px"); +test_computed_value("translate", "100px 200px 300px"); +test_computed_value("translate", "100% 200% 300px"); + +test_computed_value("translate", "100% 0% 200px", "100% 0% 200px"); +test_computed_value("translate", "0% 0% 100px", "0% 0% 100px"); +test_computed_value("translate", "0em 0em 100px", "0px 0px 100px"); + +test_computed_value("translate", "0", "0px"); +test_computed_value("translate", "1px 2px 0", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-invalid.html b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-invalid.html new file mode 100644 index 0000000000..d47cd5b696 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing translate with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<meta name="assert" content="translate supports only the grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("translate", "100deg"); + +test_invalid_value("translate", "100px 200px 300%"); +test_invalid_value("translate", "100px 200px calc(30px + 30%)"); + +test_invalid_value("translate", "100px junk"); +test_invalid_value("translate", "100px 200px junk"); +test_invalid_value("translate", "100px 200px 300px junk"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-valid.html b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-valid.html new file mode 100644 index 0000000000..523bc6d652 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/parsing/translate-parsing-valid.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: parsing translate with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> +<meta name="assert" content="translate supports the full grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("translate", "none"); + +test_valid_value("translate", "0px"); +test_valid_value("translate", "100%"); + +test_valid_value("translate", "100px 0px", "100px"); +test_valid_value("translate", "100px 0.1px", "100px 0.1px"); +test_valid_value("translate", "100px 0%"); +test_valid_value("translate", "100px calc(10px - 10%)", "100px calc(-10% + 10px)"); +test_valid_value("translate", "100px 200%"); +test_valid_value("translate", "100% 200px"); + +test_valid_value("translate", "100px 200px 0px", "100px 200px"); +test_valid_value("translate", "100px 0px 300px", "100px 0px 300px"); +test_valid_value("translate", "100px 0px 0px", "100px"); +test_valid_value("translate", "100px 200px 300px"); +test_valid_value("translate", "100% 200% 300px"); + +test_valid_value("translate", "100% 0% 200px", "100% 0% 200px"); +test_valid_value("translate", "0% 0% 100px", "0% 0% 100px"); +test_valid_value("translate", "0em 0em 100px", "0em 0em 100px"); + +test_valid_value("translate", "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)"); + +test_valid_value("translate", "0", "0px"); +test_valid_value("translate", "1px 2px 0", "1px 2px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-combination-ref.html b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-combination-ref.html new file mode 100644 index 0000000000..1b74821500 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-combination-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="200" height="200" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ex-unit-ref.html b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ex-unit-ref.html new file mode 100644 index 0000000000..961e508b3b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ex-unit-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 160px; + height: 160px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="160" height="160" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ref.html b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ref.html new file mode 100644 index 0000000000..fc6a9da6f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-relative-ref.html b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-relative-ref.html new file mode 100644 index 0000000000..fc6a9da6f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/patternTransform/reference/svg-patternTransform-relative-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/patternTransform/svg-patternTransform-001.html b/testing/web-platform/tests/css/css-transforms/patternTransform/svg-patternTransform-001.html new file mode 100644 index 0000000000..70a208c001 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/patternTransform/svg-patternTransform-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG patternTransform presentation attribute and translateX with translation-value argument without unit</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform"> + <link rel="match" href="reference/svg-patternTransform-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The patternTransform attribute must support functions with unit less arguments for translation-value. The pattern in the test should be moved 25 pixels in the X direction resulting in a solid green rect."> + <style type="text/css"> + svg { + width: 100px; + height: 100px; + background:red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <defs> + <pattern id="greenRects" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50" patternTransform="translate(25 0)"> + <rect x="0" y="0" width="25" height="25" fill="green"/> + <rect x="0" y="25" width="25" height="25" fill="green"/> + </pattern> + </defs> + <rect fill="green" x="0" y="0" width="25" height="100"/> + <rect fill="green" x="50" y="0" width="25" height="100"/> + <rect fill="url(#greenRects)" x="0" y="0" width="100" height="100"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/patternTransform/svg-patternTransform-combination-001.html b/testing/web-platform/tests/css/css-transforms/patternTransform/svg-patternTransform-combination-001.html new file mode 100644 index 0000000000..730f7691ab --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/patternTransform/svg-patternTransform-combination-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG patternTransform presentation attribute and translation-value argument with translateX applied twice</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/svg-patternTransform-combination-ref.html"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform"> + <meta name="flags" content="svg"> + <meta name="assert" content="The patternTransform attribute must support multiple transform functions the same element. The pattern in the test should be moved 50 pixels in the X direction resulting in a solid green rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background:red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <defs> + <pattern id="greenRects" patternUnits="userSpaceOnUse" x="0" y="0" width="100" height="100" patternTransform="translate(25 0) translate(25 0)"> + <rect x="0" y="0" width="50" height="50" fill="green"/> + <rect x="0" y="50" width="50" height="50" fill="green"/> + </pattern> + </defs> + <rect fill="green" x="0" y="0" width="50" height="200"/> + <rect fill="green" x="100" y="0" width="50" height="200"/> + <rect fill="url(#greenRects)" x="0" y="0" width="200" height="200"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-children-only-abspos.html b/testing/web-platform/tests/css/css-transforms/perspective-children-only-abspos.html new file mode 100644 index 0000000000..ce0b80ea7e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-children-only-abspos.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset=UTF-8> +<title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918"> +<meta name="assert" content="The perspective property influences an element's children."> +<link rel="match" href="reference/green.html"> +<style> + +div { + width: 100px; + height: 100px; +} + +#outer { + position: relative; + background: red; + perspective: 100px; +} + +#middle { +} + +#inner { + transform: translateZ(-100px); + position: absolute; + top: 0; + left: 0; + background: green; +} + +</style> + +<p>Pass if there is NO red below:</p> + +<div id="outer"> + <div id="middle"> + <div id="inner"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-children-only-fixpos.html b/testing/web-platform/tests/css/css-transforms/perspective-children-only-fixpos.html new file mode 100644 index 0000000000..512f2032f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-children-only-fixpos.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset=UTF-8> +<title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918"> +<meta name="assert" content="The perspective property influences an element's children."> +<link rel="match" href="reference/green.html"> +<style> + +div { + width: 100px; + height: 100px; +} + +#outer { + transform: scale(1); + position: relative; + background: red; + perspective: 100px; +} + +#middle { +} + +#inner { + transform: translateZ(-100px); + position: fixed; + top: 0; + left: 0; + background: green; +} + +</style> + +<p>Pass if there is NO red below:</p> + +<div id="outer"> + <div id="middle"> + <div id="inner"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-children-only-inline.html b/testing/web-platform/tests/css/css-transforms/perspective-children-only-inline.html new file mode 100644 index 0000000000..c6897ad8ee --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-children-only-inline.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset=UTF-8> +<title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918"> +<meta name="assert" content="The perspective property influences an element's children."> +<link rel="match" href="reference/green.html"> +<style> + +div { + width: 100px; + height: 100px; +} + +#outer { + background: red; + perspective: 100px; +} + +#middle { + display: inline; +} + +#inner { + transform: translateZ(-100px); + background: green; +} + +</style> + +<p>Pass if there is NO red below:</p> + +<div id="outer"> + <div id="middle"> + <div id="inner"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-containing-block-dynamic-1a.html b/testing/web-platform/tests/css/css-transforms/perspective-containing-block-dynamic-1a.html new file mode 100644 index 0000000000..51e76745b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-containing-block-dynamic-1a.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: Creating containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property"> +<link rel="match" href="containing-block-dynamic-1-ref.html"> +<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does."> +<meta name="flags" content="dom"> +<style> + html, body { margin: 0; padding: 0 } + #changeperspective { + position: absolute; + top: 100px; + left: 100px; + } + + #abscovered { + position: absolute; + top: 50px; + left: 50px; + background: red; + height: 100px; + width: 100px; + } + + #fixedmoves { + position: fixed; + top: 150px; + left: 150px; + background: green; + height: 100px; + width: 100px; + } +</style> +<body> + <div id="changeperspective" style="perspective: 1000px"> + <div id="abscovered"></div> + <div id="fixedmoves"></div> + </div> + <script> + var changeperspective = document.getElementById("changeperspective"); + var fixedmoves = document.getElementById("fixedmoves"); + var causeFlush = fixedmoves.offsetTop; + changeperspective.style.perspective = ""; + </script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-containing-block-dynamic-1b.html b/testing/web-platform/tests/css/css-transforms/perspective-containing-block-dynamic-1b.html new file mode 100644 index 0000000000..a417bd482e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-containing-block-dynamic-1b.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: Creating containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property"> +<link rel="match" href="containing-block-dynamic-1-ref.html"> +<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does."> +<meta name="flags" content="dom"> +<style> + html, body { margin: 0; padding: 0 } + #changeperspective { + position: absolute; + top: 100px; + left: 100px; + } + + #abscovered { + position: absolute; + top: 50px; + left: 50px; + background: red; + height: 100px; + width: 100px; + } + + #fixedmoves { + position: fixed; + top: 50px; + left: 50px; + background: green; + height: 100px; + width: 100px; + } +</style> +<body> + <div id="changeperspective"> + <div id="abscovered"></div> + <div id="fixedmoves"></div> + </div> + <script> + var changeperspective = document.getElementById("changeperspective"); + var fixedmoves = document.getElementById("fixedmoves"); + var causeFlush = fixedmoves.offsetTop; + changeperspective.style.perspective = "1000px"; + </script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-001.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-001.html new file mode 100644 index 0000000000..5210a68954 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: perspective-origin - 0px center('center' computes to '50%' in vertical position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'perspective-origin' property set 'center' computes to 50% for the vertical position."> +<style> + div { + height: 100px; + position: absolute; + width: 100px; + } + #test { + perspective: 2px; + perspective-origin: 0px center; + } + #redSquare { + background-color: red; + transform: translateZ(0px); + } + #ref { + perspective: 2px; + perspective-origin: 0px 50%; + } + #greenSquare { + background-color: green; + height: 50px; + top: 25px; + transform: translateZ(1px); + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"><div id="redSquare"></div></div> + <div id="ref"><div id="greenSquare"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-002.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-002.html new file mode 100644 index 0000000000..869c327e83 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: perspective-origin - center 0px('center' computes to '50%' in horizontal position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'perspective-origin' property set 'center' computes to 50% for the horizontal position."> +<style> + div { + height: 100px; + position: absolute; + width: 100px; + } + #test { + perspective: 2px; + perspective-origin: center 0px; + } + #redSquare { + background-color: red; + transform: translateZ(0px); + } + #ref { + perspective: 2px; + perspective-origin: 50% 0px; + } + #greenSquare { + background-color: green; + height: 50px; + left: 25px; + transform: translateZ(1px); + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"><div id="redSquare"></div></div> + <div id="ref"><div id="greenSquare"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-003.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-003.html new file mode 100644 index 0000000000..109f8069db --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-003.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: perspective-origin - 50% bottom('bottom' computes to '100%' in vertical position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'perspective-origin' property set 'bottom' computes to 100% for the vertical position."> +<style> + div { + height: 100px; + position: absolute; + width: 100px; + } + #test { + perspective: 2px; + perspective-origin: 50% bottom; + } + #redSquare { + background-color: red; + transform: translateZ(0px); + } + #ref { + perspective: 2px; + perspective-origin: 50% 100%; + } + #greenSquare { + background-color: green; + height: 50px; + left: 25px; + top: 50px; + transform: translateZ(1px); + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"><div id="redSquare"></div></div> + <div id="ref"><div id="greenSquare"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-004.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-004.html new file mode 100644 index 0000000000..562e0bb84f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-004.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: perspective-origin - 50% top('top' computes to '0%' in vertical position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'perspective-origin' property set 'top' computes to 0% for the vertical position."> +<style> + div { + height: 100px; + position: absolute; + width: 100px; + } + #test { + perspective: 2px; + perspective-origin: 50% top; + } + #redSquare { + background-color: red; + transform: translateZ(0px); + } + #ref { + perspective: 2px; + perspective-origin: 50% 0%; + } + #greenSquare { + background-color: green; + height: 50px; + left: 25px; + transform: translateZ(1px); + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"><div id="redSquare"></div></div> + <div id="ref"><div id="greenSquare"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-005.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-005.html new file mode 100644 index 0000000000..e71d6df65d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-005.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: perspective-origin - left 50%('left' computes to '0%' in horizontal position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'perspective-origin' property set 'left' computes to 0% for the horizontal position."> +<style> + div { + height: 100px; + position: absolute; + width: 100px; + } + #test { + perspective: 2px; + perspective-origin: left 50%; + } + #redSquare { + background-color: red; + transform: translateZ(0px); + } + #ref { + perspective: 2px; + perspective-origin: 0% 50%; + } + #greenSquare { + background-color: green; + height: 50px; + top: 25px; + transform: translateZ(1px); + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"><div id="redSquare"></div></div> + <div id="ref"><div id="greenSquare"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-006.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-006.html new file mode 100644 index 0000000000..6bbb6fb210 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-006.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: perspective-origin - right 50%('right' computes to '100%' in horizontal position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The 'perspective-origin' property set 'right' computes to 100% for the horizontal position."> +<style> + div { + height: 100px; + position: absolute; + width: 100px; + } + #test { + perspective: 2px; + perspective-origin: right 50%; + } + #redSquare { + background-color: red; + transform: translateZ(0px); + } + #ref { + perspective: 2px; + perspective-origin: 100% 50%; + } + #greenSquare { + background-color: green; + height: 50px; + left: 50px; + top: 25px; + transform: translateZ(1px); + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="test"><div id="redSquare"></div></div> + <div id="ref"><div id="greenSquare"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-x.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-x.html new file mode 100644 index 0000000000..1ab8c2109e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-x.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: perspective property</title> + <link rel="author" title="Francisca Gil" href="mailto:pancha0.0@gmail.com"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/perspective-origin-reftest.html"> + <meta name="assert" content="Asserts that origin 'x1' visually moves the objects '-x1*d/(d-1)' "> + <style type="text/css"> + .container { + position: absolute; + width: 150px; + height: 150px; + top: 100px; + left: 100px; + perspective: 3px; + perspective-origin: 0px 50%; + } + .redSquare { + position: absolute; + top: 0px; + left: 0px; + width: 150px; + height: 150px; + background: red; + transform: translateZ(0px); + } + .greenSquare { + position: absolute; + top: 25px; + left: 0px; + width: 100px; + height: 100px; + background: green; + transform: translateZ(1px); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/perspective-origin-xy.html b/testing/web-platform/tests/css/css-transforms/perspective-origin-xy.html new file mode 100644 index 0000000000..c6c4c6aedd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-origin-xy.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: perspective property</title> + <link rel="author" title="Francisca Gil" href="mailto:pancha0.0@gmail.com"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/perspective-reftest.html"> + <meta name="assert" content="Asserts that origin '<x,y>' visually moves the objects '<-x,-y>*d/(d-1)' "> + <style type="text/css"> + .container { + position: absolute; + width: 150px; + height: 150px; + top: 100px; + left: 100px; + perspective: 3px; + perspective-origin: 0px 0px; + } + .redSquare { + position: absolute; + top: 0px; + left: 0px; + width: 150px; + height: 150px; + background: red; + transform: translateZ(0px); + } + .greenSquare { + position: absolute; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background: green; + transform: translateZ(1px); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/perspective-split-by-zero-w-ref.html b/testing/web-platform/tests/css/css-transforms/perspective-split-by-zero-w-ref.html new file mode 100644 index 0000000000..4021be83dc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-split-by-zero-w-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> +html, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +html { overflow: hidden } +body { + perspective: 500px; + perspective-origin: 400px 299px; + background: rgb(200, 200, 200); +} +div { + width: 1140px; + height: 990px; + transform-style: preserve-3d; + position: absolute; + top: 299.5px; + left: 400px; + transform: translate3d(-570px, -495px, 500px) rotateY(64.24deg) translateY(23px) rotateX(90deg); + background-image: url('support/tile-bg.png'); + background-size: 100% 100%; +} + +p.patch { + margin: 0; + position: absolute; + background: red; + height: 200px; + width: 800px; + left: 0px; + top: 400px; + z-index: -1; +} +</style> + +<div></div> + +<!-- + This reference is the same as the test, but with this additional red + patch underneath it (in z-order). This means that if any content is + missing when drawing the test, the red patch will show through and the + test will fail. But if all the content is drawn, then the test will + pass. +--> +<p class="patch"></p> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-split-by-zero-w.html b/testing/web-platform/tests/css/css-transforms/perspective-split-by-zero-w.html new file mode 100644 index 0000000000..3e4cf81441 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-split-by-zero-w.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes"> +<meta name="assert" content="A box that perspective causes to have parts with w<0 still has the w>0 parts rendered correctly. (Chromium issue 1202695)"> +<link rel="match" href="perspective-split-by-zero-w-ref.html"> + +<style> +html, body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +html { overflow: hidden } +body { + perspective: 500px; + perspective-origin: 400px 299px; + background: rgb(200, 200, 200); +} +div { + width: 1140px; + height: 990px; + transform-style: preserve-3d; + position: absolute; + top: 299.5px; + left: 400px; + transform: translate3d(-570px, -495px, 500px) rotateY(64.24deg) translateY(23px) rotateX(90deg); + background-image: url('support/tile-bg.png'); + background-size: 100% 100%; +} +</style> + +<div></div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-svg-001-ref.html b/testing/web-platform/tests/css/css-transforms/perspective-svg-001-ref.html new file mode 100644 index 0000000000..0319294322 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-svg-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Test Reference</title> +<div> + <svg overflow="hidden" + width="100%" + height="100%" + viewBox="0 0 365760 205740" + style=" + backface-visibility: hidden; + transform: translate3d(0px, 0px, 0px) + rotate3d(0, 0, 0, 0deg) translate3d(0px, 0px, 0px) + translate3d(0px, 0px, 0px); + "> + <rect fill="green" width="100%" height="100%"></rect> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-svg-001.html b/testing/web-platform/tests/css/css-transforms/perspective-svg-001.html new file mode 100644 index 0000000000..d22b1156f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-svg-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Perspective on SVG</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1741124"> +<link rel="match" href="perspective-svg-001-ref.html"> +<div style="perspective: 1500px;"> + <svg overflow="hidden" + width="100%" + height="100%" + viewBox="0 0 365760 205740" + style=" + backface-visibility: hidden; + transform: translate3d(0px, 0px, 0px) + rotate3d(0, 0, 0, 0deg) translate3d(0px, 0px, 0px) + translate3d(0px, 0px, 0px); + "> + <rect fill="green" width="100%" height="100%"></rect> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-transforms-equivalence-ref.html b/testing/web-platform/tests/css/css-transforms/perspective-transforms-equivalence-ref.html new file mode 100644 index 0000000000..a4fc022382 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-transforms-equivalence-ref.html @@ -0,0 +1,40 @@ +<!doctype HTML> +<meta charset="utf8"> +<title>Perspective with transforms equivalencies.</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> + +#container { + transform: translate(-200px, -200px); + width: 500px; + height: 500px; + perspective: 500px; +} + +#container > div { + width: 100%; + height: 100%; + transform-style: preserve-3d; + transform: translateZ(-250px) rotateZ(45deg); +} + +#container > div > div { + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(3, 121, 255, 0.3); + box-sizing: border-box; + border: 3px solid black; +} + +#one { transform: rotateY(90deg) translateZ(250px); } +</style> + +<div id="container"> + <div> + <div id="one"></div> + <div id="one"></div> + <div id="one"></div> + <div id="one"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-transforms-equivalence.html b/testing/web-platform/tests/css/css-transforms/perspective-transforms-equivalence.html new file mode 100644 index 0000000000..8f59d51ada --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-transforms-equivalence.html @@ -0,0 +1,52 @@ +<!doctype HTML> +<meta charset="utf8"> +<title>Perspective with transforms equivalencies.</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="match" href="perspective-transforms-equivalence-ref.html"> +<!-- +Perspective with different transforms can have small anti-aliasing +pixel differences, so the test should fuzzy patch to the ref. +--> +<meta name="fuzzy" content="maxDifference=0-94;totalPixels=0-538"> +<style> + +#container { + transform: translate(-200px, -200px); + width: 500px; + height: 500px; + perspective: 500px; +} + +#container > div { + width: 100%; + height: 100%; + transform-style: preserve-3d; + transform: translateZ(-250px) rotateZ(45deg); +} + +#container > div > div { + width: 100%; + height: 100%; + position: absolute; + background-color: rgba(3, 121, 255, 0.3); + box-sizing: border-box; + border: 3px solid black; +} + +/* The following four should be equivalent. */ +#one { transform: rotateY(90deg) translateZ(250px); } +#two { transform: rotateZ(90deg) rotateX(90deg) translateZ(250px); } +#three { transform: rotateY(-90deg) translateZ(-250px); } +#four { transform: rotateZ(-90deg) rotateX(90deg) translateZ(-250px); } +</style> + +<div id="container"> + <div> + <div id="one"></div> + <div id="two"></div> + <div id="three"></div> + <div id="four"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-translateZ-0.html b/testing/web-platform/tests/css/css-transforms/perspective-translateZ-0.html new file mode 100644 index 0000000000..eca8e4de5a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-translateZ-0.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: perspective property</title> + <link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/perspective-reftest.html"> + <meta name="assert" content="Asserts that points on the z=0 plane are unchanged"> + <style type="text/css"> + .container { + position: absolute; + width: 150px; + height: 150px; + top: 100px; + left: 100px; + perspective: 3px; + } + .redSquare { + position: absolute; + top: 0px; + left: 0px; + width: 150px; + height: 150px; + background: red; + transform: translateZ(0px); + } + .greenSquare { + position: absolute; + top: 25px; + left: 25px; + width: 100px; + height: 100px; + background: green; + transform: translateZ(1px); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/perspective-translateZ-negative.html b/testing/web-platform/tests/css/css-transforms/perspective-translateZ-negative.html new file mode 100644 index 0000000000..2c7305e3b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-translateZ-negative.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: perspective property</title> + <link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/perspective-reftest.html"> + <meta name="assert" content="Asserts that the scaling is proportional to d/(d - Z) for a negative Z"> + <style type="text/css"> + .container { + position: absolute; + width: 150px; + height: 150px; + top: 100px; + left: 100px; + perspective: 3px; + } + .redSquare { + position: absolute; + top: -25px; + left: -25px; + width: 200px; + height: 200px; + background: red; + transform: translateZ(-1px); + } + .greenSquare { + position: absolute; + top: 0; + left: 0; + width: 150px; + height: 150px; + background: green; + transform: translateZ(0px); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/perspective-translateZ-positive.html b/testing/web-platform/tests/css/css-transforms/perspective-translateZ-positive.html new file mode 100644 index 0000000000..752888eaf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-translateZ-positive.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: perspective property</title> + <link rel="author" title="Andres Ugarte" href="mailto:anduga@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/perspective-reftest.html"> + <meta name="assert" content="Asserts that the scaling is proportional to d/(d - Z) for a positive Z"> + <style type="text/css"> + .redContainer { + position: absolute; + width: 150px; + height: 150px; + top: 100px; + left: 100px; + perspective: 3px; + background: red; + } + .greenSquare { + position: absolute; + top: 25px; + left: 25px; + width: 100px; + height: 100px; + background: green; + transform: translateZ(1px); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="redContainer"> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html b/testing/web-platform/tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html new file mode 100644 index 0000000000..31be3d081e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: 'perspective' on a non-transformable element doesn't create a stacking context</title> +<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<style> + html, body { margin: 0; padding: 0 } + #fixedmoves { + position: absolute; + background: green; + height: 100px; + width: 100px; + } +</style> +<body> + <div id="fixedmoves"></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-untransformable-no-stacking-context.html b/testing/web-platform/tests/css/css-transforms/perspective-untransformable-no-stacking-context.html new file mode 100644 index 0000000000..8916a39bbb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-untransformable-no-stacking-context.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: 'perspective' on a non-transformable element doesn't create a stacking context</title> +<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property"> +<link rel="match" href="perspective-untransformable-no-stacking-context-ref.html"> +<meta name="assert" content="Perspective on a non-transformable element shouldn't create a stacking context."> +<style> +* { margin: 0; padding: 0; } +div, span { width: 100px; height: 100px } +#perspective { background: green; padding-top: 100px; perspective: 100px; } +#child { display:inline-block; z-index: -1; position:absolute; background: red; } +#spacer { display:inline-block; } +#wrapper { overflow:hidden } +</style> +<body> + <div id="wrapper"> + <span id="perspective"> + <div id="child"> + </div> + <span id="spacer"></span> + </span> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-zero-2-ref.html b/testing/web-platform/tests/css/css-transforms/perspective-zero-2-ref.html new file mode 100644 index 0000000000..bea389ab47 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-zero-2-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>CSS transforms: perspective: 0px reference</title> +<link rel="author" title="Miko Mynttinen" href="mailto:mmynttinen@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<style type="text/css"> +.parent { + transform: perspective(0px); + transform-style: preserve-3d; + transform-origin: top left; +} +.parent > div { + width: 100px; + height: 100px; + position: absolute; +} +.child-3d { + background: green; + transform: translateZ(0.5px); +} +</style> +</head> +<body> +<p>Test passes if there is only green below.</p> +<div class="parent"> + <div class="child-3d"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-zero-2.html b/testing/web-platform/tests/css/css-transforms/perspective-zero-2.html new file mode 100644 index 0000000000..a94de82b3f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-zero-2.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8"> +<title>CSS transforms: perspective: 0px</title> +<link rel="author" title="Miko Mynttinen" href="mailto:mmynttinen@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413"> +<meta name="assert" content="Test checks that perspective: 0px behaves like transform: perspective(0) on parent container"> +<link rel="match" href="perspective-zero-2-ref.html"> +<style type="text/css"> +.parent { + perspective: 0px; + perspective-origin: top left; +} +.parent > div { + position: absolute; +} +.child-2d { + background: red; + width: 200px; + height: 200px; +} +.child-3d { + width: 100px; + height: 100px; + background: green; + transform: translateZ(0.5px); +} +</style> +</head> +<body> +<p>Test passes if there is only green below.</p> +<div class="parent"> + <div class="child-2d"></div> + <div class="child-3d"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-zero-3.html b/testing/web-platform/tests/css/css-transforms/perspective-zero-3.html new file mode 100644 index 0000000000..0c46bd07f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-zero-3.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset=UTF-8> +<title>CSS Test: perspective(0)</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413"> +<meta name="assert" content="perspective: 0 should be clamped to 1px"> +<link rel="match" href="reference/green.html"> +<style> +#outer { + width: 100px; + height: 100px; + background: red; + perspective: 0; + perspective-origin: top left; +} +#inner { + width: 50px; + height: 50px; + background: green; + /* perspective: 0 should be treated as perspective(1px), which should + * cause this box to be much larger. */ + transform: translateZ(0.5px); +} +</style> +<p>Pass if there is NO red below:</p> +<div id="outer"><div id="inner"></div></div> diff --git a/testing/web-platform/tests/css/css-transforms/perspective-zero.html b/testing/web-platform/tests/css/css-transforms/perspective-zero.html new file mode 100644 index 0000000000..93d2b63f55 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/perspective-zero.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: transform: perspective(0)</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-perspective"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413"> +<meta name="assert" content="perspective(0) should be clamped to 1px"> +<link rel="match" href="reference/green.html"> +<style> +#cover-me { + width: 100px; + height: 100px; + background: red; + position: relative; + margin-bottom: -100px; +} +#test { + background: green; + transform-origin: top left; + width: 50px; + height: 50px; + /* perspective(0) should be treated as perspective(1px), which should + * cause this box to be much larger. */ + transform: perspective(0) translateZ(0.5px); +} +</style> +<p>Pass if there is NO red below:</p> +<div id="cover-me"></div><div id="test"></div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline-ref.html b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline-ref.html new file mode 100644 index 0000000000..7ca006cc5d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<meta charset="UTF-8"> +<title>CSS Test Reference: transform-style: preserve-3d not being a containing block on inlines</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<style> + +body { + margin: 0; +} + +#ref { + display: block; + width: 50px; + height: 50px; + background: blue; +} + +</style> + +<span id="ref"></span> diff --git a/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline.tentative.html b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline.tentative.html new file mode 100644 index 0000000000..c5666aa358 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<meta charset="UTF-8"> +<title>CSS Test: transform-style: preserve-3d not being a containing block on inlines</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6430"> +<link rel="match" href="preserve-3d-flat-grouping-properties-containing-block-inline-ref.html"> +<style> + +#container { + margin: 150px; +} + +#outer { + transform-style: preserve-3d; +} + +#inner { + position: absolute; + top: 0; + left: 0; + width: 50px; + height: 50px; + background: blue; +} + +</style> + +<div id="container"> + <span id="outer"> + <span id="inner"></span> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.html b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.html new file mode 100644 index 0000000000..720a4133fb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.html @@ -0,0 +1,32 @@ +<!doctype HTML> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + div { + width: 200px; + height: 200px; + } +</style> + +<div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden"> + <div id=absoluteUnderGrouping style="position: absolute"> + </div> +</div> + +<div id=parentWithoutGrouping style="transform-style: preserve-3d"> + <div id=absoluteNotUnderGrouping style="position: absolute"> + </div> +</div> + +<script> + test(function() { + assert_equals(absoluteUnderGrouping.offsetParent, parentWithGrouping); + }, "Preserve-3d element with a grouping property still a containing block"); + + test(function() { + assert_equals(absoluteNotUnderGrouping.offsetParent, parentWithoutGrouping); + }, "Preserve-3d element without a grouping property still a containing block"); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties.html b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties.html new file mode 100644 index 0000000000..7fbd61d854 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve-3d-flat-grouping-properties.html @@ -0,0 +1,121 @@ +<!doctype HTML> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#grouping-property-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + .testContainer div { + /* Note: .testContainer is just here to prevent this rule from squishing + the dynamically-generated human-readable divs that show this test's + pass/fail results. */ + width: 200px; + height: 200px; + } + .parent { + transform-style: preserve-3d; + transform: rotateY(45deg) + } + + .child { + transform: rotateY(45deg); + background: lightblue + } +</style> + +<div class=testContainer> + <div class=parent> + <div id=nonflat class=child></div> + </div> + + <div class=parent style="opacity: 0.5"> + <div id=opacity class=child></div> + </div> + + <div class=parent style="overflow: hidden"> + <div id=overflowClip class=child></div> + </div> + + <div class=parent style="filter: invert(0)"> + <div id=filter class=child></div> + </div> + + <div class=parent style="-webkit-backdrop-filter: invert(0); backdrop-filter: invert(0)"> + <div id=backdropFilter class=child></div> + </div> + + <div class=parent style="mix-blend-mode: multiply;"> + <div id=mixBlendMode class=child></div> + </div> + + <div class=parent style="clip: rect(1px, 2px, 3px, 4px); position: absolute"> + <div id=cssClip class=child></div> + </div> + + <div class=parent style="clip-path: circle(40%)"> + <div id=clipPath class=child></div> + </div> + + <div class=parent style="isolation: isolate"> + <div id=isolation class=child></div> + </div> + + <div class=parent style="-webkit-mask:linear-gradient(black,transparent); + mask:linear-gradient(black,transparent)"> + <div id=mask class=child></div> + </div> + + <div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden"> + <div id=absoluteUnderGrouping style="position: absolute"> + </div> + </div> + + <div id=parentWithoutGrouping style="transform-style: preserve-3d"> + <div id=absoluteNotUnderGrouping style="position: absolute"> + </div> + </div> +</div> + +<script> + nonflatWidth = nonflat.getBoundingClientRect().width; + + test(function() { + assert_equals(nonflat.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element not flattened"); + + test(function() { + assert_not_equals(opacity.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to opacity"); + + test(function() { + assert_not_equals(overflowClip.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to overflow clip"); + + test(function() { + assert_not_equals(filter.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to filter"); + + test(function() { + assert_not_equals(backdropFilter.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to backdrop-filter"); + + test(function() { + assert_not_equals(mixBlendMode.getBoundingClientRect().width), nonflatWidth; + }, "Preserve-3d element flattened due to mix-blend-mode"); + + test(function() { + assert_not_equals(cssClip.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to clip CSS"); + + test(function() { + assert_not_equals(clipPath.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to clip-path"); + + test(function() { + assert_not_equals(isolation.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to isolation"); + + test(function() { + assert_not_equals(mask.getBoundingClientRect().width, nonflatWidth); + }, "Preserve-3d element flattened due to mask"); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-no-perspective-ref.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-no-perspective-ref.html new file mode 100644 index 0000000000..d84ea9a19c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-no-perspective-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<title>CSS Test Reference (Transforms): Filter on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> + + svg.cover { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 500px; + height: 570px; + } + +</style> + +<svg class="cover"> + <polygon fill="black" stroke="blue" stroke-width="8" + points="266.429,351 + 301.1586,351 + 301.1586,551 + 266.429,551" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-no-perspective.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-no-perspective.html new file mode 100644 index 0000000000..0145b0dbfd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-no-perspective.html @@ -0,0 +1,85 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<meta name="assert" content="The filtered element is rendered correctly without clipping, despite the interesting transform."> +<link rel="match" href="preserve3d-and-filter-no-perspective-ref.html"> + +<style> + + .scene { + width: 400px; + height: 400px; + position: absolute; + left: 100px; + top: 100px; + } + + .chair { + width: 400px; + height: 400px; + transform: rotateY(80deg); + transform-style: preserve-3d; + transform-origin: 50% 50% 50%; + } + + .shadow { + position: absolute; + top: 250px; + left: 0; + width: 200px; + height: 200px; + filter: blur(1px); + background: black; + transform: translate3d(1px, 1px, 1px); + } + + svg.cover { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 500px; + height: 570px; + } + +</style> + +<!-- + +The overall transform here from the viewport to the +<div class="shadow"></div> is: + +translate(100px, 100px) translate(200px, 200px) rotateY(80deg) translate(-200px, -200px) translateY(250px) translate(100px, 100px) translate3d(1px, 1px, 1px) translate(-100px, -100px) + +which according to https://codepen.io/milosdjakonovic/pen/QyqJyp +is equivalent to the matrix: + +matrix3d(0.173648, 0, -0.984808, 0, + 0, 1, 0, 0, + 0.984808, 0, 0.173648, 0, + 266.429, 351, 196.15, 1) + +[ 0.173648 0 0.984808 266.429 ] +[ 0 1 0 351 ] +[ -0.984808 0 0.173648 196.15 ] +[ 0 0 0 1 ] + +--> + +<div class="scene"> + <div class="chair"> + <div class="shadow"></div> + </div> +</div> + +<!-- cover the blurred edge so we can match to a reference --> +<svg class="cover"> + <polygon fill="transparent" stroke="blue" stroke-width="8" + points="266.429,351 + 301.1586,351 + 301.1586,551 + 266.429,551" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-with-perspective-ref.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-with-perspective-ref.html new file mode 100644 index 0000000000..590085f9c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-with-perspective-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<title>CSS Test Reference (Transforms): Filter on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> + + .scene { + width: 400px; + height: 400px; + position: absolute; + left: 100px; + top: 100px; + perspective:1300px; + } + + .chair { + width: 400px; + height: 400px; + transform: rotateY(88deg); + transform-style: preserve-3d; + transform-origin: 50% 50% 50%; + } + + .shadow { + position: absolute; + top: 250px; + left: 0; + width: 200px; + height: 200px; + background: white; + transform: rotateX(90deg) translate3d(0,-60px,0); + } + + svg.cover { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 500px; + height: 500px; + } + +</style> + +<div class="scene"> + <div class="chair"> + <div class="shadow"></div> + </div> +</div> + +<svg class="cover"> + <polygon fill="black" stroke="blue" stroke-width="11" + points="103.793,476.3579 + 140.7813,449.3585 + 340.0185,450.1613 + 339.0401,477.4783" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-with-perspective.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-with-perspective.html new file mode 100644 index 0000000000..9d2d91df6e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-filter-with-perspective.html @@ -0,0 +1,88 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<meta name="assert" content="The filtered element is rendered correctly without clipping, despite the interesting transform."> +<link rel="match" href="preserve3d-and-filter-with-perspective-ref.html"> +<meta name="fuzzy" content="maxDifference=0-4;totalPixels=0-26"> + + +<style> + + .scene { + width: 400px; + height: 400px; + position: absolute; + left: 100px; + top: 100px; + perspective:1300px; + } + + .chair { + width: 400px; + height: 400px; + transform: rotateY(88deg); + transform-style: preserve-3d; + transform-origin: 50% 50% 50%; + } + + .shadow { + position: absolute; + top: 250px; + left: 0; + width: 200px; + height: 200px; + filter: blur(1px); + background: black; + transform: rotateX(90deg) translate3d(0,-60px,0); + } + + svg.cover { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 500px; + height: 500px; + } + +</style> + +<!-- + +The overall transform here from the viewport to the +<div class="shadow"></div> is: + +translate(100px, 100px) translate(200px, 200px) perspective(1300px) translate(-200px, -200px) translate(200px, 200px) rotateY(88deg) translate(-200px, -200px) translateY(250px) translate(100px, 100px) rotateX(90deg) translate3d(0, -60px, 0) translate(-100px, -100px) + +which according to https://codepen.io/milosdjakonovic/pen/QyqJyp +is equivalent to the matrix: + +matrix3d(0.265528, 0.230629, -0.999391, 0.000768762, + 0.991337, -0.00805373, 0.0348995, -2.68458e-05, + 6.07019e-17, -1, 2.13698e-18, -1.64383e-21, + 88.2804, 405.163, 194.294, 0.850543) + +[ 0.265528 0.991337 6.07019e-17 88.2804 ] +[ 0.230629 -0.00805373 -1 405.163 ] +[ -0.999391 0.0348995 2.13698e-18 194.294 ] +[ 0.000768762 -2.68458e-05 -1.64383e-21 0.850543 ] + +--> + +<div class="scene"> + <div class="chair"> + <div class="shadow"></div> + </div> +</div> + +<!-- cover the blurred edge so we can match to a reference --> +<svg class="cover"> + <polygon fill="transparent" stroke="blue" stroke-width="11" + points="103.793,476.3579 + 140.7813,449.3585 + 340.0185,450.1613 + 339.0401,477.4783" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-001-ref.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-001-ref.html new file mode 100644 index 0000000000..62252a8553 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test Reference (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> +body { + margin: 0; +} + +.reference { + background: blue; + width: 100px; + height: 100px; + transform-origin: 0 0; + transform: translate(50px, 100px) perspective(1000px) rotateX(30deg) translateY(50px) translateZ(100px); +} +</style> + +<div class="reference"></div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-001.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-001.html new file mode 100644 index 0000000000..411b945e10 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="The element is rendered at the correct position."> +<link rel="match" href="preserve3d-and-flattening-001-ref.html"> +<meta name="fuzzy" content="maxDifference=0-127;totalPixels=0-101"> + +<style> +body { + margin: 0; +} +.scene-wrapper { + margin-top: 100px; + margin-left: 50px; + width: 200px; + height: 200px; + perspective: 1000px; + perspective-origin: 0px 0px; +} +.scene-root { + transform: rotateX(30deg); + transform-origin: 0px 0px; + transform-style:preserve-3d; + /* This is in place of a transition in the original. */ + will-change: transform; +} +.descendent-of-flattener { + height: 50px; + will-change: transform; +} +.scene-3d-element { + background: blue; + transform: translateZ(100px); + width: 100px; + height: 100px; + transform-style:preserve-3d +} +</style> + +<div class="scene-wrapper"> + <div class="scene-root"> + <div class="scene-flattener"> + <div class="descendent-of-flattener"></div> + </div> + <div class="scene-3d-element"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-002-ref.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-002-ref.html new file mode 100644 index 0000000000..5a2b59cb90 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-002-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> +body { + margin: 0; +} +div { + position: absolute; + height: 100px; + width: 100px; + top: 0; + left: 0; +} +.flattener { + background: fuchsia; +} +.sibling { + background: blue; + top: 50px; + left: 25px; +} +.child { + background: silver; + left: 50px; +} +</style> + +<div class="sibling"></div> +<div class="flattener"></div> +<div class="child"></div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-002.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-002.html new file mode 100644 index 0000000000..eaadcfee33 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-002.html @@ -0,0 +1,46 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="The element is rendered at the correct position."> +<link rel="match" href="preserve3d-and-flattening-002-ref.html"> + +<style> +body { + margin: 0; +} +div { + position: absolute; + height: 100px; + width: 100px; + top: 0; + left: 0; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.outer { + background: gray; +} +.flattener { + background: fuchsia; +} +.sibling { + background: blue; + transform: translate3d(25px, 50px, -20px); +} +.child { + background: silver; + transform: translate3d(50px, 0, 10px); +} +</style> + +<div class="outer"> + <div class="flattener"> + <div class="child"></div> + </div> + <div class="sibling"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-003.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-003.html new file mode 100644 index 0000000000..7fb0d704fb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="The element is rendered at the correct position."> +<link rel="match" href="preserve3d-and-flattening-002-ref.html"> + +<style> +body { + margin: 0; +} +div { + position: absolute; + height: 100px; + width: 100px; + top: 0; + left: 0; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.outer { + background: gray; +} +.flattener { + background: fuchsia; + transform: translateX(0); +} +.sibling { + background: blue; + transform: translate3d(25px, 50px, -20px); +} +.child { + background: silver; + transform: translate3d(50px, 0, 10px); +} +</style> + +<div class="outer"> + <div class="flattener"> + <div class="child"></div> + </div> + <div class="sibling"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-001.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-001.html new file mode 100644 index 0000000000..99c38160f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<link rel="match" href="reference/green.html"> + +<style> +div { + position: absolute; + height: 100px; + width: 100px; + top: 0; + left: 0; + background: red; +} +.outer { + position: relative; +} +.outer, .sibling { + transform-style: preserve-3d; +} +</style> + +<p>Pass if there is NO red below:</p> + +<div class="outer"> + <div class="sibling"></div> + <div class="flattener"><div class="child"></div></div> + <div class="sibling" style="background: green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-002.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-002.html new file mode 100644 index 0000000000..243aab6f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<link rel="match" href="reference/green.html"> + +<style> +div { + position: absolute; + height: 100px; + width: 100px; + top: 0; + left: 0; + background: red; +} +.outer { + position: relative; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.flattener { + transform: translateX(0); +} +</style> + +<p>Pass if there is NO red below:</p> + +<div class="outer"> + <div class="sibling"></div> + <div class="flattener"><div class="child"></div></div> + <div class="sibling" style="background: green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-003.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-003.html new file mode 100644 index 0000000000..f87b7691b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<link rel="match" href="reference/green.html"> + +<style> +div { + position: absolute; + height: 100px; + width: 100px; + top: 0; + left: 0; + background: red; +} +.outer { + position: relative; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.child { + background: green; +} +</style> + +<p>Pass if there is NO red below:</p> + +<div class="outer"> + <div class="sibling"></div> + <div class="flattener"><div class="child"></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-004.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-004.html new file mode 100644 index 0000000000..2bf1510dbc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-004.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<link rel="match" href="reference/green.html"> + +<style> +div { + position: absolute; + height: 100px; + width: 100px; + top: 0; + left: 0; + background: red; +} +.outer { + position: relative; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.flattener { + transform: translateX(0); +} +.child { + background: green; +} +</style> + +<p>Pass if there is NO red below:</p> + +<div class="outer"> + <div class="sibling"></div> + <div class="flattener"><div class="child"></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-005.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-005.html new file mode 100644 index 0000000000..36582ec90d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-005.html @@ -0,0 +1,44 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<link rel="match" href="reference/green.html"> + +<style> +div, span { + height: 100px; + width: 100px; + background: red; +} +span { + display: inline-block; + vertical-align: top; +} +div:not(:first-child):not(.outer) { + /* put everything at the same position without using absolute positioning */ + margin-top: -100px; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.sibling { + transform: translateZ(-10px); +} +.child { + will-change: transform; + position: relative; + z-index: -1; +} +</style> + +<p>Pass if there is NO red below:</p> + +<div class="outer"> + <div class="sibling"></div> + <div class="flattener"><span style="background: green"></span><div class="child"></div><div></div></div> + <div class="flattener"><div class="child"></div><div></div></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-006.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-006.html new file mode 100644 index 0000000000..826ee4f9f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-006.html @@ -0,0 +1,53 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<link rel="match" href="preserve3d-and-flattening-002-ref.html"> + +<style> +body { + margin: 0; +} +div, span { + height: 100px; + width: 100px; + background: red; +} +span { + display: inline-block; + vertical-align: top; +} +div:not(:first-child):not(.outer) { + /* put everything at the same position without using absolute positioning */ + margin-top: -100px; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.outer { + background: gray; +} +.flattener { + /* adding position:relative or a transform changes things */ + background: fuchsia; +} +.sibling { + background: blue; + transform: translate3d(25px, 50px, -20px); +} +.child { + background: silver; + transform: translate3d(50px, 0, 10px); +} +</style> + +<div class="outer"> + <div class="flattener"> + <div class="child"></div> + </div> + <div class="sibling"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-007.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-007.html new file mode 100644 index 0000000000..8f228253d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-007.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<link rel="match" href="preserve3d-and-flattening-002-ref.html"> + +<style> +body { + margin: 0; +} +div, span { + height: 100px; + width: 100px; + background: red; +} +span { + display: inline-block; + vertical-align: top; +} +div:not(:first-child):not(.outer) { + /* put everything at the same position without using absolute positioning */ + margin-top: -100px; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.outer { + background: gray; +} +.flattener { + /* adding position:relative or a transform changes things */ + background: fuchsia; +} +.sibling { + background: blue; + transform: translate3d(25px, 50px, -20px); +} +.child { + background: silver; + transform: translate3d(50px, 0, 10px); + will-change: transform; +} +</style> + +<div class="outer"> + <div class="flattener"> + <div class="child"></div> + </div> + <div class="sibling"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-008.html b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-008.html new file mode 100644 index 0000000000..808ac55262 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-and-flattening-z-order-008.html @@ -0,0 +1,56 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544"> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> +<meta name="assert" content="Elements are drawn in the correct z-order."> +<meta name="fuzzy" content="maxDifference=1; totalPixels=0-3244"> +<link rel="match" href="reference/green.html"> + +<style> +div, span { + height: 100px; + width: 100px; + background: red; +} +span { + display: inline-block; + vertical-align: bottom; +} +.outer, .sibling { + transform-style: preserve-3d; +} +.sibling { + margin-top: -100px; + transform: translateZ(-10px); +} + +.flattener:first-child { + background: linear-gradient(to bottom, green 0%, green 25%, red 25%, red 100%); +} +.flattener:first-child > .child { + background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%); + margin-top: 50px; + height: 50px; +} +.flattener:last-child { + background: linear-gradient(to bottom, green 0px, green 25px, red 25px, red 75px); + margin-top: -75px; + height: 75px; +} +.flattener:last-child > .child { + background: green; + margin-top: 50px; + height: 25px; +} +</style> + +<p>Pass if there is NO red below:</p> + +<div class="outer"> + <div class="flattener"><span class="child"></span></div> + <div class="sibling"></div> + <div class="flattener"><span class="child"></span></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-button-ref.html b/testing/web-platform/tests/css/css-transforms/preserve3d-button-ref.html new file mode 100644 index 0000000000..e5e3c1ebfc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-button-ref.html @@ -0,0 +1,42 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<style> +.scene { + width: 200px; + height: 200px; + perspective: 5000px; +} + +.card { + width: 100%; + height: 100%; + transform-style: preserve-3d; + position: relative; + background: none; + border: 0; + padding: 0; + transform: rotateY(180deg); +} + +.face { + position: absolute; + top: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + background: red; +} + +.backface { + background: green; + transform: rotateY(180deg); +} +</style> +<div class="scene"> + <div class="card"> + <div class="face"></div> + <div class="face backface"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-button.html b/testing/web-platform/tests/css/css-transforms/preserve3d-button.html new file mode 100644 index 0000000000..544bb24966 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-button.html @@ -0,0 +1,44 @@ +<!doctype html> +<title>CSS Test: preserve-3d on buttons</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="preserve3d-button-ref.html"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1491864"> +<style> +.scene { + width: 200px; + height: 200px; + perspective: 5000px; +} + +.card { + width: 100%; + height: 100%; + transform-style: preserve-3d; + position: relative; + background: none; + border: 0; + padding: 0; + transform: rotateY(180deg); +} + +.face { + position: absolute; + top: 0; + width: 100%; + height: 100%; + backface-visibility: hidden; + background: red; +} + +.backface { + background: green; + transform: rotateY(180deg); +} +</style> +<div class="scene"> + <button class="card"> + <div class="face"></div> + <div class="face backface"></div> + </button> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-nested-perspective-ref.html b/testing/web-platform/tests/css/css-transforms/preserve3d-nested-perspective-ref.html new file mode 100644 index 0000000000..df0bfc417d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-nested-perspective-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> + html, body { margin: 0 } + #box { + width: 100px; + height: 100px; + background: green; + } +</style> +<div id="box"></div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-nested-perspective.html b/testing/web-platform/tests/css/css-transforms/preserve3d-nested-perspective.html new file mode 100644 index 0000000000..368784c74f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-nested-perspective.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test: nested preserve-3d and perspective without transformed items</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1505222"> +<link rel="match" href="preserve3d-nested-perspective-ref.html"> +<style> + html, body { margin: 0 } + #box { + width: 100px; + height: 100px; + background: green; + } +</style> +<!-- Since we don't specify any transform, this should render just a 100x100px red box --> +<div style="perspective: 1200px"> + <div style="transform-style: preserve-3d"> + <div style="transform-style: flat"> + <div id="box" style="transform-style: preserve-3d"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-overflow-percent.html b/testing/web-platform/tests/css/css-transforms/preserve3d-overflow-percent.html new file mode 100644 index 0000000000..1c4962001e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-overflow-percent.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Overflow with preserve-3d and percentage-transformed parent is computed using the right reference box</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1626840"> +<link rel="mismatch" href="/common/blank.html"> +<style> +:root { + overflow: hidden; +} +body { + margin: 0; + font-size: 28px; +} +#map { + width: 100%; + height: 100%; + backface-visibility: hidden; +} +.floor { + width: 100%; + height: 100vh; +} +.skew { + height: 20em; + width: 20em; + position: relative; + left: 50%; + top: calc(50% + 1.5em); + transform-origin: 0% 0%; + transform: rotateX(45deg) rotateZ(-45deg) translateX(-50%) translateY(-50%); + transform-style: preserve-3d; +} +.cylinder { + position: absolute; + background-color: green; + transform-style: preserve-3d; + width: 7em; + height: 7em; + transform: translateZ(1em); +} +</style> +<div id="map"> + <div class="floor"> + <div class="skew" style="width: 13em; height: 47em; left: calc(50% + 0em); top: calc(50% + 0.5em);"> + <div class="cylinder" style="left: calc(1.5em + 0em); top: calc(38em + 0em);"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-pseudo-element-ref.html b/testing/web-platform/tests/css/css-transforms/preserve3d-pseudo-element-ref.html new file mode 100644 index 0000000000..c8e68f5599 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-pseudo-element-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Test: preserve-3d on pseudo elements</title> +<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> +<style> +div { + width: 200px; + height: 200px; + background-color: green; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-transforms/preserve3d-pseudo-element.html b/testing/web-platform/tests/css/css-transforms/preserve3d-pseudo-element.html new file mode 100644 index 0000000000..a84482e5ec --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/preserve3d-pseudo-element.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS Test: preserve-3d on pseudo elements</title> +<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/"> +<link rel="match" href="preserve3d-pseudo-element-ref.html"> +<style> +div { + width: 200px; + height: 200px; + transform: rotateX(90deg); + transform-style: preserve-3d; +} + +div::before { + display: inline-block; + width: 200px; + height: 200px; + transform: rotateX(90deg); + content: ''; + background-color: green; +} +</style> +<div></div> 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/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> diff --git a/testing/web-platform/tests/css/css-transforms/rotate-180-degrees-001.html b/testing/web-platform/tests/css/css-transforms/rotate-180-degrees-001.html new file mode 100644 index 0000000000..9532290cde --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate-180-degrees-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CCSS Test: transform - rotate 180 deg</title> + <link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"/> + <style type="text/css"> + #greenBottomDiv { + background: green; + border-bottom-color: black; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + border-width: 5px; + border-style: solid; + height: 100px; + position: absolute; + transform: + rotate(180deg); + width: 100px; + } + + #redDiv { + position: absolute; + background: red; + height: 110px; + width: 110px; + } + + </style> +</head> +<body> + <p>Test passes if there is a black line on the top of green box and no red.</p> + <div id="redDiv"></div> + <div id="greenBottomDiv"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate-270-degrees-001.html b/testing/web-platform/tests/css/css-transforms/rotate-270-degrees-001.html new file mode 100644 index 0000000000..ae40c848e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate-270-degrees-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CCSS Test: transform - rotate 270 deg</title> + <link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"/> + <style type="text/css"> + #greenBottomDiv { + background: green; + border-bottom-color: black; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + border-width: 5px; + border-style: solid; + height: 100px; + position: absolute; + transform: + rotate(270deg); + width: 100px; + } + + #redDiv { + position: absolute; + background: red; + height: 110px; + width: 110px; + } + + </style> +</head> +<body> + <p>Test passes if there is a black line on the right of green box and no red.</p> + <div id="redDiv"></div> + <div id="greenBottomDiv"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate-90-degrees-001.html b/testing/web-platform/tests/css/css-transforms/rotate-90-degrees-001.html new file mode 100644 index 0000000000..447a3cba75 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate-90-degrees-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: transform - rotate 90 deg</title> + <link rel="author" title="Larry McLister" href="mailto:lmcliste@adobe.com"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"/> + <style type="text/css"> + #greenBottomDiv { + background: green; + border-bottom-color: black; + border-left-color: transparent; + border-right-color: transparent; + border-top-color: transparent; + border-width: 5px; + border-style: solid; + height: 100px; + position: absolute; + transform: + rotate(90deg); + width: 100px; + } + + #redDiv { + position: absolute; + background: red; + height: 110px; + width: 110px; + } + + </style> +</head> +<body> + <p>Test passes if there is a black line on the left of green box and no red.</p> + <div id="redDiv"></div> + <div id="greenBottomDiv"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-3args-ref.html b/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-3args-ref.html new file mode 100644 index 0000000000..ad9a847b55 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-3args-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="80" height="80" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-angle-45-ref.html b/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-angle-45-ref.html new file mode 100644 index 0000000000..b5460d5d7d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-angle-45-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-angle-90-ref.html b/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-angle-90-ref.html new file mode 100644 index 0000000000..dcd4f9aed9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/reference/svg-rotate-angle-90-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-002.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-002.html new file mode 100644 index 0000000000..5906a2f404 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG rotate with three arguments without units on rotate or translate values</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-rotate-3args-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support three arguments without units on angle arguments or translation-value arguments. The green rect in this test should be rotated 90 degrees clockwise after the transform origin is translated by 20 pixels in the vertical and horizontal direction to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="78" height="78" fill="red"/> + <rect x="0" y="-40" width="80" height="80" fill="green" transform="rotate(90,20,20)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-001.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-001.html new file mode 100644 index 0000000000..f21063afbd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG rotate with three arguments with one absolute translation-value argument</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-rotate-3args-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="78" height="78" fill="red"/> + <rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90 20)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-002.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-002.html new file mode 100644 index 0000000000..6cdd6b179d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG rotate with three arguments with no translation-value arguments and a comma</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-rotate-3args-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function takes two optional translation values. If no translation values are provided, and there is a comma after the rotate argument, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated and the transform origin should not be translated. The green rect should completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="78" height="78" fill="red"/> + <rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90,)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-003.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-003.html new file mode 100644 index 0000000000..d1b01eabb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG rotate with three arguments, with a third absolute translation-value argument</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-rotate-3args-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function takes two optional translation values. If a third absolute translation-value argument is provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="78" height="78" fill="red"/> + <rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90,20,20,20)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-004.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-004.html new file mode 100644 index 0000000000..102807b280 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG rotate with three arguments with one relative translation-value argument</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-rotate-3args-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="78" height="78" fill="red"/> + <rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90 30%)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-005.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-005.html new file mode 100644 index 0000000000..0b48a82cbf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-3args-invalid-005.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG rotate with three arguments, with a third relative translation-value argument</title> + <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions"> + <link rel="match" href="reference/svg-rotate-3args-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function takes two optional translation values. If a third relative translation-value argument is provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="78" height="78" fill="red"/> + <rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90,30%,20%,40%)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-001.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-001.html new file mode 100644 index 0000000000..be3e4bead8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and angle argument without unit on rotate</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-rotate-angle-45-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-142"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support unit less arguments for angle. The green rect in the test should be rotated by 45 degrees clockwise to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 106,37 175,106 106,175 37,106 Z" fill="red"/> + <rect x="100" y="-50" width="100" height="100" fill="green" transform="rotate(45)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-011.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-011.html new file mode 100644 index 0000000000..d6164c0444 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-011.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with unit less angle</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-rotate-angle-45-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-142"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 106,37 175,106 106,175 37,106 Z" fill="red"/> + <rect x="100" y="-50" width="100" height="100" fill="green" transform="rotate(405)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-022.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-022.html new file mode 100644 index 0000000000..4542f7597d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-45-022.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for arguments in degree</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="match" href="reference/svg-rotate-angle-45-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-142"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for angle arguments in degree. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 106,37 175,106 106,175 37,106 Z" fill="red"/> + <rect x="100" y="-50" width="100" height="100" fill="green" transform="rotate(450e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-001.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-001.html new file mode 100644 index 0000000000..86956f7bca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and angle argument without unit on rotate</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-rotate-angle-90-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support unit less arguments for angle. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-006.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-006.html new file mode 100644 index 0000000000..80bf689cf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate with negative, unit less turn</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-rotate-angle-90-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support negative unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(-270)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-011.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-011.html new file mode 100644 index 0000000000..94dd286f49 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and more than full circle rotate with unit less angle</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-rotate-angle-90-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(450)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-016.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-016.html new file mode 100644 index 0000000000..8d8f8f9940 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-016.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers on unit less angles</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="match" href="reference/svg-rotate-angle-90-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support scientific numbers for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(9.0e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-021.html b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-021.html new file mode 100644 index 0000000000..f72e05af03 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate/svg-rotate-angle-90-021.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and rotate with scientific numbers with negative exponents for unit less arguments</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-angle"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <link rel="match" href="reference/svg-rotate-angle-90-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rotate transform function must support scientific numbers with negative exponents for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="0" y="-100" width="100" height="100" fill="green" transform="rotate(900e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotateY-180deg-with-overflow-scroll-ref.html b/testing/web-platform/tests/css/css-transforms/rotateY-180deg-with-overflow-scroll-ref.html new file mode 100644 index 0000000000..71b94d146b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotateY-180deg-with-overflow-scroll-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> +.container { + transform: rotateY(180deg); + width: 100px; + height: 100px; + overflow: scroll; + background: green; +} +.content { + width: 300px; + height: 300px; +} +</style> +<div class="container"> + <div class="content"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/rotateY-180deg-with-overflow-scroll.html b/testing/web-platform/tests/css/css-transforms/rotateY-180deg-with-overflow-scroll.html new file mode 100644 index 0000000000..195481d785 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotateY-180deg-with-overflow-scroll.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Test (Transforms): rotateY(180deg) and overflow scroll</title> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2"> +<link rel="match" href="rotateY-180deg-with-overflow-scroll-ref.html"> +<style> +.container { + transform: rotateY(180deg); + width: 100px; + height: 100px; + overflow: scroll; +} +.content { + width: 300px; + height: 300px; +} +</style> +<div class="container"> + <div class="content" style="background: green"></div> +</div> +<div class="container" style="backface-visibility: hidden"> + <div class="content" style="background: red"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/rotateY.html b/testing/web-platform/tests/css/css-transforms/rotateY.html new file mode 100644 index 0000000000..593969a7a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotateY.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with rotateY</title> + <link rel="author" title="Zou Rui" href="mailto:zrxldl@gmail.com"> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-05 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotatey"> + <link rel="match" href="reference/rotateY-ref.html"> + <meta name="assert" content="When the value of transform is 'rotateY(90deg)', the foward side of a transformed element disappears."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + } + + .redSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: red; + transform: rotateY(90deg); + } + + .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 class="redSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate_45deg-ref.html b/testing/web-platform/tests/css/css-transforms/rotate_45deg-ref.html new file mode 100644 index 0000000000..1cac0b893d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate_45deg-ref.html @@ -0,0 +1,30 @@ +<!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 Reference File</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <style type="text/css"> + .container { + height: 100px; + width: 100px; + background-color:#fff; + border:1px solid black; + } + + .transformed { + position: relative; + left:15px; + height: 100px; + width: 70.7px; + background-color:green; + } + </style> + + </head> + <body> + <div class="container"> + <div class="transformed"></div> + </div> + <p>45 degree rotate on y axis</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate_45deg.html b/testing/web-platform/tests/css/css-transforms/rotate_45deg.html new file mode 100644 index 0000000000..3c9b741be1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate_45deg.html @@ -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 Test: rotateY with perspective produces a trapezoid</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"/> + <link rel="match" href="rotate_45deg-ref.html"/> + <meta name="fuzzy" content="maxDifference=159-255;totalPixels=50-200"> + <meta name="assert" content="Rotate 45 degree in y axis"/> + <style type="text/css"> + .container { + border: 1px solid black; + height: 100px; + width: 100px; + background-color:#fff; + } + .transformed { + transform: rotateY(45deg); + background-color:green; + height: 100px; + } + </style> + + </head> + <body> + <div class="container"> + <div class="transformed"></div> + </div> + <p>45 degree rotate on y axis</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate_x_45deg-ref.html b/testing/web-platform/tests/css/css-transforms/rotate_x_45deg-ref.html new file mode 100644 index 0000000000..f38b34e639 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate_x_45deg-ref.html @@ -0,0 +1,30 @@ +<!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 Reference File</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <style type="text/css"> + .container { + height: 100px; + width: 100px; + background-color:#fff; + border:1px solid black; + } + + .transformed { + position: relative; + top:15px; + width: 100px; + height: 70.7px; + background-color:green; + } + </style> + + </head> + <body> + <p>There is one green area in the box</p> + <div class="container"> + <div class="transformed"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate_x_45deg.html b/testing/web-platform/tests/css/css-transforms/rotate_x_45deg.html new file mode 100644 index 0000000000..5d66279bcf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate_x_45deg.html @@ -0,0 +1,32 @@ +<!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 Test: rotateX with perspective produces a trapezoid</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/> + <link rel="match" href="rotate_x_45deg-ref.html"/> + <meta name="fuzzy" content="maxDifference=159-255;totalPixels=50-200"> + <meta name="assert" content="Rotate 45 degree in y axis"/> + <style type="text/css"> + .container { + border: 1px solid black; + height: 100px; + width: 100px; + background-color:#fff; + } + .transformed { + transform: rotateX(45deg); + background-color:green; + height: 100px; + } + </style> + + </head> + <body> + <p>There is one green area in the box</p> + <div class="container"> + <div class="transformed"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate_y_45deg-ref.html b/testing/web-platform/tests/css/css-transforms/rotate_y_45deg-ref.html new file mode 100644 index 0000000000..2d404677f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate_y_45deg-ref.html @@ -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 Reference File</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <style type="text/css"> + .container { + height: 100px; + width: 100px; + background-color:#fff; + border:1px solid black; + } + + .transformed { + position: relative; + left:15px; + height: 100px; + width: 70.7px; + background-color:green; + } + </style> + + </head> + <body> + <p>There is one green area in the box</p> + <div class="container"> + <div class="transformed"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotate_y_45deg.html b/testing/web-platform/tests/css/css-transforms/rotate_y_45deg.html new file mode 100644 index 0000000000..a7c59464b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotate_y_45deg.html @@ -0,0 +1,32 @@ +<!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 Test: rotateY with perspective produces a trapezoid</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/> + <link rel="match" href="rotate_y_45deg-ref.html"/> + <meta name="fuzzy" content="maxDifference=159-255;totalPixels=50-200"> + <meta name="assert" content="Rotate 45 degree in y axis"/> + <style type="text/css"> + .container { + border: 1px solid black; + height: 100px; + width: 100px; + background-color:#fff; + } + .transformed { + transform: rotateY(45deg); + background-color:green; + height: 100px; + } + </style> + + </head> + <body> + <p>There is one green area in the box</p> + <div class="container"> + <div class="transformed"></div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/rotated-clip-under-opacity.html b/testing/web-platform/tests/css/css-transforms/rotated-clip-under-opacity.html new file mode 100644 index 0000000000..195b2e00d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/rotated-clip-under-opacity.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1314671"> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="match" href="reference/green.html"> +<p>Pass if there is NO red below:</p> +<div style="width: 100px; height: 100px; position: absolute; background: green"> + <div style="transform: rotate(60deg); opacity: 0.5; overflow: hidden; width: 100px; height: 400px"> + <div style="will-change: transform; transform: rotate(-60deg); width: 100px; height: 400px; background: white"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/scale-optional-second-001.html b/testing/web-platform/tests/css/css-transforms/scale-optional-second-001.html new file mode 100644 index 0000000000..17cc4f50d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale-optional-second-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function and one parameter</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/scale-optional-second-ref.html"> + <meta name="assert" content="If the second parameter of scale function is not provided, it takes a value equal to the first. This transform causes the element to appear twice as long in both the X and Y axes."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background: green; + transform:scale(2); + } + .redSquare { + position: absolute; + top: 52px; + left: 52px; + width: 196px; + height: 196px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="redSquare"></div> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scale-transform-overlap-ref.html b/testing/web-platform/tests/css/css-transforms/scale-transform-overlap-ref.html new file mode 100644 index 0000000000..4750764ae9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale-transform-overlap-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<head> + <title>CSS Test (Transforms): Tests overlap testing + clipping + scale transforms + compositing.</title> + <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/"> +</head> +<style> + div { + position: absolute; + width: 50px; + height: 50px; + transform-origin: 0px 0px; + } +</style> +<div style="width: 250px; height: 100px; transform: translate(-250px, 50px) scale(1.8, 1.8);"> + <div style="transform: translate(160px, 0px)"> + <div style="background: lightblue"></div> + <div style="background: green; left: 10px; top: 10px;"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-transforms/scale-transform-overlap.html b/testing/web-platform/tests/css/css-transforms/scale-transform-overlap.html new file mode 100644 index 0000000000..0cb8db40b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale-transform-overlap.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<head> + <title>CSS Test (Transforms): Tests overlap testing + clipping + scale transforms + compositing.</title> + <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/"> + <link rel="match" href="scale-transform-overlap-ref.html"> +</head> +<style> + div { + position: absolute; + width: 50px; + height: 50px; + transform-origin: 0px 0px; + } +</style> +<div style="width: 250px; height: 100px; overflow: hidden; transform: translate(-250px, 50px) scale(1.8, 1.8);"> + <div style="transform: translate(160px, 0px)"> + <div style="background: lightblue; will-change: transform"></div> + <div style="background: green; left: 10px; top: 10px;"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-transforms/scale-zero-001.html b/testing/web-platform/tests/css/css-transforms/scale-zero-001.html new file mode 100644 index 0000000000..1b51e01589 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale-zero-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function and zero values</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/scale-zero-ref.html"> + <meta name="assert" content="If zero value is passed to scale function, it causes the element to disappear."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + } + .redSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: red; + transform: scale(0); + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="greenSquare"></div> + <div class="redSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scale/reference/svg-scale-ref.html b/testing/web-platform/tests/css/css-transforms/scale/reference/svg-scale-ref.html new file mode 100644 index 0000000000..1b03454e92 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/reference/svg-scale-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-001.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-001.html new file mode 100644 index 0000000000..e87df4a98d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale 0.5 with only one parameter specified</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If the second parameter of the scale function is not provided, it is takes a value equal to the first. The red rect in this test should be scaled down 0.5 vertically and horizontally to be completely hidden by the green rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="1" y="1" width="196" height="196" fill="red" transform="scale(0.5)"/> + <rect x="0" y="0" width="100" height="100" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-002.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-002.html new file mode 100644 index 0000000000..2d1e975523 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale 1.5 with only one parameter specified</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If the second parameter is not provided, it is takes a value equal to the first. The green rect in this test should be scaled up 1.5 vertically and horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="100" height="100" fill="green" transform="scale(1.5)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-003.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-003.html new file mode 100644 index 0000000000..45501bbdb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale 2 with only one parameter specified</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If the second parameter is not provided, it is takes a value equal to the first. The green rect in this test should be scaled up 2 vertically and horizontally to completely cover the red rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="75" height="75" fill="green" transform="scale(2)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-004.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-004.html new file mode 100644 index 0000000000..728dce1efe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale 0.5 with parameters separated by commas + no whitespace</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Parameters in the scale function can be separated by commas and no whitespace. The red rect in this test should be scaled down 0.5 to completely cover the green rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="1" y="1" width="196" height="196" fill="red" transform="scale(0.5,0.5)"/> + <rect width="100" height="100" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-006.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-006.html new file mode 100644 index 0000000000..a45d2319ea --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-006.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale horizontally 0.5 and vertically 1.5</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The green rect in the test should be scaled down horizontally and up vertically to form a square and completely cover the red rect."> + <style type="text/css"> + svg { + width: 500px; + height: 500px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="1" y="1" width="198" height="198" fill="red"/> + <rect width="400" height="133.333" fill="green" transform="scale(0.5, 1.5)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-007.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-007.html new file mode 100644 index 0000000000..07a3923de6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-007.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale horizontally 1.5 and vertically 0.5</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The green rect in the test should be scaled up horizontally and down vertically to form a square completely cover the red rect."> + <style type="text/css"> + svg { + width: 500px; + height: 500px; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="1" y="1" width="198" height="198" fill="red"/> + <rect width="133.333" height="400" fill="green" transform="scale(1.5, 0.5)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-008.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-008.html new file mode 100644 index 0000000000..5c91cc9be2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-008.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale 0.5 on the g element </title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The group containing the red rect in this test should be scaled down 0.5 to be completely hidden behind the green rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <g transform="scale(0.5)"> + <rect x="1" y="1" width="296" height="296" fill="red"/> + </g> + <rect width="150" height="150" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-009.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-009.html new file mode 100644 index 0000000000..8b33f1eada --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-009.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale 0.5 on the g element and scale 0.5 on the rect element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The group containing the red rect in this test should be scaled down 0.5 and the red rect should be scaled down again 0.5 to be completely hidden behind the green rect."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <g transform="scale(0.5)"> + <rect x="1" y="1" width="592" height="592" fill="red" transform="scale(0.5)"/> + </g> + <rect width="150" height="150" fill="green"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-010.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-010.html new file mode 100644 index 0000000000..3bae506c5f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-010.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale -0.5 with only one parameter specified</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element and if the second parameter of the scale function is not provided, it is takes a value equal to the first. The green rect in this test should be flipped downward and rightward into view and scaled down 0.5 horizontally and vertically to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="-400" y="-400" width="400" height="400" fill="green" transform="scale(-0.5)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-011.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-011.html new file mode 100644 index 0000000000..dd02c3ceb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-011.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale -2 with only one parameter specified</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element and if the second parameter of the scale function is not provided, it is takes a value equal to the first. The green rect in this test flipped rightward and downard into view and scaled up 2 to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="-100" y="-100" width="100" height="100" fill="green" transform="scale(-2)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-012.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-012.html new file mode 100644 index 0000000000..641de40522 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-012.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale -0.5 with parameters separated by commas + no whitespace</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element and parameters to the scale function can be separated by commas with no whitespace. The green rect in this test should be flipped downward and rightward into view right scaled down 0.5 to to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="-400" y="-400" width="400" height="400" fill="green" transform="scale(-0.5,-0.5)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-013.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-013.html new file mode 100644 index 0000000000..d94e0b7d09 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-013.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale horizontally -0.5 and vertically -1.25</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element. The green rect in this test should be flipped downward and rightward into view and scaled down horizontally and up vertically to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="-400" y="-160" width="400" height="160" fill="green" transform="scale(-0.5, -1.25)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-014.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-014.html new file mode 100644 index 0000000000..f2acf1b0c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-014.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale horizontally -1.25 and vertically -0.5</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element. The green rect in this test should be flipped downward and rightward into view and scaled up horizontally and down vertically to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="-160" y="-400" width="160" height="400" fill="green" transform="scale(-1.25, -0.5)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-015.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-015.html new file mode 100644 index 0000000000..ecc85c76bc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-015.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale horizontally -0.5 and vertically 1.5</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element. The green rect in this test should be flipped rightward into view and scaled down horizontally and up vertically to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="-400" y="0" width="400" height="133.333" fill="green" transform="scale(-0.5, 1.5)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-016.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-016.html new file mode 100644 index 0000000000..9b562597c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-016.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale horizontally 1.5 and vertically -0.5</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element. The green rect in this test should be flipped downward into view and scaled up horizontally and down vertically to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <rect x="0" y="-400" width="133.333" height="400" fill="green" transform="scale(1.5, -0.5)"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scale/svg-scale-017.html b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-017.html new file mode 100644 index 0000000000..c939b783de --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scale/svg-scale-017.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and scale -0.5 on the g element</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <link rel="match" href="reference/svg-scale-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Scaling by a negative value should flip the element. The group containing the green rect in this test should be flipped downard and rightward into view and scaled down horizontally and vertically to completely cover the red background."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if you see a green square and no red.</p> + <svg> + <g transform="scale(-0.5)"> + <rect x="-400" y="-400" width="400" height="400" fill="green"/> + </g> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scalex-ref.html b/testing/web-platform/tests/css/css-transforms/scalex-ref.html new file mode 100644 index 0000000000..72d37587bb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scalex-ref.html @@ -0,0 +1,21 @@ +<!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 Reference File</title> + <style type="text/css"> + .container { + background-color: green; + height: 100px; + width: 200px; + margin-left: 450px; + } + </style> + + </head> + <body> + <p>You should see only 1 green area, no red area.</p> + <div class="container"> + <div class="transformed"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scalex.html b/testing/web-platform/tests/css/css-transforms/scalex.html new file mode 100644 index 0000000000..9669dc8d88 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scalex.html @@ -0,0 +1,38 @@ +<!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 Test: test scale x</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-scalex"/> + <link rel="match" href="scalex-ref.html"/> + <meta name="assert" content="scale x 2"/> + <style type="text/css"> + .container { + z-index: 11; + position: absolute; + height: 100px; + width: 100px; + margin-left: 500px; + transform: scaleX(2); + background-color: green; + } + + .hidden { + z-index: 10; + background-color: red; + position: absolute; + height: 100px; + width: 200px; + margin-left: 450px; + } + </style> + + </head> + <body> + <p>You should see only 1 green area, no red area.</p> + <div class="container"> + </div> + <div class="hidden"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scaley-ref.html b/testing/web-platform/tests/css/css-transforms/scaley-ref.html new file mode 100644 index 0000000000..bbee44c13c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scaley-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + <head> + <title>CSS Reference File</title> + <style type="text/css"> + .container { + position: absolute; + height: 200px; + width: 100px; + background-color:green; + margin-top: 150px; + } + </style> + + </head> + <body> + <p>You should see only 1 green area.</p> + <div class="container"> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scaley.html b/testing/web-platform/tests/css/css-transforms/scaley.html new file mode 100644 index 0000000000..293855c8f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scaley.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> + <head> + <title>CSS Test: test scale y</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-scaley"/> + <link rel="match" href="scaley-ref.html"/> + <meta name="assert" content="scale y 2"/> + <style type="text/css"> + .container { + position: absolute; + z-index: 11; + height: 100px; + width: 100px; + background-color:green; + margin-top: 200px; + transform: scaleY(2); + } + + .hidden { + position: absolute; + z-index: 10; + height: 200px; + width: 100px; + background-color:red; + margin-top: 150px; + } + </style> + + </head> + <body> + <p>You should see only 1 green area.</p> + <div class="container"> + </div> + + <div class="hidden"> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scroll-preserve-3d.html b/testing/web-platform/tests/css/css-transforms/scroll-preserve-3d.html new file mode 100644 index 0000000000..ffedc2f5cd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scroll-preserve-3d.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="help" href="https://www.w3.org/TR/cssom-view-1/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<style> +body, h1 { margin: 20px; } +#vp { + height: 400px; + width: 600px; + overflow: scroll; + left: 10px; + top: 10px; + border: 5px solid #8cf; +} +</style> +</head> +<body> +<div id="vp"> + <div style="transform-style: preserve-3d"> + <h1 style="height:2000px; transform: translateZ(0)"> + Gazing into the stars + </h1> + </div> +</div> +<script> + promise_test(async () => { + let scroll_promise = new Promise((resolve, reject) => { + vp.addEventListener("scroll", resolve); + }); + await new test_driver.Actions().scroll(100, 100, 0, 50).send(); + await scroll_promise; + assert_true(vp.scrollTop > 0); + }, "Element is scrollable over preserve-3d descendant"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/scrollable-hidden-3d-transform-z-ref.html b/testing/web-platform/tests/css/css-transforms/scrollable-hidden-3d-transform-z-ref.html new file mode 100644 index 0000000000..b2399db472 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scrollable-hidden-3d-transform-z-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scrollable-hidden-3d-transform-z.html b/testing/web-platform/tests/css/css-transforms/scrollable-hidden-3d-transform-z.html new file mode 100644 index 0000000000..7f4c6d14f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scrollable-hidden-3d-transform-z.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Seokho Song" href="mailto:0xdevssh@gmail.com"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering/"> +<link rel="match" href="scrollable-hidden-3d-transform-z-ref.html"> +<style> +#container { + width: 100px; + height: 100px; + background: green; + position: relative; + transform-style: preserve-3d; +} +#scroller { + width: 100px; + height: 100px; + background: red; + position: absolute; + transform: translateZ(-1px); + overflow-y: hidden; +} +</style> +<div id="container"> + <div id="scroller"> + <div style="height: 300px"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/scrollable-scroll-3d-transform-z-ref.html b/testing/web-platform/tests/css/css-transforms/scrollable-scroll-3d-transform-z-ref.html new file mode 100644 index 0000000000..b2399db472 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scrollable-scroll-3d-transform-z-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/scrollable-scroll-3d-transform-z.html b/testing/web-platform/tests/css/css-transforms/scrollable-scroll-3d-transform-z.html new file mode 100644 index 0000000000..0f7ee00cf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/scrollable-scroll-3d-transform-z.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Seokho Song" href="mailto:0xdevssh@gmail.com"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering/"> +<link rel="match" href="scrollable-scroll-3d-transform-z-ref.html"> +<style> +#container { + width: 100px; + height: 100px; + background: green; + position: relative; + transform-style: preserve-3d; +} +#scroller { + width: 100px; + height: 100px; + background: red; + position: absolute; + transform: translateZ(-1px); + overflow-y: scroll; +} +</style> +<div id="container"> + <div id="scroller"> + <div style="height: 300px"></div> + </div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/size-change-under-backface-visibility-hidden-ref.html b/testing/web-platform/tests/css/css-transforms/size-change-under-backface-visibility-hidden-ref.html new file mode 100644 index 0000000000..e9362c3574 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/size-change-under-backface-visibility-hidden-ref.html @@ -0,0 +1,9 @@ +<!doctype HTML> +<title>CSS Test</title> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org" /> +Passes if it shows a green 200x200 square. +<div style="will-change: transform; width: 300px; height: 0px"> + <div style="width: 1px; height: 1px; backface-visibility: hidden;"> + <div id=target style="width: 200px; height: 200px; position: relative; background: green; left: 10px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/size-change-under-backface-visibility-hidden.html b/testing/web-platform/tests/css/css-transforms/size-change-under-backface-visibility-hidden.html new file mode 100644 index 0000000000..1543eeb3da --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/size-change-under-backface-visibility-hidden.html @@ -0,0 +1,22 @@ +<!doctype HTML> +<html class="reftest-wait"> + <title>CSS Test: Test for re-paint after resizing an element underneath a backface-visibility hidden element</title> + <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org" /> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility"> + <link rel="match" href="size-change-under-backface-visibility-hidden-ref.html"> + <script src="/common/reftest-wait.js"></script> + Passes if it shows a green 200x200 square. + <div style="will-change: transform; width: 300px; height: 0px"> + <div style="width: 1px; height: 1px; backface-visibility: hidden;"> + <div id=target style="width: 200px; height: 0px; position: relative; background: green; left: 10px;"></div> + </div> + </div> + <script> + onload = function() { + requestAnimationFrame(() => requestAnimationFrame(() => { + target.style.height = '200px'; + takeScreenshot(); + })); + }; + </script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skew-test1.html b/testing/web-platform/tests/css/css-transforms/skew-test1.html new file mode 100644 index 0000000000..b96c2e0402 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skew-test1.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- Based on a test that was submitted from TestTWF Paris --> +<meta charset="utf-8"> +<title>Testing 1 - skew()</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="author" title="Myriam Goude" href="mailto:mymygo@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="svg"> +<meta name="assert" content="The two skew_div squares in this test have skew transform applied, with a different angle in each axis: 45deg on x and 135deg on y. The red polygon should be totally hidden by the green skewed square; and the orange skewed square should be totally hidden by the white polygon."> +<style> + .green_container { + background-color: green; + height: 100px; + width: 100px; + position: relative; + } + + .skew_div { + position: absolute; + width: 40px; + height: 40px; + box-sizing: border-box; + transform: skew(45deg,135deg); + transform-origin:0 0; + } + .front { + /* This one is positioned in front of a red reference polygon: */ + top: 50px; + left: 10px; + background: green; + z-index: 1; + } + .back { + /* This one is positioned in back of a white reference polygon: */ + top: 50px; + left: 110px; + background: orange; + z-index: -1; + } +</style> +<p> + Test passes if there is a filled green square and <strong>no red</strong>. +</p> +<div class="green_container"> + <!-- These divs should both render as 80px-tall-and-wide diamond shapes. --> + <div class="skew_div front"></div> + <div class="skew_div back"></div> + + <svg width="300px" height="100px"> + <g transform="translate(10,10)"> + <!-- A diamond-shaped red polygon, slightly less than 80px tall and + wide (should be covered up by the green 'front' div) --> + <polygon points="2,40 40,2 78,40 40,78" fill="red"></polygon> + </g> + <g transform="translate(110,10)"> + <!-- A diamond-shaped white polygon, slightly more than 80px tall and + wide (should cover up the orange 'back' div) --> + <polygon points="-2,40 40,-2 82,40 40,82" fill="white"></polygon> + </g> + </svg> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewx-ref.html b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewx-ref.html new file mode 100644 index 0000000000..9504c266b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewx-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html new file mode 100644 index 0000000000..22b857ffb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-001.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-001.html new file mode 100644 index 0000000000..8c3181b089 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and angle argument without unit on skewX</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support unit less arguments for angle. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(45)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-006.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-006.html new file mode 100644 index 0000000000..9f3f3c3362 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX with negative, unit less turn</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support negative, unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(-315)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-011.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-011.html new file mode 100644 index 0000000000..e7539d23da --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and more than full circle skewX with unit less angle</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(405)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-016.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-016.html new file mode 100644 index 0000000000..29078907f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-016.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers on unit less angles</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(4.5e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-021.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-021.html new file mode 100644 index 0000000000..73944503df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-021.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers with negative exponents for unit less arguments</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewX transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + height: 250px; + width: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 2,1 100,1 198,99 101,99 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(450e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-with-units.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-with-units.html new file mode 100644 index 0000000000..128ee49a7c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewx-with-units.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG transform attribute with units on skewX</title> + <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2623"> + <link rel="match" href="reference/svg-skewx-ref.html"> + <meta name="assert" content="The skewX transform function should not support the CSS transform syntax with units. The green rects in this test should have no transform applied."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg width="250" height="250" style="background: green"> + <rect width="100" height="100" fill="red"/> + <rect y="0" width="100" height="50" fill="green" transform="skewX(45deg)"/> + <rect y="50" width="100" height="50" fill="green" transform="skewX(45rad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewX/svg-skewxy-001.html b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewxy-001.html new file mode 100644 index 0000000000..0eee25c5df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewX/svg-skewxy-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute with skewX and skewY</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewx"> + <link rel="match" href="reference/svg-skewxy-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The green rect in this test should be skewed horizontally 45 degrees and vertically 45 degrees to completely cover the red path."> + <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-1"> + <style type="text/css"> + svg { + height: 300px; + width: 300px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 4,3 101,98 295,196 200,101 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewX(45) skewY(45)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewY/reference/svg-skewy-ref.html b/testing/web-platform/tests/css/css-transforms/skewY/reference/svg-skewy-ref.html new file mode 100644 index 0000000000..60135e94fe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewY/reference/svg-skewy-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect width="100%" height="100%" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-001.html b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-001.html new file mode 100644 index 0000000000..a5678f30fb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and angle argument without unit on skewY</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewy"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewy-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewY transform function must support unit less arguments for angle. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 2,99 99,197 99,101 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewY(45)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-006.html b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-006.html new file mode 100644 index 0000000000..51d7b76897 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-006.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewY with negative, unit less turn</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewy"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewy-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewY transform function must support negative, unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 2,99 99,197 99,101 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewY(-315)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-011.html b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-011.html new file mode 100644 index 0000000000..89f0aa9e62 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-011.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and more than full circle skewY with unit less angle</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewy"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-skewy-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewY transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 2,99 99,197 99,101 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewY(405)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-016.html b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-016.html new file mode 100644 index 0000000000..fee2331f96 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-016.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewY with scientific numbers on unit less angles</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewy"> + <link rel="match" href="reference/svg-skewy-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewY transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 2,99 99,197 99,101 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewY(4.5e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-021.html b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-021.html new file mode 100644 index 0000000000..5905e79c0d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-021.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and skewY with scientific numbers with negative exponents for unit less arguments</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-skewy"> + <link rel="match" href="reference/svg-skewy-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-2"> + <meta name="flags" content="svg"> + <meta name="assert" content="The skewY transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path."> + <style type="text/css"> + svg { + width: 250px; + height: 250px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <path d="M 1,2 2,99 99,197 99,101 Z" fill="red"/> + <rect width="100" height="100" fill="green" transform="skewY(450e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-with-units.html b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-with-units.html new file mode 100644 index 0000000000..c724051ae8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/skewY/svg-skewy-with-units.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG transform attribute with units on skewY</title> + <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2623"> + <link rel="match" href="reference/svg-skewy-ref.html"> + <meta name="assert" content="The skewY transform function should not support the CSS transform syntax with units. The green rects in this test should have no transform applied."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg width="250" height="250" style="background: green"> + <rect width="100" height="100" fill="red"/> + <rect y="0" width="100" height="50" fill="green" transform="skewY(45deg)"/> + <rect y="50" width="100" height="50" fill="green" transform="skewY(45rad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-perspective-backface-hidden-ref.html b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-backface-hidden-ref.html new file mode 100644 index 0000000000..8413e3e2d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-backface-hidden-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="padding: 0.4px 0.6px"> + <div style="width: 100px; height: 100px; border: 1px solid black"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-perspective-backface-hidden.html b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-backface-hidden.html new file mode 100644 index 0000000000..6c1d359cb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-backface-hidden.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link ref="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#backface-visibility-property"> +<link rel="match" href="subpixel-perspective-backface-hidden-ref.html"> +<meta name="assert" content="Subpixel-positioned contents should be rendered the same regardless of perspective and backface-visibility:hidden"> +<div style="padding: 0.4px 0.6px"> + <div style="perspective: 1000px; backface-visibility: hidden"> + <div style="width: 100px; height: 100px; + backface-visibility: hidden;border: 1px solid black"> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-perspective-translate-z-0-ref.html b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-translate-z-0-ref.html new file mode 100644 index 0000000000..5f3a8e279b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-translate-z-0-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="padding: 0.6px 0.4px"> + <div style="width: 100px; height: 100px; border: 1px solid black"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-perspective-translate-z-0.html b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-translate-z-0.html new file mode 100644 index 0000000000..4033e46f8a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-perspective-translate-z-0.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link ref="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility"> +<link rel="match" href="subpixel-perspective-translate-z-0-ref.html"> +<meta name="assert" content="Subpixel-positioned contents should be rendered the same regardless of perspective and translateZ(0)"> +<div style="position: relative; top: 0.6px; left: 0.4px; width: 300px; height: 300px; + perspective: 1000px; overflow: hidden"> + <div style="width: 100px; height: 100px; + transform: translateZ(0); border: 1px solid black"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-001.html b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-001.html new file mode 100644 index 0000000000..303cd32801 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Transforms Test: Subpixel transform changes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<link rel="match" href="reference/subpixel-transform-changes-001-ref.html"> +<meta name="assert" content="Test checks that subpixel transform changes work as expected."> + +<div id="translateX1" style="transform: translateX(0.12px);">transform: translateX(0.48px);</div> +<div id="translateX2" style="transform: translateX(0.56px);">transform: translateX(3.17px);</div> +<div id="translateX3" style="transform: translateX(1.87px);">transform: translateX(0.34px);</div> + +<div id="translateY1" style="transform: translateY(0.12px);">transform: translateY(0.48px);</div> +<div id="translateY2" style="transform: translateY(0.56px);">transform: translateY(3.17px);</div> +<div id="translateY3" style="transform: translateY(1.87px);">transform: translateY(0.34px);</div> + +<div id="translateZ1" style="transform: translateZ(0.12px);">transform: translateZ(0.48px);</div> +<div id="translateZ2" style="transform: translateZ(0.56px);">transform: translateZ(3.17px);</div> +<div id="translateZ3" style="transform: translateZ(1.87px);">transform: translateZ(0.34px);</div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + translateX1.style.transform = "translateX(0.48px)"; + translateX2.style.transform = "translateX(3.17px)"; + translateX3.style.transform = "translateX(0.34px)"; + + translateY1.style.transform = "translateY(0.48px)"; + translateY2.style.transform = "translateY(3.17px)"; + translateY3.style.transform = "translateY(0.34px)"; + + translateZ1.style.transform = "translateZ(0.48px)"; + translateZ2.style.transform = "translateZ(3.17px)"; + translateZ3.style.transform = "translateZ(0.34px)"; + + document.documentElement.classList.remove("reftest-wait"); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-002.html b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-002.html new file mode 100644 index 0000000000..928d00d465 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Transforms Test: Subpixel transform changes 'backface-visibility: hidden'</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<link rel="match" href="reference/subpixel-transform-changes-002-ref.html"> +<meta name="assert" content="Test checks that subpixel transform changes work as expected regardless of 'backface-visibility: hidden'."> +<style> +div { + backface-visibility: hidden; +} +</style> + +<div id="translateX1" style="transform: translateX(0.12px);">transform: translateX(0.48px);</div> +<div id="translateX2" style="transform: translateX(0.56px);">transform: translateX(3.17px);</div> +<div id="translateX3" style="transform: translateX(1.87px);">transform: translateX(0.34px);</div> + +<div id="translateY1" style="transform: translateY(0.12px);">transform: translateY(0.48px);</div> +<div id="translateY2" style="transform: translateY(0.56px);">transform: translateY(3.17px);</div> +<div id="translateY3" style="transform: translateY(1.87px);">transform: translateY(0.34px);</div> + +<div id="translateZ1" style="transform: translateZ(0.12px);">transform: translateZ(0.48px);</div> +<div id="translateZ2" style="transform: translateZ(0.56px);">transform: translateZ(3.17px);</div> +<div id="translateZ3" style="transform: translateZ(1.87px);">transform: translateZ(0.34px);</div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + translateX1.style.transform = "translateX(0.48px)"; + translateX2.style.transform = "translateX(3.17px)"; + translateX3.style.transform = "translateX(0.34px)"; + + translateY1.style.transform = "translateY(0.48px)"; + translateY2.style.transform = "translateY(3.17px)"; + translateY3.style.transform = "translateY(0.34px)"; + + translateZ1.style.transform = "translateZ(0.48px)"; + translateZ2.style.transform = "translateZ(3.17px)"; + translateZ3.style.transform = "translateZ(0.34px)"; + + document.documentElement.classList.remove("reftest-wait"); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-003.html b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-003.html new file mode 100644 index 0000000000..e28d80a29d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-003.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Transforms Test: Subpixel transform changes fixed positioning</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<link rel="match" href="reference/subpixel-transform-changes-003-ref.html"> +<meta name="assert" content="Test checks that subpixel transform changes work as expected regardless of fixed positioning."> +<style> +div { + position: fixed; + left: 10px; +} +</style> + +<div id="translateX1" style="transform: translateX(0.12px); top: 0px;">transform: translateX(0.48px);</div> +<div id="translateX2" style="transform: translateX(0.56px); top: 30px;">transform: translateX(3.17px);</div> +<div id="translateX3" style="transform: translateX(1.87px); top: 60px;">transform: translateX(0.34px);</div> + +<div id="translateY1" style="transform: translateY(0.12px); top: 90px;">transform: translateY(0.48px);</div> +<div id="translateY2" style="transform: translateY(0.56px); top: 120px;">transform: translateY(3.17px);</div> +<div id="translateY3" style="transform: translateY(1.87px); top: 150px;">transform: translateY(0.34px);</div> + +<div id="translateZ1" style="transform: translateZ(0.12px); top: 180px;">transform: translateZ(0.48px);</div> +<div id="translateZ2" style="transform: translateZ(0.56px); top: 210px;">transform: translateZ(3.17px);</div> +<div id="translateZ3" style="transform: translateZ(1.87px); top: 240px;">transform: translateZ(0.34px);</div> + +<!-- Force overflow on the body element. --> +<div style="width: 200vw; height: 300vh;"></div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + translateX1.style.transform = "translateX(0.48px)"; + translateX2.style.transform = "translateX(3.17px)"; + translateX3.style.transform = "translateX(0.34px)"; + + translateY1.style.transform = "translateY(0.48px)"; + translateY2.style.transform = "translateY(3.17px)"; + translateY3.style.transform = "translateY(0.34px)"; + + translateZ1.style.transform = "translateZ(0.48px)"; + translateZ2.style.transform = "translateZ(3.17px)"; + translateZ3.style.transform = "translateZ(0.34px)"; + + document.documentElement.classList.remove("reftest-wait"); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-004.html b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-004.html new file mode 100644 index 0000000000..bd862957d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/subpixel-transform-changes-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Transforms Test: Subpixel transform changes trivial 3D</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<link rel="match" href="reference/subpixel-transform-changes-004-ref.html"> +<meta name="assert" content="Test checks that subpixel transform changes work as expected regardless of trivial 3D transforms."> + +<div id="translateX1" style="transform: translate3d(0.12px, 0px, 0px);">transform: translate3d(0.48px, 0px, 0px);</div> +<div id="translateX2" style="transform: translate3d(0.56px, 0px, 0px);">transform: translate3d(3.17px, 0px, 0px);</div> +<div id="translateX3" style="transform: translate3d(1.87px, 0px, 0px);">transform: translate3d(0.34px, 0px, 0px);</div> + +<div id="translateY1" style="transform: translate3d(0px, 0.12px, 0px);">transform: translate3d(0px, 0.48px, 0px);</div> +<div id="translateY2" style="transform: translate3d(0px, 0.56px, 0px);">transform: translate3d(0px, 3.17px, 0px);</div> +<div id="translateY3" style="transform: translate3d(0px, 1.87px, 0px);">transform: translate3d(0px, 0.34px, 0px);</div> + +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + translateX1.style.transform = "translate3d(0.48px, 0px, 0px)"; + translateX2.style.transform = "translate3d(3.17px, 0px, 0px)"; + translateX3.style.transform = "translate3d(0.34px, 0px, 0px)"; + + translateY1.style.transform = "translate3d(0px, 0.48px, 0px)"; + translateY2.style.transform = "translate3d(0px, 3.17px, 0px)"; + translateY3.style.transform = "translate3d(0px, 0.34px, 0px)"; + + document.documentElement.classList.remove("reftest-wait"); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/support/1x1-green.png b/testing/web-platform/tests/css/css-transforms/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-transforms/support/1x1-lime.png b/testing/web-platform/tests/css/css-transforms/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/css-transforms/support/1x1-maroon.png b/testing/web-platform/tests/css/css-transforms/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/css-transforms/support/1x1-navy.png b/testing/web-platform/tests/css/css-transforms/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/css-transforms/support/1x1-red.png b/testing/web-platform/tests/css/css-transforms/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-transforms/support/1x1-white.png b/testing/web-platform/tests/css/css-transforms/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/1x1-white.png diff --git a/testing/web-platform/tests/css/css-transforms/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-transforms/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/css-transforms/support/60x60-green.png b/testing/web-platform/tests/css/css-transforms/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/60x60-green.png diff --git a/testing/web-platform/tests/css/css-transforms/support/a-green.css b/testing/web-platform/tests/css/css-transforms/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/css-transforms/support/b-green.css b/testing/web-platform/tests/css/css-transforms/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/support/c-red.css b/testing/web-platform/tests/css/css-transforms/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/support/cat.png b/testing/web-platform/tests/css/css-transforms/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/cat.png diff --git a/testing/web-platform/tests/css/css-transforms/support/import-green.css b/testing/web-platform/tests/css/css-transforms/support/import-green.css new file mode 100644 index 0000000000..537104e663 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/testing/web-platform/tests/css/css-transforms/support/import-red.css b/testing/web-platform/tests/css/css-transforms/support/import-red.css new file mode 100644 index 0000000000..9945ef4711 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/testing/web-platform/tests/css/css-transforms/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-transforms/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..9b88fbd811 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/css-transforms/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-transforms/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/css-transforms/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-transforms/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..d454e3a630 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/css-transforms/support/pattern-tr.png b/testing/web-platform/tests/css/css-transforms/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/css-transforms/support/ruler-h-50%.png b/testing/web-platform/tests/css/css-transforms/support/ruler-h-50%.png Binary files differnew file mode 100644 index 0000000000..cf2eea6b43 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/ruler-h-50%.png diff --git a/testing/web-platform/tests/css/css-transforms/support/ruler-h-50px.png b/testing/web-platform/tests/css/css-transforms/support/ruler-h-50px.png Binary files differnew file mode 100644 index 0000000000..9f46583665 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/ruler-h-50px.png diff --git a/testing/web-platform/tests/css/css-transforms/support/ruler-v-100px.png b/testing/web-platform/tests/css/css-transforms/support/ruler-v-100px.png Binary files differnew file mode 100644 index 0000000000..a837eca222 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/ruler-v-100px.png diff --git a/testing/web-platform/tests/css/css-transforms/support/ruler-v-50px.png b/testing/web-platform/tests/css/css-transforms/support/ruler-v-50px.png Binary files differnew file mode 100644 index 0000000000..8414102802 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/ruler-v-50px.png diff --git a/testing/web-platform/tests/css/css-transforms/support/square-purple.png b/testing/web-platform/tests/css/css-transforms/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/square-purple.png diff --git a/testing/web-platform/tests/css/css-transforms/support/square-teal.png b/testing/web-platform/tests/css/css-transforms/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/square-teal.png diff --git a/testing/web-platform/tests/css/css-transforms/support/square-white.png b/testing/web-platform/tests/css/css-transforms/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/square-white.png diff --git a/testing/web-platform/tests/css/css-transforms/support/swatch-blue.png b/testing/web-platform/tests/css/css-transforms/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-transforms/support/swatch-green.png b/testing/web-platform/tests/css/css-transforms/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-transforms/support/swatch-lime.png b/testing/web-platform/tests/css/css-transforms/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/css-transforms/support/swatch-orange.png b/testing/web-platform/tests/css/css-transforms/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-transforms/support/swatch-red.png b/testing/web-platform/tests/css/css-transforms/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-transforms/support/swatch-white.png b/testing/web-platform/tests/css/css-transforms/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/swatch-white.png diff --git a/testing/web-platform/tests/css/css-transforms/support/swatch-yellow.png b/testing/web-platform/tests/css/css-transforms/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/css-transforms/support/test-bl.png b/testing/web-platform/tests/css/css-transforms/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/test-bl.png diff --git a/testing/web-platform/tests/css/css-transforms/support/test-br.png b/testing/web-platform/tests/css/css-transforms/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/test-br.png diff --git a/testing/web-platform/tests/css/css-transforms/support/test-inner-half-size.png b/testing/web-platform/tests/css/css-transforms/support/test-inner-half-size.png Binary files differnew file mode 100644 index 0000000000..e473bf80ef --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/test-inner-half-size.png diff --git a/testing/web-platform/tests/css/css-transforms/support/test-outer.png b/testing/web-platform/tests/css/css-transforms/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/test-outer.png diff --git a/testing/web-platform/tests/css/css-transforms/support/test-tl.png b/testing/web-platform/tests/css/css-transforms/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/test-tl.png diff --git a/testing/web-platform/tests/css/css-transforms/support/test-tr.png b/testing/web-platform/tests/css/css-transforms/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/test-tr.png diff --git a/testing/web-platform/tests/css/css-transforms/support/tile-bg.png b/testing/web-platform/tests/css/css-transforms/support/tile-bg.png Binary files differnew file mode 100644 index 0000000000..2b5b591971 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/tile-bg.png diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-iframe-001-contents.html b/testing/web-platform/tests/css/css-transforms/support/transform-iframe-001-contents.html new file mode 100644 index 0000000000..d92c3705b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-iframe-001-contents.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Iframe (contents)</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + div { + height: 200px; + width: 200px; + background: red; + transform: translate(500px, 500px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-lime-square.png b/testing/web-platform/tests/css/css-transforms/support/transform-lime-square.png Binary files differnew file mode 100644 index 0000000000..8f93999333 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-lime-square.png diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-lime-square.svg b/testing/web-platform/tests/css/css-transforms/support/transform-lime-square.svg new file mode 100644 index 0000000000..5f59904194 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-lime-square.svg @@ -0,0 +1,4 @@ +<svg height="100px" width="100px" viewBox="0 0 100 100" +xmlns="http://www.w3.org/2000/svg"> +<rect fill="lime" height="100" width="100" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-triangle-down.svg b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-down.svg new file mode 100644 index 0000000000..cd0e7013ba --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-down.svg @@ -0,0 +1,4 @@ +<svg height="100px" width="100px" viewBox="0 0 100 100" +xmlns="http://www.w3.org/2000/svg"> +<polygon fill="blue" points="0,0 100,0 50,100" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-triangle-left.svg b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-left.svg new file mode 100644 index 0000000000..e0bf266568 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-left.svg @@ -0,0 +1,4 @@ +<svg height="100px" width="100px" viewBox="0 0 100 100" +xmlns="http://www.w3.org/2000/svg"> +<polygon fill="blue" points="0,50 100,100 100,0" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-triangle-right.svg b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-right.svg new file mode 100644 index 0000000000..3e100cbbb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-right.svg @@ -0,0 +1,4 @@ +<svg height="100px" width="100px" viewBox="0 0 100 100" +xmlns="http://www.w3.org/2000/svg"> +<polygon fill="blue" points="0,0 0,100 100,50" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/support/transform-triangle-up.svg b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-up.svg new file mode 100644 index 0000000000..2145190fec --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/support/transform-triangle-up.svg @@ -0,0 +1,4 @@ +<svg height="100px" width="100px" viewBox="0 0 100 100" +xmlns="http://www.w3.org/2000/svg"> +<polygon fill="blue" points="0,100 100,100 50,0" /> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/text-perspective-001.html b/testing/web-platform/tests/css/css-transforms/text-perspective-001.html new file mode 100644 index 0000000000..e98b3e73b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/text-perspective-001.html @@ -0,0 +1,27 @@ +<!doctype> +<meta charset="utf-8"> +<title>CSS Test: Text is not incorrectly clipped in presence of perspective.</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1494685"> +<link rel="mismatch" href="about:blank"> +<style> +* { + margin: 0; + padding: 0; +} +.container { + perspective: 1px; +} +.heading { + transform: translateZ(-9px) scale(10); +} +h1 { + font-size: 100px; +} +</style> +<div class="container"> + <div class="heading"> + <h1>X</h1> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-2d-getComputedStyle-001.html b/testing/web-platform/tests/css/css-transforms/transform-2d-getComputedStyle-001.html new file mode 100644 index 0000000000..c70cfa9cdc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-2d-getComputedStyle-001.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate</title> + <link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="CSS 2D transforms correctly report their matrix via getComputedStyle()"> + <style type="text/css"> + .block { + display: block; + width: 50px; + height: 50px; + background-color: green; + } + #translate { + transform: translate(10px, 20px); + } + #translateX { + transform: translateX(10px); + } + #translateY { + transform: translateY(20px); + } + #rotate { + transform: rotate(90deg); + } + #scale { + transform: scale(2.0); + } + #scaleX { + transform: scaleX(0.5); + } + #scaleY { + transform: scaleY(1.5); + } + #skewX { + transform: skewX(45deg); + } + #skewY { + transform: skewY(45deg); + } + #matrix { + transform: matrix(1, 2, 3, 4, 5, 6); + } + </style> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="log"></div> + + <div id="translate" class="block"></div> + <div id="translateX" class="block"></div> + <div id="translateY" class="block"></div> + <div id="rotate" class="block"></div> + <div id="scale" class="block"></div> + <div id="scaleX" class="block"></div> + <div id="scaleY" class="block"></div> + <div id="skewX" class="block"></div> + <div id="skewY" class="block"></div> + <div id="matrix" class="block"></div> + <script type="text/javascript"> + function getTransformFor(id) { + let transform = + window.getComputedStyle(document.getElementById(id)).getPropertyValue("transform"); + // Round matrix arguments to allow for small errors in numerical precision. + transform = transform.replace(/matrix\(([^\)]*)\)/g, function(match, arguments) { + let parts = arguments.split(","); + parts = parts.map(str => parseFloat(parseFloat(str).toFixed(6))); + return 'matrix(' + parts.join(", ") + ')'; + }); + return transform; + } + function clear(id) { + const element = document.getElementById(id); + const value = window.getComputedStyle(element).transform; + element.style.display = 'none'; + // https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value + // For now both 'none' and 'matrix()' are accepted as resolved value of + // transform for an element with 'display: none' until we get a consensus + // in https://github.com/w3c/csswg-drafts/issues/9121. + assert_in_array( + window.getComputedStyle(element).transform, ['none', value], + "The resolved value of 'transform' for an element with 'display: none' " + + "should be 'none' or should not depend on display value."); + } + + test(function() { + assert_equals(getTransformFor("translate"), "matrix(1, 0, 0, 1, 10, 20)", "Incorrect matrix for translate()"); + clear("translate"); + assert_equals(getTransformFor("translateX"), "matrix(1, 0, 0, 1, 10, 0)", "Incorrect matrix for translateX()"); + clear("translateX"); + assert_equals(getTransformFor("translateY"), "matrix(1, 0, 0, 1, 0, 20)", "Incorrect matrix for translateY()"); + clear("translateY"); + }, "Matrix for translation transforms"); + + test(function() { + assert_equals(getTransformFor("rotate"), "matrix(0, 1, -1, 0, 0, 0)", "Incorrect matrix for rotate()"); + clear("rotate"); + }, "Matrix for rotate"); + + test(function() { + assert_equals(getTransformFor("scale"), "matrix(2, 0, 0, 2, 0, 0)", "Incorrect matrix for scale()"); + clear("scale"); + assert_equals(getTransformFor("scaleX"), "matrix(0.5, 0, 0, 1, 0, 0)", "Incorrect matrix for scaleX()"); + clear("scaleX"); + assert_equals(getTransformFor("scaleY"), "matrix(1, 0, 0, 1.5, 0, 0)", "Incorrect matrix for scaleY()"); + clear("scaleY"); + }, "Matrix for scaling"); + + test(function() { + assert_equals(getTransformFor("skewX"), "matrix(1, 0, 1, 1, 0, 0)", "Incorrect matrix for skewX()"); + clear("skewX"); + assert_equals(getTransformFor("skewY"), "matrix(1, 1, 0, 1, 0, 0)", "Incorrect matrix for skewY()"); + clear("skewY"); + }, "Matrix for skew"); + + test(function() { + assert_equals(getTransformFor("matrix"), "matrix(1, 2, 3, 4, 5, 6)", "Incorrect matrix for matrix()"); + clear("matrix"); + }, "Matrix for general transform"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-3d-fixed-under-fixed-opacity-crash.html b/testing/web-platform/tests/css/css-transforms/transform-3d-fixed-under-fixed-opacity-crash.html new file mode 100644 index 0000000000..a2ddc814b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-fixed-under-fixed-opacity-crash.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1308269"> +<div style="position: fixed; opacity: 0.5"> + <div style="position: fixed; transform: rotate3d(0, 1, 1, 20deg)">ROTATE1</div> + <div style="position: fixed; transform: rotate3d(0, 1, 1, 20deg)">ROTATE2</div> +</div> +<div style="height: 2000px"></div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-3d-rotateY-stair-above-001.xht b/testing/web-platform/tests/css/css-transforms/transform-3d-rotateY-stair-above-001.xht new file mode 100644 index 0000000000..e637eb0b82 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-rotateY-stair-above-001.xht @@ -0,0 +1,70 @@ +<!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 Test: rotateY with perspective produces a trapezoid</title> + <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/> + <link rel="match" href="reference/transform-3d-rotateY-stair-above-ref-001.xht"/> + <meta name="assert" content="A rotateY transform with perspective + should result in a trapezoid."/> + <style type="text/css"><![CDATA[ +div { + height: 150px; + width: 150px; +} +.background { + background-color: green; + height: 200px; + width: 200px; +} +.container { + position: absolute; + top: 20px; + left: 0; + perspective: 500px; +} +.transformed { + background-color: red; + transform: rotateY(50deg); +} +.stair { + background-color: green; + position: absolute; +} +#one { + width: 33px; + height: 170px; + top: 10px; + left: 20px; +} +#two { + width: 33px; + height: 158px; + top: 16px; + left: 53px; +} +#three { + width: 33px; + height: 148px; + top: 21px; + left: 86px; +} +.stairs { + height: 180px; +} + ]]></style> + </head> + <body> +<div class="background"> +<div class="container"> + <div class="transformed"></div> +</div> +<div class="stairs"> + <div id="one" class="stair"></div> + <div id="two" class="stair"></div> + <div id="three" class="stair"></div> +</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/transform-3d-rotateY-stair-below-001.xht b/testing/web-platform/tests/css/css-transforms/transform-3d-rotateY-stair-below-001.xht new file mode 100644 index 0000000000..bcb28dbd51 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-rotateY-stair-below-001.xht @@ -0,0 +1,71 @@ +<!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 Test: rotateY with perspective produces a trapezoid</title> + <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/> + <link rel="match" href="reference/transform-3d-rotateY-stair-above-ref-001.xht"/> + <meta name="fuzzy" content="maxDifference=0-20;totalPixels=0-80" /> + <meta name="assert" content="A rotateY transform with perspective + should result in a trapezoid."/> + <style type="text/css"><![CDATA[ +div { + height: 150px; + width: 150px; +} +.background { + background-color: green; + height: 200px; + width: 200px; +} +.container { + position: absolute; + top: 20px; + left: 0; + perspective: 500px; +} +.transformed { + background-color: green; + transform: rotateY(50deg); +} +.stair { + background-color: red; + position: absolute; +} +#one { + width: 32px; + height: 158px; + top: 16px; + left: 21px; +} +#two { + width: 33px; + height: 146px; + top: 22px; + left: 53px; +} +#three { + width: 33px; + height: 134px; + top: 28px; + left: 85px; +} +.stairs { + height: 180px; +} + ]]></style> + </head> + <body> +<div class="background"> +<div class="stairs"> + <div id="one" class="stair"></div> + <div id="two" class="stair"></div> + <div id="three" class="stair"></div> +</div> +<div class="container"> + <div class="transformed"></div> +</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/transform-3d-scales-different-x-y-dynamic-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001-ref.html new file mode 100644 index 0000000000..3c72ff05f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<style> +:root { + overflow: hidden; +} +.horizontal, .vertical { + position: absolute; + top: 0; + left: 0; +} +.vertical { + writing-mode: vertical-lr; +} +.test { + transform-origin: 0 0; + line-height: 20px; + block-size: 20px; + inline-size: max-content; + border: 5px solid; + border-color: blue orange; + margin-inline-start: calc(30px * var(--index)); +} +.horizontal > .test { + transform: scale3d(var(--scale), 1, 1); +} +.vertical > .test { + transform: scale3d(1, var(--scale), 1); +} +</style> +<body> +<script> +"use strict"; +const horizontal = document.createElement("div"); +horizontal.className = "horizontal"; +const vertical = document.createElement("div"); +vertical.className = "vertical"; +document.body.append(horizontal, vertical); +const scales = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 17, 20, 25, 30].reverse(); +for (let i = 0; i < scales.length; ++i) { + const scale = scales[i]; + const htest = document.createElement("div"); + htest.className = "test"; + htest.textContent = "Lorem"; + htest.style.cssText = `--scale: ${scale}; --index: ${i+1}`; + horizontal.appendChild(htest); + const vtest = htest.cloneNode(); + vtest.textContent = "Ipsum"; + vertical.appendChild(vtest); +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html new file mode 100644 index 0000000000..36323a715a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8" /> +<title>Raster transform 3D scales with different X and Y components changing dynamically</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="match" href="transform-3d-scales-different-x-y-dynamic-001-ref.html" /> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-7"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-scale3d" /> +<meta name="assert" content="Checks that when the X and Y components of a 3D scale are changed dynamically, the result looks like when setting the value from the very beginning." /> +<style> +:root { + overflow: hidden; +} +.horizontal, .vertical { + position: absolute; + top: 0; + left: 0; +} +.vertical { + writing-mode: vertical-lr; +} +.test { + transform-origin: 0 0; + line-height: 20px; + block-size: 20px; + inline-size: max-content; + border: 5px solid; + border-color: blue orange; + margin-inline-start: calc(30px * var(--index)); +} +.horizontal > .test { + transform: scale3d(var(--scale), 1, 1); +} +.vertical > .test { + transform: scale3d(1, var(--scale), 1); +} +</style> +<body> +<script> +"use strict"; +const horizontal = document.createElement("div"); +horizontal.className = "vertical"; +const vertical = document.createElement("div"); +vertical.className = "horizontal"; +document.body.append(horizontal, vertical); +const scales = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 17, 20, 25, 30].reverse(); +for (let i = 0; i < scales.length; ++i) { + const scale = scales[i]; + const htest = document.createElement("div"); + htest.className = "test"; + htest.textContent = "Lorem"; + htest.style.cssText = `--scale: ${scale}; --index: ${i+1}`; + horizontal.appendChild(htest); + const vtest = htest.cloneNode(); + vtest.textContent = "Ipsum"; + vertical.appendChild(vtest); +} +document.addEventListener("TestRendered", () => { + horizontal.className = "horizontal"; + vertical.className = "vertical"; + document.documentElement.classList.remove("reftest-wait"); +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002-ref.html b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002-ref.html new file mode 100644 index 0000000000..861e7b8f45 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<style> +body { + margin: 0; + overflow: clip; +} +.test:nth-of-type(even) { + color: white; +} +.test { + position: absolute; + width: 0; + transform-origin: 0 0; + border-right: 25px solid transparent; + border-top: calc(25px * var(--scale)) solid currentcolor; + transform: scale3d(var(--scale), 1, 1); +} +</style> +<body> +<script> +"use strict"; +for (let i = 1; i < 14; ++i) { + const test = document.createElement("div"); + test.className = "test"; + test.style.setProperty("--scale", i * 4); + test.style.setProperty("z-index", -i); + document.body.appendChild(test); +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002.html b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002.html new file mode 100644 index 0000000000..cace6699cb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8" /> +<title>Raster transform 3D scales with different X and Y components changing dynamically</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="match" href="transform-3d-scales-different-x-y-dynamic-002-ref.html" /> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-scale3d" /> +<meta name="assert" content="Checks that when the X and Y components of a 3D scale are changed dynamically, the result looks like when setting the value from the very beginning." /> +<style> +body { + margin: 0; + overflow: clip; +} +.test:nth-of-type(even) { + color: white; +} +.test { + position: absolute; + width: 0; + transform-origin: 0 0; + border-right: 25px solid transparent; + border-top: calc(25px * var(--scale)) solid currentcolor; + transform: scale3d(1, var(--scale), 1); +} +.change > .test { + transform: scale3d(var(--scale), 1, 1); +} +</style> +<body> +<script> +"use strict"; +for (let i = 1; i < 14; ++i) { + const test = document.createElement("div"); + test.className = "test"; + test.style.setProperty("--scale", i * 4); + test.style.setProperty("z-index", -i); + document.body.appendChild(test); +} +document.addEventListener("TestRendered", () => { + document.body.className = "change"; + document.documentElement.classList.remove("reftest-wait"); +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-001.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-001.html new file mode 100644 index 0000000000..f434079e0d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Containing Block for Absolute Positioning (left/top)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"In the HTML namespace, any value other than + 'none' for the transform results in the creation of . . . a + containing block." This means absolutely positioned elements need to be + rooted at a transformed ancestor, just as though it had non-static + position.'> + <link rel="match" href="transform-abspos-ref.html"> + <style> + body > div { + width: 100px; + height: 200px; + transform: translate(50px, 50px); + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: absolute; + left: 50px; + top: 100px; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-002.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-002.html new file mode 100644 index 0000000000..fffeb38bcf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-002.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Containing Block for Fixed Positioning (left/top offsets)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"In the HTML namespace, any value other than + 'none' for the transform results in the creation of . . . a + containing block. The object acts as a containing block for fixed + positioned descendants." This means fixed-position elements need to be + rooted at a transformed ancestor, rather than the viewport.'> + <link rel="match" href="transform-abspos-ref.html"> + <style> + body > div { + width: 100px; + height: 200px; + transform: translate(50px, 50px); + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: fixed; + left: 50px; + top: 100px; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-003.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-003.html new file mode 100644 index 0000000000..9b711bd05d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Containing Block for Fixed Positioning (right/bottom offsets)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"In the HTML namespace, any value other than + 'none' for the transform results in the creation of . . . a + containing block. The object acts as a containing block for fixed + positioned descendants." This means fixed-position elements need to be + rooted at a transformed ancestor, rather than the viewport. (This test + differs from the previous in that it uses right/bottom properties for + positioning instead of left/top.)'> + <link rel="match" href="transform-abspos-ref.html"> + <style> + body > div { + width: 100px; + height: 200px; + transform: translate(50px, 50px); + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: fixed; + right: -150px; + bottom: 0; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-004.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-004.html new file mode 100644 index 0000000000..d7ffa8bbe4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Containing Block for Absolute Positioning (bottom/right)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer author" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"In the HTML namespace, any value other than + 'none' for the transform results in the creation of . . . a + containing block." This means absolutely positioned elements need to be + rooted at a transformed ancestor, just as though it had non-static + position. This test differs from transform-abspos-001.html in that it uses the + right/bottom properties for positioning instead of top/left.'> + <link rel="match" href="transform-abspos-ref.html"> + <style> + body > div { + width: 100px; + height: 200px; + transform: translate(50px, 50px); + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: absolute; + right: -150px; + bottom: 0; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-005.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-005.html new file mode 100644 index 0000000000..4a5fddfd65 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Containing Block for Absolute Positioning (bottom/right)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"In the HTML namespace, any value other than + 'none' for the transform results in the creation of . . . a + containing block." This means absolutely positioned elements need to be + rooted at a transformed ancestor, just as though it had non-static + position. Therefore, this test should be offset by one pixel from the + reference.'> + <link rel="mismatch" href="transform-abspos-ref.html"> + <style> + body > div { + width: 100px; + height: 200px; + transform: translate(50px, 50px); + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: absolute; + right: -160px; + bottom: 0; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-006.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-006.html new file mode 100644 index 0000000000..5b49aebfae --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-006.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Containing Block for Absolute Positioning (table)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"In the HTML namespace, any value other than + 'none' for the transform results in the creation of . . . a + containing block." This means absolutely positioned elements need to be + rooted at a transformed ancestor, just as though it had non-static + position. This test differs from transform-abspos-001.html in that the outer div is a + table, which might cause buggy rendering engines to treat it differently.'> + <link rel="match" href="transform-abspos-ref.html"> + <style> + body > div { + display: table; + width: 100px; + height: 200px; + transform: translate(50px, 50px); + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: absolute; + left: 50px; + top: 100px; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-007.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-007.html new file mode 100644 index 0000000000..26a7e4c3ab --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Containing Block for Fixed Positioning (inline-table)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"In the HTML namespace, any value other than + 'none' for the transform results in the creation of . . . a + containing block. The object acts as a containing block for fixed + positioned descendants." This means fixed-position elements need to be + rooted at a transformed ancestor, rather than the viewport. This test + differs from transform-abspos-002.html in that the outer div has display: + inline-table, which might cause it to render differently in buggy UAs.'> + <link rel="match" href="transform-abspos-ref.html"> + <style> + body > div { + display: inline-table; + width: 100px; + height: 200px; + transform: translate(50px, 50px); + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: fixed; + left: 50px; + top: 100px; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-abspos-ref.html b/testing/web-platform/tests/css/css-transforms/transform-abspos-ref.html new file mode 100644 index 0000000000..f4aa147c98 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-abspos-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body > div { + width: 100px; + height: 200px; + position: relative; + left: 50px; + top: 50px; + background: gold; + } + body > div > div { + width: 200px; + height: 100px; + position: absolute; + left: 50px; + top: 100px; + background: navy; + color: gold; + } + </style> + </head> + <body> + <div> + 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> + 0 1 2 3 4 5 6 7 8 9 + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-and-individual-transform-properties-computed-style.html b/testing/web-platform/tests/css/css-transforms/transform-and-individual-transform-properties-computed-style.html new file mode 100644 index 0000000000..56968eeefa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-and-individual-transform-properties-computed-style.html @@ -0,0 +1,17 @@ +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms"> +<script type="text/javascript" src="/resources/testharness.js"></script> +<script type="text/javascript" src="/resources/testharnessreport.js"></script> + +<div style="scale: 2; rotate: 90deg; translate: 100px; transform: translateY(100px)"> + +<script type="text/javascript"> + +test(() => { + const style = window.getComputedStyle(document.querySelector("div")); + assert_equals(style.scale, "2", "The scale computed style should match the inline style."); + assert_equals(style.rotate, "90deg", "The rotate computed style should match the inline style."); + assert_equals(style.translate, "100px", "The translate computed style should match the inline style."); + assert_equals(style.transform, "matrix(1, 0, 0, 1, 0, 100)", "The transform computed style should match the inline style."); +}, "The transform property should not be affected by individual transform properties."); + +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-applies-to-001.xht b/testing/web-platform/tests/css/css-transforms/transform-applies-to-001.xht new file mode 100644 index 0000000000..c49160479a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-applies-to-001.xht @@ -0,0 +1,41 @@ +<!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 Test: transform applied to elements with 'display' set to 'block'</title> + <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"/> + <link rel="match" href="reference/transform-applies-to-001-ref.xht"/> + <meta name="assert" content="The 'transform' property applies to elements with 'display' set to 'block'."/> + <style type="text/css"><![CDATA[ + div { + position: relative; + } + div p { + position: absolute; + top: 0; + left: 0; + display: block; + } + #red { + width: 50px; + height: 100px; + background-color: green; + border-right: red solid 50px; + } + #test { + width: 100px; + height: 50px; + background-color: transparent; + border-top: green solid 50px; + transform: rotate(90deg); + } + ]]></style> + </head> + <body> + <p>You should see a green box. There should be no red.</p> + <div> + <p id="red"></p> + <p id="test"></p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-applies-to-002.xht b/testing/web-platform/tests/css/css-transforms/transform-applies-to-002.xht new file mode 100644 index 0000000000..c3e107af33 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-applies-to-002.xht @@ -0,0 +1,43 @@ +<!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 Test: Transform does not apply to non-replaced inline elements</title> + <link rel="author" title="Apple Inc." href="http://www.apple.com/"/> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"/> + <link rel="match" href="reference/transform-applies-to-002-ref.xht"/> + <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-754" /> + <meta name="flags" content="ahem" /> + <meta name="assert" content="The 'transform' property does not apply to non-replaced inline elements."/> + <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; + } + #red span { + color: red; + } + #test span { + transform: rotate(90deg); + } + ]]></style> + </head> + <body> + <p> + You should see two lines of 5 green boxes each. You should see no + red. + </p> + <div> + <p id="red">X X <span>X X X X X X</span> X X</p> + <p id="test">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/transform-background-001.html b/testing/web-platform/tests/css/css-transforms/transform-background-001.html new file mode 100644 index 0000000000..d58b0380bf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (rotate right)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> <!-- 2012-04-17 --> + <meta name="assert" content="Background images fall within the element's + border box, so they need to be transformed along with it."> + <meta name="flags" content="svg"> + <link rel="match" href="transform-background-ref-1.html"> + <meta name="fuzzy" content="maxDifference=0-4;totalPixels=0-400"> + <style> + div { + width: 100px; + height: 200px; + background: url(support/transform-triangle-left.svg); + transform: translate(50px, -50px) rotate(90deg); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-002.html b/testing/web-platform/tests/css/css-transforms/transform-background-002.html new file mode 100644 index 0000000000..46dc0b8d3d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (rotate left)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> <!-- 2012-04-17 --> + <meta name="assert" content="Background images fall within the element's + border box, so they need to be transformed along with it."> + <meta name="flags" content="svg"> + <link rel="match" href="transform-background-ref-1.html"> + <meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-400"> + <style> + div { + width: 100px; + height: 200px; + background: url(support/transform-triangle-right.svg); + transform: translate(50px, -50px) rotate(270deg); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-003.html b/testing/web-platform/tests/css/css-transforms/transform-background-003.html new file mode 100644 index 0000000000..14a35a8b16 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (flip)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> <!-- 2012-04-17 --> + <meta name="assert" content="Background images fall within the element's + border box, so they need to be transformed along with it."> + <meta name="flags" content="svg"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400"> + <link rel="match" href="transform-background-ref-1.html"> + <style> + div { + width: 200px; + height: 100px; + background: url(support/transform-triangle-down.svg); + transform: scale(-1); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-004.html b/testing/web-platform/tests/css/css-transforms/transform-background-004.html new file mode 100644 index 0000000000..200dced2e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (nested flip)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> <!-- 2012-04-17 --> + <meta name="assert" content="Background images fall within the element's + border box, so they need to be transformed along with it. This file tests + that a transform on the parent works correctly, not just on the element + itself."> + <meta name="flags" content="svg"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400"> + <link rel="match" href="transform-background-ref-1.html"> + <style> + div { + width: 200px; + height: 100px; + } + body > div { + transform: scale(-1); + } + body > div > div { + background: url(support/transform-triangle-down.svg); + } + </style> + </head> + <body> + <div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-005.html b/testing/web-platform/tests/css/css-transforms/transform-background-005.html new file mode 100644 index 0000000000..e669d3c629 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-005.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (non-propagated body)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="Background images fall within the element's + border box, so they need to be transformed along with it. In this case the + scale is applied to the root element, and the background is on the body. + The white background on the root element prevents the body's background + from propagating to the canvas, so it's just a regular background."> + <meta name="flags" content="svg"> + <link rel="match" href="transform-background-ref-2.html"> + <meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-12102"> + <style> + html, body { + width: 100%; + height: 100%; + } + html { + background: white; + transform: scale(-1); + } + body { + background: url(support/transform-triangle-down.svg) bottom right; + margin: 0; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-006-notref.html b/testing/web-platform/tests/css/css-transforms/transform-background-006-notref.html new file mode 100644 index 0000000000..a8f4bf6163 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-006-notref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + html { + background: white; + height: 100%; + width: 100%; + } + body { + background: url(support/transform-triangle-up.svg); + overflow: hidden; + transform: rotate(90deg); + height: 100%; + width: 100%; + margin: 0; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-006.html b/testing/web-platform/tests/css/css-transforms/transform-background-006.html new file mode 100644 index 0000000000..f8be431152 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-006.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (propagated body)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="Background images fall within the element's + border box, so they need to be transformed along with it. In this case the + transform is applied to the body element, but the root element's background + is transparent, so the background is actually on the root element instead + of the body. Therefore, the transform must not affect the background."> + <meta name="flags" content="svg"> + <link rel="match" href="transform-background-ref-2.html"> + <link rel="mismatch" href="transform-background-006-notref.html"> + <style> + body { + background: url(support/transform-triangle-up.svg); + overflow: hidden; + transform: rotate(90deg); + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-007.html b/testing/web-platform/tests/css/css-transforms/transform-background-007.html new file mode 100644 index 0000000000..787c593fb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-007.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (propagated body with root element transform)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='"If the root element is transformed, the transformation should not apply to + any background specified for the root element.'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-root-bg-001-ref.html"> + <style> + html { + overflow: hidden; + transform: rotate(90deg); + transform-origin: 50px 50px; + } + body { + background: url(support/transform-triangle-left.svg); + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-008.html b/testing/web-platform/tests/css/css-transforms/transform-background-008.html new file mode 100644 index 0000000000..c1565bf1c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform of Background Image (root element background and transform)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='This is exactly the same as + transform-background-007.html, except that the background is specified directly on the + root element instead of being specified on the body and propagating to the + root.'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-root-bg-001-ref.html"> + <style> + html { + background: url(support/transform-triangle-left.svg); + overflow: hidden; + transform: rotate(90deg); + transform-origin: 50px 50px; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-ref-1.html b/testing/web-platform/tests/css/css-transforms/transform-background-ref-1.html new file mode 100644 index 0000000000..42aaa5b0b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-ref-1.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> <!-- 2012-04-17 --> + <style> + div { + width: 200px; + height: 100px; + background: url(support/transform-triangle-up.svg); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-background-ref-2.html b/testing/web-platform/tests/css/css-transforms/transform-background-ref-2.html new file mode 100644 index 0000000000..2585b62b02 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-background-ref-2.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> <!-- 2012-04-17 --> + <style> + html { + background: url(support/transform-triangle-up.svg); + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-blank-ref.html b/testing/web-platform/tests/css/css-transforms/transform-blank-ref.html new file mode 100644 index 0000000000..6dfeba6e16 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-blank-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <p>Nothing should appear except this sentence.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/content-box-mutation-001.html b/testing/web-platform/tests/css/css-transforms/transform-box/content-box-mutation-001.html new file mode 100644 index 0000000000..e9ddc8dcfa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/content-box-mutation-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: content-box, box border mutated</title> +<link rel="match" href="reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 25px black; + + transform: rotate(90deg); + transform-origin: -50px 0; + transform-box: content-box; +} +</style> +<div id="target"></div> +<script> + waitForAtLeastOneFrame().then(() => { + document.querySelector('#target').style.borderLeft = 'solid 50px black'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-border-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-border-box.html new file mode 100644 index 0000000000..d0176e367b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-border-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: border-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; + transform-box: border-box; +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "border-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-content-box-001.html b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-content-box-001.html new file mode 100644 index 0000000000..31a4428293 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-content-box-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: content-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: -50px 0; + transform-box: content-box; +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "content-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-content-box-002.html b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-content-box-002.html new file mode 100644 index 0000000000..24e038b562 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-content-box-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>transform-box: content-box (CSS layout), percentage padding</title> +<link rel="match" href="reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> +<style> +#target { + width: 125px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + padding-left: 25%; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: -75px 0; + transform-box: content-box; +} +</style> +<div style="width: 100px"> + <div id="target"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-fill-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-fill-box.html new file mode 100644 index 0000000000..6821140bfe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-fill-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: fill-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: -50px 0; + transform-box: fill-box; /* alias for content-box */ +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "fill-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-initial.html b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-initial.html new file mode 100644 index 0000000000..5344fb2349 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-initial.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>transform-box: initial (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-stroke-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-stroke-box.html new file mode 100644 index 0000000000..fd0db23215 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-stroke-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: stroke-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; + transform-box: stroke-box; /* alias for border-box */ +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "stroke-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-view-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-view-box.html new file mode 100644 index 0000000000..2336957bf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/cssbox-view-box.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>transform-box: view-box (CSS layout)</title> +<link rel="match" href="./reference/cssbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a square with a black bar at the top whose top-left corner is at 100,100."/> + +<style> +#target { + width: 150px; + height: 200px; + margin-left: 300px; + margin-top: 100px; + background-color: green; + border-left: solid 50px black; + + transform: rotate(90deg); + transform-origin: 0 0; + transform-box: view-box; /* acts like border-box on css boxes */ +} +</style> + +<div id="target"></div> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-001.html b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-001.html new file mode 100644 index 0000000000..7e9b133aea --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>transform-box: fill-box</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +svg { + background-color: red; +} +rect { + transform-box: fill-box; +} +#target1 { + transform: rotate(90deg); +} +#target2 { + transform: translate(50%, -50%); +} +#target3 { + transform-origin: 25% 25%; + transform: rotate(180deg) translate(-25%, -25%); +} +#target4 { + transform-origin: 75px 75px; + transform: rotate(-180deg) translate(-25%, -25%); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="200" height="200"> + <rect id="target1" x="100" y="100" width="100" height="100" fill="green"/> + <rect id="target2" x="50" y="50" width="100" height="100" fill="green"/> + <rect id="target3" x="25" y="25" width="100" height="100" fill="green"/> + <rect id="target4" x="25" y="25" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-002.html b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-002.html new file mode 100644 index 0000000000..9044048e38 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>transform-box: fill-box on an SVG container element</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<link rel="match" href="reference/greensquare200x200.html"> +<style> +#container { + transform-box: fill-box; + transform-origin: center; + transform: scale(2); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="200" height="200"> + <rect width="200" height="200" fill="red"/> + <g id="container"> + <rect x="50" y="50" width="100" height="100" fill="green"/> + </g> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-mutation-001.html b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-mutation-001.html new file mode 100644 index 0000000000..1f0dfd01bb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-mutation-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: fill-box, shape mutated</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +#target { + transform-box: fill-box; + transform: translate(-50%, 0); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <rect id="target" x="100" width="100" height="200" fill="green"/> +</svg> +<script> +requestAnimationFrame(function() { + requestAnimationFrame(function() { + document.querySelector('#target').setAttribute('width', 200); + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-mutation-002.html b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-mutation-002.html new file mode 100644 index 0000000000..676d5cdd03 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/fill-box-mutation-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: fill-box, image mutated</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +#target { + transform-box: fill-box; + transform: translate(-50%, 0); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <image id="target" x="100" width="100" height="200" + href="/css/css-transforms/support/1x1-green.png"/> +</svg> +<script> +requestAnimationFrame(function() { + requestAnimationFrame(function() { + document.querySelector('#target').setAttribute('width', 200); + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/reference/cssbox-ref.html b/testing/web-platform/tests/css/css-transforms/transform-box/reference/cssbox-ref.html new file mode 100644 index 0000000000..138d65df94 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/reference/cssbox-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> + +<style> +#target { + width: 200px; + height: 150px; + margin-left: 100px; + margin-top: 100px; + background-color: green; + border-top: solid 50px black; +} +</style> + +<div id="target"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/reference/greensquare200x200.html b/testing/web-platform/tests/css/css-transforms/transform-box/reference/greensquare200x200.html new file mode 100644 index 0000000000..bee8bc70fe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/reference/greensquare200x200.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<div style="width: 200px; height: 200px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-dasharray-ref.html b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-dasharray-ref.html new file mode 100644 index 0000000000..ebcb699c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-dasharray-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + stroke-dasharray: 100; + stroke-dashoffset: 100; +} +</style> +<svg width="400" height="300"> + <path id="target" d="M200,100h-100v100h100"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-rect-dasharray-ref.html b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-rect-dasharray-ref.html new file mode 100644 index 0000000000..ae4c8aa6f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-rect-dasharray-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + stroke-dasharray: 100 50; +} +</style> +<svg width="400" height="300"> + <rect id="target" width="50" height="100" x="50" y="80"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-rect-ref.html b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-rect-ref.html new file mode 100644 index 0000000000..eb1ac1fca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-rect-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + transform: none; +} +</style> + +<svg width="400" height="300"> + <rect id="target" width="50" height="100" x="50" y="80"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-ref.html b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-ref.html new file mode 100644 index 0000000000..c765ebe866 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/reference/svgbox-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform: none; +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 h -100 v 100 h 100"/> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-001.html b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-001.html new file mode 100644 index 0000000000..8c64e5406a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: stroke-box, stroke mutated</title> +<link rel="match" href="reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<meta name="assert" content="This should display a rect whose center of rotation is at (20, 0) of its stroke-box."/> +<style> +#target { + fill: green; + stroke: black; + stroke-width: 10; + transform-box: stroke-box; + transform-origin: 20px 0px; + transform: rotate(90deg); +} +</style> +<svg width="400" height="300"> + <rect id="target" width="100" height="50" x="100" y="100"/> +</svg> +<script> + waitForAtLeastOneFrame().then(() => { + document.querySelector('#target').style.strokeWidth = '20px'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-002.html b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-002.html new file mode 100644 index 0000000000..3884b98a89 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: stroke-box, shape mutated</title> +<link rel="match" href="reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<meta name="assert" content="This should display a rect whose center of rotation is at (20, 0) of its stroke-box."/> +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + transform-box: stroke-box; + transform-origin: 20px 0px; + transform: rotate(90deg); +} +</style> +<svg width="400" height="300"> + <rect id="target" width="100" height="100" x="100" y="100"/> +</svg> +<script> + waitForAtLeastOneFrame().then(() => { + document.querySelector('#target').setAttribute('height', '50'); + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-003.html b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-003.html new file mode 100644 index 0000000000..717cf170f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: stroke-box, on group (<g>), stroke on child mutated</title> +<link rel="match" href="reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<meta name="assert" content="This should display a rect whose center of rotation is at (20, 0) of its stroke-box."/> +<style> +#target { + transform-box: stroke-box; + transform-origin: 20px 0px; + transform: rotate(90deg); +} +#target > rect { + fill: green; + stroke: black; + stroke-width: 10; +} +</style> +<svg width="400" height="300"> + <g id="target"> + <rect width="100" height="50" x="100" y="100"/> + </g> +</svg> +<script> + waitForAtLeastOneFrame().then(() => { + document.querySelector('#target > rect').style.strokeWidth = '20px'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-004.html b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-004.html new file mode 100644 index 0000000000..ace6b6252a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/stroke-box-mutation-004.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: stroke-box, on group (<g>), child shape mutated</title> +<link rel="match" href="reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<meta name="assert" content="This should display a rect whose center of rotation is at (20, 0) of its stroke-box."/> +<style> +#target { + transform-box: stroke-box; + transform-origin: 20px 0px; + transform: rotate(90deg); +} +#target > rect { + fill: green; + stroke: black; + stroke-width: 20; +} +</style> +<svg width="400" height="300"> + <g id="target"> + <rect width="100" height="100" x="100" y="100"/> + </g> +</svg> +<script> + waitForAtLeastOneFrame().then(() => { + const rect = document.querySelector('#target > rect'); + rect.setAttribute('height', '50'); + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-border-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-border-box.html new file mode 100644 index 0000000000..b848dbf238 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-border-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: border-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a rect whose center of rotation is at (20, 0) of its stroke-box."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + transform-box: border-box; /* alias for stroke-box */ + transform-origin: 20px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <rect id="target" width="100" height="50" x="100" y="100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "border-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-content-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-content-box.html new file mode 100644 index 0000000000..2f7f2dd071 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-content-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: content-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: content-box; /* alias for fill-box */ + transform-origin: 0px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "content-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-fill-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-fill-box.html new file mode 100644 index 0000000000..111d8dbcfb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-fill-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: fill-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: fill-box; + transform-origin: 0px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "fill-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-initial.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-initial.html new file mode 100644 index 0000000000..ba07c88452 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-initial.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>transform-box: initial (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-origin: 200px 100px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-001.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-001.html new file mode 100644 index 0000000000..2687d933b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: stroke-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a rect whose center of rotation is at (20, 0) of its stroke-box."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + transform-box: stroke-box; + transform-origin: 20px 0px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <rect id="target" width="100" height="50" x="100" y="100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "stroke-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-002.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-002.html new file mode 100644 index 0000000000..50afbae813 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>transform-box: stroke-box, stroke with dash array</title> +<link rel="match" href="reference/svgbox-rect-dasharray-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#TermStrokeBoundingBox"> +<meta name="assert" content="A dash array does not contribute to the stroke bounding box"/> +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + stroke-dasharray: 100 50; + stroke-dashoffset: 50; + transform-box: stroke-box; + transform-origin: 20px 0px; + transform: rotate(90deg); +} +</style> +<svg width="400" height="300"> + <rect id="target" width="100" height="50" x="100" y="100"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-003.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-003.html new file mode 100644 index 0000000000..f132eb4101 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>transform-box: stroke-box, stroke with vector-effect: non-scaling-stroke</title> +<link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> +<link rel="match" href="reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#VectorEffects"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9640"> +<meta name="assert" content="The used value of transform-box is fill-box on SVG with non-scaling-stroke"/> +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + vector-effect: non-scaling-stroke; + transform-box: stroke-box; + transform: scale(0.5) translateY(-100%); +} +</style> +<svg width="400" height="300"> + <rect id="target" width="100" height="200" x="50" y="180"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-004.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-004.html new file mode 100644 index 0000000000..0046295cf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-stroke-box-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>transform-box: border-box, stroke with vector-effect: non-scaling-stroke</title> +<link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> +<link rel="match" href="reference/svgbox-rect-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<link rel="help" href="https://svgwg.org/svg2-draft/coords.html#VectorEffects"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9640"> +<meta name="assert" content="The used value of transform-box is fill-box on SVG with non-scaling-stroke"/> +<style> +#target { + fill: green; + stroke: black; + stroke-width: 20; + vector-effect: non-scaling-stroke; + transform-box: border-box; + transform: scale(0.5) translateY(-100%); +} +</style> +<svg width="400" height="300"> + <rect id="target" width="100" height="200" x="50" y="180"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-view-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-view-box.html new file mode 100644 index 0000000000..dbce635d6e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/svgbox-view-box.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>transform-box: view-box (SVG layout)</title> +<link rel="match" href="./reference/svgbox-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-box"> +<meta name="assert" content="This should display a C shape with the center of the top endpoint at 200,100."/> + +<style> +#target { + fill: green; + stroke: black; + stroke-width: 50; + transform-box: view-box; + transform-origin: 200px 100px; + transform: rotate(90deg); +} +</style> + +<svg width="400" height="300"> + <path id="target" d="M 200 100 v 100 h 100 v -100"/> +</svg> + +<div id="error"></div> +<script> +var refStyle = "view-box"; +var compStyle = getComputedStyle(document.getElementById('target')).transformBox; +if (refStyle != compStyle) + document.getElementById('error').textContent = "Error, got computed style " + compStyle; +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/value-changed.html b/testing/web-platform/tests/css/css-transforms/transform-box/value-changed.html new file mode 100644 index 0000000000..4aca90a61c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/value-changed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: value change from 'view-box' to 'fill-box'</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <rect id="target" x="100" width="200" height="200" fill="green" + style="transform-box: view-box; transform: translateX(-50%)"/> +</svg> +<script> +requestAnimationFrame(function() { + requestAnimationFrame(function() { + document.querySelector('#target').style.transformBox = 'fill-box'; + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-001.html b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-001.html new file mode 100644 index 0000000000..d0c85fd59d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<title>transform-box: view-box, viewport mutated</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +#target { + transform-box: view-box; + transform: translate(-50%, 0); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <rect id="target" x="100" width="200" height="200" fill="green"/> +</svg> +<script> +requestAnimationFrame(function() { + requestAnimationFrame(function() { + document.querySelector('svg').setAttribute('width', 200); + document.documentElement.classList.remove('reftest-wait'); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-002.html b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-002.html new file mode 100644 index 0000000000..d18d823409 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-002.html @@ -0,0 +1,26 @@ +<!doctype html> +<html class="reftest-wait"> +<title>transform-box: view-box, viewport mutated, <text></title> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> +#target { + transform-box: view-box; + transform: translate(-50%, 0); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <text id="target" x="100" y="160" fill="green" + font-family="Ahem" font-size="200">X</text> +</svg> +<script> + waitForAtLeastOneFrame().then(() => { + document.querySelector('svg').setAttribute('width', 200); + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-003.html b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-003.html new file mode 100644 index 0000000000..8739728854 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-mutation-003.html @@ -0,0 +1,26 @@ +<!doctype html> +<html class="reftest-wait"> +<title>transform-box: view-box, viewport mutated, <foreignObject></title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> +#target { + transform-box: view-box; + transform: translate(-50%, 0); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <foreignObject id="target" x="100" width="200" height="100%"> + <div style="width: 200px; height: 200px; background-color: green"></div> + </foreignObject> +</svg> +<script> + waitForAtLeastOneFrame().then(() => { + document.querySelector('svg').setAttribute('width', 200); + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/view-box-nested.html b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-nested.html new file mode 100644 index 0000000000..9e7fc17e2a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-nested.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>transform-box: view-box, relative to nested viewport</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +#target { + transform-box: view-box; + transform: translate(-50%, -50%); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <svg width="200" height="200"> + <rect id="target" x="100" y="100" width="200" height="200" fill="green"/> + </svg> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/view-box-viewbox-nested.html b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-viewbox-nested.html new file mode 100644 index 0000000000..fc072363e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-viewbox-nested.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>transform-box: view-box, relative to viewport defined by nested viewBox</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +#target { + transform-box: view-box; + transform: translate(-50%, -50%); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200"> + <rect width="200" height="200" fill="red"/> + <svg viewBox="0 0 200 200" preserveAspectRatio="xMinYMin"> + <rect id="target" x="100" y="100" width="200" height="200" fill="green"/> + </svg> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/view-box-viewbox.html b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-viewbox.html new file mode 100644 index 0000000000..a69d8092f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/view-box-viewbox.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>transform-box: view-box, relative to viewport defined by viewBox</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +#target { + transform-box: view-box; + transform: translate(-50%, -50%); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin"> + <rect width="200" height="200" fill="red"/> + <rect id="target" x="100" y="100" width="200" height="200" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-box/view-box.html b/testing/web-platform/tests/css/css-transforms/transform-box/view-box.html new file mode 100644 index 0000000000..0b5eeda543 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-box/view-box.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<title>transform-box: view-box</title> +<link rel="match" href="reference/greensquare200x200.html"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box"> +<style> +svg { + background-color: red; +} +rect { + transform-box: view-box; +} +#target1 { + transform-origin: 25% 25%; + transform: scale(2); +} +#target2 { + transform: translate(50%, 0); +} +#target3 { + transform: translate(0, 50%); +} +#target4 { + transform-origin: 50% 50%; + transform: rotate(180deg); +} +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<svg width="200" height="200"> + <rect id="target1" x="25" y="25" width="50" height="50" fill="green"/> + <rect id="target2" width="100" height="100" fill="green"/> + <rect id="target3" width="100" height="100" fill="green"/> + <rect id="target4" width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/css/css-transforms/transform-clip-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-clip-001-ref.html new file mode 100644 index 0000000000..5f91b99d12 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-clip-001-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<title>CSS test reference</title> +<style> + body { margin: 0 } +</style> +<div style="width: 200px; height: 10px; background-color: blue; margin: 10px"></div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-clip-001.html b/testing/web-platform/tests/css/css-transforms/transform-clip-001.html new file mode 100644 index 0000000000..0bdfd631ba --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-clip-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>CSS transforms and clipping</title> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1799216"> +<link rel=help href="https://drafts.csswg.org/css-transforms/"> +<link rel=match href="transform-clip-001-ref.html"> +<style> + body { margin: 0 } +</style> +<div style="overflow: clip; width: 200px; height: 200px; transform: translate(10px, 10px)"> + <div style="overflow: clip; pointer-events: none; width: 200px; height: 200px; transform: translate(0px, -190px)"> + <div style="background: blue; width: 200px; height: 200px; transform: translate(0px, 190px);"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-compound-001.html b/testing/web-platform/tests/css/css-transforms/transform-compound-001.html new file mode 100644 index 0000000000..1f5ed4ca07 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-compound-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Compound Transforms</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='Tests that applying multiple transforms to an + element is the same as applying the transforms in the same order to nested + elements.'> + <link rel="match" href="transform-compound-ref.html"> + <link rel="mismatch" href="transform-compound-notref-1.html"> + <link rel="mismatch" href="transform-compound-notref-2.html"> + <style> + body { + overflow: hidden; + } + div { + transform-origin: top left; + } + body > div { + position: relative; + left: 200px; + top: 0; + } + body > div > div { + background-color: gold; + width: 200px; + height: 100px; + border: 1px solid black; + transform: translate(100px) scale(2) rotate(90deg) skewX(15deg); + } + </style> + </head> + <body> + <div> + <div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-compound-notref-1.html b/testing/web-platform/tests/css/css-transforms/transform-compound-notref-1.html new file mode 100644 index 0000000000..c04367cad3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-compound-notref-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + div { + transform-origin: top left; + } + body > div { + position: relative; + left: 200px; + top: 0; + } + div.test { + background-color: gold; + width: 200px; + height: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <div> + <div style="transform: skewX(15deg);"> + <div style="transform: rotate(90deg);"> + <div style="transform: scale(2);"> + <div style="transform: translate(100px);"> + <div class="test"> + </div> + </div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-compound-notref-2.html b/testing/web-platform/tests/css/css-transforms/transform-compound-notref-2.html new file mode 100644 index 0000000000..87dcfceaab --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-compound-notref-2.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + left: 200px; + top: 0; + } + body > div > div { + background-color: gold; + width: 200px; + height: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <div> + <div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-compound-ref.html b/testing/web-platform/tests/css/css-transforms/transform-compound-ref.html new file mode 100644 index 0000000000..5122ad98c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-compound-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + div { + transform-origin: top left; + } + body > div { + position: relative; + left: 200px; + top: 0; + } + div.test { + background-color: gold; + width: 200px; + height: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <div> + <div style="transform: translate(100px);"> + <div style="transform: scale(2);"> + <div style="transform: rotate(90deg);"> + <div style="transform: skewX(15deg);"> + <div class="test"> + </div> + </div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed-ref.html b/testing/web-platform/tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed-ref.html new file mode 100644 index 0000000000..2e88d4493f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> +<style> + html, body { margin: 0; padding: 0 } + #transformed { + margin-left: 10px; + margin-top: 10px; + width: 200px; + height: 200px; + background: grey; + } + + #fixed { + width: 50px; + height: 50px; + background: green; + } +</style> + +<body> + <div id="transformed"> + <div id="fixed"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed.html b/testing/web-platform/tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed.html new file mode 100644 index 0000000000..2fd5f3873a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: Transformed elements with overflow: hidden create scrolling areas for fixed descendants</title> +<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> +<link rel="match" href="transform-containing-block-and-scrolling-area-for-fixed-ref.html"> +<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."> +<meta name="assert" content="The object acts as a containing block for fixed positioned descendants, but also creates scrolling areas for them." +<meta name="flags" content="dom"> +<style> + html, body { margin: 0; padding: 0 } + #transformed { + transform: translateX(10px) translateY(10px); + width: 200px; + height: 200px; + background: grey; + overflow: hidden; + } + + #fixed { + position: fixed; + width: 50px; + height: 50px; + top: 50px; + left: 50px; + background: green; + } + + #spacer { + height: 10000px; + width: 10000px; + } +</style> +<body> + <div id="transformed"> + <div id="fixed"></div> + <div id="spacer"></div> + </div> + <script> + document.getElementById('transformed').scrollTo(50, 50); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-containing-block-dynamic-1a.html b/testing/web-platform/tests/css/css-transforms/transform-containing-block-dynamic-1a.html new file mode 100644 index 0000000000..7e6a10dda1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-containing-block-dynamic-1a.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: Creating containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> +<link rel="match" href="containing-block-dynamic-1-ref.html"> +<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."> +<meta name="assert" content="The object acts as a containing block for fixed positioned descendants." +<meta name="flags" content="dom"> +<style> + html, body { margin: 0; padding: 0 } + #changetransform { + position: absolute; + top: 100px; + left: 100px; + } + + #abscovered { + position: absolute; + top: 50px; + left: 50px; + background: red; + height: 100px; + width: 100px; + } + + #fixedmoves { + position: fixed; + top: 150px; + left: 150px; + background: green; + height: 100px; + width: 100px; + } +</style> +<body> + <div id="changetransform" style="transform: translateX(4px)"> + <div id="abscovered"></div> + <div id="fixedmoves"></div> + </div> + <script> + var changetransform = document.getElementById("changetransform"); + var fixedmoves = document.getElementById("fixedmoves"); + var causeFlush = fixedmoves.offsetTop; + changetransform.style.transform = ""; + </script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-containing-block-dynamic-1b.html b/testing/web-platform/tests/css/css-transforms/transform-containing-block-dynamic-1b.html new file mode 100644 index 0000000000..61266f02e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-containing-block-dynamic-1b.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS transforms: Creating containing block for fixed positioned elements</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> +<link rel="match" href="containing-block-dynamic-1-ref.html"> +<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants."> +<meta name="assert" content="The object acts as a containing block for fixed positioned descendants." +<meta name="flags" content="dom"> +<style> + html, body { margin: 0; padding: 0 } + #changetransform { + position: absolute; + top: 100px; + left: 100px; + } + + #abscovered { + position: absolute; + top: 50px; + left: 50px; + background: red; + height: 100px; + width: 100px; + } + + #fixedmoves { + position: fixed; + top: 50px; + left: 50px; + background: green; + height: 100px; + width: 100px; + } +</style> +<body> + <div id="changetransform"> + <div id="abscovered"></div> + <div id="fixedmoves"></div> + </div> + <script> + var changetransform = document.getElementById("changetransform"); + var fixedmoves = document.getElementById("fixedmoves"); + var causeFlush = fixedmoves.offsetTop; + changetransform.style.transform = "translateX(0px)"; + </script> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-descendant-001.html b/testing/web-platform/tests/css/css-transforms/transform-descendant-001.html new file mode 100644 index 0000000000..7fef84180e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-descendant-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform Affects Descendant</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This just tests that a transform on a + container div moves its contents, not just the div itself.'> + <link rel="match" href="transform-descendant-ref.html"> + <style> + body > div { + background: green; + width: 100px; + height: 100px; + } + span { + background: yellow; + } + body > div > div { + transform: translate(20px, 150px); + } + </style> + </head> + <body> + <div> + <div><span>span 1</span></div> + </div> + <span>span 2</span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-descendant-ref.html b/testing/web-platform/tests/css/css-transforms/transform-descendant-ref.html new file mode 100644 index 0000000000..ac60e7f52f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-descendant-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body > div { + background: green; + height: 100px; + width: 100px; + } + span { + background: yellow; + } + body > div > div { + position: relative; + top: 150px; + left: 20px; + } + </style> + </head> + <body> + <div> + <div><span>span 1</span></div> + </div> + <span>span 2</span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-display-001.html b/testing/web-platform/tests/css/css-transforms/transform-display-001.html new file mode 100644 index 0000000000..4b5af4e74e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-display-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Inline-Block</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transformable-element"> + <meta name="assert" content='Inline-blocks are atomic inline-level + elements, so should transform the same as blocks.'> + <link rel="match" href="transform-display-ref.html"> + <link rel="mismatch" href="transform-display-notref.html"> + <style> + div { + width: 100px; + height: 100px; + transform: rotate(180deg); + display: inline-block; + } + </style> + </head> + <body> + <div>This is some rotated text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-display-002.html b/testing/web-platform/tests/css/css-transforms/transform-display-002.html new file mode 100644 index 0000000000..7b45eecf5d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-display-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transformable-element"> + <meta name="assert" content='Inline-blocks are block-level elements, so + should transform the same as blocks.'> + <link rel="match" href="transform-display-ref.html"> + <link rel="mismatch" href="transform-display-notref.html"> + <style> + div { + width: 100px; + height: 100px; + transform: rotate(180deg); + display: table; + } + </style> + </head> + <body> + <div>This is some rotated text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-display-003.html b/testing/web-platform/tests/css/css-transforms/transform-display-003.html new file mode 100644 index 0000000000..8ac29168c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-display-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Inline-Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transformable-element"> + <meta name="assert" content='Inline-tables are atomic inline-level + elements, so should transform the same as blocks.'> + <link rel="match" href="transform-display-ref.html"> + <link rel="mismatch" href="transform-display-notref.html"> + <style> + div { + width: 100px; + height: 100px; + transform: rotate(180deg); + display: inline-table; + } + </style> + </head> + <body> + <div>This is some rotated text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-display-004.html b/testing/web-platform/tests/css/css-transforms/transform-display-004.html new file mode 100644 index 0000000000..5659a7c409 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-display-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): List-Item</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transformable-element"> + <meta name="assert" content='List-items are block-level elements, so + should transform the same as blocks.'> + <link rel="match" href="transform-display-ref.html"> + <link rel="mismatch" href="transform-display-notref.html"> + <style> + div { + width: 100px; + height: 100px; + transform: rotate(180deg); + display: list-item; + list-style-type: none; + } + </style> + </head> + <body> + <div>This is some rotated text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-display-notref.html b/testing/web-platform/tests/css/css-transforms/transform-display-notref.html new file mode 100644 index 0000000000..67fe3284b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-display-notref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>This is some rotated text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-display-ref.html b/testing/web-platform/tests/css/css-transforms/transform-display-ref.html new file mode 100644 index 0000000000..9ed62fb00f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-display-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 100px; + transform: rotate(180deg); + } + </style> + </head> + <body> + <div>This is some rotated text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-001.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-001.html new file mode 100644 index 0000000000..5198d09cc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"Fixed backgrounds on the root element are + affected by any transform specified for that element. For all other + elements that are effected by a transform (i.e. have a transform applied + to them, or to any of their ancestor elements), a value of fixed for the + background-attachment property is treated as if it had a value of + scroll."'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <style> + body { + margin: 0; + } + div { + background: url(support/transform-triangle-left.svg) fixed; + width: 100px; + height: 100px; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-002.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-002.html new file mode 100644 index 0000000000..37b4975dc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background (with scrolling)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"Fixed backgrounds on the root element are + affected by any transform specified for that element. For all other + elements that are effected by a transform (i.e. have a transform applied + to them, or to any of their ancestor elements), a value of fixed for the + background-attachment property is treated as if it had a value of scroll." + Here we translate the div 150px down instead of 50px, and also scroll down + 100px. This should be the same as the previous test.'> + <meta name="flags" content="svg dom"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <style> + body { + margin: 0; + height: 5000px; + overflow: hidden; + } + div { + background: url(support/transform-triangle-left.svg) fixed; + width: 100px; + height: 100px; + transform: translate(50px, 150px); + } + </style> + </head> + <body> + <div></div> + <script>scroll(0, 100)</script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-003.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-003.html new file mode 100644 index 0000000000..73d4296b14 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background (with rotation)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This is the same as transform-fixed-bg-001, + except that we also test that a rotation on a non-root element doesn't + affect fixed backgrounds.'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200"> + <style> + body { + margin: 0; + } + div { + background: url(support/transform-triangle-down.svg) fixed; + width: 100px; + height: 100px; + transform: translate(50px, 50px) rotate(90deg); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-004.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-004.html new file mode 100644 index 0000000000..8da1689620 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background (with rotation and scrolling)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This is the same as transform-fixed-bg-002, + except that we also test that a rotation on a non-root element doesn't + affect fixed backgrounds.'> + <meta name="flags" content="svg dom"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200"> + <style> + body { + margin: 0; + height: 5000px; + overflow: hidden; + } + div { + background: url(support/transform-triangle-down.svg) fixed; + width: 100px; + height: 100px; + transform: translate(50px, 150px) rotate(90deg); + } + </style> + </head> + <body> + <div></div> + <script>scroll(0, 100)</script> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-005.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-005.html new file mode 100644 index 0000000000..c4cd1c2642 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-005.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background (no-op transform)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"Fixed backgrounds on the root element are + affected by any transform specified for that element. For all other + elements that are effected by a transform (i.e. have a transform applied + to them, or to any of their ancestor elements), a value of fixed for the + background-attachment property is treated as if it had a value of scroll." + This tests that adding a no-op transform to an element with a fixed + background doesn't change rendering from scroll background.'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <style> + body { + margin: 0; + } + div { + background: url(support/transform-triangle-left.svg) fixed; + width: 100px; + height: 100px; + position: relative; + left: 50px; + top: 50px; + transform: translate(0); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-006.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-006.html new file mode 100644 index 0000000000..89acec8e74 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-006.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background (transform of intermediate)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"Fixed backgrounds on the root element are + affected by any transform specified for that element. For all other + elements that are effected by a transform (i.e. have a transform applied + to them, or to any of their ancestor elements), a value of fixed for the + background-attachment property is treated as if it had a value of scroll." + This tests that adding a rotation to a non-root element doesn't + change rendering of fixed backgrounds on its descendants relative to what + they would be if background-attachment: scroll.'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200"> + <style> + body { + margin: 0; + transform: rotate(90deg); + transform-origin: 100px 100px; + overflow: hidden; + } + div { + background: url(support/transform-triangle-down.svg) fixed; + width: 100px; + height: 100px; + position: relative; + left: 50px; + top: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-007.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-007.html new file mode 100644 index 0000000000..2ffbc41e18 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background (transform on root)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='"Fixed backgrounds on the root element are + affected by any transform specified for that element. For all other + elements that are effected by a transform (i.e. have a transform applied + to them, or to any of their ancestor elements), a value of fixed for the + background-attachment property is treated as if it had a value of scroll." + This tests that a transform on the root element still leads fixed + backgrounds on descendants to act as though they were scrolled + backgrounds.'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200"> + <style> + html { + transform: rotate(-90deg); + transform-origin: 100px 100px; + overflow: hidden; + } + body { + margin: 0; + } + div { + background: url(support/transform-triangle-up.svg) fixed; + width: 100px; + height: 100px; + position: relative; + left: 50px; + top: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-008.tentative.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-008.tentative.html new file mode 100644 index 0000000000..d2fc4b6244 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-008.tentative.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Fixed Background (will-change: transform)</title> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6951"> + <meta name="assert" content='"Fixed backgrounds on the root element are + affected by any transform specified for that element. For all other + elements that are effected by a transform (i.e. have a transform applied + to them, or to any of their ancestor elements), a value of fixed for the + background-attachment property is treated as if it had a value of scroll." + This tests that adding will-change: transform to an element with a fixed + background doesn't change rendering from scroll background.'> + <meta name="flags" content="svg"> + <link rel="match" href="transform-fixed-bg-ref.html"> + <meta name="fuzzy" content="0-5;0-200"> + <style> + body { + margin: 0; + } + div { + background: url(support/transform-triangle-left.svg) fixed; + width: 100px; + height: 100px; + position: relative; + left: 50px; + top: 50px; + will-change: transform; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-ref.html b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-ref.html new file mode 100644 index 0000000000..fa579319dc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-fixed-bg-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <style> + body { + margin: 0; + } + div { + background: url(support/transform-triangle-left.svg); + width: 100px; + height: 100px; + position: relative; + left: 50px; + top: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-flattening-001.html b/testing/web-platform/tests/css/css-transforms/transform-flattening-001.html new file mode 100644 index 0000000000..85d29779b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-flattening-001.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS Transforms: Transforms are flattened if transform-style is flat.</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-context"> +<link rel="mismatch" href="about:blank"> +<!-- Should see a green rectangle, not white --> +<div style="transform: rotateX(45deg)"> + <div style="transform: rotateX(45deg); background: green; width: 100px; height: 100px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-generated-001-notref.html b/testing/web-platform/tests/css/css-transforms/transform-generated-001-notref.html new file mode 100644 index 0000000000..f0c2792682 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-generated-001-notref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + float: left; + } + div::before { + float: left; + content: 'abc'; + } + </style> + </head> + <body> + <div>def</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-generated-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-generated-001-ref.html new file mode 100644 index 0000000000..08ab93aabb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-generated-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + float: left; + } + div:first-child { + transform: rotate(180deg); + } + </style> + </head> + <body> + <div>abc</div> + <div>def</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-generated-001.html b/testing/web-platform/tests/css/css-transforms/transform-generated-001.html new file mode 100644 index 0000000000..7b7136a1f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-generated-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Generated Content (block)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="Transforms need to work on boxes of generated + content just as on any other boxes. This file tests a generated block + box."> + <link rel="match" href="transform-generated-001-ref.html"> + <link rel="mismatch" href="transform-generated-001-notref.html"> + <style> + div { + float: left; + } + div::before { + transform: rotate(180deg); + float: left; + content: 'abc'; + } + </style> + </head> + <body> + <div>def</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-generated-002-notref.html b/testing/web-platform/tests/css/css-transforms/transform-generated-002-notref.html new file mode 100644 index 0000000000..3dc1808fbf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-generated-002-notref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + span::before { + display: block; + content: 'abc'; + } + </style> + </head> + <body> + <span>def</span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-generated-002-ref.html b/testing/web-platform/tests/css/css-transforms/transform-generated-002-ref.html new file mode 100644 index 0000000000..e9b6663a36 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-generated-002-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + transform: rotate(180deg); + transform-origin: left; + } + </style> + </head> + <body> + <div>abc</div> + <span>def</span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-generated-002.html b/testing/web-platform/tests/css/css-transforms/transform-generated-002.html new file mode 100644 index 0000000000..60c4932d15 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-generated-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Generated Content (inline)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="Transforms need to work on boxes of generated + content just as on any other boxes. This file tests a generated inline + box."> + <link rel="match" href="transform-generated-002-ref.html"> + <link rel="mismatch" href="transform-generated-002-notref.html"> + <style> + span::before { + transform: rotate(180deg); + transform-origin: left; + display: block; + content: 'abc'; + } + </style> + </head> + <body> + <span>def</span> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-getBoundingClientRect-001.html b/testing/web-platform/tests/css/css-transforms/transform-getBoundingClientRect-001.html new file mode 100644 index 0000000000..15adf31f0d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-getBoundingClientRect-001.html @@ -0,0 +1,41 @@ +<meta charset=UTF-8> +<title>CSS Test: transform and getBoundingClientRect</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> +<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { + margin: 0; + } + + div { + height: 100px; + width: 100px; + } + + #outer { + transform: translate(100px, 100px); + } + + #inner { + transform: scale(0.5); + transform-origin: center; + } +</style> + +<div id="outer"> + <div> + <div id="inner"></div> + </div> +</div> + +<script> + test(function() { + let bcr = document.getElementById("inner").getBoundingClientRect(); + assert_equals(bcr.x, 125); + assert_equals(bcr.y, 125); + }, "correct getBoundingClientRect() result within set of transforms"); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-hit-testing.html b/testing/web-platform/tests/css/css-transforms/transform-hit-testing.html new file mode 100644 index 0000000000..6a890dc367 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-hit-testing.html @@ -0,0 +1,153 @@ +<!DOCTYPE HTML> +<title>CSS Test (Transforms): Hit Testing</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#transform-property"> +<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms"> +<meta name="flags" content="dom"> +<style> + +html, body { + height: 100%; + width: 100%; + margin: 0; + padding: 0; + border: none; +} + +body { margin: 50px; } + +</style> +<script> + +let body_x_margin = 50; +let body_y_margin = 50; + +</script> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<body> +<script> + +class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } +} + +let simple_tests = [ + // In this list of tests, test_points_inside and test_points_outside + // are relative to the element's untransformed origin (top, left). + { + description: "rectangle with 'translate' and 'rotate'", + styles: "width: 100px; height: 50px; translate: 30px; rotate: 20deg;", + test_points_inside: [ + new Point(28, 32), + new Point(44, -10), + new Point(133, 22), + new Point(117, 64), + new Point(65, 27), + ], + test_points_outside: [ + new Point(30, 5), + new Point(28, 37), + new Point(100, 2), + new Point(124, 58), + ], + }, + { + description: "rectangle with 'transform'", + styles: "width: 100px; height: 50px; transform: translate(30px) rotate(20deg);", + test_points_inside: [ + new Point(28, 32), + new Point(44, -10), + new Point(133, 22), + new Point(117, 64), + new Point(65, 27), + ], + test_points_outside: [ + new Point(30, 5), + new Point(28, 37), + new Point(100, 2), + new Point(124, 58), + ], + }, + { + description: "rectangle with 'translate' and 'rotate' and 'scale' and 'transform'", + styles: "width: 100px; height: 50px; translate: 30px; rotate: 40deg; scale: 2; transform: rotate(-20deg) scale(0.5)", + test_points_inside: [ + new Point(28, 32), + new Point(44, -10), + new Point(133, 22), + new Point(117, 64), + new Point(65, 27), + ], + test_points_outside: [ + new Point(30, 5), + new Point(28, 37), + new Point(100, 2), + new Point(124, 58), + ], + }, + { + description: "square with 'rotate'", + styles: "width: 10px; height: 10px; rotate: 90deg; transform-origin: 0 10px", + test_points_inside: [ + new Point(1, 11), + new Point(9, 11), + new Point(1, 19), + new Point(9, 19), + ], + test_points_outside: [ + new Point(1, 9), + new Point(9, 9), + ], + }, + { + description: "square with 'scale'", + styles: "width: 10px; height: 10px; scale: 0.2;", + test_points_inside: [ + new Point(4, 4), + new Point(5, 4), + new Point(4, 5), + new Point(5, 5), + ], + test_points_outside: [ + new Point(3, 3), + new Point(3, 5), + new Point(3, 6), + new Point(5, 3), + new Point(5, 6), + new Point(6, 3), + new Point(6, 5), + new Point(6, 6), + ], + }, +]; + +for (let t of simple_tests) { + test(function() { + let e = document.createElement("div"); + e.setAttribute("style", t.styles); + document.body.appendChild(e); + + for (let p of t.test_points_inside) { + let res = document.elementFromPoint(p.x + body_x_margin, + p.y + body_y_margin); + assert_equals(res, e, + `point (${p.x}, ${p.y}) is inside element`); + } + + for (let p of t.test_points_outside) { + let res = document.elementFromPoint(p.x + body_x_margin, + p.y + body_y_margin); + assert_equals(res, document.body, + `point (${p.x}, ${p.y}) is outside element`); + } + + e.remove(); + }, `hit testing of ${t.description}`); +} +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-iframe-001.html b/testing/web-platform/tests/css/css-transforms/transform-iframe-001.html new file mode 100644 index 0000000000..b8620a04ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-iframe-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Iframe</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transforms cannot move + the contents of an iframe onto the parent page. The iframe here contains a + red box shifted 500px down and to the right, outside the iframe's + visible area. overflow: hidden ensures that scrollbars are not tested.'> + <link rel="match" href="transform-iframe-ref.html"> + <style> + iframe { + overflow: hidden; + height: 200px; + width: 300px; + } + </style> + <iframe src="support/transform-iframe-001-contents.html"></iframe> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-iframe-ref.html b/testing/web-platform/tests/css/css-transforms/transform-iframe-ref.html new file mode 100644 index 0000000000..b674c88d82 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-iframe-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + iframe { + overflow: hidden; + height: 200px; + width: 300px; + } + </style> + <iframe src="about:blank"></iframe> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-image-001.html b/testing/web-platform/tests/css/css-transforms/transform-image-001.html new file mode 100644 index 0000000000..0565b8dbee --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-image-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed <img></title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transformable-element"> + <meta name="assert" content='An <img> is a transformable element, so + transforms should work on it the same as any image. This test compares an + img element with a 90deg rotation transform applied to a different image + that was pre-rotated by 90 degrees.'> + <link rel="match" href="transform-image-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200"> + <style> + img { + transform: rotate(90deg); + } + </style> + </head> + <body> + <img src="support/transform-triangle-up.svg"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-image-ref.html b/testing/web-platform/tests/css/css-transforms/transform-image-ref.html new file mode 100644 index 0000000000..301c0f94bb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-image-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <img src="support/transform-triangle-right.svg"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inherit-001.html b/testing/web-platform/tests/css/css-transforms/transform-inherit-001.html new file mode 100644 index 0000000000..0beb6895d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inherit-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): 'inherit' and em</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The 'transform' property's + computed value (which is what's inherited if 'inherit' is + specified) is defined as "As specified, but with relative lengths converted + into absolute lengths." In this test, a parent element has a transform of + 1em with a font-size of 25px, and the child has "transform: inherit". + Since the relative length of 1em is converted to an absolute length of 25px + before inheritance, the child should be translated by a further 25px, for a + total of 50px, even though its font-size is 100px. An implementation that + incorrectly inherited 1em without converting it to an absolute length first + would translate by 125px.'> + <link rel="match" href="transform-inherit-ref.html"> + <style> + body { + font-size: 25px; + transform: translate(1em, 1em); + overflow: hidden; + } + div { + font-size: 100px; + transform: inherit; + height: 100px; + width: 100px; + background: blue; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inherit-002.html b/testing/web-platform/tests/css/css-transforms/transform-inherit-002.html new file mode 100644 index 0000000000..05d5488b61 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inherit-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): 'inherit' and percentages</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The 'transform' property's + computed value (which is what's inherited if 'inherit' is + specified) is defined as "As specified, but with relative lengths converted + into absolute lengths." In this test, a parent element has a transform of + 10% with a height/width of 400px, and the child has "transform: inherit" + and a height/width of 100px. Since percentages are not relative lengths + and are inherited as specified, the parent should be translated by 40px and + then the child by only 10px, for a total of 50px. An implementation that + incorrectly converted the parent's 10% transform into 40px before + inheritance would translate the child by a further 40px, for a total of + 80px.'> + <link rel="match" href="transform-inherit-ref.html"> + <style> + body { + height: 400px; + width: 400px; + transform: translate(10%, 10%); + } + div { + height: 100px; + width: 100px; + transform: inherit; + background: blue; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-001.html b/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-001.html new file mode 100644 index 0000000000..203f2076f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): "transform-origin: inherit" and em</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='The 'transform-origin' + property's computed value (which is what's inherited if + 'inherit' is specified) is defined as "For <length> the + absolute value, otherwise a percentage." In this test, a parent element + has a transform-origin of '5em 10em' with a font-size of 10px, and + the child has "transform-origin: inherit". Since the relative length of + 5em is converted to an absolute length before inheritance, the + transform-origin should be at the bottom of the child, 50px 100px. The + 180deg rotation should thus effectively move the child down 100px. An + implementation that incorrectly inherited the transform-origin value before + converting to an absolute length would treat it as 100px 200px, since the + child has a font-size of 20px, so it would effectively translate the child + 100px right and 300px down.'> + <link rel="match" href="transform-inherit-origin-ref.html"> + <style> + body { + font-size: 10px; + transform-origin: 5em 10em; + } + div { + height: 100px; + width: 100px; + font-size: 20px; + transform: rotate(180deg); + transform-origin: inherit; + background: blue; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-002.html b/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-002.html new file mode 100644 index 0000000000..7de0fb48c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): "transform-origin: inherit" and percentages</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='The 'transform-origin' + property's computed value (which is what's inherited if + 'inherit' is specified) is defined as "For <length> the + absolute value, otherwise a percentage." In this test, a parent element + has a transform-origin of '50% 100%' with a height/width of 50px, + and the child has "transform-origin: inherit" with a height/width of 100px. + Since the transform-origin is a percentage, it's inherited before it + gets resolved to a length. This means it works out to 50px 100px on the + child, at its center, so the 180deg rotation should translate the child + down by 100px. An implementation that incorrectly resolved the + transform-origin to 25px 50px before inheritance would instead display the + child box translated left 75px.'> + <link rel="match" href="transform-inherit-origin-ref.html"> + <style> + body { + height: 50px; + width: 50px; + transform-origin: 50% 100%; + } + div { + height: 100px; + width: 100px; + transform: rotate(180deg); + transform-origin: inherit; + background: blue; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-ref.html b/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-ref.html new file mode 100644 index 0000000000..3d39942116 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inherit-origin-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + height: 100px; + width: 100px; + position: relative; + top: 100px; + background: blue; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inherit-ref.html b/testing/web-platform/tests/css/css-transforms/transform-inherit-ref.html new file mode 100644 index 0000000000..cb435bce62 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inherit-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + height: 100px; + width: 100px; + background: blue; + position: relative; + left: 50px; + top: 50px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inline-001.html b/testing/web-platform/tests/css/css-transforms/transform-inline-001.html new file mode 100644 index 0000000000..09a35f0055 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inline-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed Inline</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The definition of "transformable element" + includes atomic inline-level elements, such as images, but not regular + inline-level elements, such as spans. The 'transform' property + only applies to transformable elements, so it should have no effect on a + span.'> + <link rel="match" href="transform-inline-ref.html"> + <link rel="mismatch" href="transform-inline-notref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + font: 25px/1 Ahem; + } + span, p + p { + transform: rotate(180deg); + } + </style> + </head> + <body> + <p>This is some <span>text<br>that is</span> not transformed</p> + <p>This is some text that is transformed</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inline-notref.html b/testing/web-platform/tests/css/css-transforms/transform-inline-notref.html new file mode 100644 index 0000000000..e8e9ce8557 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inline-notref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + <p>This is some text<br>that is not transformed</p> + <p>This is some text that is transformed</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-inline-ref.html b/testing/web-platform/tests/css/css-transforms/transform-inline-ref.html new file mode 100644 index 0000000000..e64ce6837d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-inline-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + body { + font: 25px/1 Ahem; + } + p + p { + transform: rotate(180deg); + } + </style> + </head> + <body> + <p>This is some text<br>that is not transformed</p> + <p>This is some text that is transformed</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-001-ref.html new file mode 100644 index 0000000000..de85025af6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=text</p> + <input value="abc"> + <input value="abc"> + <input value="abc"> + <input value="abc"> + <input value="abc"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-001.html b/testing/web-platform/tests/css/css-transforms/transform-input-001.html new file mode 100644 index 0000000000..fb3e820165 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=text)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-001-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-553"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=text</p> + <input value="abc"> + <input value="abc"> + <input value="abc"> + <input value="abc"> + <input value="abc"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-002-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-002-ref.html new file mode 100644 index 0000000000..e502d3f5ca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-002-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=file</p> + <input value="abc" type="file"> + <input value="abc" type="file"> + <input value="abc" type="file"> + <input value="abc" type="file"> + <input value="abc" type="file"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-002.html b/testing/web-platform/tests/css/css-transforms/transform-input-002.html new file mode 100644 index 0000000000..c191a848ef --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-002.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=file)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-002-ref.html"> + <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-222"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=file</p> + <input value="abc" type="file"> + <input value="abc" type="file"> + <input value="abc" type="file"> + <input value="abc" type="file"> + <input value="abc" type="file"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-003-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-003-ref.html new file mode 100644 index 0000000000..7487cf0d4a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-003-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=search</p> + <input value="abc" type="search"> + <input value="abc" type="search"> + <input value="abc" type="search"> + <input value="abc" type="search"> + <input value="abc" type="search"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-003.html b/testing/web-platform/tests/css/css-transforms/transform-input-003.html new file mode 100644 index 0000000000..b8aa4e17ee --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=search)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-003-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-553"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=search</p> + <input value="abc" type="search"> + <input value="abc" type="search"> + <input value="abc" type="search"> + <input value="abc" type="search"> + <input value="abc" type="search"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-004-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-004-ref.html new file mode 100644 index 0000000000..2f69df2f6b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-004-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=tel</p> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-004.html b/testing/web-platform/tests/css/css-transforms/transform-input-004.html new file mode 100644 index 0000000000..cde5e5c651 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-004.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=tel)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-004-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1094"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=tel</p> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + <input value="555-5555" type="tel"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-005-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-005-ref.html new file mode 100644 index 0000000000..3888cd3981 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-005-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=url</p> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-005.html b/testing/web-platform/tests/css/css-transforms/transform-input-005.html new file mode 100644 index 0000000000..efa053e9c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-005.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=url)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-005-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-2389"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=url</p> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + <input value="http://www.w3.org/" type="url"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-006-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-006-ref.html new file mode 100644 index 0000000000..1e510842ae --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-006-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=email</p> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-006.html b/testing/web-platform/tests/css/css-transforms/transform-input-006.html new file mode 100644 index 0000000000..0a3715a65b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-006.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=email)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-006-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-2333"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=email</p> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + <input value="foo@example.org" type="email"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-007-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-007-ref.html new file mode 100644 index 0000000000..9d54c0c105 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-007-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=password</p> + <input value="abc" type="password"> + <input value="abc" type="password"> + <input value="abc" type="password"> + <input value="abc" type="password"> + <input value="abc" type="password"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-007.html b/testing/web-platform/tests/css/css-transforms/transform-input-007.html new file mode 100644 index 0000000000..397fe0dd1d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-007.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=password)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-007-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-544"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=password</p> + <input value="abc" type="password"> + <input value="abc" type="password"> + <input value="abc" type="password"> + <input value="abc" type="password"> + <input value="abc" type="password"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-008-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-008-ref.html new file mode 100644 index 0000000000..cc67785b29 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-008-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=datetime</p> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-008.html b/testing/web-platform/tests/css/css-transforms/transform-input-008.html new file mode 100644 index 0000000000..984d789ae1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-008.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=datetime)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-008-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1940"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=datetime</p> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + <input value="2012-02-01 17:28Z" type="datetime"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-009-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-009-ref.html new file mode 100644 index 0000000000..b363509c91 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-009-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + input { + font: 25px/1 Ahem; + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=date</p> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-009.html b/testing/web-platform/tests/css/css-transforms/transform-input-009.html new file mode 100644 index 0000000000..0295be5ded --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-009.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=date)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-009-ref.html"> + <style> + input { + /* Ahem font to avoid antialiasing fuzziness */ + font: 25px/1 Ahem; + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=date</p> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + <input value="2012-02-01" type="date"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-010-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-010-ref.html new file mode 100644 index 0000000000..cecbdcdd70 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-010-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=month</p> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-010.html b/testing/web-platform/tests/css/css-transforms/transform-input-010.html new file mode 100644 index 0000000000..64005a9b44 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-010.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=month)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-010-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1010"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=month</p> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + <input value="2012-02" type="month"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-011-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-011-ref.html new file mode 100644 index 0000000000..23808e282e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-011-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=week</p> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-011.html b/testing/web-platform/tests/css/css-transforms/transform-input-011.html new file mode 100644 index 0000000000..64ac2ddb0a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-011.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=week)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-011-ref.html"> + <meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-150"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=week</p> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + <input value="2012-W5" type="week"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-012-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-012-ref.html new file mode 100644 index 0000000000..1e15c5cebd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-012-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=time</p> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-012.html b/testing/web-platform/tests/css/css-transforms/transform-input-012.html new file mode 100644 index 0000000000..92d77720a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-012.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=time)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-012-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1201"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=time</p> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + <input value="17:28" type="time"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-013-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-013-ref.html new file mode 100644 index 0000000000..3754937f4f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-013-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=datetime-local</p> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-013.html b/testing/web-platform/tests/css/css-transforms/transform-input-013.html new file mode 100644 index 0000000000..1fe2b07f0b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-013.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=datetime-local)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-013-ref.html"> + <meta name="fuzzy" content="maxDifference=0-129;totalPixels=0-2506"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=datetime-local</p> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + <input value="2012-02-01 12:28" type="datetime-local"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-014-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-014-ref.html new file mode 100644 index 0000000000..9f4eacf7f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-014-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=number</p> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-014.html b/testing/web-platform/tests/css/css-transforms/transform-input-014.html new file mode 100644 index 0000000000..f463d6a051 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-014.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=number)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-014-ref.html"> + <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-866"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=number</p> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + <input value="613" min="0" max="1000" step="1" type="number"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-015-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-015-ref.html new file mode 100644 index 0000000000..47a85c2aed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-015-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=range</p> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-015.html b/testing/web-platform/tests/css/css-transforms/transform-input-015.html new file mode 100644 index 0000000000..14547a3fee --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-015.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=range)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-015-ref.html"> + <meta name="fuzzy" content="maxDifference=0-51;totalPixels=0-179"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=range</p> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + <input value="613" min="0" max="1000" type="range"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-016-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-016-ref.html new file mode 100644 index 0000000000..bd99d5c7e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-016-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=color</p> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-016.html b/testing/web-platform/tests/css/css-transforms/transform-input-016.html new file mode 100644 index 0000000000..8b3e0b4537 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-016.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=color)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-016-ref.html"> + <meta name="fuzzy" content="maxDifference=0-34;totalPixels=0-28"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=color</p> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + <input value="#0000ff" type="color"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-017-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-017-ref.html new file mode 100644 index 0000000000..2c3746740f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-017-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=checkbox</p> + <input type="checkbox" checked> + <input type="checkbox"> + <input type="checkbox" checked> + <input type="checkbox"> + <input type="checkbox" checked> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-017.html b/testing/web-platform/tests/css/css-transforms/transform-input-017.html new file mode 100644 index 0000000000..8c180bbe8f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-017.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=checkbox)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-017-ref.html"> + <meta name="fuzzy" content="maxDifference=0-48;totalPixels=0-16"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=checkbox</p> + <input type="checkbox" checked> + <input type="checkbox"> + <input type="checkbox" checked> + <input type="checkbox"> + <input type="checkbox" checked> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-018-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-018-ref.html new file mode 100644 index 0000000000..dfac8b53b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-018-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=radio</p> + <input type="radio" checked> + <input type="radio"> + <input type="radio" checked> + <input type="radio"> + <input type="radio" checked> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-018.html b/testing/web-platform/tests/css/css-transforms/transform-input-018.html new file mode 100644 index 0000000000..c97777e249 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-018.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=radio)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-018-ref.html"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=radio</p> + <input type="radio" checked> + <input type="radio"> + <input type="radio" checked> + <input type="radio"> + <input type="radio" checked> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-019-ref.html b/testing/web-platform/tests/css/css-transforms/transform-input-019-ref.html new file mode 100644 index 0000000000..a01e744d72 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-019-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + input { + margin: 10px; + position: relative; + } + p + input + input { + left: -10px; + } + p + input + input + input { + left: 10px; + } + p + input + input + input + input { + top: -10px; + } + p + input + input + input + input + input { + top: 10px; + } + </style> + </head> + <body> + <p>type=submit</p> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-input-019.html b/testing/web-platform/tests/css/css-transforms/transform-input-019.html new file mode 100644 index 0000000000..c5de33bf07 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-input-019.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Input (type=submit)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="reviewer" title="Apple Inc." href="http://www.apple.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='The input element is an atomic inline element, + so it falls under the definition of transformable and should be affected by + transformations as usual. This is one in a series of tests that verify + that a few simple transforms have the expected effect on various types of + inputs. (They only test a few very specific transforms because it would be + difficult to construct a correct reference file for more complex + transforms.)'> + <link rel="match" href="transform-input-019-ref.html"> + <meta name="fuzzy" content="maxDifference=0-60;totalPixels=0-100"> + <style> + input { + /* Margin to avoid overlap of translated inputs */ + margin: 10px; + } + p + input { + transform: rotate(360deg); + } + p + input + input { + transform: translateX(-10px); + } + p + input + input + input { + transform: translateX(10px); + } + p + input + input + input + input { + transform: translateY(-10px); + } + p + input + input + input + input + input { + transform: translateY(10px); + } + </style> + </head> + <body> + <p>type=submit</p> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + <input value="abc" type="submit"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-lime-square-ref.html b/testing/web-platform/tests/css/css-transforms/transform-lime-square-ref.html new file mode 100644 index 0000000000..b3b7e3575d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-lime-square-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + height: 100px; + width: 100px; + background: lime; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/reference/svg-transform-list-separations-ref.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/reference/svg-transform-list-separations-ref.html new file mode 100644 index 0000000000..e03c1996ab --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/reference/svg-transform-list-separations-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="100" y="100" width="100" height="100" fill="url(#grad)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-001.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-001.html new file mode 100644 index 0000000000..b80742dfe7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-001.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: No separations between transform functions on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with no separation between the 3 transform functions in the list"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0)translate(0 100)rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-002.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-002.html new file mode 100644 index 0000000000..eaf4bddc77 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-002.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Comma + no whitespace separations between transform functions on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with no whitespace."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0),translate(0 100),rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-003.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-003.html new file mode 100644 index 0000000000..5128499e14 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Comma + whitespace separations between transform functions on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with whitespace."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0), translate(0 100), rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-004.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-004.html new file mode 100644 index 0000000000..137898c891 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Whitespace separations between transform functions on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by whitespace."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0) translate(0 100) rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-005.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-005.html new file mode 100644 index 0000000000..62aae678f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-005.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Comma, whitespace, and no separations between transform functions on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 4 transform functions in the list delimited by a comma, whitespace, and nothing."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0),translate(0 100) rotate(45)rotate(45)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-006.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-006.html new file mode 100644 index 0000000000..83322f71e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-006.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Multiple spaces between transform functions on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 4 transform functions in the list with multiple spaces between them"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0) translate(0 100) rotate(45) rotate(45)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-007.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-007.html new file mode 100644 index 0000000000..e04a9053e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-007.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Multiple spaces before and after transform functions on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with multiple spaces before and after the transform function list"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform=" translate(200 0),translate(0 100) rotate(45)rotate(45) "/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-008.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-008.html new file mode 100644 index 0000000000..547b77c390 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Transform functions separated by commas separations with multiple spaces before the commas on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with whitespace before the commas."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0) ,translate(0 100) ,rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-009.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-009.html new file mode 100644 index 0000000000..205931a84f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-009.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Transform functions separated by commas separations with spaces before and after the commas on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas with whitespace before the commas."> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0) , translate(0 100) , rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-010.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-010.html new file mode 100644 index 0000000000..4845d3ae30 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-010.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Transform functions separated by newlines on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by newlines"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0) + translate(0 100) + rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-011.html b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-011.html new file mode 100644 index 0000000000..f414acbd75 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-011.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: Transform functions separated by commas and newlines on SVG presentation attribute</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-list"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <link rel="match" href="reference/svg-transform-list-separations-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect in the test should have an x offset of 100, a y offset of 100, and should be rotated 90 degrees clockwise with 3 transform functions in the list delimited by commas and newlines"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a vertical orange stripe to the left of a vertical fuchsia stripe.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)" transform="translate(200 0), + translate(0 100), + rotate(90)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-001-ref.html new file mode 100644 index 0000000000..60273af9f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + position: relative; + left: 100px; + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-001.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-001.html new file mode 100644 index 0000000000..e523ea6783 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix()/translateX()</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that translateX() has the same + effect as an equivalent matrix().'> + <link rel="match" href="transform-matrix-001-ref.html"> + <style> + div { + transform: matrix(1, 0, 0, 1, 100, 0); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-002-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-002-ref.html new file mode 100644 index 0000000000..92739fbb31 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + position: relative; + top: 100px; + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-002.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-002.html new file mode 100644 index 0000000000..5c86be354e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix()/translateY()</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that translateY() has the same + effect as an equivalent matrix().'> + <link rel="match" href="transform-matrix-002-ref.html"> + <style> + div { + transform: matrix(1, 0, 0, 1, 0, 100); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-003-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-003-ref.html new file mode 100644 index 0000000000..d6a31ec4c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-003-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + position: relative; + left: 47px; + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-003.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-003.html new file mode 100644 index 0000000000..ba74a8938a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-003.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix()/translateX(%)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that translateX() with a percentage + argument has the same effect as an equivalent matrix().'> + <link rel="match" href="transform-matrix-003-ref.html"> + <style> + div { + transform: matrix(1, 0, 0, 1, 47, 0); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-004-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-004-ref.html new file mode 100644 index 0000000000..9f4535de26 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-004-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + position: relative; + top: 23px; + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-004.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-004.html new file mode 100644 index 0000000000..297f6b70f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix()/translateY(%)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that translateY() with a percentage + argument has the same effect as an equivalent matrix().'> + <link rel="match" href="transform-matrix-004-ref.html"> + <style> + div { + transform: matrix(1, 0, 0, 1, 0, 23); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-005-notref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-005-notref.html new file mode 100644 index 0000000000..58209e357e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-005-notref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-005-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-005-ref.html new file mode 100644 index 0000000000..752f37fa38 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-005-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + transform: skewX(45deg); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-005.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-005.html new file mode 100644 index 0000000000..531f9f6718 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-005.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix()/skewX()</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that skewX() has the same effect as + an equivalent matrix().'> + <link rel="match" href="transform-matrix-005-ref.html"> + <link rel="mismatch" href="transform-matrix-005-notref.html"> + <style> + div { + transform: matrix(1, 0, 1, 1, 0, 0); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-006-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-006-ref.html new file mode 100644 index 0000000000..12171711bd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-006-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + transform: skewY(45deg); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-006.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-006.html new file mode 100644 index 0000000000..18dbd2705d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-006.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix()/skewY()</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that skewY() has the same effect as + an equivalent matrix().'> + <link rel="match" href="transform-matrix-006-ref.html"> + <link rel="mismatch" href="transform-matrix-005-notref.html"> + <style> + div { + transform: matrix(1, 1, 0, 1, 0, 0); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-007-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-007-ref.html new file mode 100644 index 0000000000..b832afa178 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-007-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + position: relative; + right: 50px; + bottom: 150px; + width: 200px; + height: 400px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-007.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-007.html new file mode 100644 index 0000000000..48612a5a17 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-007.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix()/scale()</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that scale() has the same + effect as an equivalent matrix().'> + <link rel="match" href="transform-matrix-007-ref.html"> + <style> + div { + transform: matrix(2, 0, 0, 4, 0, 0); + width: 100px; + height: 100px; + background: gold; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-008-notref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-008-notref.html new file mode 100644 index 0000000000..6fded81335 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-008-notref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + height: 100px; + width: 100px; + } + body > div { + transform: matrix(1, 0, 0, 1, 50, 0); + } + body > div > div { + transform: matrix(1, 0, 0, 1, 50, 0); + } + body > div > div > div { + background: blue; + } + </style> + </head> + <body> + <div> + <div> + <div></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-008-ref.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-008-ref.html new file mode 100644 index 0000000000..04b6bbff98 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-008-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 100px; + background: blue; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-matrix-008.html b/testing/web-platform/tests/css/css-transforms/transform-matrix-008.html new file mode 100644 index 0000000000..a6fdf3f776 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-matrix-008.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix() with non-numeric args</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> + <meta name="assert" content='This tests that providing length or percentage + values as arguments to matrix() is a syntax error.'> + <link rel="match" href="transform-matrix-008-ref.html"> + <link rel="mismatch" href="transform-matrix-008-notref.html"> + <style> + div { + height: 100px; + width: 100px; + } + body > div { + transform: matrix(1, 0, 0, 1, 50px, 0); + } + body > div > div { + transform: matrix(1, 0, 0, 1, 50%, 0); + } + body > div > div > div { + background: blue; + } + </style> + </head> + <body> + <div> + <div> + <div></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin-001.html new file mode 100644 index 0000000000..1951f92079 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Default transform-origin not top left</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='A transform-origin of 0% 0% must not result in + the same rendering as the default of 50% 50%, if a 45-degree rotation is + applied.'> + <link rel="mismatch" href="transform-origin-ref-1.html"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + transform: rotate(45deg); + transform-origin: 0% 0%; + } + </style> + </head> + <body> + <div> + Some text! + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin-002.html new file mode 100644 index 0000000000..6e31cda0aa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Default transform-origin not center right</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='A transform-origin of 100% 50% must not result + in the same rendering as the default of 50% 50%, if a 45-degree rotation is + applied.'> + <link rel="mismatch" href="transform-origin-ref-1.html"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + transform: rotate(45deg); + transform-origin: 100% 50%; + } + </style> + </head> + <body> + <div> + Some text! + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin-003.html new file mode 100644 index 0000000000..92abffc19d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin percentages 1</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='A transform-origin of 101px 51px must result + in the same rendering as the default of 50% 50% in this case. The content + box is 200x100px, so with a 1px border, the border box is 202x102px. + transform-origin is computed relative to the border box. (Note: an + implementation that incorrectly computes transform-origin percentages + relative to the content box would fail this test by only a few pixels, so + care is needed in checking that the test and reference renderings match + exactly.)'> + <link rel="match" href="transform-origin-ref-2.html"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + transform: rotate(45deg); + transform-origin: 101px 51px; + } + </style> + </head> + <body> + <div> + Some text! + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin-004.html new file mode 100644 index 0000000000..8737a816cf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-004.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin percentages 2</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='A transform-origin of 101px 50% must result + in the same rendering as the default of 50% 50% in this case. The content + box is 200x100px, so with a 1px border, the border box is 202x102px. + transform-origin is computed relative to the border box. (Note: an + implementation that incorrectly computes transform-origin percentages + relative to the content box would fail this test by only a few pixels, so + care is needed in checking that the test and reference renderings match + exactly.)'> + <link rel="match" href="transform-origin-ref-2.html"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + transform: rotate(45deg); + transform-origin: 101px 50%; + } + </style> + </head> + <body> + <div> + Some text! + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin-005.html new file mode 100644 index 0000000000..8aa017294e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-005.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin percentages 3</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='A transform-origin of 50% 51px must result in + the same rendering as the default of 50% 50% in this case. The content box + is 200x100px, so with a 1px border, the border box is 202x102px. + transform-origin is computed relative to the border box. (Note: an + implementation that incorrectly computes transform-origin percentages + relative to the content box would fail this test by only a few pixels, so + care is needed in checking that the test and reference renderings match + exactly.)'> + <link rel="match" href="transform-origin-ref-2.html"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + transform: rotate(45deg); + transform-origin: 50% 51px; + } + </style> + </head> + <body> + <div> + Some text! + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin-006.html new file mode 100644 index 0000000000..199a8ebcb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-006.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin percentages 4</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='Percentages in transform-origin refer to the + size of the element's border box. This tests that they don't + refer to the content, padding, or margin box by applying nonzero margin, + border, and padding. (Note: an implementation that resolves percentages + relative to the incorrect box might fail this test by only a few pixels, so + it's important to check that the test and reference renderings match + exactly.)'> + <link rel="match" href="transform-origin-ref-2.html"> + <style> + body > div { + width: 190px; + height: 90px; + padding: 5px; + border: 1px solid black; + margin: 5px; + transform: rotate(45deg); + transform-origin: 50% 50%; + position: relative; + right: 5px; + } + body > div > div { + margin: -5px; + } + </style> + </head> + <body> + <div> + <div>Some text!</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-007-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin-007-ref.html new file mode 100644 index 0000000000..0febe427a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-007-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + #test { + background-color: green; + height: 50px; + margin: 50px; + width: 50px; + } + #container { + background-color: gray; + height: 150px; + position: absolute; + width: 150px; + } +</style> +<body> + <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> + <div id="container"><div id="test"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin-007.html new file mode 100644 index 0000000000..074fd96181 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-007.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: transform-origin - 50% bottom('bottom' computes to '100%' in vertical position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> +<link rel="match" href="transform-origin-007-ref.html"> +<meta name="assert" content="The 'transform-origin' property set 'bottom' computes to 100% for the vertical position."> +<style> + .div1 { + height: 150px; + position: absolute; + width: 150px; + } + .div2 { + background-color: gray; + } + #test { + background-color: red; + height: 50px; + margin: 0px 50px 100px 50px; + transform: rotate(180deg); + transform-origin: 50% bottom; + width: 50px; + } + #ref { + background-color: green; + height: 50px; + margin: 0px 50px 100px 50px; + transform: rotate(180deg); + transform-origin: 50% 100%; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> + <div class="div1 div2"><div id="test"></div></div> + <div class="div1"><div id="ref"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-008.html b/testing/web-platform/tests/css/css-transforms/transform-origin-008.html new file mode 100644 index 0000000000..1103ecbccc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-008.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: transform-origin - center 0%('center' computes to '50%' in horizontal position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> +<link rel="match" href="transform-origin-007-ref.html"> +<meta name="assert" content="The 'transform-origin' property set 'center' computes to 50%(left 50%) for the horizontal position."> +<style> + .div1 { + height: 150px; + position: absolute; + width: 150px; + } + .div2 { + background-color: gray; + } + #test { + background-color: red; + height: 50px; + margin: 100px 50px 0px 50px; + transform: rotate(180deg); + transform-origin: center 0%; + width: 50px; + } + #ref { + background-color: green; + height: 50px; + margin: 100px 50px 0px 50px; + transform: rotate(180deg); + transform-origin: 50% 0%; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> + <div class="div1 div2"><div id="test"></div></div> + <div class="div1"><div id="ref"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-009.html b/testing/web-platform/tests/css/css-transforms/transform-origin-009.html new file mode 100644 index 0000000000..00b78e4b02 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-009.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: transform-origin - 0% center('center' computes to '50%' in vertical position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> +<link rel="match" href="transform-origin-007-ref.html"> +<meta name="assert" content="The 'transform-origin' property set 'center' computes to 50%(top 50%) for the vertical position."> +<style> + .div1 { + height: 150px; + position: absolute; + width: 150px; + } + .div2 { + background-color: gray; + } + #test { + background-color: red; + height: 50px; + margin: 50px 0px 50px 100px; + transform: rotate(180deg); + transform-origin: 0% center; + width: 50px; + } + #ref { + background-color: green; + height: 50px; + margin: 50px 0px 50px 100px; + transform: rotate(180deg); + transform-origin: 0% 50%; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> + <div class="div1 div2"><div id="test"></div></div> + <div class="div1"><div id="ref"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-01.html b/testing/web-platform/tests/css/css-transforms/transform-origin-01.html new file mode 100644 index 0000000000..d7e1cd34d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-01.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Test: SVG Transform using transform-origin</title> + <link rel="author" title="CJ Gammon" href="mailto:gammon@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/transform-origin-01-ref.html"> + <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'"> + <style type="text/css"> + #container{ + position: relative; + } + + .square{ + position: absolute; + } + + #blue{ + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: blue; + } + + #red{ + top: 0px; + left: 100px; + width: 100px; + height: 100px; + background: red; + transform-origin: left center; + transform: rotate(90deg); + } + + #green{ + top: 0px; + left: 100px; + width: 100px; + height: 100px; + background: green; + transform-origin: left; + transform: rotate(90deg); + } + + </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="blue" class="square"></div> + <div id="red" class="square"></div> + <div id="green" class="square"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-010.html b/testing/web-platform/tests/css/css-transforms/transform-origin-010.html new file mode 100644 index 0000000000..7f343e5abd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-010.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: transform-origin - left 0%('left' computes to '0%' in horizontal position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> +<link rel="match" href="transform-origin-007-ref.html"> +<meta name="assert" content="The 'transform-origin' property set 'left' computes to 0% for the horizontal position."> +<style> + .div1 { + height: 150px; + position: absolute; + width: 150px; + } + .div2 { + background-color: gray; + } + #test { + background-color: red; + height: 50px; + margin: 100px 0px 0px 100px; + transform: rotate(180deg); + transform-origin: left 0%; + width: 50px; + } + #ref { + background-color: green; + height: 50px; + margin: 100px 0px 0px 100px; + transform: rotate(180deg); + transform-origin: 0% 0%; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> + <div class="div1 div2"><div id="test"></div></div> + <div class="div1"><div id="ref"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-011.html b/testing/web-platform/tests/css/css-transforms/transform-origin-011.html new file mode 100644 index 0000000000..a8056b1c13 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-011.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: transform-origin - right 100%('right' computes to '100%' in horizontal position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> +<link rel="match" href="transform-origin-007-ref.html"> +<meta name="assert" content="The 'transform-origin' property set 'right' computes to 100% for the horizontal position."> +<style> + .div1 { + height: 150px; + position: absolute; + width: 150px; + } + .div2 { + background-color: gray; + } + #test { + background-color: red; + height: 50px; + margin: 0px 100px 100px 0px; + transform: rotate(180deg); + transform-origin: right 100%; + width: 50px; + } + #ref { + background-color: green; + height: 50px; + margin: 0px 100px 100px 0px; + transform: rotate(180deg); + transform-origin: 100% 100%; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> + <div class="div1 div2"><div id="test"></div></div> + <div class="div1"><div id="ref"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-012.html b/testing/web-platform/tests/css/css-transforms/transform-origin-012.html new file mode 100644 index 0000000000..220d4db0ff --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-012.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: transform-origin - 0% top('top' computes to '0%' in vertical position)</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com"> +<link rel="help" title="8. The 'transform-origin' Property" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> +<link rel="match" href="transform-origin-007-ref.html"> +<meta name="assert" content="The 'transform-origin' property set 'top' computes to 0% for the vertical position."> +<style> + .div1 { + height: 150px; + position: absolute; + width: 150px; + } + .div2 { + background-color: gray; + } + #test { + background-color: red; + height: 50px; + margin: 100px 0px 0px 100px; + transform: rotate(180deg); + transform-origin: 0% top; + width: 50px; + } + #ref { + background-color: green; + height: 50px; + margin: 100px 0px 0px 100px; + transform: rotate(180deg); + transform-origin: 0% 0%; + width: 50px; + } +</style> +<body> + <p>Test passes if there is a filled green square in the <strong>center</strong> of the gray square and no red.</p> + <div class="div1 div2"><div id="test"></div></div> + <div class="div1"><div id="ref"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-013-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin-013-ref.html new file mode 100644 index 0000000000..c88cd5e9ef --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-013-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Reftest Reference</title> +<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"> +<style> +div { + margin-top: -2px; + width: 50px; + height: 100px; + float: left; +} +.fuchsia { + background: fuchsia; +} +.orange { + background: orange; +} +</style> +<p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> +<div class="fuchsia"></div> +<div class="orange"></div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-013.html b/testing/web-platform/tests/css/css-transforms/transform-origin-013.html new file mode 100644 index 0000000000..93c17e7fc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-013.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Jaffe Worley" href="mailto:jaffe75@gmail.com"> + <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-origin-property"> + <link rel="match" href="transform-origin-013-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000"> + <style type="text/css"> + div { + width: 100px; + height: 100px; + } + .gradient{ + background-image: linear-gradient(orange 50%, fuchsia 50%); + transform: rotate(90deg); + transform-origin: top right; + } + + .red { + width: 98px; + height: 98px; + background: red; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <div class="red"></div> + <div class="gradient"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-014.html b/testing/web-platform/tests/css/css-transforms/transform-origin-014.html new file mode 100644 index 0000000000..c350166430 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-014.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>CSS Transforms: 'transform-origin' resolved values in SVG</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#target1 { + transform-origin: 50% 50%; + transform-box: fill-box; +} + +#target2, #target3, #target4 { + transform-origin: 50% 50%; +} +</style> +<svg fill="blue"> + <rect id="target1" x="100" y="100" width="100" height="100"/> + <rect id="target2" width="100" height="100"/> + <svg viewBox="0 0 50 50" x="100" width="100" height="100"> + <rect id="target3" width="100" height="100"/> + </svg> + <svg y="100" width="100" height="100"> + <rect id="target4" width="100" height="100"/> + </svg> +</svg> +<script> +test(function() { + let target = document.getElementById("target1"); + assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), + "50px 50px"); +}, "Percentage 'transform-origin' with 'fill-box' transform-box"); + +test(function() { + let target = document.getElementById("target2"); + assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), + "150px 75px"); +}, "Percentage 'transform-origin' with 'view-box' transform-box"); + +test(function() { + let target = document.getElementById("target3"); + assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), + "25px 25px"); +}, "Percentage 'transform-origin' with 'view-box' transform-box in nested <svg> with 'viewBox'"); + +test(function() { + let target = document.getElementById("target4"); + assert_equals(getComputedStyle(target).getPropertyValue("transform-origin"), + "50px 50px"); +}, "Percentage 'transform-origin' with 'view-box' transform-box in nested <svg> without 'viewBox'"); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-in-shadow.html b/testing/web-platform/tests/css/css-transforms/transform-origin-in-shadow.html new file mode 100644 index 0000000000..ebbc616ff8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-in-shadow.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>'transform-origin' on <svg> being direct descendant of shadow root</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-origin-property"> +<template> + <style> + #target { + height: 100px; + width: 100px; + background-color: green; + transform: rotate(90deg); + } + </style> + <svg id="target"></svg> +</template> +<div style="position: relative; height: 100px"> + <div style="width: 100px; height: 100px; background-color: red; position: absolute"></div> + <div style="position: absolute" id="wrapper"></div> +</div> +<script> +setup(function() { + const wrapper = document.querySelector('#wrapper'); + wrapper.attachShadow({mode: "open"}); + wrapper.shadowRoot.appendChild( + document.querySelector("template").content.cloneNode(true)); +}); + +test(function() { + const wrapper = document.querySelector('#wrapper'); + const target = wrapper.shadowRoot.getElementById('target'); + assert_equals(getComputedStyle(target, null).transformOrigin, '50px 50px'); +}); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-001.html new file mode 100644 index 0000000000..1970c66273 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin: top left</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='This tests that 'transform-origin: top + left' is the same as 'transform-origin: 0% 0%'.'> + <link rel="match" href="transform-origin-name-ref-1.html"> + <link rel="mismatch" href="transform-origin-name-notref.html"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: top left; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-002.html new file mode 100644 index 0000000000..145a47d60c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin: left top</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='This tests that 'transform-origin: left + top' is the same as 'transform-origin: 0% 0%'.'> + <link rel="match" href="transform-origin-name-ref-1.html"> + <link rel="mismatch" href="transform-origin-name-notref.html"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: left top; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-003.html new file mode 100644 index 0000000000..af4b80b6c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-003.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin: top</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='This tests that 'transform-origin: + top' is the same as 'transform-origin: 50% 0%'.'> + <link rel="match" href="transform-origin-name-ref-2.html"> + <link rel="mismatch" href="transform-origin-name-notref.html"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: top; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-004.html new file mode 100644 index 0000000000..bd2a393f84 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin: top center</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='This tests that 'transform-origin: + top center' is the same as 'transform-origin: 50% 0%'.'> + <link rel="match" href="transform-origin-name-ref-2.html"> + <link rel="mismatch" href="transform-origin-name-notref.html"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: top center; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-005.html new file mode 100644 index 0000000000..2b9e1c3eea --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-005.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin: center top</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='This tests that 'transform-origin: + center top' is the same as 'transform-origin: 50% 0%'.'> + <link rel="match" href="transform-origin-name-ref-2.html"> + <link rel="mismatch" href="transform-origin-name-notref.html"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: center top; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-006.html new file mode 100644 index 0000000000..775efe5f8b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-006.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin: top right</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='This tests that 'transform-origin: + top right' is the same as 'transform-origin: 100% 0%'.'> + <link rel="match" href="transform-origin-name-ref-3.html"> + <link rel="mismatch" href="transform-origin-name-notref.html"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: top right; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-007.html new file mode 100644 index 0000000000..7ba5e8d7d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-007.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): transform-origin: right top</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <meta name="assert" content='This tests that 'transform-origin: + right top' is the same as 'transform-origin: 100% 0%'.'> + <link rel="match" href="transform-origin-name-ref-3.html"> + <link rel="mismatch" href="transform-origin-name-notref.html"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: right top; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-notref.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-notref.html new file mode 100644 index 0000000000..488725acfe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-notref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-1.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-1.html new file mode 100644 index 0000000000..1db1d10d81 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: 0% 0%; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-2.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-2.html new file mode 100644 index 0000000000..e41c0a2b5d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: 50% 0%; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-3.html b/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-3.html new file mode 100644 index 0000000000..da0d408824 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-name-ref-3.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + margin: 300px 0 0 300px; + width: 100px; + height: 200px; + background: #202040; + transform: rotate(45deg); + transform-origin: 100% 0%; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-ref-1.html b/testing/web-platform/tests/css/css-transforms/transform-origin-ref-1.html new file mode 100644 index 0000000000..78e2baee0f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-ref-1.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + transform: rotate(45deg); + } + </style> + </head> + <body> + <div> + Some text! + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin-ref-2.html b/testing/web-platform/tests/css/css-transforms/transform-origin-ref-2.html new file mode 100644 index 0000000000..78e2baee0f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin-ref-2.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + transform: rotate(45deg); + } + </style> + </head> + <body> + <div> + Some text! + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin.html b/testing/web-platform/tests/css/css-transforms/transform-origin.html new file mode 100644 index 0000000000..dbc6b73058 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform-origin</title> + <link rel="author" title="Michael Downey" href="mailto:miked782000@yahoo.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#propdef-transform-origin"> + <link rel="match" href="reference/transform-origin-ref.html" /> + <meta name="assert" content="The transform should change the transform-origin to the bottom right and rotate 180 degrees"> + <style type="text/css"> + body {margin:0} + #greenSquare { + position: absolute; + top: 0px; + left: -100px; + width: 100px; + height: 100px; + background: green; + transform-origin: right bottom; + transform:rotate(90deg); + } + #relativeContainer { + position: relative; + } + #redSquare { + position: absolute; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background: red; + } + </style> + +</head> +<body> + +<p>The test passes if there is a green square and no red.</p> +<div id="relativeContainer" > + <div id="redSquare"></div> + <div id="greenSquare"></div> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html new file mode 100644 index 0000000000..8369f6abd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="2cm" height="2cm" transform="rotate(360)" fill="url(#grad)"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html new file mode 100644 index 0000000000..9be32c6d6d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="1.5in" height="1.5in" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html new file mode 100644 index 0000000000..3a18177794 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="80pt" height="80pt" transform="rotate(360)" fill="url(#grad)"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html new file mode 100644 index 0000000000..652e65caf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html new file mode 100644 index 0000000000..3302f68bd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="150" height="150" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html new file mode 100644 index 0000000000..3302f68bd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad"> + <stop offset="50%" stop-color="fuchsia"/> + <stop offset="50%" stop-color="orange"/> + </linearGradient> + </defs> + <rect width="150" height="150" fill="url(#grad)"/> + </svg> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-001.html new file mode 100644 index 0000000000..2f2256361c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="translate(100, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-002.html new file mode 100644 index 0000000000..d7d238c26e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="translate(100, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-003.html new file mode 100644 index 0000000000..3afea97a7e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 100px 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (100,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="100" width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="100px 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-004.html new file mode 100644 index 0000000000..c33c9809c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 100px</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,100px) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90) translate(-100 0)" transform-origin="0 100px"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-005.html new file mode 100644 index 0000000000..0f1d4d260f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 50px 50px</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (50px,50px) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="50px 50px"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-006.html new file mode 100644 index 0000000000..f29363483a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-006.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 100px 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (100,0) temporarily and must support unit less values for presentation attributes."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect x="100" width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="100 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-007.html new file mode 100644 index 0000000000..d1b067e0e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-007.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 100</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,100px) temporarily and must support unit less values for presentation attributes."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90) translate(-100 0)" transform-origin="0 100"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-008.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-008.html new file mode 100644 index 0000000000..545cbe0132 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-008.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 50 50</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-origin-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (50px,50px) temporarily and must support unit less values for presentation attributes."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="url(#grad)" transform="rotate(90)" transform-origin="50 50"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html new file mode 100644 index 0000000000..6324edf6ca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in cm - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="translate(75.5905512, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html new file mode 100644 index 0000000000..83c1ffc814 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in cm - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="translate(75.5905512, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html new file mode 100644 index 0000000000..f20e052222 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 2cm 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (2cm,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect x="2cm" width="2cm" height="2cm" fill="url(#grad)" transform="rotate(90)" transform-origin="2cm 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html new file mode 100644 index 0000000000..09bd7735de --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 2cm</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,2cm) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="rotate(90) translate(-75.5905512 0)" transform-origin="0 2cm"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html new file mode 100644 index 0000000000..6c16f0e111 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 1cm 1cm</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-cm-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (1cm,1cm) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="73.590551181" height="73.590551181" fill="red"/> + <rect width="2cm" height="2cm" fill="url(#grad)" transform="rotate(90)" transform-origin="1cm 1cm"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html new file mode 100644 index 0000000000..4d2d58df2e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in inch - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="translate(144, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html new file mode 100644 index 0000000000..0bd200cfbe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in inch - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="translate(144, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html new file mode 100644 index 0000000000..2108ef1840 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 1.5in 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (1.5in,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect x="1.5in" width="1.5in" height="1.5in" fill="url(#grad)" transform="rotate(90)" transform-origin="1.5in 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html new file mode 100644 index 0000000000..ec44d317cc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 1.5in</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,1.5in) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="rotate(90) translate(-144 0)" transform-origin="0 1.5in"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html new file mode 100644 index 0000000000..98b33c25c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0.75in 0.75in</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-in-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0.75in, 0.75in) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="142" height="142" fill="red"/> + <rect width="1.5in" height="1.5in" fill="url(#grad)" transform="rotate(90)" transform-origin="0.75in 0.75in"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html new file mode 100644 index 0000000000..6772fd10b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in pt - default value</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="translate(106.666667, 0) rotate(90)" transform-origin=""/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html new file mode 100644 index 0000000000..94b4b58dae --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values in pt - 0 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should be 0 0 by default, so the current value shouldn't make a difference."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="translate(106.6666667, 0) rotate(90)" transform-origin="0 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html new file mode 100644 index 0000000000..2d456b9c01 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 80pt 0</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (80pt,0) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect x="80pt" width="80pt" height="80pt" fill="url(#grad)" transform="rotate(90)" transform-origin="80pt 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html new file mode 100644 index 0000000000..494edb2a63 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 0 80pt</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (0,80pt) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="rotate(90) translate(-106.6666667 0)" transform-origin="0 80pt"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html new file mode 100644 index 0000000000..f307282379 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin with length values - 40pt 40pt</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="match" href="reference/svg-origin-length-pt-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The transform-origin should translate the origin by (40pt,40pt) temporarily."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="104.666666667" height="104.666666667" fill="red"/> + <rect width="80pt" height="80pt" fill="url(#grad)" transform="rotate(90)" transform-origin="40pt 40pt"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html new file mode 100644 index 0000000000..54e0031ee9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, first value absolute value and missing second argument</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html new file mode 100644 index 0000000000..ad58d8c431 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, first value 'center' value and missing second argument</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html new file mode 100644 index 0000000000..65f4d60035 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, first value '50%' value and missing second argument</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html new file mode 100644 index 0000000000..3b76a772df --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '50% 50%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50% 50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html new file mode 100644 index 0000000000..87e22fbe51 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '50% center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50% center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html new file mode 100644 index 0000000000..e74489e513 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 50%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center 50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html new file mode 100644 index 0000000000..e03a8d0d13 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html new file mode 100644 index 0000000000..c9e9e3b70b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '75 center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="75 center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html new file mode 100644 index 0000000000..a40a998d90 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '75 50%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="75 50%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html new file mode 100644 index 0000000000..0f4335dd10 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center 75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html new file mode 100644 index 0000000000..9ff00e6213 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '50% 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The rect should be rotated around its center point at 75,75"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="50% 75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html new file mode 100644 index 0000000000..e3c8a9b672 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '0'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 0,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html new file mode 100644 index 0000000000..b4977ea8e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '150'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="150"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html new file mode 100644 index 0000000000..6249beb7d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html new file mode 100644 index 0000000000..180f6cf8ca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html new file mode 100644 index 0000000000..7a0b0128cc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75. Since the second argument is missing, it is set to 'center'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75)" transform-origin="left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html new file mode 100644 index 0000000000..41abf1a014 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '25%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="If the second argument is missing, it is assumed to be center. The initial point of origin gets translated to 37.5,75."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-37.5,-37.5)" transform-origin="25%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html new file mode 100644 index 0000000000..6252022d3f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,0. A single argument 'top' gets interpreted as 'center top'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,-75)" transform-origin="top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html new file mode 100644 index 0000000000..af42850b30 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,150. A single argument 'bottom' gets interpreted as 'center bottom'."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,75)" transform-origin="bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html new file mode 100644 index 0000000000..8ca59aa904 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '0% 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since '0% 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="0% 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html new file mode 100644 index 0000000000..5b3ce3373e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'top right' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="top right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html new file mode 100644 index 0000000000..d6b4a25b88 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'top left' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="top left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html new file mode 100644 index 0000000000..d7b0c77f4b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'top center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75 since 'top center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="top center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html new file mode 100644 index 0000000000..24347e8cd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,225 since 'bottom left' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,75)" transform-origin="bottom left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html new file mode 100644 index 0000000000..7cf1d16c04 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,225 since 'bottom center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150,150)" transform-origin="bottom center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html new file mode 100644 index 0000000000..42d8044f58 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'bottom right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,225 since 'bottom right' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,225)" transform-origin="bottom right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html new file mode 100644 index 0000000000..2e65ae445e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'right top' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html new file mode 100644 index 0000000000..91c288e639 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,150 since 'right center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 150)" transform-origin="right center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html new file mode 100644 index 0000000000..0010c4d836 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,225 since 'right bottom' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,225)" transform-origin="right bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html new file mode 100644 index 0000000000..3faaee6647 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'right 0' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html new file mode 100644 index 0000000000..369be12dd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,75 since 'right 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,75)" transform-origin="right 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html new file mode 100644 index 0000000000..40e79ba7d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'right 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,225 since 'right 100%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,225)" transform-origin="right 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html new file mode 100644 index 0000000000..9abce87f70 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'left top' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="left top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html new file mode 100644 index 0000000000..16c1eeebb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,150 since 'left center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150 0)" transform-origin="left center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html new file mode 100644 index 0000000000..4a8c485673 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,225 since 'left bottom' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,75)" transform-origin="left bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html new file mode 100644 index 0000000000..2ed45e7cfe --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left 75'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'left 0' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="left 0"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html new file mode 100644 index 0000000000..4a40e18760 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,75 since 'left 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-75,-75)" transform-origin="left 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html new file mode 100644 index 0000000000..50924a663c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'left 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,225 since 'left 100%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,75)" transform-origin="left 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html new file mode 100644 index 0000000000..2e2b446309 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75 since 'center top' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html new file mode 100644 index 0000000000..3b46d2d22c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,225 since 'center bottom' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150,150)" transform-origin="center bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html new file mode 100644 index 0000000000..62189588a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 75,150 since 'center left' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150 0)" transform-origin="center left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html new file mode 100644 index 0000000000..3e8f278d31 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 225,150 since 'center right' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 150)" transform-origin="center right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html new file mode 100644 index 0000000000..b1d5a346c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,225 since 'center 100%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-150,150)" transform-origin="center 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html new file mode 100644 index 0000000000..e8352af401 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, '0 center'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 0,150 since '-75 center' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(-225,-75)" transform-origin="-75 center"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html new file mode 100644 index 0000000000..8af656ee7c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 0%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,75 since 'center 0%' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90)" transform-origin="center 0%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html new file mode 100644 index 0000000000..fd7d9764e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, 'center 0'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The initial point of origin gets translated to 150,0 since 'center -75' is relative to the bounding box of the object."> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect x="75" y="75" width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(75,-75)" transform-origin="center -75"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html new file mode 100644 index 0000000000..a7e9211697 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html new file mode 100644 index 0000000000..d9296ec019 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom 100%'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom 100%"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html new file mode 100644 index 0000000000..afee0ebc71 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top 150'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top 150"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html new file mode 100644 index 0000000000..cdf1270bf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom 150'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom 150"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html new file mode 100644 index 0000000000..e06e6f47dc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html new file mode 100644 index 0000000000..09d02c5cdb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html new file mode 100644 index 0000000000..727197b975 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'top bottom'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="top bottom"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html new file mode 100644 index 0000000000..da91e51199 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'bottom top'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two vertical values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="bottom top"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html new file mode 100644 index 0000000000..39dcbf4f73 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'left left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="left left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html new file mode 100644 index 0000000000..b13dd1e393 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'left right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="left right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html new file mode 100644 index 0000000000..f53d7f0a79 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'right right'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="right right"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html new file mode 100644 index 0000000000..69fe6f8129 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms Test: SVG presentation attribute transform-origin, invalid arguments 'right left'</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-user-coordinate-space"> + <link rel="match" href="reference/svg-origin-relative-length-invalid-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="Spec does not allow two horizontal values. Fallback to 0,0"> + <style type="text/css"> + svg { + width: 200px; + height: 200px; + } + rect { + transform-box: fill-box; + } + </style> + </head> + <body> + <p>The test passes if there is a vertical fuchsia stripe to the left of an orange stripe. You should see no red.</p> + <svg> + <!-- Fill with Gradient to avoid false positive. --> + <defs> + <linearGradient id="grad" x2="0%" y2="100%"> + <stop offset="50%" stop-color="orange"/> + <stop offset="50%" stop-color="fuchsia"/> + </linearGradient> + </defs> + <rect x="1" y="1" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="url(#grad)" transform="rotate(90) translate(0 -150)" transform-origin="right left"/> + </svg> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-overflow-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-overflow-001-ref.html new file mode 100644 index 0000000000..33847a0fe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-overflow-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body > div { + height: 200px; + width: 200px; + overflow: auto; + } + body > div > div { + height: 100px; + width: 100px; + background: blue; + position: relative; + left: 150px; + } + </style> + </head> + <body> + <div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-overflow-001.html b/testing/web-platform/tests/css/css-transforms/transform-overflow-001.html new file mode 100644 index 0000000000..3e545379b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-overflow-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): overflow: auto</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="". . . if the value of the 'overflow' property + is 'scroll' or 'auto', scrollbars will appear as needed to see content that + is transformed outside the visible area." This tests that the effect + of overflow: auto for a translation is the same as for an equivalent + relative positioning."> + <link rel="match" href="transform-overflow-001-ref.html"> + <style> + body > div { + height: 200px; + width: 200px; + overflow: auto; + } + body > div > div { + height: 100px; + width: 100px; + background: blue; + transform: translate(150px); + } + </style> + </head> + <body> + <div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-overflow-002-ref.html b/testing/web-platform/tests/css/css-transforms/transform-overflow-002-ref.html new file mode 100644 index 0000000000..0b35869d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-overflow-002-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body > div { + height: 200px; + width: 200px; + overflow: scroll; + } + body > div > div { + height: 100px; + width: 100px; + background: blue; + position: relative; + left: 150px; + } + </style> + </head> + <body> + <div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-overflow-002.html b/testing/web-platform/tests/css/css-transforms/transform-overflow-002.html new file mode 100644 index 0000000000..2fa9d18fdd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-overflow-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): overflow: scroll</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="". . . if the value of the 'overflow' property + is 'scroll' or 'auto', scrollbars will appear as needed to see content that + is transformed outside the visible area." This tests that the effect + of overflow: scroll for a translation is the same as for an equivalent + relative positioning."> + <link rel="match" href="transform-overflow-002-ref.html"> + <style> + body > div { + height: 200px; + width: 200px; + overflow: scroll; + } + body > div > div { + height: 100px; + width: 100px; + background: blue; + transform: translate(150px); + } + </style> + </head> + <body> + <div> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-001.html b/testing/web-platform/tests/css/css-transforms/transform-percent-001.html new file mode 100644 index 0000000000..59b9236706 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (translateX)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box."> + <link rel="match" href="transform-percent-ref.html"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50%) rotate(10deg) + translatey(50px) skewx(10deg) translate(25px, 25px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-002.html b/testing/web-platform/tests/css/css-transforms/transform-percent-002.html new file mode 100644 index 0000000000..bb783765be --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-002.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (translateY)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box."> + <link rel="match" href="transform-percent-ref.html"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50px) rotate(10deg) + translatey(100%) skewx(10deg) translate(25px, 25px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-003.html b/testing/web-platform/tests/css/css-transforms/transform-percent-003.html new file mode 100644 index 0000000000..3bf6242b3b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (translate)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box."> + <link rel="match" href="transform-percent-ref.html"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50px) rotate(10deg) + translatey(50px) skewx(10deg) translate(25%, 50%); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-004.html b/testing/web-platform/tests/css/css-transforms/transform-percent-004.html new file mode 100644 index 0000000000..382a51ad89 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-004.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (translateX and translateY)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box."> + <link rel="match" href="transform-percent-ref.html"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50%) rotate(10deg) + translatey(100%) skewx(10deg) translate(25px, 25px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-005.html b/testing/web-platform/tests/css/css-transforms/transform-percent-005.html new file mode 100644 index 0000000000..ba35397c15 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-005.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (translateX and translateY and translate)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box."> + <link rel="match" href="transform-percent-ref.html"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50%) rotate(10deg) + translatey(100%) skewx(10deg) translate(25%, 50%); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-006.html b/testing/web-platform/tests/css/css-transforms/transform-percent-006.html new file mode 100644 index 0000000000..f50ea7e9a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-006.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (translateX and translate)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box."> + <link rel="match" href="transform-percent-ref.html"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50%) rotate(10deg) + translatey(100%) skewx(10deg) translate(25%, 50%); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-007.html b/testing/web-platform/tests/css/css-transforms/transform-percent-007.html new file mode 100644 index 0000000000..9ced1c61be --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-007.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (translateY and translate)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box."> + <link rel="match" href="transform-percent-ref.html"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50px) rotate(10deg) + translatey(100%) skewx(10deg) translate(25%, 50%); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-008.html b/testing/web-platform/tests/css/css-transforms/transform-percent-008.html new file mode 100644 index 0000000000..e4b3332163 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-008.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Percentages (border box)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This is part of a series of tests that check + that percentages in 'transform' values are evaluated relative to the + transformed element's border box. This test adds a thicker border plus + margin and padding to make any discrepancies more evident."> + <link rel="match" href="transform-percent-ref.html"> + <meta name="fuzzy" content="maxDifference=0-102;totalPixels=0-416"> + <link rel="mismatch" href="transform-percent-notref.html"> + <style> + div { + width: 60px; + height: 10px; + padding: 10px; + border: 10px solid gold; + margin: 10px; + background: gold; + position: absolute; + left: 90px; + top: 90px; + transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) + skewx(10deg) translate(25px, 25px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-009.html b/testing/web-platform/tests/css/css-transforms/transform-percent-009.html new file mode 100644 index 0000000000..c6d64be3c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-009.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>CSS Transforms: 'transform' resolved percentage values in SVG</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#target1 { + transform: translate(50%, 50%); + transform-box: fill-box; +} + +#target2, #target3, #target4 { + transform: translate(50%, 50%); +} +</style> +<svg fill="blue"> + <rect id="target1" x="50" y="50" width="100" height="100"/> + <rect id="target2" x="-150" y="-75" width="100" height="100"/> + <svg viewBox="0 0 50 50" x="100" width="100" height="100"> + <rect id="target3" x="-25" y="-25" width="100" height="100"/> + </svg> + <svg y="100" width="100" height="100"> + <rect id="target4" x="-50" y="-50" width="100" height="100"/> + </svg> +</svg> +<script> +test(function() { + let target = document.getElementById("target1"); + assert_equals(getComputedStyle(target).getPropertyValue("transform"), + "matrix(1, 0, 0, 1, 50, 50)"); +}, "Percentage 'translate(...)' with 'fill-box' transform-box"); + +test(function() { + let target = document.getElementById("target2"); + assert_equals(getComputedStyle(target).getPropertyValue("transform"), + "matrix(1, 0, 0, 1, 150, 75)"); +}, "Percentage 'translate(...)' with 'view-box' transform-box"); + +test(function() { + let target = document.getElementById("target3"); + assert_equals(getComputedStyle(target).getPropertyValue("transform"), + "matrix(1, 0, 0, 1, 25, 25)"); +}, "Percentage 'translate(...)' with 'view-box' transform-box in nested <svg> with 'viewBox'"); + +test(function() { + let target = document.getElementById("target4"); + assert_equals(getComputedStyle(target).getPropertyValue("transform"), + "matrix(1, 0, 0, 1, 50, 50)"); +}, "Percentage 'translate(...)' with 'view-box' transform-box in nested <svg> without 'viewBox'"); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-010.html b/testing/web-platform/tests/css/css-transforms/transform-percent-010.html new file mode 100644 index 0000000000..92ebe78c1d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-010.html @@ -0,0 +1,28 @@ +<!doctype html> +<html class="reftest-wait"> +<title>CSS Transforms: 'transform' resolved percentage values in SVG after mutation</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-property"> +<link rel="match" href="transform-box/reference/greensquare200x200.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<style> + #container { + width: 400px; + height: 200px; + } +</style> +<p>There should be a green 200x200 rectangle below, and no red.</p> +<div id="container"> + <svg width="100%" height="100%"> + <rect width="200" height="200" fill="red"/> + <g id="target" style="transform: translate(50%, 50%)"> + <rect x="-100" y="-100" width="100%" height="100%" fill="green"/> + </g> + </svg> +</div> +<script> + waitForAtLeastOneFrame().then(() => { + document.getElementById('container').style.width = '200px'; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-notref.html b/testing/web-platform/tests/css/css-transforms/transform-percent-notref.html new file mode 100644 index 0000000000..96c70ec6d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-notref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-percent-ref.html b/testing/web-platform/tests/css/css-transforms/transform-percent-ref.html new file mode 100644 index 0000000000..7acaac2832 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-percent-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 50px; + background: gold; + position: absolute; + left: 100px; + top: 100px; + transform: rotate(10deg) translatex(50px) rotate(10deg) + translatey(50px) skewx(10deg) translate(25px, 25px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-propagate-inherit-boolean-001.html b/testing/web-platform/tests/css/css-transforms/transform-propagate-inherit-boolean-001.html new file mode 100644 index 0000000000..1e27e76862 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-propagate-inherit-boolean-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): em on Multiple Elements</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content="This tests that when a 'transform' rule using + em affects two elements with different font-sizes, it affects each + according to its respective font-size, rather than using the same length + for both. See: https://bugzilla.mozilla.org/show_bug.cgi?id=460440"> + <link rel="match" href="transform-propagate-inherit-boolean-ref.html"> + <style> + p { + font-size: 20px; + margin: 0; + height: 0; + width: 100px; + transform: translateX(4em); + } + p + p { + font-size: 40px; + } + </style> + </head> + <body> + <p>One</p> + <p>Two</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-propagate-inherit-boolean-ref.html b/testing/web-platform/tests/css/css-transforms/transform-propagate-inherit-boolean-ref.html new file mode 100644 index 0000000000..417f6e3d58 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-propagate-inherit-boolean-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + p { + font-size: 20px; + margin: 0; + height: 0; + width: 100px; + position: relative; + left: 80px; + } + p + p { + font-size: 40px; + position: relative; + left: 160px; + } + </style> + </head> + <body> + <p>One</p> + <p>Two</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-root-bg-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-root-bg-001-ref.html new file mode 100644 index 0000000000..811172e433 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-root-bg-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + html { + background: url(support/transform-triangle-left.svg) top left; + } + body { + /* The default 8px margin makes the background not line up exactly */ + margin: 0; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-root-bg-001.html b/testing/web-platform/tests/css/css-transforms/transform-root-bg-001.html new file mode 100644 index 0000000000..e3d7ff3807 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-root-bg-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale(-1) on Root Element With Background</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="The background here extends to the whole + canvas, and a transform on the root element should not transform the + canvas background. Thus the entire tiled background of left-pointing triangles + should not be rotated. An implementation that doesn't draw the background + correctly may rotate the background, or incorrectly clip it."> + <link rel="match" href="transform-root-bg-001-ref.html"> + <style> + html { + background: url(support/transform-triangle-left.svg); + transform: scale(-1); + } + body { + /* The default 8px margin makes the background not line up exactly */ + margin: 0; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-root-bg-002.html b/testing/web-platform/tests/css/css-transforms/transform-root-bg-002.html new file mode 100644 index 0000000000..2a433fe675 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-root-bg-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale(-1) on Root Element With Background On Body</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="Identical to transform-root-bg-001.html, + except that the background property is put on the body rather than the root + element. This should make no difference, because the body's background + propagates up to the canvas if there's no root element background."> + <link rel="match" href="transform-root-bg-001-ref.html"> + <style> + html { + transform: scale(-1); + } + body { + background: url(support/transform-triangle-left.svg); + /* The default 8px margin makes the background not line up exactly */ + margin: 0; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-root-bg-003.html b/testing/web-platform/tests/css/css-transforms/transform-root-bg-003.html new file mode 100644 index 0000000000..377847fc5a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-root-bg-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale(0.5) on Root Element With Background</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="This is the same as + transform-root-bg-001.html, except that it uses scale(0.5) instead of + scale(-1). It also specifies a transform-origin, because the default of + 50% 50% wouldn't work well with the way the reference image is constructed."> + <link rel="match" href="transform-root-bg-001-ref.html"> + <style> + html { + background: url(support/transform-triangle-left.svg); + transform: scale(0.5); + /** + * The transform-origin here has to fall between two triangles, i.e., + * at a multiple of 100px. Otherwise after the transform, the shrunken + * images won't line up with the left edge of the body, and it won't + * match the ref (since the background here is positioned at the left). + * We deliberately make it an odd multiple of the number of images so + * it catches an IE bug; it shouldn't matter per spec + */ + transform-origin: 300px 0; + } + body { + margin: 0; + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-root-bg-004-ref.html b/testing/web-platform/tests/css/css-transforms/transform-root-bg-004-ref.html new file mode 100644 index 0000000000..c2e30190ba --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-root-bg-004-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + background: url(support/transform-triangle-left.svg); + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-root-bg-004.html b/testing/web-platform/tests/css/css-transforms/transform-root-bg-004.html new file mode 100644 index 0000000000..c11284dd4d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-root-bg-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale(-1) On Body With Background</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content="This is like transform-root-bg-002.html, + except that the transform is specified on the body element, not just the + background. The background gets lifted to the root element, but the + transform does not, so the transform has no effect."> + <link rel="match" href="transform-root-bg-004-ref.html"> + <style> + body { + background: url(support/transform-triangle-left.svg); + transform: scale(-1); + } + </style> + </head> + <body> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-001-notref.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-001-notref.html new file mode 100644 index 0000000000..4cbaa13107 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-001-notref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-001-ref.html new file mode 100644 index 0000000000..f64c95e178 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + transform: rotate(45deg); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-001.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-001.html new file mode 100644 index 0000000000..f157b83f2e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate(45deg) rotate(360deg)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <meta name="assert" content="This is part of a series of tests that check + that various combinations of rotate() with different units are equivalent + to rotate(45deg)."> + <link rel="match" href="transform-rotate-001-ref.html"> + <link rel="mismatch" href="transform-rotate-001-notref.html"> + <style> + div { + transform: rotate(45deg) rotate(360deg); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-002.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-002.html new file mode 100644 index 0000000000..c6f28b5e14 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-002.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate(45deg) rotate(400grad)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <meta name="assert" content="This is part of a series of tests that check + that various combinations of rotate() with different units are equivalent + to rotate(45deg)."> + <link rel="match" href="transform-rotate-001-ref.html"> + <link rel="mismatch" href="transform-rotate-001-notref.html"> + <style> + div { + transform: rotate(45deg) rotate(400grad); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-003.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-003.html new file mode 100644 index 0000000000..40b69fb35b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate(45deg) rotate(100deg) rotate(80deg) + rotate(200grad)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <meta name="assert" content="This is part of a series of tests that check + that various combinations of rotate() with different units are equivalent + to rotate(45deg)."> + <link rel="match" href="transform-rotate-001-ref.html"> + <meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-11"> + <link rel="mismatch" href="transform-rotate-001-notref.html"> + <style> + div { + transform: rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-004.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-004.html new file mode 100644 index 0000000000..58f8103ab1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate(-45deg) rotate(100grad)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <meta name="assert" content="This is part of a series of tests that check + that various combinations of rotate() with different units are equivalent + to rotate(45deg)."> + <link rel="match" href="transform-rotate-001-ref.html"> + <meta name="fuzzy" content="maxDifference=0-13;totalPixels=0-10"> + <link rel="mismatch" href="transform-rotate-001-notref.html"> + <style> + div { + transform: rotate(-45deg) rotate(100grad); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-005.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-005.html new file mode 100644 index 0000000000..14eeddb9dd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-005.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate(-135deg) + rotate(3.1415926535897932384626433rad)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <meta name="assert" content="This is part of a series of tests that check + that various combinations of rotate() with different units are equivalent + to rotate(45deg)."> + <link rel="match" href="transform-rotate-001-ref.html"> + <link rel="mismatch" href="transform-rotate-001-notref.html"> + <style> + div { + transform: rotate(-135deg) rotate(3.1415926535897932384626433rad); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-006.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-006.html new file mode 100644 index 0000000000..678d0cbeec --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-006.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate(45deg) rotate(1turn)</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <meta name="assert" content="This is part of a series of tests that check + that various combinations of rotate() with different units are equivalent + to rotate(45deg)."> + <link rel="match" href="transform-rotate-001-ref.html"> + <link rel="mismatch" href="transform-rotate-001-notref.html"> + <style> + div { + transform: rotate(45deg) rotate(1turn); + width: 100px; + height: 100px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-007-notref.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-007-notref.html new file mode 100644 index 0000000000..e5e6af6c74 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-007-notref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 100px; + height: 200px; + border: 1px solid black; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-007-ref.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-007-ref.html new file mode 100644 index 0000000000..4e1c46d274 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-007-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + width: 200px; + height: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rotate-007.html b/testing/web-platform/tests/css/css-transforms/transform-rotate-007.html new file mode 100644 index 0000000000..915c72b0d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rotate-007.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Rotated Simple Box</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"> + <meta name="assert" content="This tests that rotating a simple rectangle by + 90 degrees produces another rectangle of the appropriate dimensions."> + <link rel="match" href="transform-rotate-007-ref.html"> + <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-4"> + <link rel="mismatch" href="transform-rotate-007-notref.html"> + <style> + div { + width: 100px; + height: 200px; + border: 1px solid black; + transform: translate(50px, -50px) rotate(-90deg); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rounding-001.html b/testing/web-platform/tests/css/css-transforms/transform-rounding-001.html new file mode 100644 index 0000000000..2b3ea45128 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rounding-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Rounding</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that the implementation does not + round intermediate matrices to the extent that it significantly distorts + the final result. (No requirement in the specification places any specific + constraints on rounding, but simple cases like this should not deviate + dramatically from the mathematically precise result.)'> + <link rel="match" href="transform-rounding-ref.html"> + <style> + div { + height: 100px; + width: 100px; + background: blue; + transform: scale(100000) translate(0.001px) scale(0.00001); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-rounding-ref.html b/testing/web-platform/tests/css/css-transforms/transform-rounding-ref.html new file mode 100644 index 0000000000..a42dd5895d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-rounding-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + height: 100px; + width: 100px; + background: blue; + position: relative; + left: 100px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-001.html b/testing/web-platform/tests/css/css-transforms/transform-scale-001.html new file mode 100644 index 0000000000..d046cc3fb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale(0.5, 0.5)</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <meta name="assert" content='This tests that scale(0.5, 0.5) scales down a + box by a factor of one-half.'> + <link rel="match" href="transform-scale-ref.html"> + <style> + body { + margin: 0; + } + + div { + background: green; + width: 100px; + height: 100px; + transform: scale(0.5, 0.5); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-002.html b/testing/web-platform/tests/css/css-transforms/transform-scale-002.html new file mode 100644 index 0000000000..dad5f25af5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-002.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale(0.5)</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <meta name="assert" content='This tests that scale(0.5) scales down a box + by a factor of one-half.'> + <link rel="match" href="transform-scale-ref.html"> + <style> + body { + margin: 0; + } + + div { + background: green; + width: 100px; + height: 100px; + transform: scale(0.5); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-hittest.html b/testing/web-platform/tests/css/css-transforms/transform-scale-hittest.html new file mode 100644 index 0000000000..c17f04291b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-hittest.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale"> +<link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-document-interface"> +<link rel="help" href="https://crbug.com/1015801"> +<link rel="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#normal { + width: 100px; + height: 10px; + position: absolute; + top: 0px; +} + +#scaled { + width: 1px; + height: 1px; + transform: scaleX(100) scaleY(100); + transform-origin: 0px 0px; + position: absolute; + top: 10px; + z-index: 1; /* Hit test #scaled before #normal */ +} +</style> +<div id=normal></div> +<div id=scaled></div> +<script> +test(() => { + const result = document.elementFromPoint(50, 9); + assert_equals(result, document.getElementById('normal')); +}, 'Hit test within unscaled box'); + +test(() => { + const result = document.elementFromPoint(50, 10); + assert_equals(result, document.getElementById('scaled')); +}, 'Hit test intersecting scaled box'); +</script> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html new file mode 100644 index 0000000000..2cb53fa4a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale(50%, 50%)</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scale"> + <meta name="assert" content='This tests that scale(50%, 75%) is equivalent to scale(0.5, 0.75), + because scale() is defined to accept both numbers and percentages.'> + <link rel="match" href="transform-scale-percent-ref.html"> + <style> + div { + background: green; + width: 100px; + height: 100px; + transform: scale(50%, 75%); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html new file mode 100644 index 0000000000..f6bd014135 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-percent-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + background: green; + width: 100px; + height: 100px; + transform: scale(0.5, 0.75) + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-ref.html b/testing/web-platform/tests/css/css-transforms/transform-scale-ref.html new file mode 100644 index 0000000000..4bcfab0c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + margin: 0; + } + + div { + background: green; + width: 50px; + height: 50px; + margin: 25px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scale-test.html b/testing/web-platform/tests/css/css-transforms/transform-scale-test.html new file mode 100644 index 0000000000..63ff1fce82 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scale-test.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with scale function.</title> + <link rel="author" title="Oleg Janeiko" href="mailto:oleg@the-incredible.me"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/transform-scale-test-ref.html"> + <meta name="assert" content="This transform shrinks a container by calling scale(.33). It also sets transform-origin to top left in order to visually align with the second green square."> + <style type="text/css"> + div { + background-color: green; + float: left; + margin: 50px; + } + .greenSquare { + width: 100px; + height: 100px; + transform: scale(.3); + transform-origin: top left; + } + .greenSquareTwo { + width: 30px; + height: 30px; + } + </style> +</head> +<body> + <p>The test passes if there are two green squares of the same size.</p> + <div class="greenSquareTwo"></div> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scalex-001.html b/testing/web-platform/tests/css/css-transforms/transform-scalex-001.html new file mode 100644 index 0000000000..46ef7a4a0b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scalex-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scaleX(0.5)</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scalex"> + <meta name="assert" content="This tests that scaleX(0.5) scales down a + box's width by a factor of one-half."> + <link rel="match" href="transform-scalex-ref.html"> + <style> + div { + background: green; + width: 100px; + height: 100px; + transform: scaleX(0.5); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scalex-ref.html b/testing/web-platform/tests/css/css-transforms/transform-scalex-ref.html new file mode 100644 index 0000000000..911fb34148 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scalex-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + background: green; + width: 50px; + height: 100px; + margin-left: 25px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scaley-001.html b/testing/web-platform/tests/css/css-transforms/transform-scaley-001.html new file mode 100644 index 0000000000..e226156bf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scaley-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scaleY(0.5)</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-scaley"> + <meta name="assert" content="This tests that scaleY(0.5) scales down a + box's width by a factor of one-half."> + <link rel="match" href="transform-scaley-ref.html"> + <style> + body { + margin: 0; + } + + div { + background: green; + width: 100px; + height: 100px; + transform: scaleY(0.5); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-scaley-ref.html b/testing/web-platform/tests/css/css-transforms/transform-scaley-ref.html new file mode 100644 index 0000000000..b84ede464d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-scaley-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + margin: 0; + } + + div { + background: green; + width: 100px; + height: 50px; + margin-top: 25px; + } + </style> + </head> + <body> + <div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-singular-001.html b/testing/web-platform/tests/css/css-transforms/transform-singular-001.html new file mode 100644 index 0000000000..9cc1e31983 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-singular-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix(1, 1, 1, 1, 0, 0)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-function-lists"> + <meta name="assert" content='"If a transform function causes the current + transformation matrix (CTM) of an object to be non-invertible, the object + and its content do not get displayed." The matrix (1, 1, 1, 1) has + determinant 1*1 - 1*1 = 0 and therefore is not invertible, so nothing + should display.'> + <link rel="match" href="transform-singular-ref.html"> + <style> + div { + width: 100px; + height: 100px; + background: red; + transform: matrix(1, 1, 1, 1, 0, 0); + } + </style> + </head> + <body> + <div> + This shouldn't be visible. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-singular-ref.html b/testing/web-platform/tests/css/css-transforms/transform-singular-ref.html new file mode 100644 index 0000000000..e5427bdb4c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-singular-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-stacking-001.html b/testing/web-platform/tests/css/css-transforms/transform-stacking-001.html new file mode 100644 index 0000000000..eefda74157 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-stacking-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Stacking, transform: scale(1)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This tests that specifying the identity + transform on an element still causes it to create a new stacking context + (unlike transform: none).'> + <link rel="match" href="transform-lime-square-ref.html"> + <style> + body > div:first-child { + transform: scale(1); + } + body > div:first-child > div { + height: 100px; + width: 100px; + background: red; + z-index: 1; + position: relative; + } + body > div:last-child { + height: 100px; + width: 100px; + background: lime; + position: relative; + bottom: 100px; + } + </style> + </head> + <body> + <div> + <div></div> + </div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-stacking-002.html b/testing/web-platform/tests/css/css-transforms/transform-stacking-002.html new file mode 100644 index 0000000000..127ca7389e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-stacking-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Stacking, transform: none</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This tests that "transform: none" does not + create a new stacking context -- it should have no effect at all.'> + <link rel="match" href="transform-lime-square-ref.html"> + <style> + body > div:first-child { + transform: none; + } + body > div:first-child > div { + height: 100px; + width: 100px; + background: lime; + z-index: 1; + position: relative; + } + body > div:last-child { + height: 100px; + width: 100px; + background: red; + position: relative; + bottom: 100px; + } + </style> + </head> + <body> + <div> + <div></div> + </div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-stacking-003.html b/testing/web-platform/tests/css/css-transforms/transform-stacking-003.html new file mode 100644 index 0000000000..fda7c933a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-stacking-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Stacking, invalid transform value</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This tests that specifying the transform + property with an invalid value does not create a new stacking context -- it + should have no effect at all, same as "transform: none".'> + <link rel="match" href="transform-lime-square-ref.html"> + <style> + body > div:first-child { + transform: quasit; + } + body > div:first-child > div { + height: 100px; + width: 100px; + background: lime; + z-index: 1; + position: relative; + } + body > div:last-child { + height: 100px; + width: 100px; + background: red; + position: relative; + bottom: 100px; + } + </style> + </head> + <body> + <div> + <div></div> + </div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-stacking-004.html b/testing/web-platform/tests/css/css-transforms/transform-stacking-004.html new file mode 100644 index 0000000000..4594b3f599 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-stacking-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Stacking, inherited transform: none</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This tests that specifying "transform: + inherit" (when the parent has no transform) does not create a new stacking + context -- it should have no effect at all, same as "transform: none".'> + <link rel="match" href="transform-lime-square-ref.html"> + <style> + body > div:first-child { + transform: inherit; + } + body > div:first-child > div { + height: 100px; + width: 100px; + background: lime; + z-index: 1; + position: relative; + } + body > div:last-child { + height: 100px; + width: 100px; + background: red; + position: relative; + bottom: 100px; + } + </style> + </head> + <body> + <div> + <div></div> + </div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-stresstest-001.html b/testing/web-platform/tests/css/css-transforms/transform-stresstest-001.html new file mode 100644 index 0000000000..4c83b3c78f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-stresstest-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Inversion Stress Test</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="assert" content="This simply applies and then inverts a large + number of 2D transform functions, and expects the result to be no transform + at all. One extra translateX(100px) is added at the end to ensure that the + lack of transform isn't just because the UA parsed it incorrectly, or + doesn't support transforms at all."> + <link rel="match" href="transform-stresstest-ref.html"> + <style> + div { + height: 200px; + width: 200px; + background: gold; + transform: skewx(45deg) + translate(50px, 50px) + rotate(45deg) + translatex(50px) + scale(2.0, 4.0) + scale(0.5, 0.25) + translatex(-50px) + rotate(-45deg) + translate(-50px, -50px) + skewx(135deg) + translateX(100px); + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-stresstest-ref.html b/testing/web-platform/tests/css/css-transforms/transform-stresstest-ref.html new file mode 100644 index 0000000000..e6ba9f5675 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-stresstest-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Clint Talbert" href="mailto:ctalbert@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + height: 200px; + width: 200px; + background: gold; + position: relative; + left: 100px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-001-notref.html b/testing/web-platform/tests/css/css-transforms/transform-table-001-notref.html new file mode 100644 index 0000000000..57d9636684 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-001-notref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <table> + <caption>Hello</caption> + <tr><td>there!</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-table-001-ref.html new file mode 100644 index 0000000000..e782c886dd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + transform: translate(200px) rotate(180deg); + transform-origin: left; + } + </style> + </head> + <body> + <div> + <table> + <caption>Hello</caption> + <tr><td>there!</td></tr> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-001.html b/testing/web-platform/tests/css/css-transforms/transform-table-001.html new file mode 100644 index 0000000000..4a41e4def8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform on Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that an appropriately-crafted + transform applied to a table works the same as if was applied to a wrapper + div.'> + <link rel="match" href="transform-table-001-ref.html"> + <link rel="mismatch" href="transform-table-001-notref.html"> + <style> + table { + transform: translate(200px) rotate(180deg); + transform-origin: left; + } + </style> + </head> + <body> + <table> + <caption>Hello</caption> + <tr><td>there!</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-002-notref.html b/testing/web-platform/tests/css/css-transforms/transform-table-002-notref.html new file mode 100644 index 0000000000..55e1845528 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-002-notref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + table { + display: inline-table; + } + </style> + </head> + <body> + <table> + <caption>Hello</caption> + <tr><td>there!</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-002.html b/testing/web-platform/tests/css/css-transforms/transform-table-002.html new file mode 100644 index 0000000000..e2a870f2e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform on Inline-Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that an appropriately-crafted + transform applied to an inline-table works the same as if was applied to a + wrapper div.'> + <link rel="match" href="transform-table-001-ref.html"> + <link rel="mismatch" href="transform-table-002-notref.html"> + <style> + table { + display: inline-table; + transform: translate(200px) rotate(180deg); + transform-origin: left; + } + </style> + </head> + <body> + <table> + <caption>Hello</caption> + <tr><td>there!</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-003.html b/testing/web-platform/tests/css/css-transforms/transform-table-003.html new file mode 100644 index 0000000000..96174d0bdb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform on Table 2</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that another appropriately-crafted + transform applied to a table works the same as if was applied to a wrapper + div.'> + <link rel="match" href="transform-table-001-ref.html"> + <link rel="mismatch" href="transform-table-001-notref.html"> + <style> + div { + transform: translateX(200px) rotate(180deg) translateY(-100%); + transform-origin: left; + } + table { + transform: translateY(100%); + } + </style> + </head> + <body> + <div> + <table> + <caption>Hello</caption> + <tr><td>there!</td></tr> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-004-notref.html b/testing/web-platform/tests/css/css-transforms/transform-table-004-notref.html new file mode 100644 index 0000000000..c1927e2eee --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-004-notref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + caption { + caption-side: bottom; + } + </style> + </head> + <body> + <table> + <caption>there!</caption> + <tr><td>Hello</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-004-ref.html b/testing/web-platform/tests/css/css-transforms/transform-table-004-ref.html new file mode 100644 index 0000000000..b70ca67496 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-004-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + transform: translate(200px) rotate(180deg); + transform-origin: left; + } + caption { + caption-side: bottom; + } + </style> + </head> + <body> + <div> + <table> + <caption>there!</caption> + <tr><td>Hello</td></tr> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-004.html b/testing/web-platform/tests/css/css-transforms/transform-table-004.html new file mode 100644 index 0000000000..c88a6b7f83 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform on Table with caption-side: bottom</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This is the same as transform-table-001.html, + except the caption has caption-side: bottom.'> + <link rel="match" href="transform-table-004-ref.html"> + <link rel="mismatch" href="transform-table-004-notref.html"> + <style> + table { + transform: translate(200px) rotate(180deg); + transform-origin: left; + } + caption { + caption-side: bottom; + } + </style> + </head> + <body> + <table> + <caption>there!</caption> + <tr><td>Hello</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-005-notref.html b/testing/web-platform/tests/css/css-transforms/transform-table-005-notref.html new file mode 100644 index 0000000000..cbc72a5a88 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-005-notref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + table { + display: inline-table; + } + caption { + caption-side: bottom; + } + </style> + </head> + <body> + <table> + <caption>there!</caption> + <tr><td>Hello</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-005.html b/testing/web-platform/tests/css/css-transforms/transform-table-005.html new file mode 100644 index 0000000000..7ab67ef939 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-005.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transform on Table with caption-side: bottom</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This is the same as transform-table-002.html, + except the caption has caption-side: bottom.'> + <link rel="match" href="transform-table-004-ref.html"> + <link rel="mismatch" href="transform-table-005-notref.html"> + <style> + table { + display: inline-table; + transform: translate(200px) rotate(180deg); + transform-origin: left; + } + caption { + caption-side: bottom; + } + </style> + </head> + <body> + <table> + <caption>there!</caption> + <tr><td>Hello</td></tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-006.html b/testing/web-platform/tests/css/css-transforms/transform-table-006.html new file mode 100644 index 0000000000..49d08a6aba --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-006.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Table Without Preserve-3D 1</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This has preserve-3d applied to the outer + wrapper of a table, but not the inner wrapper containing its contents. + Therefore, the contents should be rotated 90 degrees and vanish, and the + 90-degree rotation on the outer wrapper shouldn't restore them. An + implementation that incorrectly propagated preserve-3d to table descendants + might cause the text to appear, but mirrored."> + <link rel="match" href="transform-blank-ref.html"> + <style> + body > div { + transform: rotateX(90deg); + transform-style: preserve-3d; + } + td > div { + transform: rotateX(90deg); + } + </style> + </head> + <body> + <p>Nothing should appear except this sentence.</p> + <div> + <table> + <tr> + <td> + <div>Some text</div> + </td> + </tr> + </table> + </body> + </html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-007.html b/testing/web-platform/tests/css/css-transforms/transform-table-007.html new file mode 100644 index 0000000000..ef6de7e333 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-007.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Table Without Preserve-3D 2</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="In this case, preserve-3d is applied to every + element that's explicitly specified in the source code. However, the HTML + parser will insert an extra <tbody> element around the <tr>, + which will not have preserve-3d specified, so the contents should again + vainsh. An implementation that incorrectly propagated preserve-3d to table + descendants might cause the text to appear, but mirrored."> + <link rel="match" href="transform-blank-ref.html"> + <style> + body > div { + transform: rotateX(90deg); + } + td > div { + transform: rotateX(90deg); + } + body > div, table, tr, td { + transform-style: preserve-3d; + } + </style> + </head> + <body> + <p>Nothing should appear except this sentence.</p> + <div> + <table> + <tr> + <td> + <div>Some text</div> + </td> + </tr> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-008.html b/testing/web-platform/tests/css/css-transforms/transform-table-008.html new file mode 100644 index 0000000000..24a96d44bd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-008.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Table Without Preserve-3D 3</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is essentially the same as + transform-table-006.html, except using divs with 'display' specified + instead of actual table elements."> + <link rel="match" href="transform-blank-ref.html"> + <style> + body > div { + transform: rotateX(90deg); + transform-style: preserve-3d; + } + body > div > div { + display: table; + } + body > div > div > div { + display: table-row; + } + body > div > div > div > div { + display: table-cell; + transform-style: preserve-3d; + } + body > div > div > div > div > div { + transform: rotateX(90deg); + } + </style> + </head> + <body> + <p>Nothing should appear except this sentence.</p> + <div> + <div> + <div> + <div> + <div>Some text</div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-009-notref.html b/testing/web-platform/tests/css/css-transforms/transform-table-009-notref.html new file mode 100644 index 0000000000..9e9691241a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-009-notref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + table, tbody, tr, td { + margin: 0; + padding: 0; + border-spacing: 0; + } + </style> + </head> + <body> + <div> + <table> + <tbody> + <tr> + <td> + <div>Some text</div> + </td> + </tr> + </tbody> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-009-ref.html b/testing/web-platform/tests/css/css-transforms/transform-table-009-ref.html new file mode 100644 index 0000000000..5964aa6fe1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-009-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + div { + transform: rotateX(180deg); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-009.html b/testing/web-platform/tests/css/css-transforms/transform-table-009.html new file mode 100644 index 0000000000..21aa044f8d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-009.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Table With Preserve-3D 1</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is the same as transform-table-007.html, + except that transform-style is also explicitly applied to the intervening + <tbody>, so nothing should vanish."> + <link rel="match" href="transform-table-009-ref.html"> + <link rel="mismatch" href="transform-table-009-notref.html"> + <meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-3"> + <style> + table, tbody, tr, td { + margin: 0; + padding: 0; + border-spacing: 0; + } + div { + transform: rotateX(90deg); + } + body > div, table, tbody, tr, td { + transform-style: preserve-3d; + } + </style> + </head> + <body> + <div> + <table> + <tbody> + <tr> + <td> + <div>Some text</div> + </td> + </tr> + </tbody> + </table> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-010-notref.html b/testing/web-platform/tests/css/css-transforms/transform-table-010-notref.html new file mode 100644 index 0000000000..c96a6e1321 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-010-notref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body > div > div { + display: table; + } + body > div > div > div { + display: table-row; + } + body > div > div > div > div { + display: table-cell; + } + </style> + </head> + <body> + <div> + <div> + <div> + <div> + <div>Some text</div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-010.html b/testing/web-platform/tests/css/css-transforms/transform-table-010.html new file mode 100644 index 0000000000..8c660f87b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-010.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Table With Preserve-3D 2</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is the same as transform-table-007.html, + except that now divs are used instead of actual table elements. This means + that the parser doesn't create an implicit intervening <tbody>, so + preserve-3d is applied to all intervening elements, and the text should + display (mirrored)."> + <link rel="match" href="transform-table-009-ref.html"> + <link rel="mismatch" href="transform-table-010-notref.html"> + <meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-3"> + <style> + body > div { + transform: rotateX(90deg); + transform-style: preserve-3d; + } + body > div > div { + display: table; + transform-style: preserve-3d; + } + body > div > div > div { + display: table-row; + transform-style: preserve-3d; + } + body > div > div > div > div { + display: table-cell; + transform-style: preserve-3d; + } + body > div > div > div > div > div { + transform: rotateX(90deg); + } + </style> + </head> + <body> + <div> + <div> + <div> + <div> + <div>Some text</div> + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-011-notref.html b/testing/web-platform/tests/css/css-transforms/transform-table-011-notref.html new file mode 100644 index 0000000000..74e83217d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-011-notref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body > div > div { + display: table-cell; + } + </style> + </head> + <body> + <div> + <div> + <div>Some text</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-table-011.html b/testing/web-platform/tests/css/css-transforms/transform-table-011.html new file mode 100644 index 0000000000..73a5c48dde --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-table-011.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Table With Preserve-3D 3</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is an even more extreme example of + transform-table-010.html. CSS will create several anonymous table boxes + wrapping the div with display: table-cell, but none of these have + corresponding elements. Every actual element in the DOM still has + preserve-3d specified, so the text should not vanish."> + <link rel="match" href="transform-table-009-ref.html"> + <link rel="mismatch" href="transform-table-011-notref.html"> + <meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-3"> + <style> + body > div { + transform: rotateX(90deg); + transform-style: preserve-3d; + } + body > div > div { + display: table-cell; + transform-style: preserve-3d; + } + body > div > div > div { + transform: rotateX(90deg); + } + </style> + </head> + <body> + <div> + <div> + <div>Some text</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-block-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-block-ref.html new file mode 100644 index 0000000000..7f9de3be4a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-block-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: inline-block; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-block.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-block.html new file mode 100644 index 0000000000..22e45dba7b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-block.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Inline-Block</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on an + inline-block work as expected.'> + <link rel="match" href="transform-transformable-inline-block-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: inline-block; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-table-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-table-ref.html new file mode 100644 index 0000000000..09efea8169 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-table-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: inline-table; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-table.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-table.html new file mode 100644 index 0000000000..5495f3a260 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-inline-table.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Inline-Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on an + inline-table work as expected.'> + <link rel="match" href="transform-transformable-inline-table-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: inline-table; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-list-item-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-list-item-ref.html new file mode 100644 index 0000000000..e7bc10b656 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-list-item-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: list-item; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-list-item.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-list-item.html new file mode 100644 index 0000000000..f72682dabd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-list-item.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of List-Item</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + list-item work as expected.'> + <link rel="match" href="transform-transformable-list-item-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: list-item; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-caption-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-caption-ref.html new file mode 100644 index 0000000000..cff6a94384 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-caption-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: table-caption; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-caption.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-caption.html new file mode 100644 index 0000000000..e0bc577192 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-caption.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Table-Caption</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + table-caption work as expected.'> + <link rel="match" href="transform-transformable-table-caption-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: table-caption; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-cell-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-cell-ref.html new file mode 100644 index 0000000000..12c833411e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-cell-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: table-cell; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-cell.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-cell.html new file mode 100644 index 0000000000..28bfddb3ed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-cell.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Table-Cell</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + table-cell work as expected.'> + <link rel="match" href="transform-transformable-table-cell-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: table-cell; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-footer-group-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-footer-group-ref.html new file mode 100644 index 0000000000..6c27144358 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-footer-group-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: table-footer-group; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-footer-group.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-footer-group.html new file mode 100644 index 0000000000..92d6b63bc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-footer-group.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Table-Footer-Group</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + table-footer-group work as expected.'> + <link rel="match" href="transform-transformable-table-footer-group-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: table-footer-group; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-header-group-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-header-group-ref.html new file mode 100644 index 0000000000..1b9abeb2b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-header-group-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: table-header-group; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-header-group.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-header-group.html new file mode 100644 index 0000000000..a3665fcb1b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-header-group.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Table-Header-Group</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + table-header-group work as expected.'> + <link rel="match" href="transform-transformable-table-header-group-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: table-header-group; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-ref.html new file mode 100644 index 0000000000..207673b3e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: table; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-group-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-group-ref.html new file mode 100644 index 0000000000..2655cf8a55 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-group-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: table-row-group; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-group.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-group.html new file mode 100644 index 0000000000..1aa7cf7c37 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-group.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Table-Row-Group</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + table-row-group work as expected.'> + <link rel="match" href="transform-transformable-table-row-group-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: table-row-group; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-ref.html new file mode 100644 index 0000000000..e055c80e99 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + body { + overflow: hidden; + } + body > div { + position: relative; + top: 50px; + left: 50px; + } + body > div > div { + display: table-row; + } + </style> + </head> + <body> + <div> + <div>Some text</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row.html new file mode 100644 index 0000000000..fc24e57ad5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table-row.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Table-Row</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + table-row work as expected.'> + <link rel="match" href="transform-transformable-table-row-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: table-row; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformable-table.html b/testing/web-platform/tests/css/css-transforms/transform-transformable-table.html new file mode 100644 index 0000000000..be01dc2883 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformable-table.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformability of Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <meta name="assert" content='This tests that transforms specified on a + table work as expected.'> + <link rel="match" href="transform-transformable-table-ref.html"> + <style> + body { + overflow: hidden; + } + div { + display: table; + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Some text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-caption-contains-fixed-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-caption-contains-fixed-position-ref.html new file mode 100644 index 0000000000..5400f2a70d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-caption-contains-fixed-position-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed caption contains fixed position elements reference.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <style> + body { + overflow: hidden; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <div class='container'>some text<div class='fixed'>fixed</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-caption-contains-fixed-position.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-caption-contains-fixed-position.html new file mode 100644 index 0000000000..69de54b900 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-caption-contains-fixed-position.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed caption contains fixed position elements.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transformed caption element is a containing block for fixed position elements.'> + <link rel="match" href="transform-transformed-caption-contains-fixed-position-ref.html"> + <style> + table, caption { + margin: 0; + padding: 0; + border-spacing: 0; + text-align: left; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <table style='width: 100px;'> + <caption class='container'>some text<div class='fixed'>fixed</div> + </caption> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position-ref.html new file mode 100644 index 0000000000..f8db1643d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed tbody contains fixed position elements reference.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <style> + body { + overflow: hidden; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <div class='container'>some text<div class='fixed'>fixed</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position.html new file mode 100644 index 0000000000..b96e94ed23 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed tbody contains fixed position elements.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transformed tbody element is a containing block for fixed position elements.'> + <link rel="match" href="transform-transformed-tbody-contains-fixed-position-ref.html"> + <style> + table, tbody, tr, td { + margin: 0; + padding: 0; + border-spacing: 0; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <table> + <tbody class='container'> + <tr> + <td>some text<div class='fixed'>fixed</div> + </td> + </tr> + </tbody> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-td-contains-fixed-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-td-contains-fixed-position-ref.html new file mode 100644 index 0000000000..27981a6541 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-td-contains-fixed-position-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed td contains fixed position elements reference.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <style> + body { + overflow: hidden; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <div class='container'>some text<div class='fixed'>fixed</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-td-contains-fixed-position.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-td-contains-fixed-position.html new file mode 100644 index 0000000000..7e43d2adde --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-td-contains-fixed-position.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed td contains fixed position elements.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transformed td element is a containing block for fixed position elements.'> + <link rel="match" href="transform-transformed-td-contains-fixed-position-ref.html"> + <style> + table, tbody, tr, td { + margin: 0; + padding: 0; + border-spacing: 0; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <table> + <tr> + <td class='container'>some text<div class='fixed'>fixed</div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position-ref.html new file mode 100644 index 0000000000..9b4628d1a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed tfoot contains fixed position elements reference.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <style> + body { + overflow: hidden; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <div class='container'>some text<div class='fixed'>fixed</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position.html new file mode 100644 index 0000000000..a04bba3b6d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed tfoot contains fixed position elements.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transformed tfoot element is a containing block for fixed position elements.'> + <link rel="match" href="transform-transformed-tfoot-contains-fixed-position-ref.html"> + <style> + table, tfoot, tr, td { + margin: 0; + padding: 0; + border-spacing: 0; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <table> + <tfoot class='container'> + <tr> + <td>some text<div class='fixed'>fixed</div> + </td> + </tr> + </tfoot> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-th-contains-fixed-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-th-contains-fixed-position-ref.html new file mode 100644 index 0000000000..1c2d3bdf04 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-th-contains-fixed-position-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed th contains fixed position elements reference.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <style> + body { + overflow: hidden; + } + .pad { + height: 50px; + } + .container { + font-weight: bold; + text-align: left; + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <div class='container'>some text<div class='fixed'>fixed</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-th-contains-fixed-position.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-th-contains-fixed-position.html new file mode 100644 index 0000000000..4ddde403e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-th-contains-fixed-position.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed th contains fixed position elements.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transformed th element is a containing block for fixed position elements.'> + <link rel="match" href="transform-transformed-th-contains-fixed-position-ref.html"> + <style> + table, tr, td, th { + margin: 0; + padding: 0; + border-spacing: 0; + font-weight: bold; + text-align: left; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <table> + <tr> + <th class='container'>some text<div class='fixed'>fixed</div> + </th> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-thead-contains-fixed-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-thead-contains-fixed-position-ref.html new file mode 100644 index 0000000000..e5e4217c82 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-thead-contains-fixed-position-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed thead contains fixed position elements reference.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <style> + body { + overflow: hidden; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <div class='container'>some text<div class='fixed'>fixed</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-thead-contains-fixed-position.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-thead-contains-fixed-position.html new file mode 100644 index 0000000000..2270cff672 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-thead-contains-fixed-position.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed thead contains fixed position elements.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transformed thead element is a containing block for fixed position elements.'> + <link rel="match" href="transform-transformed-thead-contains-fixed-position-ref.html"> + <style> + table, thead, tr, td { + margin: 0; + padding: 0; + border-spacing: 0; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <table> + <thead class='container'> + <tr> + <td>some text<div class='fixed'>fixed</div> + </td> + </tr> + </thead> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-contains-fixed-position-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-contains-fixed-position-ref.html new file mode 100644 index 0000000000..b0b630999d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-contains-fixed-position-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed tr contains fixed position elements reference.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <style> + body { + overflow: hidden; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <div class='container'>some text<div class='fixed'>fixed</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-contains-fixed-position.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-contains-fixed-position.html new file mode 100644 index 0000000000..52f015d292 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-contains-fixed-position.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Transformed tr contains fixed position elements.</title> + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> + <meta name="assert" content='This test ensures that transformed tr element is a containing block for fixed position elements.'> + <link rel="match" href="transform-transformed-tr-contains-fixed-position-ref.html"> + <style> + table, tbody, tr, td { + margin: 0; + padding: 0; + border-spacing: 0; + } + .pad { + height: 50px; + } + .container { + transform: translateX(20px) rotate(45deg); + transform-origin: left; + } + .fixed { + position: fixed; + top: 15px; + left: 10px; + background-color: lightblue; + } + </style> + </head> + <body> + <div class='pad'></div> + <table> + <tr class='container'> + <td>some text<div class='fixed'>fixed</div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-percent-height-child-ref.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-percent-height-child-ref.html new file mode 100644 index 0000000000..7e1ac99ba8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-percent-height-child-ref.html @@ -0,0 +1,38 @@ +<!doctype HTML> + +<title>CSS Test (Transforms): Transformed tr with percent height abspos child reference.</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> +.table { + width: 100px; + height: 100px; + background-color: lightblue; +} +.tr { + height: 50px; + background-color: lightgrey; +} +.contblock { + transform: translateX(10px); + width: 200px; + height: 200px; + background-color: lightyellow; +} +.abspos { + position: absolute; + top: 20px; + left: 20px; + width: 100%; + height: 100%; + background-color: blue; +} +</style> + +<div class="contblock"> + <div class="table"> + <div class="tr" style="width: 50px;"></div> + <div class="tr" style="width: 100px; transform: translateX(10px)"> + <div class="abspos"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-percent-height-child.html b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-percent-height-child.html new file mode 100644 index 0000000000..91f2a5f058 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-transformed-tr-percent-height-child.html @@ -0,0 +1,48 @@ +<!doctype HTML> + +<title>CSS Test (Transforms): Transformed tr with percent height abspos child.</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> +<meta name="assert" content="This test ensures that transformed tr's percent height abspos child uses tr's height as reference."> +<link rel="match" href="transform-transformed-tr-percent-height-child-ref.html"> +<style> + table, td, tr { + margin: 0px; + padding: 0px; + border-spacing: 0px; + } + table { + background-color: lightblue; + } + td { + width: 50px; + height: 50px; + background-color: lightgrey; + } + .contblock { + transform: translateX(10px); + width: 200px; + height: 200px; + background-color: lightyellow; + } + .abspos { + position: absolute; + top: 20px; + left: 20px; + width: 100%; + height: 100%; + background-color: blue; + } +</style> + +<div class="contblock"> + <table> + <tr> + <td></td> + </tr> + <tr style="transform: translateX(10px)"> + <td></td> + <td><div class="abspos"></div></td> + </tr> + </table> +</div> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-001.html b/testing/web-platform/tests/css/css-transforms/transform-translate-001.html new file mode 100644 index 0000000000..70e0388a40 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translate(50px, 50px)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <meta name="assert" content='This tests that translate(50px, 50px) is the same as + relative positioning by 50px toward the bottom right.'> + <link rel="match" href="transform-translate-ref.html"> + <style> + div { + transform: translate(50px, 50px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-002.html b/testing/web-platform/tests/css/css-transforms/transform-translate-002.html new file mode 100644 index 0000000000..fc6b48c573 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translate(50px, 50px) rotate(360deg)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <meta name="assert" content='This tests that translate(50px, 50px) + rotate(360deg) is the same as relative positioning by 50px toward the + bottom right.'> + <link rel="match" href="transform-translate-ref.html"> + <style> + div { + transform: translate(50px, 50px) rotate(360deg); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-003.html b/testing/web-platform/tests/css/css-transforms/transform-translate-003.html new file mode 100644 index 0000000000..9da63a63c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translate(25px, 25px) translate(25px, 25px)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <meta name="assert" content='This tests that translate(25px, 25px) + translate(25px, 25px) is the same as relative positioning by 50px toward + the bottom right.'> + <link rel="match" href="transform-translate-ref.html"> + <style> + div { + transform: translate(25px, 25px) translate(25px, 25px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-004.html b/testing/web-platform/tests/css/css-transforms/transform-translate-004.html new file mode 100644 index 0000000000..87e4bb0f3f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translate() plus relative positioning</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <meta name="assert" content='This tests that translate(25px, 25px) + plus relative positioning 25px to the bottom right is the same as relative + positioning by 50px toward the bottom right.'> + <link rel="match" href="transform-translate-ref.html"> + <style> + div { + transform: translate(25px, 25px); + position: relative; + top: 25px; + left: 25px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-005.html b/testing/web-platform/tests/css/css-transforms/transform-translate-005.html new file mode 100644 index 0000000000..06f550e923 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Several Translations Combined</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <meta name="assert" content='This tests that a sequence of positive and + negative translations is the same as relative positioning by 50px toward + the bottom right.'> + <link rel="match" href="transform-translate-ref.html"> + <style> + div { + transform: translate(50px) translate(-100px) translate(150px) + translate(-50px) translate(0px, 50px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-background-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform-translate-background-001-ref.html new file mode 100644 index 0000000000..495ba7a3c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-background-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Transforms: Reference Translate gradient background on root element</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + html { + background: green; + } +</style> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-background-001.html b/testing/web-platform/tests/css/css-transforms/transform-translate-background-001.html new file mode 100644 index 0000000000..00fefeb6e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-background-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Transforms: Translate gradient background on root element</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=988446"> +<link rel="match" href="transform-translate-background-001-ref.html"> +<meta name="assert" content="Checks that the linear gradient is not modified when you vertically translate the root element. The test passes if you see only green."> +<style> + html { + background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%); + transform: translate(0, -250vh); + overflow: hidden; + } +</style> +<div style="height: 400vh;"></div> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-background-002.html b/testing/web-platform/tests/css/css-transforms/transform-translate-background-002.html new file mode 100644 index 0000000000..9551ec51ad --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-background-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Transforms: Dynamically translate gradient background on root element</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=988446"> +<link rel="match" href="transform-translate-background-001-ref.html"> +<meta name="assert" content="Checks that the linear gradient is not modified when you dynamically translate the root element. The test passes if you see only green."> +<script src="/common/reftest-wait.js"></script> +<style> + html { + background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%); + overflow: hidden; + } +</style> +<div style="height: 400vh;"></div> +<script> + requestAnimationFrame(() => requestAnimationFrame(() => { + document.documentElement.style.transform = "translate(0, -250vh)"; + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translate-ref.html b/testing/web-platform/tests/css/css-transforms/transform-translate-ref.html new file mode 100644 index 0000000000..1a781a0614 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translate-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="position: relative; left: 50px; top: 50px;"> + Test Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatex-001.html b/testing/web-platform/tests/css/css-transforms/transform-translatex-001.html new file mode 100644 index 0000000000..fb00811d4c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatex-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatex(50px)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatex"> + <meta name="assert" content='This tests that translatex(50px) is the same + as relative positioning by 50px toward the right.'> + <link rel="match" href="transform-translatex-ref.html"> + <style> + div { + transform: translatex(50px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatex-002.html b/testing/web-platform/tests/css/css-transforms/transform-translatex-002.html new file mode 100644 index 0000000000..9e00765a82 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatex-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatex(50px) rotate(360deg)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatex"> + <meta name="assert" content='This tests that translatex(50px) + rotate(360deg) is the same as relative positioning by 50px toward the + right.'> + <link rel="match" href="transform-translatex-ref.html"> + <style> + div { + transform: translatex(50px) rotate(360deg); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatex-003.html b/testing/web-platform/tests/css/css-transforms/transform-translatex-003.html new file mode 100644 index 0000000000..c07d9ceca0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatex-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatex(25px) translatex(25px)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatex"> + <meta name="assert" content='This tests that translatex(25px) + translatex(25px) is the same as relative positioning by 50px toward + the right.'> + <link rel="match" href="transform-translatex-ref.html"> + <style> + div { + transform: translatex(25px) translatex(25px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatex-004.html b/testing/web-platform/tests/css/css-transforms/transform-translatex-004.html new file mode 100644 index 0000000000..83cd41c5a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatex-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatex() plus relative positioning</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatex"> + <meta name="assert" content='This tests that translatex(25px) + plus relative positioning 25px to the right is the same as relative + positioning by 50px toward the right.'> + <link rel="match" href="transform-translatex-ref.html"> + <style> + div { + transform: translatex(25px); + position: relative; + left: 25px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatex-005.html b/testing/web-platform/tests/css/css-transforms/transform-translatex-005.html new file mode 100644 index 0000000000..ec1f29c26a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatex-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Several X-Translations Combined</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatex"> + <meta name="assert" content='This tests that a sequence of positive and + negative translations is the same as relative positioning by 50px toward + the right.'> + <link rel="match" href="transform-translatex-ref.html"> + <style> + div { + transform: translatex(50px) translatex(-100px) translatex(150px) + translatex(-50px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatex-006.html b/testing/web-platform/tests/css/css-transforms/transform-translatex-006.html new file mode 100644 index 0000000000..fd6f46fc16 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatex-006.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with translateX function</title> + <link rel="author" title="Serena Wales" href="mailto:serena@codeforamerica.org"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/transform-translatex-006-ref.html"> + <meta name="assert" content="This tests that translateX(50px) translates a box by 50 pixels in the X direction."> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: absolute; + } + .greenSquare { + position: absolute; + top: 0; + left: 0; + width: 100px; + height: 100px; + background-color: green; + transform: translateX(50px); + /* Add CSS transform here */ + } + /* This div should only be visible if the test fails */ + .redSquare { + position: absolute; + /* It is approximately the same size as the test div, but with a 1px margin */ + width: 100px; + height: 100px; + background-color: red; + top: 0px; + left: 50px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="container"> + <!-- This is the square that should not be visible if the test passes --> + <div class="redSquare"></div> + <!-- This is the square being tested with the transform --> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatex-ref.html b/testing/web-platform/tests/css/css-transforms/transform-translatex-ref.html new file mode 100644 index 0000000000..326b39f7fa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatex-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="position:relative; left:50px;"> + Test Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatey-001.html b/testing/web-platform/tests/css/css-transforms/transform-translatey-001.html new file mode 100644 index 0000000000..90d2460444 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatey-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatey(50px)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatey"> + <meta name="assert" content='This tests that translatey(50px) is the same + as relative positioning by 50px toward the bottom.'> + <link rel="match" href="transform-translatey-ref.html"> + <style> + div { + transform: translatey(50px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatey-002.html b/testing/web-platform/tests/css/css-transforms/transform-translatey-002.html new file mode 100644 index 0000000000..5e77cb1237 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatey-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatey(50px) rotate(360deg)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatey"> + <meta name="assert" content='This tests that translatey(50px) + rotate(360deg) is the same as relative positioning by 50px toward the + bottom.'> + <link rel="match" href="transform-translatey-ref.html"> + <style> + div { + transform: translatey(50px) rotate(360deg); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatey-003.html b/testing/web-platform/tests/css/css-transforms/transform-translatey-003.html new file mode 100644 index 0000000000..bf76959a0f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatey-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatey(25px) translatey(25px)</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatey"> + <meta name="assert" content='This tests that translatey(25px) + translatey(25px) is the same as relative positioning by 50px toward + the bottom.'> + <link rel="match" href="transform-translatey-ref.html"> + <style> + div { + transform: translatey(25px) translatey(25px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatey-004.html b/testing/web-platform/tests/css/css-transforms/transform-translatey-004.html new file mode 100644 index 0000000000..3f9f3e8c66 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatey-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatey() plus relative positioning</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatey"> + <meta name="assert" content='This tests that translatey(25px) + plus relative positioning 25px to the bottom is the same as relative + positioning by 50px toward the bottom.'> + <link rel="match" href="transform-translatey-ref.html"> + <style> + div { + transform: translatey(25px); + position: relative; + top: 25px; + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatey-005.html b/testing/web-platform/tests/css/css-transforms/transform-translatey-005.html new file mode 100644 index 0000000000..44437dc120 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatey-005.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Several Y-Translations Combined</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translatey"> + <meta name="assert" content='This tests that a sequence of positive and + negative translations is the same as relative positioning by 50px toward + the bottom.'> + <link rel="match" href="transform-translatey-ref.html"> + <style> + div { + transform: translatey(50px) translatey(-100px) translatey(150px) + translatey(-50px); + } + </style> + </head> + <body> + <div>Test Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform-translatey-ref.html b/testing/web-platform/tests/css/css-transforms/transform-translatey-ref.html new file mode 100644 index 0000000000..9971995a2f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform-translatey-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="position:relative; top:50px;"> + Test Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-001.html new file mode 100644 index 0000000000..e0b1788a35 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Backface-Visibility, rotatex(180deg)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <meta name="assert" content='This tests that a very simple case of + backface-visibility causes the element to disappear: rotateX(180deg) is + specified on the same element that has backface-visibility: hidden.'> + <link rel="match" href="transform-lime-square-ref.html"> + <style>div { height: 100px; width: 100px }</style> + </head> + <body> + <div style="background:lime"> + <div style="background:red;transform:rotatex(180deg); + backface-visibility:hidden"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-002.html new file mode 100644 index 0000000000..fbc0844440 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Backface-Visibility With Transformed Parent + and Child in Different Rendering Contexts</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <meta name="assert" content="This tests that if an element has + 'backface-visibility: hidden' and is rotated 180deg, so it would normally + disappear, it doesn't reappear just because its parent also has a 180deg + rotation. The rotations don't cancel, since the parent doesn't have + 'transform-style: preserve-3d' and is in a different rendering context."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height:100px;width:100px;background:lime; + transform:rotatex(180deg)"> + <div style="height:100px;width:100px;background:red; + transform:rotatex(180deg);backface-visibility:hidden"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-003.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-003.html new file mode 100644 index 0000000000..a1c90c6687 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Backface-Visibility, rotatex(180deg) on Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <meta name="assert" content='This is identical to + transform3d-backface-visibility-001.html, except that display: table is + specified too. This is motivated by a real-world UA bug: + <https://bugzilla.mozilla.org/show_bug.cgi?id=724750>.'> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height:100px;width:100px;background:lime"> + <div style="height:100px;width:100px;background:red; + transform:rotatex(180deg);backface-visibility:hidden;display:table"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-004.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-004.html new file mode 100644 index 0000000000..a2e3481795 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-004.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Backface-Visibility With Transformed Parent + in Same Rendering Context, Split Transform</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <meta name="assert" content="This tests that if a parent and child are in + the same 3D rendering context, and a 60deg rotation on the parent combines + with a 60deg rotation on the child to make a 120deg rotation, the child + will disappear if 'backface-visibility: hidden' is specified, just like if + the 120deg rotation were specified on the child to start with."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height:100px;width:100px;background:lime"> + <div style="transform:rotatex(60deg);transform-style:preserve-3d"> + <div style="height:100px;width:100px;background:red; + transform:rotatex(60deg);backface-visibility:hidden"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-005.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-005.html new file mode 100644 index 0000000000..74e4576ff3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Backface-Visibility With Transformed Parent + in Different Rendering Context</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <meta name="assert" content="This tests that if an element is not + transformed, but its parent is rotated 180deg in a different rendering + context, the child's 'backface-visibility: hidden' does not make it + disappear. Only transforms that affect the child itself are relevant to + 'backface-visibility'."> + <link rel="match" href="transform-lime-square-ref.html"> + <style>div { width: 100px; height: 100px }</style> + </head> + <body> + <div style="transform: rotateX(180deg); background: red"> + <div style="backface-visibility: hidden; background: lime"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-006.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-006.html new file mode 100644 index 0000000000..5dbfa98c75 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Backface-Visibility With Transformed Parent + in Same Rendering Context</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <meta name="assert" content="This is the same as + transform3d-backface-visibility-005.html, except that the parent has + 'transform-style: preserve-3d'. Thus the child is affected by the parent's + transform and should not be visible."> + <link rel="match" href="transform-lime-square-ref.html"> + <style>div { width: 100px; height: 100px }</style> + </head> + <body> + <div style="transform: rotateX(180deg); transform-style: preserve-3d; + background: lime"> + <div style="backface-visibility: hidden; background: red"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-007.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-007.html new file mode 100644 index 0000000000..ed239aa355 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-007.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Backface-Visibility, scalez(-1)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> + <meta name="assert" content="This is the same as + transform3d-backface-visibility-001.html, except it uses scalez(-1) instead + of rotatex(180deg). scalez(-1) has no visible effect when applied by + itself to a box, since the box's Z-coordinates are all 0, but it still + causes it to be affected by 'backface-visibility'."> + <link rel="match" href="transform-lime-square-ref.html"> + <style>div { height: 100px; width: 100px }</style> + </head> + <body> + <div style="background: lime"> + <div style="background: red; backface-visibility: hidden; + transform: scalez(-1)"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-008.html b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-008.html new file mode 100644 index 0000000000..38aadb1627 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-backface-visibility-008.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Transforms Test: backface-visibility - visible</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="reviewer" title="Zhiqiang Zhang" href="mailto:zhiqiang.zhang@intel.com"> <!-- 2015-05-22 --> +<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#backface-visibility-property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="When 'backface-visiblity' is set to visible, + the back side of a transformed element is visible."> +<style> + div { + height: 100px; + width: 100px; + } + + body > div { + background: red; + } + + div > div { + background: green; + backface-visibility: visible; + transform: rotateY(180deg); + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div> + <div></div> + </div> +</body> + diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-image-scale-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-image-scale-001.html new file mode 100644 index 0000000000..b7f8f0acc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-image-scale-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale3d() on a Bitmap</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <meta name="assert" content="This tests that applying a simple 3D transform + to a bitmap image works properly. This is motivated by a real-world + implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=735373>."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <img src="support/transform-lime-square.png" height="50" width="50" + style="transform: scale3d(2, 2, 2); transform-origin: 0 0"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-image-scale-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-image-scale-002.html new file mode 100644 index 0000000000..fa26e4311e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-image-scale-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale3d() on an SVG</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <meta name="assert" content="This is the same as + transform3d-image-scale-001.html, but using an SVG image instead of a + bitmap."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <img src="support/transform-lime-square.svg" height="50" width="50" + style="transform: scale3d(2, 2, 2); transform-origin: 0 0"> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-001-ref.html new file mode 100644 index 0000000000..a2d5dc890c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: matrix(1,2,3,4,5,6); width: 100px; height: 100px; + background:lime"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-001.html new file mode 100644 index 0000000000..2f4a98b1b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix3d(1,2,0,0, 3,4,0,0, 0,0,1,0, 5,6,0,1)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-matrix3d"> + <meta name="assert" content='This is part of a series that tests that + various matrix3d()s are equivalent to other transform functions.'> + <link rel="match" href="transform3d-matrix3d-001-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + <meta name=fuzzy content="transform3d-matrix3d-001-ref.html:0-100;0-980"> + </head> + <body> + <div style="transform: matrix3d(1,2,0,0, 3,4,0,0, 0,0,1,0, 5,6,0,1); + width: 100px; height: 100px; background:lime"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-002-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-002-ref.html new file mode 100644 index 0000000000..dfa60d0af9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-002-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: translate3d(4px,5px,6px) scale3d(1,2,3); + width: 100px; height: 100px; background: lime"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-002.html new file mode 100644 index 0000000000..f9bed47290 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix3d(1,0,0,0, 0,2,0,0, 0,0,3,0, 4,5,6,1)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-matrix3d"> + <meta name="assert" content='This is part of a series that tests that + various matrix3d()s are equivalent to other transform functions.'> + <link rel="match" href="transform3d-matrix3d-002-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: matrix3d(1,0,0,0, 0,2,0,0, 0,0,3,0, 4,5,6,1); + width: 100px; height: 100px; background:lime"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-003-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-003-ref.html new file mode 100644 index 0000000000..c3275e3d7f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-003-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="height: 100px; width: 100px; background: lime; + transform: perspective(200px) rotatey(-45deg) scalex(1.41421356); + transform-origin: right"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-003.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-003.html new file mode 100644 index 0000000000..eb1ee4d23d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix3d(1,0,0,-0.005, 0,1,0,0, 0,0,1,0, 0,0,0,1)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-matrix3d"> + <meta name="assert" content='This is part of a series that tests that + various matrix3d()s are equivalent to other transform functions.'> + <link rel="match" href="transform3d-matrix3d-003-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height: 100px; width: 100px; background: lime; + transform: matrix3d(1,0,0,-0.005, 0,1,0,0, 0,0,1,0, 0,0,0,1); + transform-origin: right"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-004-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-004-ref.html new file mode 100644 index 0000000000..7079851149 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-004-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="height: 100px; width: 100px; background: lime; + transform: perspective(200px) rotatex(45deg) scaley(1.41421356); + transform-origin: bottom"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-004.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-004.html new file mode 100644 index 0000000000..5a860e1fbb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix3d(1,0,0,0, 0,1,0,-0.005, 0,0,1,0, 0,0,0,1)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-matrix3d"> + <meta name="assert" content='This is part of a series that tests that + various matrix3d()s are equivalent to other transform functions.'> + <link rel="match" href="transform3d-matrix3d-004-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height: 100px; width: 100px; background: lime; + transform: matrix3d(1,0,0,0, 0,1,0,-0.005, 0,0,1,0, 0,0,0,1); + transform-origin: bottom"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-005-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-005-ref.html new file mode 100644 index 0000000000..872d6515eb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-005-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="padding: 25px"> + <div style="height: 50px; width: 50px; background: gold"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-005.html b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-005.html new file mode 100644 index 0000000000..3b7dac4ae3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-matrix3d-005.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,2)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-matrix3d"> + <meta name="assert" content='This is part of a series that tests that + various matrix3d()s are equivalent to other transform functions.'> + <link rel="match" href="transform3d-matrix3d-005-ref.html"> + </head> + <body> + <div style="height: 100px; width: 100px; background: gold; + transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,2)"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-001-ref.html new file mode 100644 index 0000000000..0585fcd3ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="perspective: 1000px; perspective-origin: 50px 50px"> + <div style="height: 100px; width: 100px; background: lime; + transform: rotatex(45deg) scaley(1.41421356); transform-origin: top"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-001.html new file mode 100644 index 0000000000..c97003e645 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): perspective()</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests that the perspective() transform + works the same as an equivalent 'perspective' property."> + <link rel="match" href="transform3d-perspective-001-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height: 100px; width: 100px; background: lime; + transform: translatey(50%) perspective(1000px) translatey(-50%) + rotatex(45deg) scaley(1.41421356); transform-origin: top"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-002.html new file mode 100644 index 0000000000..fd54bc6712 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Inherited Perspective</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests that 'perspective: inherit' works + the same as specifying that perspective to start with."> + <meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-215"> + <link rel="match" href="transform3d-perspective-001-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="perspective: 1000px"> + <div style="perspective: inherit; perspective-origin: 50px 50px"> + <div style="height: 100px; width: 100px; background: lime; + transform: rotatex(45deg) scaley(1.41421356); transform-origin: top"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-003.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-003.html new file mode 100644 index 0000000000..3be861b417 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Perspective on Grandparent</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests that 'perspective' affects only the + element's children, not its grandchildren."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="perspective: 1000px"> + <div> + <div style="height: 100px; width: 100px; background: lime; + transform: rotatex(45deg) scaley(1.41421356); transform-origin: top"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-004.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-004.html new file mode 100644 index 0000000000..52b3e87c34 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): 'perspective: 1000px' on Grandparent and + 'perspective: none' on Parent</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests that 'perspective: none' actually + results in no perspective being applied to children, even if the + grandparent has perspective."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="perspective: 1000px"> + <div style="perspective: none"> + <div style="height: 100px; width: 100px; background: lime; + transform: rotatex(45deg) scaley(1.41421356); transform-origin: top"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-005.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-005.html new file mode 100644 index 0000000000..f23375d0c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-005.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): 'perspective: 1000px' on Grandparent and + 'perspective: 0px' on Parent</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="author" title="L. David Baron" href="https://dbaron.org/"> + <link rel="author" title="Google" href="http://www.google.com/"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413"> + <meta name="assert" content="This tests that 'perspective: 0px' behaves the + same as perspective: 1px."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="perspective: 1000px"> + <div style="perspective: 0px; perspective-origin: 50px bottom"> + <div style="height: 50px; width: 50px; background: lime; + transform: translate3d(25px, 25px, 0.5px)"> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-006.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-006.html new file mode 100644 index 0000000000..90d436729d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Perspective</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests the 'perspective' property in a + very simple case, such that the reference can be constructed without using + CSS transforms."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="padding: 25px"> + <div style="height: 50px; width: 50px; background: lime; + transform: perspective(100px) translatez(50px)"> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-007.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-007.html new file mode 100644 index 0000000000..7b63265d1d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-007.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Perspective on Table Parent</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests that tables are correctly affected + by perspective on their parent. It's motivated by a real-world + implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=726601>."> + <link rel="match" href="transform3d-perspective-001-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="perspective: 1000px; perspective-origin: 50px 50px"> + <div style="height: 100px; width: 100px; background: lime; + transform: rotatex(45deg) scaley(1.41421356); transform-origin: top; + display: table"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-008.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-008.html new file mode 100644 index 0000000000..cdc70373a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-008.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Perspective on Table</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests that perspective on a table only + affects its children, not the table itself. It's motivated by a real-world + implementation bug: <https://bugzilla.mozilla.org/show_bug.cgi?id=726601>."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height: 100px; width: 100px; background: lime; + transform: rotatex(45deg) scaley(1.41421356); transform-origin: top; + display: table; perspective: 1000px"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-009-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-009-ref.html new file mode 100644 index 0000000000..63cdd04d23 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-009-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body style="width: 400px"> + <div style="perspective: 1000px"> + <div style="height: 100px; width: 100px; background: lime; + transform: rotatex(45deg) scaley(1.41421356); transform-origin: top"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-009.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-009.html new file mode 100644 index 0000000000..8e783b66c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-009.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): 'perspective-origin' and translate()</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> + <meta name="assert" content="This tests that 'perspective' and + 'perspective-origin' have the same effect as an appropriately calculated + sequence of translate() and perspective(). The reference file's body has + a width of 400px and a height of 100px, so the perspective-origin should be + (200, 50). The transform-origin is 'top', which works out to (50, 0). + Thus we translate by (150, 50) to get the right origin."> + <link rel="match" href="transform3d-perspective-009-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="height: 100px; width: 100px; background: lime; + transform: translate(150px, 50px) perspective(1000px) translate(-150px, -50px) + rotatex(45deg) scaley(1.41421356); transform-origin: top"> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-origin-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-origin-001.html new file mode 100644 index 0000000000..791d4bd136 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-origin-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): perspective-origin</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin"> + <meta name="assert" content="This tests that 'perspective-origin: 0 0' is + the same as 'perspective-origin: top left', different from no + 'perspective-origin', and different from no perspective or no transform."> + <link rel="match" href="transform3d-perspective-origin-ref.html"> + </head> + <body> + <div style="perspective: 1000px; perspective-origin: 0 0;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px; + background: lime"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-perspective-origin-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-origin-ref.html new file mode 100644 index 0000000000..e174d7596f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-perspective-origin-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="mismatch" href="transform3d-rotatex-ref.html"> + </head> + <body> + <div style="perspective: 1000px; perspective-origin: top left;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px; + background: lime"> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-001-ref.html new file mode 100644 index 0000000000..63dce0180a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-001-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <style> + div { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + <div style="transform: rotatex(180deg); width: 100px; height: 100px;"> + XXpp + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-001.html new file mode 100644 index 0000000000..9459381760 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Preserve-3D</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="stylesheet" href="/fonts/ahem.css"> + <meta name="assert" content="This tests that if preserve-3d is specified, + four 45deg rotations equal one 180deg rotation."> + <link rel="match" href="transform3d-preserve3d-001-ref.html"> + <style> + div { + font: 25px/1 Ahem; + } + </style> + </head> + <body> + <div style="transform: rotatex(45deg); transform-style: preserve-3d;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d;"> + <div style="transform: rotatex(45deg); transform-style: preserve-3d;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px;"> + XXpp + </div> + </div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-002.html new file mode 100644 index 0000000000..2be42e9886 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D With Margins 1</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is the first in a series of four tests + that test that translations work correctly when combined with margins or + translations on various elements, when preserve-3d is enabled. They test + for a real-world implementation bug: + <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform-style: preserve-3d; margin-left: 200px"> + <div style="transform-style: preserve-3d"> + <div style="width: 100px; height: 100px; background: lime; + transform: translatex(-200px)"> + </div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-003.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-003.html new file mode 100644 index 0000000000..2912b61ed6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D With Margins 2</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is the second in a series of four tests + that test that translations work correctly when combined with margins or + translations on various elements, when preserve-3d is enabled. They test + for a real-world implementation bug: + <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform-style: preserve-3d"> + <div style="transform-style: preserve-3d; margin-left: 200px"> + <div style="width: 100px; height: 100px; background: lime; + transform: translatex(-200px)"> + </div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-004.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-004.html new file mode 100644 index 0000000000..98850bb7dd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D With Margins 3</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is the third in a series of four tests + that test that translations work correctly when combined with margins or + translations on various elements, when preserve-3d is enabled. They test + for a real-world implementation bug: + <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform-style: preserve-3d"> + <div style="transform-style: preserve-3d"> + <div style="width: 100px; height: 100px; background: lime; + transform: translatex(-200px); margin-left: 200px"> + </div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-005.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-005.html new file mode 100644 index 0000000000..0a0605fe70 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-005.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D With Transformed Grandparent and + Grandchild</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is the fourth in a series of four tests + that test that translations work correctly when combined with margins or + translations on various elements, when preserve-3d is enabled. They test + for a real-world implementation bug: + <https://bugzilla.mozilla.org/show_bug.cgi?id=691864>."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="width: 100px; height: 100px; transform-style: preserve-3d; + transform: translatex(200%)"> + <div style="transform-style: preserve-3d"> + <div style="width: 100px; height: 100px; background: lime; transform: + translatex(-200px)"> + </div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-006.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-006.html new file mode 100644 index 0000000000..b7c178f2fc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-006.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Two rotatex(), No Preserve-3D</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="rotatex(45deg) or rotatex(-45deg), by itself, + should both just scale down the element by a factor of sqrt(2) (and perhaps + shift it, depending on 'transform-origin'). Without 'transform-style: + preserve-3d', the rotations on parent and child shouldn't cancel, so its + height should be halved with no other effect."> + <meta name="fuzzy" content="maxDifference=0-55;totalPixels=0-299"> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: rotatex(45deg); transform-origin: top"> + <div style="transform: rotatex(-45deg); transform-origin: top; + height: 200px; width: 100px; background: lime"> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-007.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-007.html new file mode 100644 index 0000000000..91310b91ba --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-007.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Two rotatey(), No Preserve-3D</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is identical to + transform3d-preserve3d-006.html, except with rotatey() instead of + rotatex()."> + <meta name="fuzzy" content="maxDifference=0-55; totalPixels=0-200"> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: rotatey(45deg); transform-origin: left"> + <div style="transform: rotatey(-45deg); transform-origin: left; + height: 100px; width: 200px; background: lime"> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-008.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-008.html new file mode 100644 index 0000000000..ee2ceaa5fd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-008.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D with 'overflow: hidden'</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is identical to + transform3d-preserve3d-006.html, except that it has 'transform-style: + preserve-3d; overflow: hidden' specified on the parent element. + 'transform-style: preserve-3d' would normally make the result different, + but 'overflow: hidden' overrides its effect and causes it to work the same + as 'transform-style: flat'."> + <meta name="fuzzy" content="maxDifference=0-55;totalPixels=0-299"> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: rotatex(45deg); transform-origin: top; + transform-style: preserve-3d; overflow: hidden"> + <div style="transform: rotatex(-45deg); transform-origin: top; + height: 200px; width: 100px; background: lime"> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-009.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-009.html new file mode 100644 index 0000000000..e709462b5f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-009.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D with 'overflow: auto'</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is identical to + transform3d-preserve3d-008.html, except with 'overflow: auto' instead of + 'hidden'."> + <meta name="fuzzy" content="maxDifference=0-55;totalPixels=0-299"> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: rotatex(45deg); transform-origin: top; + transform-style: preserve-3d; overflow: auto"> + <div style="transform: rotatex(-45deg); transform-origin: top; + height: 200px; width: 100px; background: lime"> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-010.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-010.html new file mode 100644 index 0000000000..d00f71c1e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-010.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotatex() With Preserve-3D</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This tests that two rotations of 22.5deg + properly add when preserve-3d is used. The result, a 45deg rotation around + the X-axis, should be equivalent to shrinking the height by a factor of + sqrt(2), i.e., 1.41421356...."> + <link rel="match" href="transform-lime-square-ref.html"> + <meta name=fuzzy content="0-200;0-100"> + <style> + div { + transform: rotatex(22.5deg); + transform-origin: top; + } + </style> + </head> + <body> + <div style="transform-style: preserve-3d"> + <div style="height: 141.421356px; width: 100px; background: lime"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-011.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-011.html new file mode 100644 index 0000000000..a5e839380f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-011.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D With 90-Degree Rotation</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This tests that when preserve-3d is specified, + a 90-degree rotation on the parent plus a 90-degree rotation on the child + cancel out, adding to a 180-degree rotation (which has no visible effect on + a lime square). scale(2) is added to ensure that the test doesn't pass if + the transforms are just ignored."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body style="padding:25px"> + <div style="transform: rotatex(90deg); transform-style: preserve-3d"> + <div style="transform: rotatex(90deg) scale(2); width: 50px; height: 50px; + background: lime"> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-012.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-012.html new file mode 100644 index 0000000000..e0b6eeca63 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-012.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): 90-Degree Rotations Without Preserve-3D</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This tests that two 90-degree rotations with + the default 'transform-style: flat' do not add together to form a + 180-degree rotation. Instead, the first causes the contents to vanish and + the second does not restore them."> + <link rel="match" href="transform-blank-ref.html"> + </head> + <body> + <p>Nothing should appear except this sentence.</p> + <div style="transform: rotatex(90deg);"> + <div style="transform: rotatex(90deg); width: 100px; height: 100px;"> + Test Text + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-013-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-013-ref.html new file mode 100644 index 0000000000..0fa95b245d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-013-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <!-- sqrt(2) == 0.70710678; 200/sqrt(2) == 141.421356. + 'transform' is needed on the outer div so the scrollbars are shrunk + appropriately. --> + </head> + <body> + <div style="overflow: scroll; transform: scaley(0.70710678); + transform-origin: top"> + <div style="height: 200px"> + <div style="height: 141.421356px; width: 100px; background: lime"> + </div> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-013.html b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-013.html new file mode 100644 index 0000000000..224a9e7c81 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-preserve3d-013.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Preserve-3D with 'overflow: scroll'</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <meta name="assert" content="This is identical to + transform3d-preserve3d-008.html, except with 'overflow: scroll' instead of + 'hidden'. (Note that the ref is nontrivial, because the scrollbar has to + be scaled appropriately.)"> + <link rel="match" href="transform3d-preserve3d-013-ref.html"> + <meta name=fuzzy content="maxDifference=0-100;totalPixels=0-3422"> + </head> + <body> + <div style="transform: rotatex(45deg); transform-origin: top; + transform-style: preserve-3d; overflow: scroll"> + <div style="transform: rotatex(-45deg); transform-origin: top; + height: 200px; width: 100px; background: lime"> + </div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotate3d-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotate3d-001.html new file mode 100644 index 0000000000..93a46f1c6a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotate3d-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate3d(1, 0, 0, 45deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotate3d"> + <meta name="assert" content="This tests that rotate3d(1, 0, 0, 45deg) is + the same as rotatex(45deg)."> + <link rel="match" href="transform3d-rotatex-ref.html"> + </head> + <body> + <div style="transform: rotate3d(1, 0, 0, 45deg); width: 100px; + height: 100px; background: lime"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotate3d-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotate3d-002.html new file mode 100644 index 0000000000..49d75487c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotate3d-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotate3d(0, 1, 0, 45deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotate3d"> + <meta name="assert" content="This tests that rotate3d(0, 1, 0, 45deg) is + the same as rotatey(45deg)."> + <link rel="match" href="transform3d-rotatey-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: rotate3d(0, 1, 0, 45deg); width: 100px; + height: 100px; background: lime"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-001.html new file mode 100644 index 0000000000..2f75f15cd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotatex(45deg) rotatey(360deg) + rotatex(360deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotatex"> + <meta name="assert" content="This tests that rotatex(45deg) rotatey(360deg) + rotatex(360deg) is the same as rotatex(45deg)."> + <link rel="match" href="transform3d-rotatex-ref.html"> + </head> + <body> + <div style="transform: rotatex(45deg) rotatey(360deg) rotatex(360deg); + width: 100px; height: 100px; background: lime"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-001.html new file mode 100644 index 0000000000..6d35cae632 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): perspective(1000px) rotatex(45deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotatex"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-perspective"> + <meta name="assert" content="This tests that perspective() has some effect + when combined with rotatex() (i.e., is not equivalent to simply omitting + the perspective)."> + <link rel="mismatch" href="transform3d-rotatex-ref.html"> + </head> + <body> + <div style="transform: perspective(1000px) rotatex(45deg); width: 100px; + height: 100px; background: lime"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-002.html new file mode 100644 index 0000000000..ecf6a2f8d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotatex() and 'perspective'</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotatex"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests that 'perspective' has some effect + when combined with rotatex() (i.e., is not equivalent to simply omitting + the perspective)."> + <link rel="mismatch" href="transform3d-rotatex-ref.html"> + </head> + <body> + <div style="perspective: 1000px;"> + <div style="transform: rotatex(45deg); width: 100px; height: 100px; + background: lime"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-003.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-003.html new file mode 100644 index 0000000000..a371155f58 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-003.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): 'perspective' and 'opacity'</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> + <meta name="assert" content="This tests for a real-world implementation + bug: see <https://bugzilla.mozilla.org/show_bug.cgi?id=707563>. The only + difference between the test and reference is 'opacity: 0.9999', which should + not affect anything in the test."> + <link rel="match" href="transform3d-rotatex-perspective-ref.html"> + <link rel="mismatch" href="transform3d-rotatex-perspective-notref.html"> + <meta name="fuzzy" content="maxDifference=0-25;totalPixels=0-2080"> + + <style> + #container { + position: relative; + height: 300px; + width: 300px; + margin: 50px 100px; + border: 2px solid blue; + + perspective: 500px; + opacity: 0.9999; + } + #parent { + margin: 10px; + width: 280px; + height: 280px; + background-color: #844BCA; + + transform: rotateY(40deg); + } + </style> + </head> + <body> + <div id="container"> + <div id="parent"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-notref.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-notref.html new file mode 100644 index 0000000000..109e34db0f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-notref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + #container { + position: relative; + height: 300px; + width: 300px; + margin: 50px 100px; + border: 2px solid blue; + } + #parent { + margin: 10px; + width: 280px; + height: 280px; + background-color: #844BCA; + } + </style> + </head> + <body> + <div id="container"> + <div id="parent"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-ref.html new file mode 100644 index 0000000000..3d7c26f581 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-perspective-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <style> + #container { + position: relative; + height: 300px; + width: 300px; + margin: 50px 100px; + border: 2px solid blue; + + perspective: 500px; + } + #parent { + margin: 10px; + width: 280px; + height: 280px; + background-color: #844BCA; + + transform: rotateY(40deg); + } + </style> + </head> + <body> + <div id="container"> + <div id="parent"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-ref.html new file mode 100644 index 0000000000..ca8789cfdc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: rotatex(45deg); width: 100px; height: 100px; + background: lime"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-transformorigin-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-transformorigin-001.html new file mode 100644 index 0000000000..9c957d8aca --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-transformorigin-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotateX() with 'transform-origin'</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotatex"> + <meta name="assert" content="This tests that rotateX(45deg) has the same + effect (with perspective) with a top left origin and a top right origin. + It should make no difference, because it doesn't change the axis of + rotation: it's still the top. (This doesn't actually test the perspective + property, since a UA that doesn't support perspective at all could still + pass.)"> + <link rel="match" href="transform3d-rotatex-transformorigin-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="perspective: 1000px;"> + <div style="transform: rotatex(45deg); transform-origin: top left; + width: 100px; height: 100px; background: lime"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-transformorigin-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-transformorigin-ref.html new file mode 100644 index 0000000000..1c95931216 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatex-transformorigin-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="perspective: 1000px;"> + <div style="transform: rotatex(45deg); transform-origin: top right; + width: 100px; height: 100px; background: lime"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatey-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatey-001.html new file mode 100644 index 0000000000..75250b1510 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatey-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotateY(45deg) rotateY(360deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-rotatey"> + <meta name="assert" content="This tests that rotateY(45deg) rotateY(360deg) + has the same effect as just rotateY(45deg)."> + <link rel="match" href="transform3d-rotatey-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform: rotatey(45deg) rotatey(360deg); width: 100px; + height: 100px; background: lime"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-rotatey-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-rotatey-ref.html new file mode 100644 index 0000000000..d12cd9267e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-rotatey-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: rotatey(45deg); width: 100px; height: 100px; + background: lime"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-001-notref.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-001-notref.html new file mode 100644 index 0000000000..ab5ae4cb40 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-001-notref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="width: 100px; height: 100px"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-001-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-001-ref.html new file mode 100644 index 0000000000..05e7b31d27 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: scaleX(2) scaleY(2); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-001.html new file mode 100644 index 0000000000..f89cf9c955 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale3d(2, 2, 2)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <meta name="assert" content="This tests that scale3d(2, 2, 2) on some text + has the same effect as scaleX(2) scaleY(2). The Z part should be + irrelevant, because the text is flat."> + <meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-796"> + <link rel="match" href="transform3d-scale-001-ref.html"> + <link rel="mismatch" href="transform3d-scale-001-notref.html"> + </head> + <body> + <div style="transform: scale3D(2,2,2); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-002.html new file mode 100644 index 0000000000..85ed574042 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotatex(90deg) scale3d(2, 1, 2) + rotatex(-90deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <meta name="assert" content="This tests that rotatex(90deg) + scale3d(2, 1, 2) rotatex(-90deg) is the same as scalex(2) scaley(2). + Conjugating by the rotation swaps the Y and Z coordinates for the scale."> + <meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-796"> + <link rel="match" href="transform3d-scale-001-ref.html"> + <link rel="mismatch" href="transform3d-scale-001-notref.html"> + </head> + <body> + <div style="transform: rotatex(90deg) scale3D(2,1,2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-003.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-003.html new file mode 100644 index 0000000000..c655bfebe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scaleX(2) scaleY(2) scaleZ(2)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <meta name="assert" content="This is the same as + transform3d-scale-001.html, except that it uses scaleX(2) scaleY(2) + scaleZ(2) instead of scale3D(2, 2, 2)."> + <meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-796"> + <link rel="match" href="transform3d-scale-001-ref.html"> + <link rel="mismatch" href="transform3d-scale-001-notref.html"> + </head> + <body> + <div style="transform: scaleX(2) scaleY(2) scaleZ(2); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-004.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-004.html new file mode 100644 index 0000000000..ed8247cc5b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-004.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): scale3d(2, 2, 0)</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-function-lists"> + <meta name="assert" content="This tests that scale3d(2, 2, 0), being + singular, causes the contents not to display."> + <link rel="match" href="transform-blank-ref.html"> + </head> + <body> + <p>Nothing should appear except this sentence.</p> + <div style="transform: scale3d(2, 2, 0); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-005-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-005-ref.html new file mode 100644 index 0000000000..270e413ddb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-005-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: scaleY(2); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-005.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-005.html new file mode 100644 index 0000000000..9b7acba8c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotateX(90deg) scale3d(1, 1, 2) + rotateX(-90deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <meta name="assert" content="This tests that rotateX(90deg) + scale3d(1, 1, 2) rotateX(-90deg) is the same as scaleY(2). Conjugating by + the rotation swaps the Y and Z coordinates for the scale."> + <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-200"> + <link rel="match" href="transform3d-scale-005-ref.html"> + </head> + <body> + <div style="transform: rotatex(90deg) scale3D(1,1,2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-006.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-006.html new file mode 100644 index 0000000000..061a277b6b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-006.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotateX(90deg) scaleZ(2) + rotateX(-90deg)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-scale3d"> + <meta name="assert" content="This is identical to + transform3d-scale-005-ref.html, except with scaleZ(2) instead of + scale3d(1, 1, 2)."> + <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-200"> + <link rel="match" href="transform3d-scale-005-ref.html"> + </head> + <body> + <div style="transform: rotatex(90deg) scaleZ(2) rotatex(-90deg); transform-origin: 0 0; width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-007-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-007-ref.html new file mode 100644 index 0000000000..b719044a56 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-007-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: scaleY(-1); width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-scale-007.html b/testing/web-platform/tests/css/css-transforms/transform3d-scale-007.html new file mode 100644 index 0000000000..88261b7ad6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-scale-007.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): rotateX(180deg) scaleZ(-1)</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <meta name="assert" content="This tests that rotateX(180deg) scaleZ(-1) is + the same as scaleY(-1). (The scaleZ(-1) should have no effect here.)"> + <link rel="match" href="transform3d-scale-007-ref.html"> + <link rel="mismatch" href="transform3d-scale-001-notref.html"> + </head> + <body> + <div style="transform: rotatex(180deg) scaleZ(-1); width: 100px; height: 100px;"> + <div style="background: blue; width: 50px; height: 50px;"></div> + <div style="background: lime; width: 50px; height: 50px; margin-left: 50px;"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-sorting-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-001.html new file mode 100644 index 0000000000..82c062b18a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Sorting</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <meta name="assert" content="The red box here is translated in the negative + Z-direction, so it should render beneath the lime box even though it comes + later in DOM order."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform-style:preserve-3d"> + <div style="width: 100px; height: 100px; background: lime; + transform: translatez(10px)"></div> + <div style="width: 100px; height: 100px; background: red; + transform: translatez(-10px) translatey(-100px)"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-sorting-002.html b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-002.html new file mode 100644 index 0000000000..ba850c8375 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Sorting With Rotation</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <meta name="assert" content="The red box here is translated to the same + extent as the lime box, so they should render in stacking context order: + the lime box is on top, because it's later in the DOM. But then we apply + rotatex(180deg) to the whole thing, so the lime box should wind up on top + in the end."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform-style: preserve-3d; transform: rotatex(180deg)"> + <div style="width: 100px; height: 100px; background: red; + transform: translatez(10px) translatey(100px)"></div> + <div style="width: 100px; height: 100px; background: lime; + transform: translatez(10px)"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-sorting-003.html b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-003.html new file mode 100644 index 0000000000..e3900be63e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Sorting With No Preserve-3D</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <meta name="assert" content="The red box here is translated to above the + lime box, but they aren't in the same 3D rendering context, so they should + be drawn in DOM order regardless: lime box on top."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="width: 100px; height: 100px; background: red; + transform: translatez(10px)"></div> + <div style="width: 100px; height: 100px; background: lime; + transform: translatez(-10px) translatey(-100px)"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-sorting-004.html b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-004.html new file mode 100644 index 0000000000..37416aa35c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Simple Sorting With Preserve-3D on + Grandparent</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <meta name="assert" content="This is the same as + transform3d-sorting-003.html, except with two wrapper divs. + 'transform-style: preserve-3d' only affects children, not grandchildren, so + the two divs with backgrounds are still in different rendering contexts and + the Z-position should still not affect stacking."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform-style: preserve-3d"> + <div> + <div style="width: 100px; height: 100px; background: red; + transform: translatez(10px)"></div> + <div style="width: 100px; height: 100px; background: lime; + transform: translatez(-10px) translatey(-100px)"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-sorting-005.html b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-005.html new file mode 100644 index 0000000000..3038f9ab1e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Sorting With Background on Parent</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <meta name="assert" content="This tests that if a parent has + 'transform-style: preserve-3d', it's in the same rendering context as its + children. Thus the translateZ(10px) puts the child above it, and the + rotateX(180deg) puts it below, so the lime parent is rendered on top."> + <link rel="match" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="transform-style: preserve-3d; transform: rotateX(180deg); + width: 100px; height: 100px; background: lime"> + <div style="width: 100px; height: 100px; background: red; + transform: translatez(10px)"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-sorting-006-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-006-ref.html new file mode 100644 index 0000000000..8ed7f55282 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-006-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <!-- + In a correct implementation, the bottom borders here will be invisible, because + the later divs get painted on top. This is to catch an incorrect pass in + Safari on Windows, which draws the test file and the ref with the same error + (painting the back halves on top) and so passes if the back halves are solid + red and green. + --> + </head> + <body> + <div style="height: 70px; width: 50px; background: red; + border-bottom: 30px solid black; + transform: rotateX(45deg) rotateY(45deg); + transform-origin: right"></div> + <div style="height: 70px; width: 50px; background: green; + border-bottom: 30px solid black; + transform: translate(50px, -100px) rotateX(45deg) rotateY(-45deg); + transform-origin: left"></div> + <div style="height: 100px; width: 50px; background: red; + transform: translate(50px, -200px) rotateX(45deg) rotateY(45deg); + transform-origin: left"></div> + <div style="height: 100px; width: 50px; background: green; + transform: translateY(-300px) rotateX(45deg) rotateY(-45deg); + transform-origin: right"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-sorting-006.html b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-006.html new file mode 100644 index 0000000000..acc478079e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-sorting-006.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): Sorting With Intersection</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <meta name="assert" content="This tests that when two boxes intersect in a + simple fashion, they're rendered according to Newell's algorithm."> + <link rel="match" href="transform3d-sorting-006-ref.html"> + <meta name=fuzzy content="0-179;0-544"> + </head> + <body> + <div style="transform-style: preserve-3d"> + <div style="height: 100px; width: 100px; background: red; + transform: rotateX(-45deg) rotateY(-45deg)"></div> + <div style="height: 100px; width: 100px; background: green; + transform: translateY(-100px) rotateX(-45deg) rotateY(45deg)"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-translate3d-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-translate3d-001.html new file mode 100644 index 0000000000..ca3bf337ec --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-translate3d-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translate3d() vs. 'transform-origin'</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-translate3d"> + <meta name="assert" content="This tests that translate3d() before and after + rotatex() is the same as an equivalent 'transform-origin'."> + <link rel="match" href="transform3d-translate3d-ref.html"> + <link rel="mismatch" href="transform-lime-square-ref.html"> + </head> + <body> + <div style="perspective: 1000px"> + <div style="transform: translate3d(10px, 30px, -10px) rotatex(45deg) + translate3d(-10px, -30px, 10px); transform-origin: 0 0 0; width: 100px; + height: 100px; background: lime"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-translate3d-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-translate3d-ref.html new file mode 100644 index 0000000000..c79a7efb83 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-translate3d-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="perspective: 1000px"> + <div style="transform: rotatex(45deg); transform-origin: 10px 30px -10px; + width: 100px; height: 100px; background: lime"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-translatez-001.html b/testing/web-platform/tests/css/css-transforms/transform3d-translatez-001.html new file mode 100644 index 0000000000..b000275e69 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-translatez-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Test (Transforms): translatez() vs. 'transform-origin'</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-translatez"> + <meta name="assert" content="This tests that translatez(+-10px) before and + after rotatex() is the same as an equivalent 'transform-origin', and + different from translatez(+-20px)."> + <link rel="match" href="transform3d-translatez-ref.html"> + <link rel="mismatch" href="transform3d-translatez-notref.html"> + </head> + <body> + <div style="transform: translatez(-10px) rotatex(45deg) translatez(10px); transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-translatez-notref.html b/testing/web-platform/tests/css/css-transforms/transform3d-translatez-notref.html new file mode 100644 index 0000000000..5f689cc3cf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-translatez-notref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: translatez(-20px) rotatex(45deg) translatez(20px); transform-origin: 0 0 0; width: 100px; height: 100px;"> + Test Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform3d-translatez-ref.html b/testing/web-platform/tests/css/css-transforms/transform3d-translatez-ref.html new file mode 100644 index 0000000000..0e4a06d063 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform3d-translatez-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> + <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> + </head> + <body> + <div style="transform: rotatex(45deg); transform-origin: 0 0 -10px; width: 100px; height: 100px;"> + Test Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform_translate.html b/testing/web-platform/tests/css/css-transforms/transform_translate.html new file mode 100644 index 0000000000..8428832455 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform_translate.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="Check if transform supports translate(100px, 100px)"> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="test"></div> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + document.getElementById("test").style.transform = "translate(100px, 100px)"; + var value = window.getComputedStyle(document.getElementById("test")).getPropertyValue("transform"); + assert_equals(value, "matrix(1, 0, 0, 1, 100, 100)") + }, "transform_translate_100px_100px"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform_translate_invalid.html b/testing/web-platform/tests/css/css-transforms/transform_translate_invalid.html new file mode 100644 index 0000000000..9e74fe1ccc --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform_translate_invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate with invalid translation value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="Check if transform sets translate(null, null), + transform property returns initial value."> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="test"></div> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + document.getElementById("test").style.transform = "translate(null, null)"; + var value = window.getComputedStyle(document.getElementById("test")).getPropertyValue("transform"); + assert_equals(value, "none", "transform property value should be none"); + }, "transform_translate_null_null"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform_translate_max.html b/testing/web-platform/tests/css/css-transforms/transform_translate_max.html new file mode 100644 index 0000000000..146300309f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform_translate_max.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate with maximum translation value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="Check if transform sets translate(INFINITE, INFINITE), + transform property returns initial value."> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="test"></div> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + document.getElementById("test").style.transform = "translate(INFINITE, INFINITE)"; + var value = window.getComputedStyle(document.getElementById("test")).getPropertyValue("transform"); + assert_equals(value, "none", "transform property value should be none"); + }, "transform_translate_max"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform_translate_min.html b/testing/web-platform/tests/css/css-transforms/transform_translate_min.html new file mode 100644 index 0000000000..6881165e2d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform_translate_min.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate with minimum translation value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="Check if transform sets translate(-INFINITE, -INFINITE), + transform property returns initial value."> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="test"></div> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + document.getElementById("test").style.transform = "translate(-INFINITE, -INFINITE)"; + var value = window.getComputedStyle(document.getElementById("test")).getPropertyValue("transform"); + assert_equals(value, "none", "transform property value should be none"); + }, "transform_translate_min"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform_translate_neg.html b/testing/web-platform/tests/css/css-transforms/transform_translate_neg.html new file mode 100644 index 0000000000..404e14cf0c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform_translate_neg.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate with negative translation value</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="Check if transform supports translate(-1px, -1px)"> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="test"></div> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + document.getElementById("test").style.transform = "translate(-1px, -1px)"; + var value = window.getComputedStyle(document.getElementById("test")).getPropertyValue("transform"); + assert_equals(value, "matrix(1, 0, 0, 1, -1, -1)") + }, "transform_translate_-1px_-1px"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform_translate_second_omited.html b/testing/web-platform/tests/css/css-transforms/transform_translate_second_omited.html new file mode 100644 index 0000000000..735fbc5237 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform_translate_second_omited.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate with second translation value omited</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="Check if transform supports translate(100px)"> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="test"></div> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + document.getElementById("test").style.transform = "translate(100px)"; + var value = window.getComputedStyle(document.getElementById("test")).getPropertyValue("transform"); + assert_equals(value, "matrix(1, 0, 0, 1, 100, 0)") + }, "transform_translate_100px"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transform_translate_zero.html b/testing/web-platform/tests/css/css-transforms/transform_translate_zero.html new file mode 100644 index 0000000000..61feb7e61a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transform_translate_zero.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform translate</title> + <link rel="author" title="Intel" href="http://www.intel.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <meta name="flags" content="dom"> + <meta name="assert" content="Check if transform supports translate(0, 0)"> + <script type="text/javascript" src="/resources/testharness.js"></script> + <script type="text/javascript" src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="test"></div> + <div id="log"></div> + <script type="text/javascript"> + test(function() { + document.getElementById("test").style.transform = "translate(0, 0)"; + var value = window.getComputedStyle(document.getElementById("test")).getPropertyValue("transform"); + assert_equals(value, "matrix(1, 0, 0, 1, 0, 0)") + }, "transform_translate_0_0"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transformed-preserve-3d-1.html b/testing/web-platform/tests/css/css-transforms/transformed-preserve-3d-1.html new file mode 100644 index 0000000000..14ab46e29a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transformed-preserve-3d-1.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform preserve-3d</title> + <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/transformed-preserve-3d-1-ref.html"> + <meta name="assert" content="The transformed div should establishe a 3D rendering context"> + <style> + div { + height: 150px; + width: 150px; + } + .container { + background-color: red; + } + .transformed { + height: 300px; + position: relative; + top: -150px; + transform-origin: bottom left; + transform-style: preserve-3d; + transform: rotateX(60deg); + background-color: green; + } + .child { + transform-origin: top left; + transform: rotateX(30deg); + background-color: red; + } + </style> +</head> + +<body> + <p>You should only see a GREEN box if this test passes!</p> + <div class="container"> + <div class="transformed"> + <div class='child'> + </div> + </div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transformed-rotateX-3.html b/testing/web-platform/tests/css/css-transforms/transformed-rotateX-3.html new file mode 100644 index 0000000000..2517eac8e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transformed-rotateX-3.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms API Test: transform rotateX</title> + <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/transformed-rotateX-3-ref.html"> + <meta name="assert" content="The transformed div should rotateX by 180 degrees"> + <style> + div { + height: 150px; + width: 150px; + } + .container { + background-color: red; + } + .transformed { + transform-origin: top left; + transform: rotateX(180deg); + background-color: green; + position: relative; + top: 150px; + } + </style> + </head> + + <body> + <p>You should only see a GREEN box if this test passes!</p> + <div class="container"> + <div class="transformed"> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transformed-rotateY-1.html b/testing/web-platform/tests/css/css-transforms/transformed-rotateY-1.html new file mode 100644 index 0000000000..e1e9b2969d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transformed-rotateY-1.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Transforms API Test: transform rotateY</title> + <link rel="author" title="loveky" href="mailto:ylzcylx@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/transformed-rotateY-1-ref.html"> + <meta name="assert" content="The transformed div should rotate 90 degrees"> + <style> + div { + height: 150px; + width: 150px; + } + .container { + border: 1px solid black; + background-color: green; + } + .transformed { + transform: rotateY(90deg); + background-color: red; + } + </style> + </head> + + <body> + <p>You should only see a GREEN box if this test passes!</p> + <div class="container"> + <div class="transformed"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/transforms-rotate-degree-45.html b/testing/web-platform/tests/css/css-transforms/transforms-rotate-degree-45.html new file mode 100644 index 0000000000..c5da4e864e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transforms-rotate-degree-45.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with rotate function and one parameter</title> + <link rel="author" title="Ji Kai" href="mailto:7jikai@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> + <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/transforms-rotate-degree-45-ref.html"> + <meta name="fuzzy" content="maxDifference=0-19;totalPixels=0-564"> + <meta name="assert" content="If the rotate and scale with parameter not provided, greenSquare will not cover redSquare."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background: green; + transform: rotate(45deg); + } + + .redSquare-up { + position: absolute; + top: 80px; + left: 80px; + width: 0; + height: 0; + border-left: 70px solid transparent; + border-right: 70px solid transparent; + border-bottom: 70px solid red; + } + + .redSquare-down { + position: absolute; + top: 150px; + left: 80px; + width: 0; + height: 0; + border-left: 70px solid transparent; + border-right: 70px solid transparent; + border-top: 70px solid red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="redSquare-up"></div> + <div class="redSquare-down"></div> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transforms-rotate-degree-90.html b/testing/web-platform/tests/css/css-transforms/transforms-rotate-degree-90.html new file mode 100644 index 0000000000..575be7808f --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transforms-rotate-degree-90.html @@ -0,0 +1,37 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/transforms-rotate-degree-90-ref.html"> + <meta name="assert" content="If the rotate with parameter not provided, greenRectangle will not cover redRectangle."> + <style type="text/css"> + .greenRectangle { + position: absolute; + top: 100px; + left: 100px; + width: 150px; + height: 100px; + background: green; + transform: rotate(90deg); + } + + .redRectangl { + position: absolute; + top: 75px; + left: 125px; + width: 100px; + height: 150px; + background: red; + } + </style> + </head> + <body> + <p>The test passes if there is a green rectangle and no red.</p> + <div class="redRectangl"></div> + <div class="greenRectangle"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transforms-rotate-translate-scale.html b/testing/web-platform/tests/css/css-transforms/transforms-rotate-translate-scale.html new file mode 100644 index 0000000000..a06a27d7cf --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transforms-rotate-translate-scale.html @@ -0,0 +1,37 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/transforms-rotate-translate-scale-ref.html"> + <meta name="assert" content="If the rotate and scale with parameter not provided, greenSquare will not cover redSquare."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 50px; + width: 100px; + height: 100px; + background: green; + transform: translate(75px, 75px) scale(1.5, 1.5) rotate(90deg) ; + } + + .redSquare { + position: absolute; + top: 100px; + left: 100px; + width: 150px; + height: 150px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="redSquare"></div> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transforms-rotateY-degree-60.html b/testing/web-platform/tests/css/css-transforms/transforms-rotateY-degree-60.html new file mode 100644 index 0000000000..8bf73a60d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transforms-rotateY-degree-60.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with rotate function and 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 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#two-d-transform-functions"> + <link rel="match" href="reference/transforms-rotateY-degree-60-ref.html"> + <style> + div { + position: absolute; + top: 100px; + left: 100px; + height: 100px; + width: 100px; + } + + .transformed { + background-color: white; + transform: rotateY(60deg); + } + + .back { + background-color: green; + } + </style> +</head> +<body> + <p>The test passes if there are two green rectangles.</p> + <div class="back"></div> + <div class="transformed"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transforms-skewX.html b/testing/web-platform/tests/css/css-transforms/transforms-skewX.html new file mode 100644 index 0000000000..fafb7df24d --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transforms-skewX.html @@ -0,0 +1,38 @@ +<!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 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/transforms-skewX-ref.html"> + <meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-200"> + <meta name="assert" content="If the skew for X axis not provided, greenSquare will not cover redSquare."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 100px; + width: 100px; + height: 100px; + background: green; + transform: skew(45deg,0deg); + } + + .redSquare { + position: absolute; + top: 125px; + left: 200px; + width: 25px; + height: 25px; + background: red; + } + </style> + </head> + <body> + <p>The test passes if there is a parallelogram and no red.</p> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transforms-skewY.html b/testing/web-platform/tests/css/css-transforms/transforms-skewY.html new file mode 100644 index 0000000000..49c6cbf670 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transforms-skewY.html @@ -0,0 +1,37 @@ +<!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-04 --> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/transforms-skewY-ref.html"> + <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200"> + <meta name="assert" content="If the skew for Y axis not provided, greenSquare will not cover redSquare."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + background: green; + transform: skew(0deg,45deg); + } + .redSquare { + position: absolute; + top: 200px; + left: 175px; + width: 25px; + height: 25px; + background: red; + } + </style> + </head> + <body> + <p>The test passes if there is a green parallelogram and no red.</p> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/transforms-support-calc.html b/testing/web-platform/tests/css/css-transforms/transforms-support-calc.html new file mode 100644 index 0000000000..a952d21b66 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/transforms-support-calc.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Transform Module Level 2: calc values</title> +<link rel="help" href="https://drafts.csswg.org/css-transforms-2/"> +<link rel="help" href="https://drafts.csswg.org/css-values-3/#calc-notation"> +<meta name="assert" content="calc values are supported in css-transforms properties."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #container { + width: 600px; + height: 500px; + transform-style: preserve-3d; + } + #target { + width: 300px; + height: 200px; + font-size: 20px; + } +</style> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +'use strict'; + +test(function(){ + target.style = 'translate: calc(30px + 20%) calc(-200px + 100%);'; + assert_equals(getComputedStyle(target).translate, 'calc(20% + 30px) calc(100% - 200px)'); +}, 'translate supports calc'); + +test(function(){ + target.style = 'rotate: calc(1turn - 100grad);'; + assert_equals(getComputedStyle(target).rotate, '270deg'); +}, 'rotate supports calc'); + +test(function(){ + target.style = 'scale: calc(5 + 2) calc(5 - 2) calc(5 * 2);'; + assert_equals(getComputedStyle(target).scale, '7 3 10'); +}, 'scale supports calc'); + +test(function(){ + target.style = 'perspective: calc(100px - 3em);'; + assert_equals(getComputedStyle(target).perspective, '40px'); +}, 'perspective supports calc'); + +test(function(){ + target.style = 'perspective-origin: calc(30px + 20%) calc(-200px + 100%);'; + assert_equals(getComputedStyle(target).perspectiveOrigin, '90px 0px'); +}, 'perspective-origin supports calc'); + +test(function(){ + target.style = 'transform: translate(calc(30px + 20%), calc(-200px + 100%)) rotate(calc(1turn - 400grad)) scale(calc(5 + 2), calc(5 - 2));'; + assert_equals(getComputedStyle(target).transform, 'matrix(7, 0, 0, 3, 90, 0)'); +}, 'transform supports calc'); + +test(function(){ + target.style = 'transform-origin: calc(30px + 20%) calc(-200px + 100%);'; + assert_equals(getComputedStyle(target).transformOrigin, '90px 0px'); +}, 'transform-origin supports calc'); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate-getComputedStyle.html b/testing/web-platform/tests/css/css-transforms/translate-getComputedStyle.html new file mode 100644 index 0000000000..2a4cdc6d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate-getComputedStyle.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Transform Module Level 2: translate getComputedStyle</title> + <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate"> + <meta name="assert" content="translate computed style does not resolve percentages."> + <style type="text/css"> + #container { + transform-style: preserve-3d;; + } + #first { + font-size: 10px; + translate: 10px 2em; + } + #second { + translate: 30% 40% 50px; + } + #third { + font-size: 10px; + width: 98px; + height: 76px; + translate: calc(7em + 80%) -9em; + } + </style> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> + <div id="container"> + <div id="first"></div> + <div id="second"></div> + <div id="third"></div> + </div> + <script> + 'use strict'; + function getTranslateFor(id) { + return window.getComputedStyle(document.getElementById(id)).getPropertyValue("translate"); + } + + test(function() { + assert_equals(getTranslateFor("first"), "10px 20px"); + assert_equals(getTranslateFor("second"), "30% 40% 50px"); + assert_equals(getTranslateFor("third"), "calc(80% + 70px) -90px"); + }, "computed style for translate"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate-optional-second-001.html b/testing/web-platform/tests/css/css-transforms/translate-optional-second-001.html new file mode 100644 index 0000000000..83bda6f238 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate-optional-second-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: transform property with translate function and one parameter</title> + <link rel="author" title="Jian Zhang" href="mailto:jian.andy.zhang@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/translate-optional-second-ref.html"> + <meta name="assert" content=" If the second parameter is not provided, it has zero as a value. This transform moves the element by 100 pixels in X direction."> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 50px; + left: 0; + width: 100px; + height: 100px; + background: green; + transform: translate(100px); + } + .redSquare { + position: absolute; + top: 51px; + left: 101px; + width: 98px; + height: 98px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div class="redSquare"></div> + <div class="greenSquare"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate-ref.html b/testing/web-platform/tests/css/css-transforms/translate-ref.html new file mode 100644 index 0000000000..20fb4ffb5b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate-ref.html @@ -0,0 +1,33 @@ +<!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 Reference File</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <style type="text/css"> + .container { + border: 1px solid gray; + width: 300px; + height: 300px; + } + + .inner { + width: 100px; + height: 100px; + background-color: green; + + position: relative; + left:100px; + top:100px; + } + </style> + + </head> + <body> + <p style="margin-top:70px;">You should see only one green area, no red area.</p> + <div class="container"> + <div class="inner"> + </div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate.html b/testing/web-platform/tests/css/css-transforms/translate.html new file mode 100644 index 0000000000..1c1f42e48e --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate.html @@ -0,0 +1,48 @@ +<!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 Test: test translate</title> + <link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"/> + <link rel="match" href="translate-ref.html"/> + <meta name="assert" content="translate x, y "/> + <style type="text/css"> + .container { + border: 1px solid gray; + width: 300px; + height: 300px; + } + + .inner { + z-index: 98; + position: relative; + width: 100px; + height: 100px; + background-color: green; + transform: translate(100px, 100px); + } + + .hidden { + z-index: 67; + position: relative; + left: 100px; + width: 100px; + height: 100px; + background-color: red; + } + </style> + + </head> + <body> + <p style="margin-top:70px;">You should see only one green area, no red area.</p> + + <div class="container"> + + <div class="inner"> + </div> + <div class="hidden"> + </div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html new file mode 100644 index 0000000000..61bf38c03a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="100" y="50" width="75" height="75" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html new file mode 100644 index 0000000000..297187d753 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg ahem"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + line-height: 1; + font: 50px Ahem; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="40" y="40" width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html new file mode 100644 index 0000000000..eea34503ed --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="50" y="75" width="150" height="150" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html new file mode 100644 index 0000000000..913349a833 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="50" y="100" width="200" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ref.html new file mode 100644 index 0000000000..19d1187bd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="50" y="50" width="100" height="100" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html new file mode 100644 index 0000000000..bd22fefaaa --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="50" y="100" width="100" height="200" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html new file mode 100644 index 0000000000..1f60f3fcb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate and transform properties and the SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="100" y="100" width="200" height="200" fill="green"/> + </svg> +</body> +</html> + + diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html new file mode 100644 index 0000000000..cce3f40477 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate property and SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="100" y="100" width="200" height="200" fill="green"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/reference/translate-in-svg-ref.html b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-in-svg-ref.html new file mode 100644 index 0000000000..ed185a63b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/reference/translate-in-svg-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: the CSS translate property applied to an SVG element</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="100" y="100" width="100" height="100" fill="green" /> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-001.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-001.html new file mode 100644 index 0000000000..be48af33ff --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value arguments without unit</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-009.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-009.html new file mode 100644 index 0000000000..f59a0a1462 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-009.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value and unit less arguments in scientific notation</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(5.0e1 5.0e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-017.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-017.html new file mode 100644 index 0000000000..864ca2e2d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-017.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value unit less arguments in scientific notation with negative exponents</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments in scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(500e-1 500e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-025.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-025.html new file mode 100644 index 0000000000..ffccb8e69c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-025.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with negative translation-value arguments without unit</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support negative unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="100" width="100" height="100" fill="green" transform="translate(-50 -50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-033.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-033.html new file mode 100644 index 0000000000..a218a4794a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-033.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value and negative unit less arguments in scientific notation</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support negative unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="100" width="100" height="100" fill="green" transform="translate(-5.0e1 -5.0e1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-041.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-041.html new file mode 100644 index 0000000000..175eb6e446 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-041.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with translation-value unit less negative arguments in scientific notation with negative exponents</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-value"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-number"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function must support unit less arguments in negative scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="100" width="100" height="100" fill="green" transform="translate(-500e-1 -500e-1)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-049.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-049.html new file mode 100644 index 0000000000..2684b07ed8 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-049.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with one translation-value argument</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect y="50" width="100" height="100" fill="green" transform="translate(50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-050.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-050.html new file mode 100644 index 0000000000..2519e05085 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-050.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with one negative translation-value argument</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect x="100" y="50" width="100" height="100" fill="green" transform="translate(-50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-051.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-051.html new file mode 100644 index 0000000000..bb965eb412 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-051.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with no spaces</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with no spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50,50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-052.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-052.html new file mode 100644 index 0000000000..d7656bf2e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-052.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with a space in between</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with a space in between. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50, 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-053.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-053.html new file mode 100644 index 0000000000..cf3da372ac --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-053.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with arguments separated by multiple spaces</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can multiple spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-054.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-054.html new file mode 100644 index 0000000000..90061d4c35 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-054.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with multiple spaces before the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with multiple spaces before the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 ,50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-055.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-055.html new file mode 100644 index 0000000000..54c5cc908b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-055.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translate with comma delimited arguments with multiple spaces before and after the comma</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function arguments can be separated by an optional comma with multiple spaces before and after the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="51" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" transform="translate(50 , 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-001.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-001.html new file mode 100644 index 0000000000..8c88e92f0b --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translation-value arguments with translate applied twice</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-multiple-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function can be called multiple times on the same element. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="76" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="green" transform="translate(25 25) translate(25 50)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-002.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-002.html new file mode 100644 index 0000000000..c8c438c777 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-multiple-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG presentation attribute and translation-value arguments with translate applied twice in both directions</title> + <link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-translate"> + <link rel="match" href="reference/svg-translate-multiple-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The translate transform function can be applied multiple times and in both directions. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction"> + <style type="text/css"> + svg { + width: 300px; + height: 300px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg> + <rect x="51" y="76" width="148" height="148" fill="red"/> + <rect width="150" height="150" fill="green" transform="translate(150 150) translate(-100 -75)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/svg-translate-with-units.html b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-with-units.html new file mode 100644 index 0000000000..32561409ad --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/svg-translate-with-units.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: SVG transform attribute with units on translate</title> + <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax"> + <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2623"> + <link rel="match" href="reference/svg-translate-ref.html"> + <meta name="assert" content="The translate transform function should not support the CSS transform syntax with units. The green rects in this test should have no transform applied."> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <svg width="300" height="300"> + <rect x="50" y="50" width="100" height="100" fill="red"/> + <rect x="50" y="50" width="100" height="25" fill="green" transform="translate(10px 10px)"/> + <rect x="50" y="75" width="100" height="25" fill="green" transform="translate(10in 10in)"/> + <rect x="50" y="100" width="100" height="25" fill="green" transform="translate(10% 10%)"/> + <rect x="50" y="125" width="100" height="25" fill="green" transform="translate(10% 10)"/> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html new file mode 100644 index 0000000000..5d316e0b6a --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate and transform properties and the SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-translate"> + <link rel="match" href="reference/translate-and-transform-attribute-in-svg-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The CSS translate property is applied in combination with the CSS transform property and the SVG transform attribute has no effect."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="101" y="101" width="198" height="198" fill="red"/> + <rect width="100" height="100" fill="green" transform="rotate(45)" style="transform: scale(2); translate: 100px 100px" /> + </svg> +</body> +</html> + + diff --git a/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html new file mode 100644 index 0000000000..e44fd14506 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: combination of the CSS translate property and SVG transform attribute</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-translate"> + <link rel="match" href="reference/translate-and-transform-css-property-in-svg-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The CSS translate property is applied in combination with the SVG transform attribute in the absence of a CSS transform property."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="101" y="101" width="198" height="198" fill="red"/> + <rect width="100" height="100" fill="green" transform="scale(2)" style="translate: 100px 100px" /> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/translate/translate-in-svg.html b/testing/web-platform/tests/css/css-transforms/translate/translate-in-svg.html new file mode 100644 index 0000000000..6652f543f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/translate/translate-in-svg.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms Test: the CSS translate property applied to an SVG element</title> + <link rel="author" title="Antoine Quint" href="mailto:graouts@apple.com"> + <link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-translate"> + <link rel="match" href="reference/translate-in-svg-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The CSS translate property is applied to an SVG element."> + <style type="text/css"> + svg { + width: 400px; + height: 400px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <svg> + <rect x="101" y="101" width="98" height="98" fill="red"/> + <rect width="100" height="100" fill="green" style="translate: 100px 100px" /> + </svg> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/ttwf-css-3d-polygon-cycle-mismatch.html b/testing/web-platform/tests/css/css-transforms/ttwf-css-3d-polygon-cycle-mismatch.html new file mode 100644 index 0000000000..cdb2e59046 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/ttwf-css-3d-polygon-cycle-mismatch.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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <!-- See also: http://http://en.wikipedia.org/wiki/Newell's_algorithm --> + <link rel="mismatch" href="reference/ttwf-css-3d-polygon-cycle-ref.html"> + <meta name="flags" content="svg"> + <meta name="assert" content="The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's."> + <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; + } + #red1 { + background-color: red; + width: 100px; + height: 50px; + } + #green1 { + background-color: green; + width: 50px; + height: 100px; + } + #blue1 { + background-color: blue; + width: 50px; + height: 100px; + } + </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/ttwf-css-3d-polygon-cycle.html b/testing/web-platform/tests/css/css-transforms/ttwf-css-3d-polygon-cycle.html new file mode 100644 index 0000000000..857ba80cfb --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/ttwf-css-3d-polygon-cycle.html @@ -0,0 +1,52 @@ +<!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"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> + <!-- See also: http://http://en.wikipedia.org/wiki/Newell's_algorithm --> + <link rel="match" href="reference/ttwf-css-3d-polygon-cycle-ref.html"> + <meta name="fuzzy" content="maxDifference=0-113;totalPixels=0-674"> + <meta name="flags" content="svg"> + <meta name="assert" + content="The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's."> + <style type="text/css"> + #container { + position: absolute; + top: 100px; + left: 100px; + transform-style: preserve-3d; + } + .rect { + position: absolute; + } + #red { + background-color: red; + width: 200px; + height: 50px; + transform: rotateY(20deg); + } + #green { + background-color: green; + width: 50px; + height: 200px; + transform: rotateX(20deg); + } + #blue { + background-color: blue; + width: 50px; + height: 200px; + transform: rotate(45deg) translate(50px, -50px) rotateX(-20deg); + } + </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="red"></div> + <div class="rect" id="green"></div> + <div class="rect" id="blue"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/ttwf-reftest-rotate.html b/testing/web-platform/tests/css/css-transforms/ttwf-reftest-rotate.html new file mode 100644 index 0000000000..168f0c83a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/ttwf-reftest-rotate.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transforms API Test: transform rotate</title> + <link rel="author" title="Michael Downey" href="mailto:miked782000@yahoo.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions"> + <link rel="match" href="reference/ttwf-reftest-rotate-ref.html" /> + <meta name="assert" content="The transform should rotate 180 degrees"> + <style type="text/css"> + body {margin:0} + #greenSquare { + position: absolute; + top: 0px; + left: 0px; + width: 100px; + height: 100px; + background: green; + } + #relativeContainer { + position: relative; + } + #redSquare { + position: absolute; + top: 0px; + left: 100px; + width: 100px; + height: 100px; + background: red; + } + #rotateSquare { + position:absolute; + top: 0px; + left: -100px; + width: 200px; + height: 100px; + transform:rotate(180deg) + } + </style> + +</head> +<body> + +<p>The test passes if there is a green square and no red.</p> +<div id="relativeContainer" > + <div id="rotateSquare"> + <div id="redSquare"></div> + <div id="greenSquare"></div> + </div> +</div> + +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-transforms/ttwf-transform-skewx-001.html b/testing/web-platform/tests/css/css-transforms/ttwf-transform-skewx-001.html new file mode 100644 index 0000000000..40b6ea8053 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/ttwf-transform-skewx-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transform Using skewX() function</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/ttwf-reftest-transform-skewx-001.html"> + <meta name="fuzzy" content="maxDifference=63-64;totalPixels=100-200"> + <meta name="assert" content="Test that the green shape is skew on X axis by 45 degrees"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + transform: skewX(45deg); + background: green; + } + .redSquare { + position: absolute; + top: 100px; + left: 50px; + } + </style> +</head> +<body> + <p>The test passes if there is a green shape and no red.</p> + <div> + <div class="redSquare"> + <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="red" points="200,100 100,100 0,0 100,0 "/> + </svg> + </div> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/ttwf-transform-skewy-001.html b/testing/web-platform/tests/css/css-transforms/ttwf-transform-skewy-001.html new file mode 100644 index 0000000000..599d615cb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/ttwf-transform-skewy-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transform Using skewY() function</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/ttwf-reftest-transform-skewy-001.html"> + <meta name="fuzzy" content="maxDifference=63-68;totalPixels=100-200"> + <meta name="assert" content="Test that the green shape is skew on Y axis by 45 degrees"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + transform: skewY(45deg); + background: green; + } + .redSquare { + position: absolute; + top: 50px; + left: 100px; + } + </style> +</head> +<body> + <p>The test passes if there is a green shape and no red.</p> + <div> + <div class="redSquare"> + <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="red" points="100,200 0,99.999 0,0 100,100 "/> + </svg> + </div> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/ttwf-transform-translatex-001.html b/testing/web-platform/tests/css/css-transforms/ttwf-transform-translatex-001.html new file mode 100644 index 0000000000..bef05c05fd --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/ttwf-transform-translatex-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transform Using translateX() function</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/ttwf-reftest-transform-translatex-001.html"> + <meta name="assert" content="Test that the green square is moved on X axis 100px"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 0px; + width: 100px; + height: 100px; + transform: translateX(150px); + background: green; + } + .redSquare { + position: absolute; + top: 100px; + left: 150px; + width: 98px; + height: 98px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/ttwf-transform-translatey-001.html b/testing/web-platform/tests/css/css-transforms/ttwf-transform-translatey-001.html new file mode 100644 index 0000000000..c8caa6bd7c --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/ttwf-transform-translatey-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Transform Using translateY() function</title> + <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> + <link rel="match" href="reference/ttwf-reftest-transform-translatey-001.html"> + <meta name="assert" content="Test that the green square is moved on Y axis 100px"> + <style type="text/css"> + .greenSquare { + position: absolute; + top: 100px; + left: 100px; + width: 100px; + height: 100px; + transform: translateY(100px); + background: green; + } + .redSquare { + position: absolute; + top: 200px; + left: 100px; + width: 98px; + height: 98px; + background: red; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div> + <div class="redSquare"></div> + <div class="greenSquare"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-transforms/z-index-does-not-apply-ref.html b/testing/web-platform/tests/css/css-transforms/z-index-does-not-apply-ref.html new file mode 100644 index 0000000000..f3b68dd6c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/z-index-does-not-apply-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>CSS test reference</title> +<style> + div { + background: green; + width: 100px; + height: 100px; + } +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-transforms/z-index-does-not-apply.html b/testing/web-platform/tests/css/css-transforms/z-index-does-not-apply.html new file mode 100644 index 0000000000..26d3c49de0 --- /dev/null +++ b/testing/web-platform/tests/css/css-transforms/z-index-does-not-apply.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>z-index doesn't apply to transformed content which is not positioned</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256980"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#z-index"> +<link rel="match" href="z-index-does-not-apply-ref.html"> +<style> + #a, #b { + background: green; + width: 100px; + height: 100px; + } + #a { + background: red; + z-index: 2; + transform: translateX(0); + } + #b { + z-index: 1; + transform: translateY(-100px); + } +</style> +<div id="a"></div> +<div id="b"></div> |
