diff options
author | Martin Robinson <mrobinson@igalia.com> | 2023-06-26 10:48:30 +0200 |
---|---|---|
committer | Martin Robinson <mrobinson@igalia.com> | 2023-06-26 10:48:30 +0200 |
commit | 1359e8e4624d10ceb0bf55bcb1cb2903141c6d38 (patch) | |
tree | 131f289fd18efb5b28653f6b5d83953f8e6c820b /tests/wpt/web-platform-tests/css/css-transforms | |
parent | f017169ae482effc446384050e79b752bd9ddfe5 (diff) | |
download | servo-1359e8e4624d10ceb0bf55bcb1cb2903141c6d38.tar.gz servo-1359e8e4624d10ceb0bf55bcb1cb2903141c6d38.zip |
Move `tests/wpt/web-platform-tests` to `tests/wpt/tests`
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-transforms')
1190 files changed, 0 insertions, 38116 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-001.html b/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-001.html deleted file mode 100644 index ffba5b9c95d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-001.html +++ /dev/null @@ -1,46 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-js.html b/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-js.html deleted file mode 100644 index 11597fb3199..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-js.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-notref.html deleted file mode 100644 index 0c6941a0271..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-notref.html +++ /dev/null @@ -1,45 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-ref.html deleted file mode 100644 index b3047db85e3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-ref.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-abspos.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-abspos.html deleted file mode 100644 index c5eef46b5e8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-abspos.html +++ /dev/null @@ -1,54 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-fixpos.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-fixpos.html deleted file mode 100644 index e763e8b703c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-fixpos.html +++ /dev/null @@ -1,55 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-inline.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-inline.html deleted file mode 100644 index 815140d7e6d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-inline.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-001.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-001.html deleted file mode 100644 index d07c59a5db2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-001.html +++ /dev/null @@ -1,54 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-002.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-002.html deleted file mode 100644 index 11faa1462a1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-002.html +++ /dev/null @@ -1,56 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-003.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-003.html deleted file mode 100644 index 0e97e1d5e1c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-003.html +++ /dev/null @@ -1,57 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-behavior.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-behavior.html deleted file mode 100644 index 94e476c3426..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-behavior.html +++ /dev/null @@ -1,126 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001-ref.html deleted file mode 100644 index d984f8a6e9d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001.html b/tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001.html deleted file mode 100644 index 075e4ad1bc0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001.html +++ /dev/null @@ -1,70 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001-ref.html deleted file mode 100644 index bb7ae235fef..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001-ref.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001.html b/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001.html deleted file mode 100644 index d40e47352c6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001.html +++ /dev/null @@ -1,69 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-001.html b/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-001.html deleted file mode 100644 index aec3b442bb6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-001.html +++ /dev/null @@ -1,52 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-002.html b/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-002.html deleted file mode 100644 index bde8e27e5dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-002.html +++ /dev/null @@ -1,53 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-ref.html deleted file mode 100644 index a12ce72329b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-ref.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/META.yml b/tests/wpt/web-platform-tests/css/css-transforms/META.yml deleted file mode 100644 index a6d5672c9df..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/META.yml +++ /dev/null @@ -1,7 +0,0 @@ -spec: https://drafts.csswg.org/css-transforms/ -suggested_reviewers: - - dbaron - - plinss - - dirkschulze - - smfr - - grorg diff --git a/tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer-ref.html deleted file mode 100644 index 38ab96aaf35..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer.html b/tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer.html deleted file mode 100644 index 71b5b24d353..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/backface-visibility-no-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/backface-visibility-no-interpolation.html deleted file mode 100644 index b7b9f2d5f00..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/backface-visibility-no-interpolation.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/canvas-webgl-translate-in-animation-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/canvas-webgl-translate-in-animation-ref.html deleted file mode 100644 index 6610c6f68bb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/canvas-webgl-translate-in-animation-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/canvas-webgl-translate-in-animation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/canvas-webgl-translate-in-animation.html deleted file mode 100644 index e1138a87e44..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/canvas-webgl-translate-in-animation.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/composited-transform.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/composited-transform.html deleted file mode 100644 index 182321b9d30..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/composited-transform.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/list-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/list-interpolation.html deleted file mode 100644 index 85701e9efad..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/list-interpolation.html +++ /dev/null @@ -1,208 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/matrix-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/matrix-interpolation.html deleted file mode 100644 index a326e7c92f2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/matrix-interpolation.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-composition.html deleted file mode 100644 index 6fa745d6ed2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-composition.html +++ /dev/null @@ -1,65 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-interpolation.html deleted file mode 100644 index d3f165db224..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-interpolation.html +++ /dev/null @@ -1,116 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-origin-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-origin-interpolation.html deleted file mode 100644 index 0a1e74cb8ec..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-origin-interpolation.html +++ /dev/null @@ -1,107 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-on-svg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-on-svg-ref.html deleted file mode 100644 index fda02db187e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-on-svg-ref.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-on-svg.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-on-svg.html deleted file mode 100644 index fed931b00a0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-on-svg.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001-ref.html deleted file mode 100644 index 0dd93d3f7b5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001.html deleted file mode 100644 index 9d330e1573a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-animation-with-will-change-transform-001.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html deleted file mode 100644 index 18b5308ae85..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html +++ /dev/null @@ -1,227 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-interpolation.html deleted file mode 100644 index 17fb7e499c6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-interpolation.html +++ /dev/null @@ -1,250 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html deleted file mode 100644 index e95e62be888..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent-ref.html +++ /dev/null @@ -1,54 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html deleted file mode 100644 index 5748d86608d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html +++ /dev/null @@ -1,74 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-animation-on-svg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-animation-on-svg-ref.html deleted file mode 100644 index d555a5fbe5c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-animation-on-svg-ref.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-animation-on-svg.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-animation-on-svg.html deleted file mode 100644 index 8862545688e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-animation-on-svg.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-composition.html deleted file mode 100644 index 107aa0b273f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-composition.html +++ /dev/null @@ -1,101 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-interpolation.html deleted file mode 100644 index 0e33371955b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/scale-interpolation.html +++ /dev/null @@ -1,242 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/support/transform-interpolation-reftests.js b/tests/wpt/web-platform-tests/css/css-transforms/animation/support/transform-interpolation-reftests.js deleted file mode 100644 index d79cbedefe7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/support/transform-interpolation-reftests.js +++ /dev/null @@ -1,193 +0,0 @@ -'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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-composition.html deleted file mode 100644 index 928da71a9b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-composition.html +++ /dev/null @@ -1,86 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-001.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-001.html deleted file mode 100644 index 94bb87c6e74..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-001.html +++ /dev/null @@ -1,325 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-002.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-002.html deleted file mode 100644 index fec0de1f535..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-002.html +++ /dev/null @@ -1,151 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-003.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-003.html deleted file mode 100644 index 4386bdbfa46..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-003.html +++ /dev/null @@ -1,128 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-004.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-004.html deleted file mode 100644 index a6b3c75c623..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-004.html +++ /dev/null @@ -1,187 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-005.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-005.html deleted file mode 100644 index 879ff3f4358..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-005.html +++ /dev/null @@ -1,268 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-006.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-006.html deleted file mode 100644 index c69bad7c93b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-006.html +++ /dev/null @@ -1,100 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-animated-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-animated-ref.html deleted file mode 100644 index 0930a7469a8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-animated-ref.html +++ /dev/null @@ -1,11 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-computed-value.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-computed-value.html deleted file mode 100644 index 4a836f3ca1c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-computed-value.html +++ /dev/null @@ -1,90 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-inline-value.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-inline-value.html deleted file mode 100644 index 7b453358cf8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-inline-value.html +++ /dev/null @@ -1,80 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-matrix.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-matrix.html deleted file mode 100644 index b5f9c3cd308..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-matrix.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-perspective.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-perspective.html deleted file mode 100644 index bb1e17b3c31..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-perspective.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-ref.html deleted file mode 100644 index 2fee6f7c1fc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-ref.html +++ /dev/null @@ -1,11 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate-slerp.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate-slerp.html deleted file mode 100644 index 73d4bd8a1f8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate-slerp.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate.html deleted file mode 100644 index cba2d2086fc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-rotate.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-scale.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-scale.html deleted file mode 100644 index ef0da0d1f43..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-scale.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-skew.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-skew.html deleted file mode 100644 index 95277d4b8cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-skew.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate-em.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate-em.html deleted file mode 100644 index aff613ab09c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate-em.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate.html deleted file mode 100644 index 5abeb240932..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-translate.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-verify-reftests.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-verify-reftests.html deleted file mode 100644 index 367b7af306a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-verify-reftests.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-matrix-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-matrix-composition.html deleted file mode 100644 index 2586ff3d4a5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-matrix-composition.html +++ /dev/null @@ -1,208 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-origin-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-origin-interpolation.html deleted file mode 100644 index 02b8b59b0b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-origin-interpolation.html +++ /dev/null @@ -1,125 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-perspective-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-perspective-composition.html deleted file mode 100644 index 1266f081e65..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-perspective-composition.html +++ /dev/null @@ -1,67 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-rotate-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-rotate-composition.html deleted file mode 100644 index e062860e729..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-rotate-composition.html +++ /dev/null @@ -1,164 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-scale-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-scale-composition.html deleted file mode 100644 index 87c33a85ed6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-scale-composition.html +++ /dev/null @@ -1,129 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-skew-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-skew-composition.html deleted file mode 100644 index cda44b60c0e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-skew-composition.html +++ /dev/null @@ -1,124 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-translate-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-translate-composition.html deleted file mode 100644 index 49214c4a93c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/transform-translate-composition.html +++ /dev/null @@ -1,147 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-animation-on-svg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-animation-on-svg-ref.html deleted file mode 100644 index d503f338511..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-animation-on-svg-ref.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-animation-on-svg.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-animation-on-svg.html deleted file mode 100644 index e5cc697360c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-animation-on-svg.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-composition.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-composition.html deleted file mode 100644 index 3250d746a38..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-composition.html +++ /dev/null @@ -1,147 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-interpolation.html b/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-interpolation.html deleted file mode 100644 index 4ece9721b8b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/animation/translate-interpolation.html +++ /dev/null @@ -1,271 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-001.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-001.html deleted file mode 100644 index cfba13db630..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-001.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-001.ref.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-001.ref.html deleted file mode 100644 index c4660f1cd0c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-001.ref.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-001.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-001.html deleted file mode 100644 index 2476f5b4e44..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-001.html +++ /dev/null @@ -1,59 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-002-ref.html deleted file mode 100644 index eab3c4e38b1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-002-ref.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative.html deleted file mode 100644 index d30ba64ebb8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-003-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-003-ref.html deleted file mode 100644 index 7dab6b947fb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-003-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE html> -<title>backface visibility: hidden 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; - } - .target { - transform: rotateY(180deg); - } -</style> -<div class=target style="backface-visibility: hidden"> -</div> -<div class=target> - <div style="background: green"></div> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-003.tentative.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-003.tentative.html deleted file mode 100644 index d104662b26e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-003.tentative.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<title>backface visibility: hidden 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"> -<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> - div { - width: 100px; - height: 100px; - } - .target { - transform: rotateY(180deg); - } -</style> -<div class=target style="backface-visibility: hidden"> - <div style="background: red"></div> -</div> -<div class=target> - <div style="background: green"></div> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-004-ref.html deleted file mode 100644 index 94c1fc496af..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-004-ref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.tentative.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.tentative.html deleted file mode 100644 index 1fb3fffd3d1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.tentative.html +++ /dev/null @@ -1,20 +0,0 @@ -<!DOCTYPE html> -<title>backface visibility: hidden does not apply to child pseudo-stacking context descendants</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-004-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"> - <div style="background: green; isolation: isolate"></div> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-005-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-005-ref.html deleted file mode 100644 index bba35ec8fe6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-005-ref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.tentative.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.tentative.html deleted file mode 100644 index d53ee1c606f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.tentative.html +++ /dev/null @@ -1,22 +0,0 @@ -<!DOCTYPE html> -<title>backface visibility: hidden inside preserve-3d does not apply to pseudo-stacking context descendants</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-005-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 style="transform-style: preserve-3d"> - <div class=target style="backface-visibility: hidden; transform-style: preserve-3d"> - <div style="background: green; isolation: isolate; "></div> -</div> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-006-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-006-ref.html deleted file mode 100644 index a9584d2329f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-006-ref.html +++ /dev/null @@ -1,5 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-006.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-006.html deleted file mode 100644 index 096145efec1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-006.html +++ /dev/null @@ -1,11 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-001.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-001.html deleted file mode 100644 index 6cdefad6620..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-001.html +++ /dev/null @@ -1,51 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-002.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-002.html deleted file mode 100644 index 107b79946de..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-002.html +++ /dev/null @@ -1,25 +0,0 @@ -<!DOCTYPE html> -<title>backface visibility: hidden does not apply to child pseudo-stacking context descendants, even when animation is present</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-004-ref.html"> - -<p>The test passes if there is a green rectangle and no red</p> -<style> - - div { - width: 100px; - height: 100px; - } - @keyframes spin { - from { transform: rotateY(180deg); } - to { transform: rotateY(180deg); } - } - .target { - animation: 10000s linear 0s 1 forwards spin; - } -</style> -<div class=target style="backface-visibility: hidden"> - <div style="background: green; isolation: isolate"></div> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-ref.html deleted file mode 100644 index 3441050a59d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-ref.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-translate.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-translate.html deleted file mode 100644 index f03d88f0187..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-translate.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-will-change-transform.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-will-change-transform.html deleted file mode 100644 index dda7ba6827f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-will-change-transform.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-with-sibling-001.html b/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-with-sibling-001.html deleted file mode 100644 index a61d4c2309a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-with-sibling-001.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/change-perspective-property.html b/tests/wpt/web-platform-tests/css/css-transforms/change-perspective-property.html deleted file mode 100644 index b66cccbdac2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/change-perspective-property.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/change-scale-wide-range-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/change-scale-wide-range-ref.html deleted file mode 100644 index 264c6b6f25a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/change-scale-wide-range-ref.html +++ /dev/null @@ -1,3 +0,0 @@ -<!DOCTYPE html> -<div style="width: 200px; height: 200px; background: green; border: 10px solid blue"></div> - diff --git a/tests/wpt/web-platform-tests/css/css-transforms/change-scale-wide-range.html b/tests/wpt/web-platform-tests/css/css-transforms/change-scale-wide-range.html deleted file mode 100644 index ec41946cfdd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/change-scale-wide-range.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/change-transform-origin-property.html b/tests/wpt/web-platform-tests/css/css-transforms/change-transform-origin-property.html deleted file mode 100644 index 2a623eb711d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/change-transform-origin-property.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective-ref.html deleted file mode 100644 index ebd2d860cec..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective-ref.html +++ /dev/null @@ -1,2 +0,0 @@ -<!DOCTYPE html> -<div style="width: 100px; height: 100px; background: green"></div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective.html b/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective.html deleted file mode 100644 index 71b2fd1cb4f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-perspective.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-ref.html deleted file mode 100644 index ebd2d860cec..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip-ref.html +++ /dev/null @@ -1,2 +0,0 @@ -<!DOCTYPE html> -<div style="width: 100px; height: 100px; background: green"></div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip.html b/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip.html deleted file mode 100644 index 5ef960ca0be..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-clip.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-ref.html deleted file mode 100644 index ebd2d860cec..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg-ref.html +++ /dev/null @@ -1,2 +0,0 @@ -<!DOCTYPE html> -<div style="width: 100px; height: 100px; background: green"></div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg.html b/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg.html deleted file mode 100644 index 01ff42a98f4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/composited-under-rotateY-180deg.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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)."> -<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/tests/wpt/web-platform-tests/css/css-transforms/containing-block-dynamic-1-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/containing-block-dynamic-1-ref.html deleted file mode 100644 index 34b66abdb14..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/containing-block-dynamic-1-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/large-scale3d-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/large-scale3d-001.html deleted file mode 100644 index e14d89bd7c7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/large-scale3d-001.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/large-scaley-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/large-scaley-001.html deleted file mode 100644 index 8c3cdeb3e65..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/large-scaley-001.html +++ /dev/null @@ -1,11 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/locked-display-transform-crash.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/locked-display-transform-crash.html deleted file mode 100644 index 0d8b69b079c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/locked-display-transform-crash.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-001.html deleted file mode 100644 index 3be0af34cfa..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-001.html +++ /dev/null @@ -1,9 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-002.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-002.html deleted file mode 100644 index 163e977a917..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-002.html +++ /dev/null @@ -1,8 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-001.html deleted file mode 100644 index 869a3a0c7a2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-001.html +++ /dev/null @@ -1,11 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-002.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-002.html deleted file mode 100644 index 8c9e0dc10c0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-002.html +++ /dev/null @@ -1,11 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-inline-hit-test.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-inline-hit-test.html deleted file mode 100644 index b00dbc839e6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-inline-hit-test.html +++ /dev/null @@ -1,9 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-001.html deleted file mode 100644 index 1bb1091acf2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-001.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-002.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-002.html deleted file mode 100644 index 7f0ca6a1179..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-002.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-svg-foreign-object-hit-test.svg b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-svg-foreign-object-hit-test.svg deleted file mode 100644 index 14c772cb2d2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-svg-foreign-object-hit-test.svg +++ /dev/null @@ -1,20 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html deleted file mode 100644 index 8bdbb984f3a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html +++ /dev/null @@ -1,8 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-crossing-zero-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-crossing-zero-001.html deleted file mode 100644 index 64ba0e85f24..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-crossing-zero-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-001.html deleted file mode 100644 index d2d5e968d64..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-001.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-002.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-002.html deleted file mode 100644 index a485880f496..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-002.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-003.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-003.html deleted file mode 100644 index 9c4cf77e36c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-003.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/crashtests/zero-perspective-001.html b/tests/wpt/web-platform-tests/css/css-transforms/crashtests/zero-perspective-001.html deleted file mode 100644 index 923794ed60c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/crashtests/zero-perspective-001.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-rotate-2d-3d-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/css-rotate-2d-3d-001-ref.html deleted file mode 100644 index 54940566cd1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-rotate-2d-3d-001-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-rotate-2d-3d-001.html b/tests/wpt/web-platform-tests/css/css-transforms/css-rotate-2d-3d-001.html deleted file mode 100644 index 69a6120a76d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-rotate-2d-3d-001.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-scale-nested-001.html b/tests/wpt/web-platform-tests/css/css-transforms/css-scale-nested-001.html deleted file mode 100644 index 2d260710c95..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-scale-nested-001.html +++ /dev/null @@ -1,43 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-skew-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/css-skew-001-ref.html deleted file mode 100644 index 70c256ebec6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-skew-001-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-skew-001.html b/tests/wpt/web-platform-tests/css/css-transforms/css-skew-001.html deleted file mode 100644 index f209834121b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-skew-001.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-skew-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/css-skew-002-ref.html deleted file mode 100644 index 49d75de6b68..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-skew-002-ref.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-skew-002.html b/tests/wpt/web-platform-tests/css/css-transforms/css-skew-002.html deleted file mode 100644 index edafda6cbb3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-skew-002.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-X-negative.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-X-negative.html deleted file mode 100644 index b8193dc09db..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-X-negative.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-X-positive.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-X-positive.html deleted file mode 100644 index 60477bd2403..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-X-positive.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Y-negative.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Y-negative.html deleted file mode 100644 index 6d6920d2a54..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Y-negative.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Y-positive.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Y-positive.html deleted file mode 100644 index 4cc0add76c6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Y-positive.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Z-negative.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Z-negative.html deleted file mode 100644 index 9a742ea0501..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Z-negative.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Z-positive.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Z-positive.html deleted file mode 100644 index 3cef0c126a9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotate3d-Z-positive.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateX-negative.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateX-negative.html deleted file mode 100644 index 15d43e5fc9d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateX-negative.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateX-positive.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateX-positive.html deleted file mode 100644 index 284204f72ad..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateX-positive.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateY-negative.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateY-negative.html deleted file mode 100644 index cff2346f936..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateY-negative.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateY-positive.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateY-positive.html deleted file mode 100644 index e11dbcad0ad..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateY-positive.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateZ-negative.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateZ-negative.html deleted file mode 100644 index b9ebd7b392b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateZ-negative.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateZ-positive.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateZ-positive.html deleted file mode 100644 index ce7002879be..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-rotateZ-positive.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-transform-style.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-transform-style.html deleted file mode 100644 index 68622d019a1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-3d-transform-style.html +++ /dev/null @@ -1,50 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-animate-translate-implied-y-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-animate-translate-implied-y-ref.html deleted file mode 100644 index 43d17375b31..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-animate-translate-implied-y-ref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-animate-translate-implied-y.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-animate-translate-implied-y.html deleted file mode 100644 index dc0b957ca2b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-animate-translate-implied-y.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-rotate.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-rotate.html deleted file mode 100644 index 20267434f68..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-rotate.html +++ /dev/null @@ -1,57 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html deleted file mode 100644 index fa9b5bbbc02..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-inherit-scale.html +++ /dev/null @@ -1,49 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-property-existence.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-property-existence.html deleted file mode 100644 index e00e8077c18..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-property-existence.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-scale-001-manual.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-scale-001-manual.html deleted file mode 100644 index 777951d4964..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-scale-001-manual.html +++ /dev/null @@ -1,50 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-scale-002.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-scale-002.html deleted file mode 100644 index 08ebcc6b961..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-scale-002.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transform-style-evaluation-validation.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transform-style-evaluation-validation.html deleted file mode 100644 index 441fa52a64f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transform-style-evaluation-validation.html +++ /dev/null @@ -1,82 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transforms-3d-on-anonymous-block-001.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transforms-3d-on-anonymous-block-001.html deleted file mode 100644 index 9a432acd5c3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transforms-3d-on-anonymous-block-001.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css-transforms-transformlist.html b/tests/wpt/web-platform-tests/css/css-transforms/css-transforms-transformlist.html deleted file mode 100644 index a4620f59e6e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css-transforms-transformlist.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-perspective.html b/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-perspective.html deleted file mode 100644 index 8f9648b9a5c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-perspective.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-rotateY-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-rotateY-ref.html deleted file mode 100644 index 24a16829e0a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-rotateY-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-rotateY.html b/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-rotateY.html deleted file mode 100644 index 25c12bfa7c2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-rotateY.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale-002.html b/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale-002.html deleted file mode 100644 index 9ad0a4c985c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale-002.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale-ref-002.html b/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale-ref-002.html deleted file mode 100644 index d17d0a0a073..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale-ref-002.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale.html b/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale.html deleted file mode 100644 index c4324a1858d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/css3-transform-scale.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html deleted file mode 100644 index 3a953420308..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/reference/svg-document-styles-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-001.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-001.html deleted file mode 100644 index c719d39ee60..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-001.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-002.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-002.html deleted file mode 100644 index 96bce830b51..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-002.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-003.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-003.html deleted file mode 100644 index c1fe39dba08..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-003.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-004.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-004.html deleted file mode 100644 index 1a7c1390286..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-004.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-005.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-005.html deleted file mode 100644 index cbf5d103bf2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-005.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-006.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-006.html deleted file mode 100644 index 71975eea1ce..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-006.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-007.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-007.html deleted file mode 100644 index b88407c0e25..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-007.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-008.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-008.html deleted file mode 100644 index 329d09b9732..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-008.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-009.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-009.html deleted file mode 100644 index 32252e7d1ce..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-009.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-010.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-010.html deleted file mode 100644 index 47cba53a282..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-010.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-011.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-011.html deleted file mode 100644 index cc6fee768f1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-011.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-012.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-012.html deleted file mode 100644 index e649ef2ddf4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-012.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-013.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-013.html deleted file mode 100644 index e12bc8f0d4b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-013.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-014.html b/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-014.html deleted file mode 100644 index c7a43b15825..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-014.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change-ref.html deleted file mode 100644 index 57c86e1d76c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change-ref.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change.html b/tests/wpt/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change.html deleted file mode 100644 index 46e26bfc9eb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/dynamic-fixed-pos-cb-change.html +++ /dev/null @@ -1,65 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/reference/svg-external-styles-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/reference/svg-external-styles-ref.html deleted file mode 100644 index 3a953420308..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/reference/svg-external-styles-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/support/svg-external-styles.css b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/support/svg-external-styles.css deleted file mode 100644 index ad60fd81174..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/support/svg-external-styles.css +++ /dev/null @@ -1,11 +0,0 @@ -.rotate { - transform: rotate(90deg); -} - -.translateY { - transform: translateY(-100px); -} - -.invalid { - transform: scale(invalid); -} diff --git a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-001.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-001.html deleted file mode 100644 index 36e8811c9b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-001.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-002.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-002.html deleted file mode 100644 index 3ef0139a483..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-002.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-003.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-003.html deleted file mode 100644 index 564f230cc48..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-003.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-004.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-004.html deleted file mode 100644 index ea51002ba28..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-004.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-005.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-005.html deleted file mode 100644 index 93e876bfe38..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-005.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-006.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-006.html deleted file mode 100644 index d43e40a8141..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-006.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-007.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-007.html deleted file mode 100644 index f5745e78306..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-007.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-008.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-008.html deleted file mode 100644 index c2292690746..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-008.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-009.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-009.html deleted file mode 100644 index 969951a1f91..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-009.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-010.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-010.html deleted file mode 100644 index 863278fafe1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-010.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-011.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-011.html deleted file mode 100644 index 353f097451b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-011.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-013.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-013.html deleted file mode 100644 index f45639f8c6e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-013.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-014.html b/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-014.html deleted file mode 100644 index 6ec267febef..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-014.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html deleted file mode 100644 index 1a0820cc2e2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg-ref.html +++ /dev/null @@ -1,4 +0,0 @@ -<!DOCTYPE html> -<body style="margin: 0"> -Should be fully white, without any red. -</body> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html b/tests/wpt/web-platform-tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html deleted file mode 100644 index 4fbc7590c7b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/fractional-scale-gradient-bg-obscure-red-bg.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-combination-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-combination-ref.html deleted file mode 100644 index 1b748215008..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-combination-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ex-unit-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ex-unit-ref.html deleted file mode 100644 index fc6a9da6f1b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ex-unit-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ref.html deleted file mode 100644 index fc6a9da6f1b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-relative-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-relative-ref.html deleted file mode 100644 index 51de5dbb659..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-relative-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-transform-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-transform-ref.html deleted file mode 100644 index d9a29b6c011..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/reference/svg-gradientTransform-transform-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-001.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-001.html deleted file mode 100644 index 6db774b3d2c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-001.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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-4000"> - <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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html deleted file mode 100644 index dbe942f1c36..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-001.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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-16000"> - <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/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-003.html b/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-003.html deleted file mode 100644 index 76208d26c21..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/gradientTransform/svg-gradientTransform-combination-003.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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-16000"> - <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/tests/wpt/web-platform-tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html deleted file mode 100644 index 64bcfbe7df6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/reference/svg-green-square-250x250-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/reference/svg-green-square-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/group/reference/svg-green-square-ref.html deleted file mode 100644 index ea386e774bd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/reference/svg-green-square-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-001.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-001.html deleted file mode 100644 index e0f73067549..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-001.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-002.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-002.html deleted file mode 100644 index cb4d7aac460..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-002.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-003.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-003.html deleted file mode 100644 index 6f21fe2c883..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-003.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-004.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-004.html deleted file mode 100644 index e22809bb48a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-004.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-005.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-005.html deleted file mode 100644 index 5d5e5ada46a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-005.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-006.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-006.html deleted file mode 100644 index 2bbf77d26f7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-006.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-007.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-007.html deleted file mode 100644 index ce47ad19d42..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-007.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-008.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-008.html deleted file mode 100644 index e095b7f9892..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-008.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-009.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-009.html deleted file mode 100644 index da16c47f984..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-009.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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="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,100 99,198 99,100 Z" fill="red"/> - <g transform="skewY(45)"> - <rect width="100" height="100" fill="green"/> - </g> - </svg> -</body> -</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-010.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-010.html deleted file mode 100644 index 9076cb881cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-010.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-011.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-011.html deleted file mode 100644 index 59c4e77b278..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-011.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-001.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-001.html deleted file mode 100644 index c3060313df7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-001.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-002.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-002.html deleted file mode 100644 index 37e897c14af..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-002.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-003.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-003.html deleted file mode 100644 index 092946744a2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-003.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-004.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-004.html deleted file mode 100644 index 810c60d2935..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-004.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-005.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-005.html deleted file mode 100644 index ca693d2c34c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-005.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-006.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-006.html deleted file mode 100644 index 91f1d3e857f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-006.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-007.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-007.html deleted file mode 100644 index 026a5f84cc1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-007.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-008.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-008.html deleted file mode 100644 index 80b153344ec..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-008.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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="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>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-009.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-009.html deleted file mode 100644 index bb747ea3303..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-009.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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,2 1,99 99,197 99,100 Z" fill="red"/> - <g transform="skewY(27)"> - <rect width="100" height="100" fill="green" transform="skewY(26)"/> - </g> - </svg> -</body> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-010.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-010.html deleted file mode 100644 index 14e385752ff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-010.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-011.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-011.html deleted file mode 100644 index 8c67bafb2e5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-011.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-012.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-012.html deleted file mode 100644 index a6571892df9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-012.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-013.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-013.html deleted file mode 100644 index 355746b1b55..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-013.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-014.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-014.html deleted file mode 100644 index e6da31a682c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-014.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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="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,100 99,198 99,100 Z" fill="red"/> - <g transform="scale(0.5)"> - <rect width="200" height="200" fill="green" transform="skewY(45)"/> - </g> - </svg> -</body> -</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-015.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-015.html deleted file mode 100644 index 6ec40d41d39..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-015.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-016.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-016.html deleted file mode 100644 index 22db9eaebcf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-016.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-017.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-017.html deleted file mode 100644 index 3797318afa2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-017.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-018.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-018.html deleted file mode 100644 index 798078e872c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-018.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-019.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-019.html deleted file mode 100644 index c3fb59ece61..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-019.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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="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,42 21,140 119,238 119,140 Z" fill="red"/> - <g transform="skewY(45)"> - <rect width="100" height="100" fill="green" transform="translate(20 20)"/> - </g> - </svg> -</body> -</html>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-020.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-020.html deleted file mode 100644 index a90af996109..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-020.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-021.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-021.html deleted file mode 100644 index 3b8be89f3f7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-021.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-022.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-022.html deleted file mode 100644 index 3ef4bba5a56..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-022.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-023.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-023.html deleted file mode 100644 index a240df2f43e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-023.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-024.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-024.html deleted file mode 100644 index baab7bfa874..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-024.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-025.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-025.html deleted file mode 100644 index 68958f6f518..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-025.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-026.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-026.html deleted file mode 100644 index 5c87506a031..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-026.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-027.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-027.html deleted file mode 100644 index f4119792ff8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-027.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-028.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-028.html deleted file mode 100644 index 69d88bc2721..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-028.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-029.html b/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-029.html deleted file mode 100644 index 3a28c97a1c4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-029.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/huge-length-tiny-scale-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/huge-length-tiny-scale-ref.html deleted file mode 100644 index f3f8abc50e4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/huge-length-tiny-scale-ref.html +++ /dev/null @@ -1,2 +0,0 @@ -<!DOCTYPE html> -<div style="width: 200px; height: 200px; background: green; border: 10px solid blue"></div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/huge-length-tiny-scale.html b/tests/wpt/web-platform-tests/css/css-transforms/huge-length-tiny-scale.html deleted file mode 100644 index 53f4f7d4478..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/huge-length-tiny-scale.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html deleted file mode 100644 index 7c8eb206a9f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-combine.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-combine.html deleted file mode 100644 index 9551a3a726a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-combine.html +++ /dev/null @@ -1,100 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html deleted file mode 100644 index b7dce51e8ba..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-ordering.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-ordering.html deleted file mode 100644 index 9d127f163bc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/animation/individual-transform-ordering.html +++ /dev/null @@ -1,114 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-rotate-property.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-rotate-property.html deleted file mode 100644 index e5a8046effc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-rotate-property.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-scale-property.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-scale-property.html deleted file mode 100644 index 62814a61144..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-scale-property.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-translate-property.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-translate-property.html deleted file mode 100644 index d2d57abb9ad..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/change-translate-property.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-1-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-1-ref.html deleted file mode 100644 index dbc5f05d892..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-1-ref.html +++ /dev/null @@ -1,90 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-1.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-1.html deleted file mode 100644 index f21954e01df..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-1.html +++ /dev/null @@ -1,100 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2-ref.html deleted file mode 100644 index ee956aa301f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2a.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2a.html deleted file mode 100644 index 3f6c97386ba..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2a.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2b.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2b.html deleted file mode 100644 index 94dac2f10ff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2b.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2c.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2c.html deleted file mode 100644 index f84ae228065..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2c.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2d.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2d.html deleted file mode 100644 index 5b5694f544e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2d.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2e.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2e.html deleted file mode 100644 index 0350137bede..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/individual-transform-2e.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/stacking-context-001.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/stacking-context-001.html deleted file mode 100644 index 1a754c5d70b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/stacking-context-001.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/stacking-context-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/stacking-context-ref.html deleted file mode 100644 index 0b8c52303d6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/stacking-context-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/translate-fill-box.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/translate-fill-box.html deleted file mode 100644 index 8892d633279..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/translate-fill-box.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/translate-view-box.html b/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/translate-view-box.html deleted file mode 100644 index 56153594e79..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/individual-transform/translate-view-box.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inheritance.html b/tests/wpt/web-platform-tests/css/css-transforms/inheritance.html deleted file mode 100644 index 2d7b0940846..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inheritance.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/reference/svg-inline-styles-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/reference/svg-inline-styles-ref.html deleted file mode 100644 index 3a953420308..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/reference/svg-inline-styles-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-001.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-001.html deleted file mode 100644 index c0afbe4cfe1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-001.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-002.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-002.html deleted file mode 100644 index 5228afc5f1f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-002.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-003.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-003.html deleted file mode 100644 index 327ff1341ed..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-003.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-004.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-004.html deleted file mode 100644 index 0a0dc027baa..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-004.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-005.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-005.html deleted file mode 100644 index cbb3304eef3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-005.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-006.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-006.html deleted file mode 100644 index 2885cbc989c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-006.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-007.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-007.html deleted file mode 100644 index 249e4285ce0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-007.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-008.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-008.html deleted file mode 100644 index 767363004ad..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-008.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-009.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-009.html deleted file mode 100644 index 16aaf36e3ca..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-009.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-010.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-010.html deleted file mode 100644 index f8d6ad35aeb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-010.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-011.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-011.html deleted file mode 100644 index 0d45742e5c8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-011.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-012.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-012.html deleted file mode 100644 index ceb25953e8b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-012.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-013.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-013.html deleted file mode 100644 index 100f90e5163..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-013.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-014.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-014.html deleted file mode 100644 index 9d17363d1e4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-014.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/inline-with-filter-and-hidden-backface.html b/tests/wpt/web-platform-tests/css/css-transforms/inline-with-filter-and-hidden-backface.html deleted file mode 100644 index dda788537cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/inline-with-filter-and-hidden-backface.html +++ /dev/null @@ -1,11 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/large-matrix-crash.html b/tests/wpt/web-platform-tests/css/css-transforms/large-matrix-crash.html deleted file mode 100644 index 5e8ba9ff791..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/large-matrix-crash.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html deleted file mode 100644 index 1989c044ca5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/reference/svg-matrix-clipped-rect-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html deleted file mode 100644 index fa16f97b3b4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/reference/svg-matrix-four-color-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-001.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-001.html deleted file mode 100644 index 2e17c1ed784..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-001.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-002.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-002.html deleted file mode 100644 index 4f1926580ed..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-002.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-003.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-003.html deleted file mode 100644 index 35639bc8fc9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-003.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-004.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-004.html deleted file mode 100644 index e2f7b2667be..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-004.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-005.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-005.html deleted file mode 100644 index 4fb8ccbe89d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-005.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-006.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-006.html deleted file mode 100644 index a0cb233fa07..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-006.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-007.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-007.html deleted file mode 100644 index 61c2dc6e5f8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-007.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-008.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-008.html deleted file mode 100644 index 57fc8003d5a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-008.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-009.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-009.html deleted file mode 100644 index cee19cb7233..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-009.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-010.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-010.html deleted file mode 100644 index c52eef236b6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-010.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-011.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-011.html deleted file mode 100644 index bb9a528752c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-011.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-012.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-012.html deleted file mode 100644 index ba7331eb6a9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-012.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-013.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-013.html deleted file mode 100644 index a9778222863..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-013.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-014.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-014.html deleted file mode 100644 index 46633c1d2c2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-014.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-015.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-015.html deleted file mode 100644 index e6ea9a07924..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-015.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-016.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-016.html deleted file mode 100644 index 980c9feb2b7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-016.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-017.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-017.html deleted file mode 100644 index 2aa3df21b7d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-017.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-018.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-018.html deleted file mode 100644 index ae9a910db0d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-018.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-019.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-019.html deleted file mode 100644 index 78936949bc4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-019.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-020.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-020.html deleted file mode 100644 index deea3527a42..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-020.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-021.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-021.html deleted file mode 100644 index 7c2d27cb001..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-021.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-022.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-022.html deleted file mode 100644 index bd507577934..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-022.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-023.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-023.html deleted file mode 100644 index e45d17c0580..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-023.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-024.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-024.html deleted file mode 100644 index 73b4212df07..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-024.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-025.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-025.html deleted file mode 100644 index c1bf20b9c2b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-025.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-026.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-026.html deleted file mode 100644 index 8f8513130a3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-026.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-027.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-027.html deleted file mode 100644 index 7d4d9ef9953..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-027.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-028.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-028.html deleted file mode 100644 index 4be4c927d44..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-028.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-029.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-029.html deleted file mode 100644 index eb6d763b717..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-029.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-030.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-030.html deleted file mode 100644 index ca8f1c4bb85..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-030.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-031.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-031.html deleted file mode 100644 index 1a3313ccc3d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-031.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-032.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-032.html deleted file mode 100644 index 5c3701eb565..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-032.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-033.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-033.html deleted file mode 100644 index 9c4649c6ac9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-033.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-034.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-034.html deleted file mode 100644 index 1a20217e77f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-034.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-035.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-035.html deleted file mode 100644 index a5c98f170cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-035.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-036.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-036.html deleted file mode 100644 index 1b9e295e99a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-036.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-037.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-037.html deleted file mode 100644 index bbd0b5be950..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-037.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-038.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-038.html deleted file mode 100644 index bac73d63dff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-038.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-039.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-039.html deleted file mode 100644 index ed3ea7aa120..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-039.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-040.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-040.html deleted file mode 100644 index a8b446f343b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-040.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-041.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-041.html deleted file mode 100644 index 9e08b967620..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-041.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-042.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-042.html deleted file mode 100644 index dad9be8cf2d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-042.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-043.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-043.html deleted file mode 100644 index ba22980e265..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-043.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-044.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-044.html deleted file mode 100644 index 6439e3716cc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-044.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-045.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-045.html deleted file mode 100644 index 3e3ffb4e7f1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-045.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-046.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-046.html deleted file mode 100644 index 8f7a7f73f46..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-046.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-047.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-047.html deleted file mode 100644 index 6fc2a2639cc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-047.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-048.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-048.html deleted file mode 100644 index 580716a0e77..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-048.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-049.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-049.html deleted file mode 100644 index 9cc5928fa8a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-049.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-050.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-050.html deleted file mode 100644 index 2051fa8f050..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-050.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-051.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-051.html deleted file mode 100644 index edbd3b4448c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-051.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-052.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-052.html deleted file mode 100644 index 52191979d54..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-052.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-053.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-053.html deleted file mode 100644 index 56d4ac4a8d0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-053.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-054.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-054.html deleted file mode 100644 index 0e4f1f46655..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-054.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-055.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-055.html deleted file mode 100644 index 6a8cdf1f7a2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-055.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-056.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-056.html deleted file mode 100644 index a5177e02b9f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-056.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-057.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-057.html deleted file mode 100644 index 55dc3499b47..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-057.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-058.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-058.html deleted file mode 100644 index 4465b83b64c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-058.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-059.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-059.html deleted file mode 100644 index e292d6be839..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-059.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-060.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-060.html deleted file mode 100644 index 434e325469a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-060.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-061.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-061.html deleted file mode 100644 index 0c27b675066..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-061.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-062.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-062.html deleted file mode 100644 index f628426554a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-062.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-063.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-063.html deleted file mode 100644 index da21e0a8a76..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-063.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-064.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-064.html deleted file mode 100644 index 116acf9bea0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-064.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-065.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-065.html deleted file mode 100644 index b372f4b9ddb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-065.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-066.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-066.html deleted file mode 100644 index 175ee37f635..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-066.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-067.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-067.html deleted file mode 100644 index 60422fb5c46..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-067.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-068.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-068.html deleted file mode 100644 index 7232ebe44da..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-068.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-069.html b/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-069.html deleted file mode 100644 index bf500336935..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-069.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change-ref.html deleted file mode 100644 index fcead1ea776..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change-ref.html +++ /dev/null @@ -1,2 +0,0 @@ -<!DOCTYPE html> -<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: green;"></div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change.html b/tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change.html deleted file mode 100644 index c3f280d880f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-computed.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-computed.html deleted file mode 100644 index 470424f8d3a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-computed.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-invalid.html deleted file mode 100644 index c6c563124a9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-invalid.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-valid.html deleted file mode 100644 index eb7431078c4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/backface-visibility-valid.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-computed.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-computed.html deleted file mode 100644 index effeb2974e1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-computed.html +++ /dev/null @@ -1,46 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-invalid.html deleted file mode 100644 index f4f01a33995..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-invalid.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-valid.html deleted file mode 100644 index 7653d7eceb8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/perspective-origin-valid.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-invalid.html deleted file mode 100644 index 4b6d7cf2ad5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-invalid.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html deleted file mode 100644 index 82544b094fc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html +++ /dev/null @@ -1,45 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-invalid.html deleted file mode 100644 index a36db1b5a96..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-invalid.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-valid.html deleted file mode 100644 index ecdc5c038b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-valid.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-computed.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-computed.html deleted file mode 100644 index d21beb20813..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-computed.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-invalid.html deleted file mode 100644 index af07a7e406c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-invalid.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-valid.html deleted file mode 100644 index df53d327acf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-box-valid.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-computed.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-computed.html deleted file mode 100644 index 8759fd28be8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-computed.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-invalid.html deleted file mode 100644 index 8985720622c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-invalid.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-computed.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-computed.html deleted file mode 100644 index b8648b8a11a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-computed.html +++ /dev/null @@ -1,49 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-invalid.html deleted file mode 100644 index 5533be4e22e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-invalid.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-valid.html deleted file mode 100644 index d5c952ed0f7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-origin-valid.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-valid.html deleted file mode 100644 index 89a8b519b1b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-valid.html +++ /dev/null @@ -1,77 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-invalid.html deleted file mode 100644 index d47cd5b6961..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-invalid.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-valid.html b/tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-valid.html deleted file mode 100644 index 523bc6d652c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-valid.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-combination-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-combination-ref.html deleted file mode 100644 index 1b748215008..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-combination-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ex-unit-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ex-unit-ref.html deleted file mode 100644 index 961e508b3b5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ex-unit-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ref.html deleted file mode 100644 index fc6a9da6f1b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-relative-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-relative-ref.html deleted file mode 100644 index fc6a9da6f1b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/reference/svg-patternTransform-relative-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/svg-patternTransform-001.html b/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/svg-patternTransform-001.html deleted file mode 100644 index 70a208c0016..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/svg-patternTransform-001.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/svg-patternTransform-combination-001.html b/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/svg-patternTransform-combination-001.html deleted file mode 100644 index 730f7691ab2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/patternTransform/svg-patternTransform-combination-001.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-abspos.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-abspos.html deleted file mode 100644 index ce0b80ea7e1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-abspos.html +++ /dev/null @@ -1,43 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-fixpos.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-fixpos.html deleted file mode 100644 index 512f2032f42..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-fixpos.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-inline.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-inline.html deleted file mode 100644 index c6897ad8eeb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-inline.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1a.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1a.html deleted file mode 100644 index 51e76745b5a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1a.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1b.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1b.html deleted file mode 100644 index a417bd482eb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1b.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-001.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-001.html deleted file mode 100644 index 5210a689540..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-001.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-002.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-002.html deleted file mode 100644 index 869c327e83d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-002.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-003.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-003.html deleted file mode 100644 index 109f8069db0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-003.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-004.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-004.html deleted file mode 100644 index 562e0bb84f7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-004.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-005.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-005.html deleted file mode 100644 index e71d6df65de..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-005.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-006.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-006.html deleted file mode 100644 index 6bbb6fb2103..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-006.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-x.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-x.html deleted file mode 100644 index 1ab8c2109ea..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-x.html +++ /dev/null @@ -1,49 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-xy.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-xy.html deleted file mode 100644 index c6c4c6aedd6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-xy.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w-ref.html deleted file mode 100644 index 4021be83dcd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w-ref.html +++ /dev/null @@ -1,52 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w.html deleted file mode 100644 index 3e4cf81441c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001-ref.html deleted file mode 100644 index 0319294322a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001-ref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001.html deleted file mode 100644 index d22b1156f91..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-transforms-equivalence-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-transforms-equivalence-ref.html deleted file mode 100644 index a4fc022382c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-transforms-equivalence-ref.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-transforms-equivalence.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-transforms-equivalence.html deleted file mode 100644 index 8f59d51ada8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-transforms-equivalence.html +++ /dev/null @@ -1,52 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-0.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-0.html deleted file mode 100644 index eca8e4de5ad..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-0.html +++ /dev/null @@ -1,46 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-negative.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-negative.html deleted file mode 100644 index 2c7305e3b82..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-negative.html +++ /dev/null @@ -1,46 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-positive.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-positive.html deleted file mode 100644 index 752888eaf76..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-translateZ-positive.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html deleted file mode 100644 index 31be3d081e8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context.html deleted file mode 100644 index 8916a39bbb5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2-ref.html deleted file mode 100644 index bea389ab47f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2.html deleted file mode 100644 index a94de82b3ff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-3.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-3.html deleted file mode 100644 index 0c46bd07f73..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-3.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero.html deleted file mode 100644 index 93d2b63f554..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline-ref.html deleted file mode 100644 index 7ca006cc5de..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline.tentative.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline.tentative.html deleted file mode 100644 index c5666aa3580..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline.tentative.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.html deleted file mode 100644 index 720a4133fbe..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties.html deleted file mode 100644 index 7fbd61d8542..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties.html +++ /dev/null @@ -1,121 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective-ref.html deleted file mode 100644 index d84ea9a19cb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective.html deleted file mode 100644 index 0145b0dbfd2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective.html +++ /dev/null @@ -1,85 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective-ref.html deleted file mode 100644 index 590085f9c08..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective-ref.html +++ /dev/null @@ -1,58 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective.html deleted file mode 100644 index 9d2d91df6e8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective.html +++ /dev/null @@ -1,88 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001-ref.html deleted file mode 100644 index 62252a85535..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001.html deleted file mode 100644 index 411b945e10e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001.html +++ /dev/null @@ -1,51 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002-ref.html deleted file mode 100644 index 5a2b59cb905..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002-ref.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002.html deleted file mode 100644 index eaadcfee33b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002.html +++ /dev/null @@ -1,46 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-003.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-003.html deleted file mode 100644 index 7fb0d704fb5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-003.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-001.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-001.html deleted file mode 100644 index 99c38160f34..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-001.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-002.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-002.html deleted file mode 100644 index 243aab6f12f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-002.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-003.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-003.html deleted file mode 100644 index f87b7691b70..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-003.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-004.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-004.html deleted file mode 100644 index 2bf1510dbcc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-004.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-005.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-005.html deleted file mode 100644 index 36582ec90df..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-005.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-006.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-006.html deleted file mode 100644 index 826ee4f9f56..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-006.html +++ /dev/null @@ -1,53 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-007.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-007.html deleted file mode 100644 index 8f228253d3f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-007.html +++ /dev/null @@ -1,54 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-008.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-008.html deleted file mode 100644 index 808ac55262c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-008.html +++ /dev/null @@ -1,56 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-button-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-button-ref.html deleted file mode 100644 index e5e3c1ebfcd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-button-ref.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-button.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-button.html deleted file mode 100644 index 544bb249663..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-button.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-nested-perspective-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-nested-perspective-ref.html deleted file mode 100644 index df0bfc417df..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-nested-perspective-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-nested-perspective.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-nested-perspective.html deleted file mode 100644 index 368784c74f5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-nested-perspective.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-overflow-percent.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-overflow-percent.html deleted file mode 100644 index 1c4962001e3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-overflow-percent.html +++ /dev/null @@ -1,51 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-pseudo-element-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-pseudo-element-ref.html deleted file mode 100644 index 8b3c3b08af4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-pseudo-element-ref.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-pseudo-element.html b/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-pseudo-element.html deleted file mode 100644 index f3a4441e991..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/preserve3d-pseudo-element.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/reference/backface-visibility-hidden-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/backface-visibility-hidden-ref.html deleted file mode 100644 index 6a3e305e5c0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/backface-visibility-hidden-ref.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-scale-nested-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-scale-nested-ref.html deleted file mode 100644 index fe238e091bb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-scale-nested-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-rotateX-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-rotateX-ref.html deleted file mode 100644 index 1575b30ec79..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-rotateX-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-rotateZ-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-rotateZ-ref.html deleted file mode 100644 index 308a70d16a5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-rotateZ-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-transform-style-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-transform-style-ref.html deleted file mode 100644 index a47b14756de..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-3d-transform-style-ref.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-scale-ref-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-scale-ref-001.html deleted file mode 100644 index 9f4b82b983d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-scale-ref-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-scale-ref-002.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-scale-ref-002.html deleted file mode 100644 index def3870bcbe..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transform-scale-ref-002.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transforms-3d-anonymous-block-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transforms-3d-anonymous-block-ref.html deleted file mode 100644 index 74d36162c19..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transforms-3d-anonymous-block-ref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transforms-transformlist-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transforms-transformlist-ref.html deleted file mode 100644 index f96d7b90219..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css-transforms-transformlist-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css3-transform-perspective-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css3-transform-perspective-ref.html deleted file mode 100644 index 3e0ddec2c97..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css3-transform-perspective-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/css3-transform-scale-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/css3-transform-scale-ref.html deleted file mode 100644 index 2d09498f3b6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/css3-transform-scale-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/green.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/green.html deleted file mode 100644 index f7714d2b8bd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/green.html +++ /dev/null @@ -1,7 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/perspective-origin-reftest.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/perspective-origin-reftest.html deleted file mode 100644 index c39661796a4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/perspective-origin-reftest.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/perspective-reftest.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/perspective-reftest.html deleted file mode 100644 index c39661796a4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/perspective-reftest.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-180-degrees-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-180-degrees-001.html deleted file mode 100644 index efe1e09dcf5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-180-degrees-001.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-270-degrees-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-270-degrees-001.html deleted file mode 100644 index 79619d13810..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-270-degrees-001.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-90-degrees-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-90-degrees-001.html deleted file mode 100644 index 3495b38789c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/rotate-90-degrees-001.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/rotateY-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/rotateY-ref.html deleted file mode 100644 index 66586916454..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/rotateY-ref.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/scale-optional-second-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/scale-optional-second-ref.html deleted file mode 100644 index 47725ee2428..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/scale-optional-second-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/scale-zero-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/scale-zero-ref.html deleted file mode 100644 index 3e90578504f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/scale-zero-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/skew-test1-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/skew-test1-ref.html deleted file mode 100644 index 394de2b6c25..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/skew-test1-ref.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<!-- Submitted from TestTWF Paris --> - <head> - <meta charset="utf-8"> - <title>Testing 1 - skew()</title> - <link rel="author" title="Myriam Goude" href="mailto:mymygo@gmail.com"> - <meta name="flags" content="svg"> - <style> - - h4 {clear:both;} - - /* Test 1 - skew on block types */ - - svg { - position:absolute; - } - - </style> -</head> -<body> - - <h3> - Test 1 - Tests with degrees on block elements. - </h3> - <h4> - There should be a green block on the page. - </h4> - <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"> - <polygon points="0,0 150,54.595535 236.602540,204.595535 86.602540,150" style="fill:lime"/> - </svg> - -</body> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-001-ref.html deleted file mode 100644 index db26f0d006a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-001-ref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-002-ref.html deleted file mode 100644 index b536d5c2743..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-002-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-003-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-003-ref.html deleted file mode 100644 index 2ba8f8a1d84..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-003-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html deleted file mode 100644 index 5eca08a1fa1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/subpixel-transform-changes-004-ref.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-3d-rotateY-stair-above-ref-001.xht b/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-3d-rotateY-stair-above-ref-001.xht deleted file mode 100644 index 9a8d7e85934..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-3d-rotateY-stair-above-ref-001.xht +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-applies-to-001-ref.xht b/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-applies-to-001-ref.xht deleted file mode 100644 index fe646caebd7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-applies-to-001-ref.xht +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-applies-to-002-ref.xht b/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-applies-to-002-ref.xht deleted file mode 100644 index 8c383825160..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-applies-to-002-ref.xht +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-origin-01-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-origin-01-ref.html deleted file mode 100644 index e6bac937909..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-origin-01-ref.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-origin-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-origin-ref.html deleted file mode 100644 index 980a273e0d6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-origin-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-scale-test-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-scale-test-ref.html deleted file mode 100644 index 5f5a9af9579..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-scale-test-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-translatex-006-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-translatex-006-ref.html deleted file mode 100644 index a1cee2aa91e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transform-translatex-006-ref.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-preserve-3d-1-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-preserve-3d-1-ref.html deleted file mode 100644 index 06f7257c50a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-preserve-3d-1-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-rotateX-3-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-rotateX-3-ref.html deleted file mode 100644 index aeb72f5df25..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-rotateX-3-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-rotateY-1-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-rotateY-1-ref.html deleted file mode 100644 index 9c3419e6f43..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transformed-rotateY-1-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-degree-45-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-degree-45-ref.html deleted file mode 100644 index b79cc471679..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-degree-45-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-degree-90-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-degree-90-ref.html deleted file mode 100644 index 4151743eded..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-degree-90-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-translate-scale-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-translate-scale-ref.html deleted file mode 100644 index fcf83240c82..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotate-translate-scale-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotateY-degree-60-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotateY-degree-60-ref.html deleted file mode 100644 index 5c65f5677d8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-rotateY-degree-60-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-skewX-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-skewX-ref.html deleted file mode 100644 index e243edf1d48..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-skewX-ref.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-skewY-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-skewY-ref.html deleted file mode 100644 index 8b7604f425e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/transforms-skewY-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/translate-optional-second-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/translate-optional-second-ref.html deleted file mode 100644 index 11742fef0c7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/translate-optional-second-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-css-3d-polygon-cycle-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-css-3d-polygon-cycle-ref.html deleted file mode 100644 index e5c99eae722..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-css-3d-polygon-cycle-ref.html +++ /dev/null @@ -1,66 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-rotate-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-rotate-ref.html deleted file mode 100644 index 4d262683ac6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-rotate-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-skewx-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-skewx-001.html deleted file mode 100644 index c174c7fcde9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-skewx-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-skewy-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-skewy-001.html deleted file mode 100644 index ec721cfb55f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-skewy-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-translatex-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-translatex-001.html deleted file mode 100644 index 68ab44af787..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-translatex-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-translatey-001.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-translatey-001.html deleted file mode 100644 index 12214ad6155..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-translatey-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate-180-degrees-001.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate-180-degrees-001.html deleted file mode 100644 index 9532290cde7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate-180-degrees-001.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate-270-degrees-001.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate-270-degrees-001.html deleted file mode 100644 index ae40c848e57..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate-270-degrees-001.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate-90-degrees-001.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate-90-degrees-001.html deleted file mode 100644 index 447a3cba756..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate-90-degrees-001.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-3args-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-3args-ref.html deleted file mode 100644 index ad9a847b558..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-3args-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-angle-45-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-angle-45-ref.html deleted file mode 100644 index b5460d5d7d6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-angle-45-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-angle-90-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-angle-90-ref.html deleted file mode 100644 index dcd4f9aed90..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/reference/svg-rotate-angle-90-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-002.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-002.html deleted file mode 100644 index 5906a2f4041..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-002.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-001.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-001.html deleted file mode 100644 index f21063afbd9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-001.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-002.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-002.html deleted file mode 100644 index 6cdd6b179dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-002.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-003.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-003.html deleted file mode 100644 index d1b01eabb92..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-003.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-004.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-004.html deleted file mode 100644 index 102807b280b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-004.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-005.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-005.html deleted file mode 100644 index 0b48a82cbf3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-005.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-001.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-001.html deleted file mode 100644 index ff517375369..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-001.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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="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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-011.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-011.html deleted file mode 100644 index 94f1bf5121b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-011.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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="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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-022.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-022.html deleted file mode 100644 index b4d7019a90e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-45-022.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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="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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-001.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-001.html deleted file mode 100644 index 86956f7bca9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-001.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-006.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-006.html deleted file mode 100644 index 80bf689cf27..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-006.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-011.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-011.html deleted file mode 100644 index 94dd286f497..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-011.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-016.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-016.html deleted file mode 100644 index 8d8f8f9940e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-016.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-021.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-021.html deleted file mode 100644 index f72e05af033..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-angle-90-021.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotateY-180deg-with-overflow-scroll-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/rotateY-180deg-with-overflow-scroll-ref.html deleted file mode 100644 index 71b94d146b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotateY-180deg-with-overflow-scroll-ref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotateY-180deg-with-overflow-scroll.html b/tests/wpt/web-platform-tests/css/css-transforms/rotateY-180deg-with-overflow-scroll.html deleted file mode 100644 index 195481d785b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotateY-180deg-with-overflow-scroll.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotateY.html b/tests/wpt/web-platform-tests/css/css-transforms/rotateY.html deleted file mode 100644 index 593969a7a6c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotateY.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate_45deg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate_45deg-ref.html deleted file mode 100644 index 1cac0b893d7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate_45deg-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate_45deg.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate_45deg.html deleted file mode 100644 index 3c9b741be12..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate_45deg.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate_x_45deg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate_x_45deg-ref.html deleted file mode 100644 index f38b34e6395..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate_x_45deg-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate_x_45deg.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate_x_45deg.html deleted file mode 100644 index 5d66279bcff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate_x_45deg.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate_y_45deg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate_y_45deg-ref.html deleted file mode 100644 index 2d404677f14..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate_y_45deg-ref.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotate_y_45deg.html b/tests/wpt/web-platform-tests/css/css-transforms/rotate_y_45deg.html deleted file mode 100644 index a7c59464b20..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotate_y_45deg.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/rotated-clip-under-opacity.html b/tests/wpt/web-platform-tests/css/css-transforms/rotated-clip-under-opacity.html deleted file mode 100644 index 195b2e00d5b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/rotated-clip-under-opacity.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale-optional-second-001.html b/tests/wpt/web-platform-tests/css/css-transforms/scale-optional-second-001.html deleted file mode 100644 index 17cc4f50d56..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale-optional-second-001.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap-ref.html deleted file mode 100644 index 4750764ae93..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap.html b/tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap.html deleted file mode 100644 index 0cb8db40b66..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale-zero-001.html b/tests/wpt/web-platform-tests/css/css-transforms/scale-zero-001.html deleted file mode 100644 index 1b51e015895..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale-zero-001.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/reference/svg-scale-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/reference/svg-scale-ref.html deleted file mode 100644 index 1b03454e921..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/reference/svg-scale-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-001.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-001.html deleted file mode 100644 index e87df4a98d2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-001.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-002.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-002.html deleted file mode 100644 index 2d1e9755230..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-002.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-003.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-003.html deleted file mode 100644 index 45501bbdb3b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-003.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-004.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-004.html deleted file mode 100644 index 728dce1efe4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-004.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-006.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-006.html deleted file mode 100644 index a45d2319ea1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-006.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-007.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-007.html deleted file mode 100644 index 07a3923de66..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-007.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-008.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-008.html deleted file mode 100644 index 5c91cc9be2f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-008.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-009.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-009.html deleted file mode 100644 index 8b33f1eada9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-009.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-010.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-010.html deleted file mode 100644 index 3bae506c5f7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-010.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-011.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-011.html deleted file mode 100644 index dd02c3ceb13..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-011.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-012.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-012.html deleted file mode 100644 index 641de405229..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-012.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-013.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-013.html deleted file mode 100644 index d94e0b7d09b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-013.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-014.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-014.html deleted file mode 100644 index f2acf1b0c66..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-014.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-015.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-015.html deleted file mode 100644 index ecc85c76bcd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-015.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-016.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-016.html deleted file mode 100644 index 9b562597c81..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-016.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-017.html b/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-017.html deleted file mode 100644 index c939b783dea..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scale/svg-scale-017.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scalex-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/scalex-ref.html deleted file mode 100644 index 72d37587bb5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scalex-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scalex.html b/tests/wpt/web-platform-tests/css/css-transforms/scalex.html deleted file mode 100644 index 9669dc8d884..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scalex.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scaley-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/scaley-ref.html deleted file mode 100644 index bbee44c13c1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scaley-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scaley.html b/tests/wpt/web-platform-tests/css/css-transforms/scaley.html deleted file mode 100644 index 293855c8f95..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scaley.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scroll-preserve-3d.html b/tests/wpt/web-platform-tests/css/css-transforms/scroll-preserve-3d.html deleted file mode 100644 index ffedc2f5cd3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scroll-preserve-3d.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z-ref.html deleted file mode 100644 index b2399db472f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z-ref.html +++ /dev/null @@ -1,2 +0,0 @@ -<!DOCTYPE html> -<div style="width: 100px; height: 100px; background: green"></div>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z.html b/tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z.html deleted file mode 100644 index 7f4c6d14f50..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z-ref.html deleted file mode 100644 index b2399db472f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z-ref.html +++ /dev/null @@ -1,2 +0,0 @@ -<!DOCTYPE html> -<div style="width: 100px; height: 100px; background: green"></div>
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z.html b/tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z.html deleted file mode 100644 index 0f7ee00cf0d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/size-change-under-backface-visibility-hidden-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/size-change-under-backface-visibility-hidden-ref.html deleted file mode 100644 index e9362c35745..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/size-change-under-backface-visibility-hidden-ref.html +++ /dev/null @@ -1,9 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/size-change-under-backface-visibility-hidden.html b/tests/wpt/web-platform-tests/css/css-transforms/size-change-under-backface-visibility-hidden.html deleted file mode 100644 index 1543eeb3da3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/size-change-under-backface-visibility-hidden.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skew-test1.html b/tests/wpt/web-platform-tests/css/css-transforms/skew-test1.html deleted file mode 100644 index cb178097654..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skew-test1.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<!-- Submitted from TestTWF Paris --> - <head> - <meta charset="utf-8"> - <title>Testing 1 - skew()</title> - <link rel="author" title="Myriam Goude" href="mailto:mymygo@gmail.com"> - <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/skew-test1-ref.html"> - <meta name="fuzzy" content="maxDifference=17-233;totalPixels=90-858"> - <meta name="flags" content="svg"> - <meta name="assert" content="The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0"> - <style> - - h4 {clear:both;} - - /* Test 1 - skew on block types */ - - svg { - position:absolute; - } - - div { - width:150px; - height:150px; - background-color:lime; - } - - .skew_div { - - transform: skew(30deg,20deg); - transform-origin:0 0; - } - - </style> -</head> -<body> - - <h3> - Test 1 - Tests with degrees on block elements. - </h3> - <h4> - There should be a green block on the page. - </h4> - <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"> - <polygon points="1,1 149,56 235,203 88,149" style="fill:red"/> - </svg> - - <div class="skew_div"> - </div> - -</body> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/skewX/reference/svg-skewx-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/reference/svg-skewx-ref.html deleted file mode 100644 index 9504c266b99..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/reference/svg-skewx-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html deleted file mode 100644 index 22b857ffb5b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/reference/svg-skewxy-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-001.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-001.html deleted file mode 100644 index 8c3181b0895..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-001.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-006.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-006.html deleted file mode 100644 index 9f3f3c33628..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-006.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-011.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-011.html deleted file mode 100644 index e7539d23da7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-011.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-016.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-016.html deleted file mode 100644 index 29078907f46..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-016.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-021.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-021.html deleted file mode 100644 index 73944503df2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-021.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-with-units.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-with-units.html deleted file mode 100644 index 128ee49a7cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-with-units.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewxy-001.html b/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewxy-001.html deleted file mode 100644 index 23467a9936e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewxy-001.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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,99 296,197 200,101 Z" fill="red"/> - <rect width="100" height="100" fill="green" transform="skewX(45) skewY(45)"/> - </svg> -</body> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/skewY/reference/svg-skewy-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/skewY/reference/svg-skewy-ref.html deleted file mode 100644 index 60135e94fe2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewY/reference/svg-skewy-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-001.html b/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-001.html deleted file mode 100644 index a5678f30fb4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-001.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-006.html b/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-006.html deleted file mode 100644 index 51d7b768973..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-006.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-011.html b/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-011.html deleted file mode 100644 index 89f0aa9e62c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-011.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-016.html b/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-016.html deleted file mode 100644 index fee2331f96e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-016.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-021.html b/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-021.html deleted file mode 100644 index 5905e79c0d0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-021.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-with-units.html b/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-with-units.html deleted file mode 100644 index c724051ae85..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-with-units.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-backface-hidden-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-backface-hidden-ref.html deleted file mode 100644 index 8413e3e2d2c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-backface-hidden-ref.html +++ /dev/null @@ -1,4 +0,0 @@ -<!DOCTYPE html> -<div style="padding: 0.4px 0.6px"> - <div style="width: 100px; height: 100px; border: 1px solid black"></div> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-backface-hidden.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-backface-hidden.html deleted file mode 100644 index 6c1d359cb75..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-backface-hidden.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-translate-z-0-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-translate-z-0-ref.html deleted file mode 100644 index 5f3a8e279b4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-translate-z-0-ref.html +++ /dev/null @@ -1,4 +0,0 @@ -<!DOCTYPE html> -<div style="padding: 0.6px 0.4px"> - <div style="width: 100px; height: 100px; border: 1px solid black"></div> -</div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-translate-z-0.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-translate-z-0.html deleted file mode 100644 index 4033e46f8ac..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-perspective-translate-z-0.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-001.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-001.html deleted file mode 100644 index 303cd328012..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-001.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-002.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-002.html deleted file mode 100644 index 928d00d4657..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-002.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-003.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-003.html deleted file mode 100644 index e28d80a29d7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-003.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-004.html b/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-004.html deleted file mode 100644 index bd862957d83..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/subpixel-transform-changes-004.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-green.png b/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-green.png Binary files differdeleted file mode 100644 index b98ca0ba0a0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-green.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-lime.png b/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-lime.png Binary files differdeleted file mode 100644 index cb397fb090e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-lime.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-maroon.png b/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-maroon.png Binary files differdeleted file mode 100644 index 3f86b072195..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-maroon.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-navy.png b/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-navy.png Binary files differdeleted file mode 100644 index 9b9a03955ba..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-navy.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-red.png b/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-red.png Binary files differdeleted file mode 100644 index 6bd73ac1018..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-red.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-white.png b/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-white.png Binary files differdeleted file mode 100644 index dd43faec54a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/1x1-white.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/60x60-gg-rr.png b/tests/wpt/web-platform-tests/css/css-transforms/support/60x60-gg-rr.png Binary files differdeleted file mode 100644 index 84f5b2a4f1d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/60x60-gg-rr.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/60x60-green.png b/tests/wpt/web-platform-tests/css/css-transforms/support/60x60-green.png Binary files differdeleted file mode 100644 index b3c8cf3eb4c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/60x60-green.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/a-green.css b/tests/wpt/web-platform-tests/css/css-transforms/support/a-green.css deleted file mode 100644 index b0dbb071d5b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/a-green.css +++ /dev/null @@ -1 +0,0 @@ -.a { color: green; } diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/b-green.css b/tests/wpt/web-platform-tests/css/css-transforms/support/b-green.css deleted file mode 100644 index a0473f5ca26..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/b-green.css +++ /dev/null @@ -1 +0,0 @@ -.b { color: green; }
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/c-red.css b/tests/wpt/web-platform-tests/css/css-transforms/support/c-red.css deleted file mode 100644 index d4ba5c64e95..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/c-red.css +++ /dev/null @@ -1 +0,0 @@ -.c { color: red; }
\ No newline at end of file diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/cat.png b/tests/wpt/web-platform-tests/css/css-transforms/support/cat.png Binary files differdeleted file mode 100644 index 85dd7324815..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/cat.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/import-green.css b/tests/wpt/web-platform-tests/css/css-transforms/support/import-green.css deleted file mode 100644 index 537104e6633..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/import-green.css +++ /dev/null @@ -1 +0,0 @@ -.import { color: green; } diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/import-red.css b/tests/wpt/web-platform-tests/css/css-transforms/support/import-red.css deleted file mode 100644 index 9945ef47114..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/import-red.css +++ /dev/null @@ -1 +0,0 @@ -.import { color: red; } diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-grg-rgr-grg.png b/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-grg-rgr-grg.png Binary files differdeleted file mode 100644 index 9b88fbd8114..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-grg-rgr-grg.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-grg-rrg-rgg.png b/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-grg-rrg-rgg.png Binary files differdeleted file mode 100644 index fcf4f3fd7d9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-grg-rrg-rgg.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-rgr-grg-rgr.png b/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-rgr-grg-rgr.png Binary files differdeleted file mode 100644 index d454e3a630c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-rgr-grg-rgr.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-tr.png b/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-tr.png Binary files differdeleted file mode 100644 index 8b4b25364e0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/pattern-tr.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-h-50%.png b/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-h-50%.png Binary files differdeleted file mode 100644 index cf2eea6b438..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-h-50%.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-h-50px.png b/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-h-50px.png Binary files differdeleted file mode 100644 index 9f46583665c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-h-50px.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-v-100px.png b/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-v-100px.png Binary files differdeleted file mode 100644 index a837eca2225..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-v-100px.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-v-50px.png b/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-v-50px.png Binary files differdeleted file mode 100644 index 84141028020..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/ruler-v-50px.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/square-purple.png b/tests/wpt/web-platform-tests/css/css-transforms/support/square-purple.png Binary files differdeleted file mode 100644 index 0f522d78728..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/square-purple.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/square-teal.png b/tests/wpt/web-platform-tests/css/css-transforms/support/square-teal.png Binary files differdeleted file mode 100644 index e567f51b91b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/square-teal.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/square-white.png b/tests/wpt/web-platform-tests/css/css-transforms/support/square-white.png Binary files differdeleted file mode 100644 index 5853cbb238c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/square-white.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-blue.png b/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-blue.png Binary files differdeleted file mode 100644 index bf2759634d4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-blue.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-green.png b/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-green.png Binary files differdeleted file mode 100644 index 0aa79b0c86b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-green.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-lime.png b/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-lime.png Binary files differdeleted file mode 100644 index 55fd7fdaedf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-lime.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-orange.png b/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-orange.png Binary files differdeleted file mode 100644 index d3cd498b52b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-orange.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-red.png b/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-red.png Binary files differdeleted file mode 100644 index 1caf25c992a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-red.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-white.png b/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-white.png Binary files differdeleted file mode 100644 index 1a7d4323d77..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-white.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-yellow.png b/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-yellow.png Binary files differdeleted file mode 100644 index 1591aa0e2e2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/swatch-yellow.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/test-bl.png b/tests/wpt/web-platform-tests/css/css-transforms/support/test-bl.png Binary files differdeleted file mode 100644 index 904e24e996a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/test-bl.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/test-br.png b/tests/wpt/web-platform-tests/css/css-transforms/support/test-br.png Binary files differdeleted file mode 100644 index f413ff5c1a0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/test-br.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/test-inner-half-size.png b/tests/wpt/web-platform-tests/css/css-transforms/support/test-inner-half-size.png Binary files differdeleted file mode 100644 index e473bf80efc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/test-inner-half-size.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/test-outer.png b/tests/wpt/web-platform-tests/css/css-transforms/support/test-outer.png Binary files differdeleted file mode 100644 index 82eeace7fc0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/test-outer.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/test-tl.png b/tests/wpt/web-platform-tests/css/css-transforms/support/test-tl.png Binary files differdeleted file mode 100644 index f6ac0ef7e8f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/test-tl.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/test-tr.png b/tests/wpt/web-platform-tests/css/css-transforms/support/test-tr.png Binary files differdeleted file mode 100644 index 59843ae54b6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/test-tr.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/tile-bg.png b/tests/wpt/web-platform-tests/css/css-transforms/support/tile-bg.png Binary files differdeleted file mode 100644 index 2b5b591971a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/tile-bg.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-iframe-001-contents.html b/tests/wpt/web-platform-tests/css/css-transforms/support/transform-iframe-001-contents.html deleted file mode 100644 index d92c3705b6b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-iframe-001-contents.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/support/transform-lime-square.png b/tests/wpt/web-platform-tests/css/css-transforms/support/transform-lime-square.png Binary files differdeleted file mode 100644 index 8f939993332..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-lime-square.png +++ /dev/null diff --git a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-lime-square.svg b/tests/wpt/web-platform-tests/css/css-transforms/support/transform-lime-square.svg deleted file mode 100644 index 5f59904194f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-lime-square.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-down.svg b/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-down.svg deleted file mode 100644 index cd0e7013ba1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-down.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-left.svg b/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-left.svg deleted file mode 100644 index e0bf2665687..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-left.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-right.svg b/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-right.svg deleted file mode 100644 index 3e100cbbb07..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-right.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-up.svg b/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-up.svg deleted file mode 100644 index 2145190fec4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/support/transform-triangle-up.svg +++ /dev/null @@ -1,4 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/text-perspective-001.html b/tests/wpt/web-platform-tests/css/css-transforms/text-perspective-001.html deleted file mode 100644 index e98b3e73b36..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/text-perspective-001.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-2d-getComputedStyle-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-2d-getComputedStyle-001.html deleted file mode 100644 index b6a2a7cef21..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-2d-getComputedStyle-001.html +++ /dev/null @@ -1,118 +0,0 @@ -<!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); - element.style.display = 'none'; - assert_equals(window.getComputedStyle(element).getPropertyValue("transform"), "none", "Computed style for an element with 'display: none' should be 'transform: none'"); - } - - 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/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-fixed-under-fixed-opacity-crash.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-fixed-under-fixed-opacity-crash.html deleted file mode 100644 index a2ddc814b3f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-fixed-under-fixed-opacity-crash.html +++ /dev/null @@ -1,7 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-rotateY-stair-above-001.xht b/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-rotateY-stair-above-001.xht deleted file mode 100644 index e637eb0b828..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-rotateY-stair-above-001.xht +++ /dev/null @@ -1,70 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-rotateY-stair-below-001.xht b/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-rotateY-stair-below-001.xht deleted file mode 100644 index bcb28dbd516..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-rotateY-stair-below-001.xht +++ /dev/null @@ -1,71 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001-ref.html deleted file mode 100644 index 3c72ff05f6f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001-ref.html +++ /dev/null @@ -1,54 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html deleted file mode 100644 index 36323a715a9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html +++ /dev/null @@ -1,65 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002-ref.html deleted file mode 100644 index 861e7b8f453..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002.html deleted file mode 100644 index cace6699cbd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-3d-scales-different-x-y-dynamic-002.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-001.html deleted file mode 100644 index f434079e0d3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-001.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-002.html deleted file mode 100644 index fffeb38bcf3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-002.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-003.html deleted file mode 100644 index 9b711bd05dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-003.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-004.html deleted file mode 100644 index d7ffa8bbe4f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-004.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-005.html deleted file mode 100644 index 4a5fddfd65c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-005.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-006.html deleted file mode 100644 index 5b49aebfae6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-006.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-007.html deleted file mode 100644 index 26a7e4c3ab1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-007.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-ref.html deleted file mode 100644 index f4aa147c981..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-abspos-ref.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-and-individual-transform-properties-computed-style.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-and-individual-transform-properties-computed-style.html deleted file mode 100644 index 56968eeefa9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-and-individual-transform-properties-computed-style.html +++ /dev/null @@ -1,17 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/transform-applies-to-001.xht b/tests/wpt/web-platform-tests/css/css-transforms/transform-applies-to-001.xht deleted file mode 100644 index c49160479a8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-applies-to-001.xht +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-applies-to-002.xht b/tests/wpt/web-platform-tests/css/css-transforms/transform-applies-to-002.xht deleted file mode 100644 index c3e107af336..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-applies-to-002.xht +++ /dev/null @@ -1,43 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-001.html deleted file mode 100644 index d58b0380bf1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-001.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-002.html deleted file mode 100644 index 46dc0b8d3da..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-002.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-003.html deleted file mode 100644 index 14a35a8b16e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-003.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-004.html deleted file mode 100644 index 200dced2e1d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-004.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-005.html deleted file mode 100644 index e669d3c629b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-005.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-006-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-006-notref.html deleted file mode 100644 index a8f4bf6163a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-006-notref.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-006.html deleted file mode 100644 index f8be4311526..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-006.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-007.html deleted file mode 100644 index 787c593fb09..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-007.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-008.html deleted file mode 100644 index c1565bf1c27..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-008.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-ref-1.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-ref-1.html deleted file mode 100644 index 42aaa5b0b3e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-ref-1.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-background-ref-2.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-background-ref-2.html deleted file mode 100644 index 2585b62b02d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-background-ref-2.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-blank-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-blank-ref.html deleted file mode 100644 index 6dfeba6e167..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-blank-ref.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-border-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-border-box.html deleted file mode 100644 index d0176e367b4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-border-box.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-content-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-content-box.html deleted file mode 100644 index 31a44282930..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-content-box.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-fill-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-fill-box.html deleted file mode 100644 index 6821140bfea..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-fill-box.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-initial.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-initial.html deleted file mode 100644 index 5344fb23490..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-initial.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-stroke-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-stroke-box.html deleted file mode 100644 index fd0db232155..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-stroke-box.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-view-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-view-box.html deleted file mode 100644 index 2336957bf1c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/cssbox-view-box.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-001.html deleted file mode 100644 index 7e9b133aead..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-001.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-002.html deleted file mode 100644 index 9044048e387..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-002.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-mutation-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-mutation-001.html deleted file mode 100644 index 1f0dfd01bb9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-mutation-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-mutation-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-mutation-002.html deleted file mode 100644 index 676d5cdd03b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/fill-box-mutation-002.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/cssbox-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/cssbox-ref.html deleted file mode 100644 index 138d65df940..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/cssbox-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/greensquare200x200.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/greensquare200x200.html deleted file mode 100644 index bee8bc70fe5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/greensquare200x200.html +++ /dev/null @@ -1,3 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/svgbox-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/svgbox-ref.html deleted file mode 100644 index c765ebe8665..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/reference/svgbox-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-border-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-border-box.html deleted file mode 100644 index 921dba1d738..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-border-box.html +++ /dev/null @@ -1,28 +0,0 @@ -<!DOCTYPE html> -<title>transform-box: border-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: border-box; /* alias for stroke-box */ - transform-origin: 25px 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 = "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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-content-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-content-box.html deleted file mode 100644 index 2f7f2dd071a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-content-box.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-fill-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-fill-box.html deleted file mode 100644 index 111d8dbcfb3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-fill-box.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-initial.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-initial.html deleted file mode 100644 index ba07c884522..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-initial.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-stroke-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-stroke-box.html deleted file mode 100644 index d2ca1411ae8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-stroke-box.html +++ /dev/null @@ -1,28 +0,0 @@ -<!DOCTYPE html> -<title>transform-box: stroke-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: stroke-box; - transform-origin: 25px 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 = "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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-view-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-view-box.html deleted file mode 100644 index dbce635d6e7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/svgbox-view-box.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/value-changed.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/value-changed.html deleted file mode 100644 index 4aca90a61c1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/value-changed.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-001.html deleted file mode 100644 index d0c85fd59d3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-002.html deleted file mode 100644 index d18d823409c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-002.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-003.html deleted file mode 100644 index 87397288548..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-mutation-003.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-nested.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-nested.html deleted file mode 100644 index 9e7fc17e2a5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-nested.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-viewbox-nested.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-viewbox-nested.html deleted file mode 100644 index fc072363e8a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-viewbox-nested.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-viewbox.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-viewbox.html deleted file mode 100644 index a69d8092f64..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box-viewbox.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box.html deleted file mode 100644 index 0b5eeda5438..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-box/view-box.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-clip-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-clip-001-ref.html deleted file mode 100644 index 5f91b99d121..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-clip-001-ref.html +++ /dev/null @@ -1,6 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-clip-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-clip-001.html deleted file mode 100644 index 0bdfd631ba1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-clip-001.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-001.html deleted file mode 100644 index 1f5ed4ca07f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-001.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-notref-1.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-notref-1.html deleted file mode 100644 index c04367cad35..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-notref-1.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-notref-2.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-notref-2.html deleted file mode 100644 index 87dcfceaab0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-notref-2.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-ref.html deleted file mode 100644 index 5122ad98c20..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-compound-ref.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed-ref.html deleted file mode 100644 index 2e88d4493fc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed-ref.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed.html deleted file mode 100644 index 2fd5f3873a2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-and-scrolling-area-for-fixed.html +++ /dev/null @@ -1,43 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1a.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1a.html deleted file mode 100644 index 7e6a10dda1c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1a.html +++ /dev/null @@ -1,49 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1b.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1b.html deleted file mode 100644 index 61266f02e26..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1b.html +++ /dev/null @@ -1,49 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-descendant-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-descendant-001.html deleted file mode 100644 index 7fef84180e7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-descendant-001.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-descendant-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-descendant-ref.html deleted file mode 100644 index ac60e7f52fd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-descendant-ref.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-display-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-display-001.html deleted file mode 100644 index 4b5af4e74e0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-display-001.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-display-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-display-002.html deleted file mode 100644 index 7b45eecf5d5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-display-002.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-display-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-display-003.html deleted file mode 100644 index 8ac29168c34..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-display-003.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-display-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-display-004.html deleted file mode 100644 index 5659a7c409f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-display-004.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-display-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-display-notref.html deleted file mode 100644 index 67fe3284b2e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-display-notref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-display-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-display-ref.html deleted file mode 100644 index 9ed62fb00ff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-display-ref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-001.html deleted file mode 100644 index 5198d09cc36..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-001.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-002.html deleted file mode 100644 index 37b4975dc27..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-002.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-003.html deleted file mode 100644 index 73d4296b14c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-003.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-004.html deleted file mode 100644 index 8da16896203..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-004.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-005.html deleted file mode 100644 index c4cd1c26429..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-005.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-006.html deleted file mode 100644 index 89acec8e746..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-006.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-007.html deleted file mode 100644 index 2ffbc41e183..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-007.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-008.tentative.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-008.tentative.html deleted file mode 100644 index d2fc4b6244e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-008.tentative.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-ref.html deleted file mode 100644 index fa579319dcf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-fixed-bg-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-flattening-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-flattening-001.html deleted file mode 100644 index 85d29779b5a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-flattening-001.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001-notref.html deleted file mode 100644 index f0c2792682a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001-notref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001-ref.html deleted file mode 100644 index 08ab93aabbd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001.html deleted file mode 100644 index 7b7136a1f47..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-001.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002-notref.html deleted file mode 100644 index 3dc1808fbfd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002-notref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002-ref.html deleted file mode 100644 index e9b6663a36a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002-ref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002.html deleted file mode 100644 index 60c4932d15e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-generated-002.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-getBoundingClientRect-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-getBoundingClientRect-001.html deleted file mode 100644 index 15adf31f0d1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-getBoundingClientRect-001.html +++ /dev/null @@ -1,41 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-transforms/transform-hit-testing.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-hit-testing.html deleted file mode 100644 index 6a890dc367b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-hit-testing.html +++ /dev/null @@ -1,153 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-iframe-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-iframe-001.html deleted file mode 100644 index b8620a04ac8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-iframe-001.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-iframe-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-iframe-ref.html deleted file mode 100644 index b674c88d82f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-iframe-ref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-image-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-image-001.html deleted file mode 100644 index 0565b8dbeeb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-image-001.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-image-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-image-ref.html deleted file mode 100644 index 301c0f94bb7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-image-ref.html +++ /dev/null @@ -1,10 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-001.html deleted file mode 100644 index 0beb6895d7f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-001.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-002.html deleted file mode 100644 index 05d5488b618..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-002.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-001.html deleted file mode 100644 index 203f2076f18..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-001.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-002.html deleted file mode 100644 index 7de0fb48c2b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-002.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-ref.html deleted file mode 100644 index 3d39942116e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-origin-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-ref.html deleted file mode 100644 index cb435bce628..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inherit-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-001.html deleted file mode 100644 index 09a35f00558..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-001.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-notref.html deleted file mode 100644 index e8e9ce85575..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-notref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-ref.html deleted file mode 100644 index e64ce6837d2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-inline-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-001-ref.html deleted file mode 100644 index de85025af60..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-001-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-001.html deleted file mode 100644 index fb3e8201659..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-001.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-002-ref.html deleted file mode 100644 index e502d3f5ca8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-002-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-002.html deleted file mode 100644 index c191a848ef8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-002.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-003-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-003-ref.html deleted file mode 100644 index 7487cf0d4a1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-003-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-003.html deleted file mode 100644 index b8aa4e17ee9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-003.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-004-ref.html deleted file mode 100644 index 2f69df2f6bb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-004-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-004.html deleted file mode 100644 index cde5e5c6519..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-004.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-005-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-005-ref.html deleted file mode 100644 index 3888cd39817..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-005-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-005.html deleted file mode 100644 index efa053e9c80..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-005.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-006-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-006-ref.html deleted file mode 100644 index 1e510842aed..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-006-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-006.html deleted file mode 100644 index 0a3715a65b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-006.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-007-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-007-ref.html deleted file mode 100644 index 9d54c0c1053..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-007-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-007.html deleted file mode 100644 index 397fe0dd1d5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-007.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-008-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-008-ref.html deleted file mode 100644 index cc67785b295..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-008-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-008.html deleted file mode 100644 index 984d789ae13..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-008.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-009-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-009-ref.html deleted file mode 100644 index 90d048b9141..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-009-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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=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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-009.html deleted file mode 100644 index cde6397c77a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-009.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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"> - <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"> - <meta name="fuzzy" content="maxDifference=0-129;totalPixels=0-1340"> - <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=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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-010-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-010-ref.html deleted file mode 100644 index cecbdcdd70c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-010-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-010.html deleted file mode 100644 index 64005a9b44f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-010.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-011-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-011-ref.html deleted file mode 100644 index 23808e282e2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-011-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-011.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-011.html deleted file mode 100644 index 64ac2ddb0a5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-011.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-012-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-012-ref.html deleted file mode 100644 index 1e15c5cebd9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-012-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-012.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-012.html deleted file mode 100644 index 92d77720a9f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-012.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-013-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-013-ref.html deleted file mode 100644 index 3754937f4f1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-013-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-013.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-013.html deleted file mode 100644 index 1fe2b07f0b7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-013.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-014-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-014-ref.html deleted file mode 100644 index 9f4eacf7f73..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-014-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-014.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-014.html deleted file mode 100644 index f463d6a0512..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-014.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-015-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-015-ref.html deleted file mode 100644 index 47a85c2aedc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-015-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-015.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-015.html deleted file mode 100644 index 14547a3fee8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-015.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-016-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-016-ref.html deleted file mode 100644 index bd99d5c7e4f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-016-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-016.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-016.html deleted file mode 100644 index 8b3e0b45370..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-016.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-017-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-017-ref.html deleted file mode 100644 index 2c3746740fc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-017-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-017.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-017.html deleted file mode 100644 index 8c180bbe8f5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-017.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-018-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-018-ref.html deleted file mode 100644 index dfac8b53b40..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-018-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-018.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-018.html deleted file mode 100644 index c97777e2499..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-018.html +++ /dev/null @@ -1,46 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-019-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-019-ref.html deleted file mode 100644 index a01e744d722..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-019-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-input-019.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-input-019.html deleted file mode 100644 index c5de33bf07d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-input-019.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-lime-square-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-lime-square-ref.html deleted file mode 100644 index b3b7e3575d6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-lime-square-ref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/reference/svg-transform-list-separations-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/reference/svg-transform-list-separations-ref.html deleted file mode 100644 index e03c1996ab9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/reference/svg-transform-list-separations-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-001.html deleted file mode 100644 index b80742dfe70..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-001.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-002.html deleted file mode 100644 index eaf4bddc77f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-002.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-003.html deleted file mode 100644 index 5128499e148..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-003.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-004.html deleted file mode 100644 index 137898c891b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-004.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-005.html deleted file mode 100644 index 62aae678f83..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-005.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-006.html deleted file mode 100644 index 83322f71e97..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-006.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-007.html deleted file mode 100644 index e04a9053e8b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-007.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-008.html deleted file mode 100644 index 547b77c390c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-008.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-009.html deleted file mode 100644 index 205931a84f7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-009.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-010.html deleted file mode 100644 index 4845d3ae308..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-010.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-011.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-011.html deleted file mode 100644 index f414acbd75f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-list-separation/svg-transform-list-separations-011.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-001-ref.html deleted file mode 100644 index 60273af9f32..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-001-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-001.html deleted file mode 100644 index e523ea67832..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-002-ref.html deleted file mode 100644 index 92739fbb316..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-002-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-002.html deleted file mode 100644 index 5c86be354e8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-002.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-003-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-003-ref.html deleted file mode 100644 index d6a31ec4c33..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-003-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-003.html deleted file mode 100644 index ba74a8938a9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-003.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-004-ref.html deleted file mode 100644 index 9f4535de262..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-004-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-004.html deleted file mode 100644 index 297f6b70f88..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-004.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005-notref.html deleted file mode 100644 index 58209e357e5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005-notref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005-ref.html deleted file mode 100644 index 752f37fa381..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005.html deleted file mode 100644 index 531f9f6718e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-005.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-006-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-006-ref.html deleted file mode 100644 index 12171711bdc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-006-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-006.html deleted file mode 100644 index 18dbd2705dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-006.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-007-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-007-ref.html deleted file mode 100644 index b832afa1783..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-007-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-007.html deleted file mode 100644 index 48612a5a17f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-007.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008-notref.html deleted file mode 100644 index 6fded81335c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008-notref.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008-ref.html deleted file mode 100644 index 04b6bbff98a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008-ref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008.html deleted file mode 100644 index a6fdf3f776c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-matrix-008.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-001.html deleted file mode 100644 index 1951f92079a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-001.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-002.html deleted file mode 100644 index 6e31cda0aa7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-002.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-003.html deleted file mode 100644 index 92abffc19d1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-003.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-004.html deleted file mode 100644 index 8737a816cf8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-004.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-005.html deleted file mode 100644 index 8aa017294e2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-005.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-006.html deleted file mode 100644 index 199a8ebcb2d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-006.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-007-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-007-ref.html deleted file mode 100644 index 0febe427a17..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-007-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-007.html deleted file mode 100644 index 074fd96181d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-007.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-008.html deleted file mode 100644 index 1103ecbccc2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-008.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-009.html deleted file mode 100644 index 00b78e4b023..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-009.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-01.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-01.html deleted file mode 100644 index d7e1cd34d45..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-01.html +++ /dev/null @@ -1,56 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-010.html deleted file mode 100644 index 7f343e5abd5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-010.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-011.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-011.html deleted file mode 100644 index a8056b1c13d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-011.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-012.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-012.html deleted file mode 100644 index 220d4db0ff6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-012.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-013-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-013-ref.html deleted file mode 100644 index c88cd5e9efa..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-013-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-013.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-013.html deleted file mode 100644 index 93c17e7fc26..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-013.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-014.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-014.html deleted file mode 100644 index c350166430e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-014.html +++ /dev/null @@ -1,50 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-in-shadow.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-in-shadow.html deleted file mode 100644 index ebbc616ff8e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-in-shadow.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-001.html deleted file mode 100644 index 1970c662736..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-001.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-002.html deleted file mode 100644 index 145a47d60c4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-002.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-003.html deleted file mode 100644 index af4b80b6c64..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-003.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-004.html deleted file mode 100644 index bd2a393f844..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-004.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-005.html deleted file mode 100644 index 2b9e1c3eea0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-005.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-006.html deleted file mode 100644 index 775efe5f8bf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-006.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-007.html deleted file mode 100644 index 7ba5e8d7d63..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-007.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-notref.html deleted file mode 100644 index 488725acfe0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-notref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-1.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-1.html deleted file mode 100644 index 1db1d10d819..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-1.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-2.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-2.html deleted file mode 100644 index e41c0a2b5dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-2.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-3.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-3.html deleted file mode 100644 index da0d4088247..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-name-ref-3.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-ref-1.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-ref-1.html deleted file mode 100644 index 78e2baee0fc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-ref-1.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-ref-2.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-ref-2.html deleted file mode 100644 index 78e2baee0fc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin-ref-2.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin.html deleted file mode 100644 index dbc6b730584..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html deleted file mode 100644 index 8369f6abd86..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html deleted file mode 100644 index 9be32c6d6dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-in-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html deleted file mode 100644 index 3a181777947..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html deleted file mode 100644 index 652e65caf16..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-length-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html deleted file mode 100644 index 3302f68bd47..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-invalid-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html deleted file mode 100644 index 3302f68bd47..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/reference/svg-origin-relative-length-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-001.html deleted file mode 100644 index 2f2256361ca..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-001.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-002.html deleted file mode 100644 index d7d238c26e5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-002.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-003.html deleted file mode 100644 index 3afea97a7ee..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-003.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-004.html deleted file mode 100644 index c33c9809c3d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-004.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-005.html deleted file mode 100644 index 0f1d4d260f4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-005.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-006.html deleted file mode 100644 index f29363483a4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-006.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-007.html deleted file mode 100644 index d1b067e0e7a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-007.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-008.html deleted file mode 100644 index 545cbe01328..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-008.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html deleted file mode 100644 index 6324edf6ca1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-001.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html deleted file mode 100644 index 83c1ffc814d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-002.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html deleted file mode 100644 index f20e0522224..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-003.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html deleted file mode 100644 index 09bd7735de1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-004.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html deleted file mode 100644 index 6c16f0e1112..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-cm-005.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html deleted file mode 100644 index 4d2d58df2eb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-001.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html deleted file mode 100644 index 0bd200cfbe9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-002.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html deleted file mode 100644 index 2108ef1840e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-003.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html deleted file mode 100644 index ec44d317cc5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-004.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html deleted file mode 100644 index 98b33c25c1a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-in-005.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html deleted file mode 100644 index 6772fd10b9d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-001.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html deleted file mode 100644 index 94b4b58daeb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-002.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html deleted file mode 100644 index 2d456b9c016..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-003.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html deleted file mode 100644 index 494edb2a630..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-004.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html deleted file mode 100644 index f3072823791..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-length-pt-005.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html deleted file mode 100644 index 54e0031ee97..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-001.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html deleted file mode 100644 index ad58d8c4317..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-002.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html deleted file mode 100644 index 65f4d600350..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-003.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html deleted file mode 100644 index 3b76a772dfd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-004.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html deleted file mode 100644 index 87e22fbe51f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-005.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html deleted file mode 100644 index e74489e5136..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-006.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html deleted file mode 100644 index e03a8d0d138..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-007.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html deleted file mode 100644 index c9e9e3b70b0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-008.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html deleted file mode 100644 index a40a998d903..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-009.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html deleted file mode 100644 index 0f4335dd102..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-010.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html deleted file mode 100644 index 9ff00e62135..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-011.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html deleted file mode 100644 index e3c8a9b6720..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-012.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html deleted file mode 100644 index b4977ea8e99..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-013.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html deleted file mode 100644 index 6249beb7d5d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-014.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html deleted file mode 100644 index 180f6cf8cac..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-015.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html deleted file mode 100644 index 7a0b0128cce..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-016.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html deleted file mode 100644 index 41abf1a0141..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-017.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html deleted file mode 100644 index 6252022d3f9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-018.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html deleted file mode 100644 index af42850b305..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-019.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html deleted file mode 100644 index 8ca59aa9041..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-020.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html deleted file mode 100644 index 5b3ce3373e2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-021.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html deleted file mode 100644 index d6b4a25b88a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-022.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html deleted file mode 100644 index d7b0c77f4b6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-023.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html deleted file mode 100644 index 24347e8cd49..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-024.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html deleted file mode 100644 index 7cf1d16c044..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-025.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html deleted file mode 100644 index 42d8044f58a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-026.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html deleted file mode 100644 index 2e65ae445e3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-027.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html deleted file mode 100644 index 91c288e6392..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-028.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html deleted file mode 100644 index 0010c4d836d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-029.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html deleted file mode 100644 index 3faaee66473..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-030.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html deleted file mode 100644 index 369be12dd2b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-031.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html deleted file mode 100644 index 40e79ba7d0d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-032.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html deleted file mode 100644 index 9abce87f704..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-033.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html deleted file mode 100644 index 16c1eeebb8a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-034.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html deleted file mode 100644 index 4a8c485673f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-035.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html deleted file mode 100644 index 2ed45e7cfe1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-036.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html deleted file mode 100644 index 4a40e187601..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-037.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html deleted file mode 100644 index 50924a663c7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-038.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html deleted file mode 100644 index 2e2b446309c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-039.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html deleted file mode 100644 index 3b46d2d22c8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-040.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html deleted file mode 100644 index 62189588a00..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-041.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html deleted file mode 100644 index 3e8f278d317..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-042.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html deleted file mode 100644 index b1d5a346c89..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-043.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html deleted file mode 100644 index e8352af4017..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-044.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html deleted file mode 100644 index 8af656ee7c2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-045.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html deleted file mode 100644 index fd7d9764e3b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-046.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html deleted file mode 100644 index a7e92116978..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-001.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html deleted file mode 100644 index d9296ec019c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-002.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html deleted file mode 100644 index afee0ebc719..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-003.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html deleted file mode 100644 index cdf1270bf86..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-004.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html deleted file mode 100644 index e06e6f47dc1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-005.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html deleted file mode 100644 index 09d02c5cdb9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-006.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html deleted file mode 100644 index 727197b9755..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-007.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html deleted file mode 100644 index da91e511996..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-008.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html deleted file mode 100644 index 39dcbf4f73e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-009.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html deleted file mode 100644 index b13dd1e393b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-010.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html deleted file mode 100644 index f53d7f0a79d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-011.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html deleted file mode 100644 index 69fe6f8129f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-origin/svg-origin-relative-length-invalid-012.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-001-ref.html deleted file mode 100644 index 33847a0fe38..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-001-ref.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-001.html deleted file mode 100644 index 3e545379b81..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-001.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-002-ref.html deleted file mode 100644 index 0b35869d297..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-002-ref.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-002.html deleted file mode 100644 index 2fa9d18fddf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-overflow-002.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-001.html deleted file mode 100644 index 59b9236706b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-001.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-002.html deleted file mode 100644 index bb783765be7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-002.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-003.html deleted file mode 100644 index 3bf6242b3b7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-003.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-004.html deleted file mode 100644 index 382a51ad891..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-004.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-005.html deleted file mode 100644 index ba35397c15e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-005.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-006.html deleted file mode 100644 index f50ea7e9a1d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-006.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-007.html deleted file mode 100644 index 9ced1c61be5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-007.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-008.html deleted file mode 100644 index e4b33321633..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-008.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-009.html deleted file mode 100644 index c6d64be3c36..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-009.html +++ /dev/null @@ -1,50 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-010.html deleted file mode 100644 index 92ebe78c1d5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-010.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-notref.html deleted file mode 100644 index 96c70ec6d37..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-notref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-ref.html deleted file mode 100644 index 7acaac28326..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-percent-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-propagate-inherit-boolean-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-propagate-inherit-boolean-001.html deleted file mode 100644 index 1e27e76862f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-propagate-inherit-boolean-001.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-propagate-inherit-boolean-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-propagate-inherit-boolean-ref.html deleted file mode 100644 index 417f6e3d589..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-propagate-inherit-boolean-ref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-001-ref.html deleted file mode 100644 index 811172e4338..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-001-ref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-001.html deleted file mode 100644 index e3d7ff3807e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-001.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-002.html deleted file mode 100644 index 2a433fe675e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-002.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-003.html deleted file mode 100644 index 377847fc5ab..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-003.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-004-ref.html deleted file mode 100644 index c2e30190ba4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-004-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-004.html deleted file mode 100644 index c11284dd4df..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-root-bg-004.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001-notref.html deleted file mode 100644 index 4cbaa13107f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001-notref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001-ref.html deleted file mode 100644 index f64c95e178b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001-ref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001.html deleted file mode 100644 index f157b83f2ec..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-001.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-002.html deleted file mode 100644 index c6f28b5e142..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-002.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-003.html deleted file mode 100644 index 40b69fb35bf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-003.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-004.html deleted file mode 100644 index 58f8103ab17..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-004.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-005.html deleted file mode 100644 index 14eeddb9dd7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-005.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-006.html deleted file mode 100644 index 678d0cbeec3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-006.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007-notref.html deleted file mode 100644 index e5e6af6c745..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007-notref.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007-ref.html deleted file mode 100644 index 4e1c46d2746..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007-ref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007.html deleted file mode 100644 index 915c72b0d52..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rotate-007.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rounding-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rounding-001.html deleted file mode 100644 index 2b3ea451284..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rounding-001.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-rounding-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-rounding-ref.html deleted file mode 100644 index a42dd5895d9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-rounding-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-001.html deleted file mode 100644 index d046cc3fb31..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-001.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-002.html deleted file mode 100644 index dad5f25af5c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-002.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-hittest.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-hittest.html deleted file mode 100644 index c17f04291b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-hittest.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-percent-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-percent-001.html deleted file mode 100644 index 2cb53fa4a74..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-percent-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-percent-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-percent-ref.html deleted file mode 100644 index f6bd0141353..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-percent-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-ref.html deleted file mode 100644 index 4bcfab0c7dc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-test.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-test.html deleted file mode 100644 index 63ff1fce82b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scale-test.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scalex-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scalex-001.html deleted file mode 100644 index 46ef7a4a0bb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scalex-001.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scalex-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scalex-ref.html deleted file mode 100644 index 911fb34148b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scalex-ref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scaley-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scaley-001.html deleted file mode 100644 index e226156bf82..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scaley-001.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-scaley-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-scaley-ref.html deleted file mode 100644 index b84ede464dc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-scaley-ref.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-singular-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-singular-001.html deleted file mode 100644 index 9cc1e319834..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-singular-001.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-singular-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-singular-ref.html deleted file mode 100644 index e5427bdb4cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-singular-ref.html +++ /dev/null @@ -1,7 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-001.html deleted file mode 100644 index eefda74157b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-001.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-002.html deleted file mode 100644 index 127ca7389e8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-002.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-003.html deleted file mode 100644 index fda7c933a7b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-003.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-004.html deleted file mode 100644 index 4594b3f5990..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-stacking-004.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-stresstest-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-stresstest-001.html deleted file mode 100644 index 4c83b3c78fd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-stresstest-001.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-stresstest-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-stresstest-ref.html deleted file mode 100644 index e6ba9f56755..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-stresstest-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001-notref.html deleted file mode 100644 index 57d96366844..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001-notref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001-ref.html deleted file mode 100644 index e782c886ddc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001-ref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001.html deleted file mode 100644 index 4a41e4def80..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-001.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-002-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-002-notref.html deleted file mode 100644 index 55e1845528e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-002-notref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-002.html deleted file mode 100644 index e2a870f2e79..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-002.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-003.html deleted file mode 100644 index 96174d0bdb8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-003.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004-notref.html deleted file mode 100644 index c1927e2eee9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004-notref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004-ref.html deleted file mode 100644 index b70ca674967..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004-ref.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004.html deleted file mode 100644 index c88a6b7f836..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-004.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-005-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-005-notref.html deleted file mode 100644 index cbc72a5a888..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-005-notref.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-005.html deleted file mode 100644 index 7ab67ef939a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-005.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-006.html deleted file mode 100644 index 49d08a6abac..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-006.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-007.html deleted file mode 100644 index ef6de7e3335..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-007.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-008.html deleted file mode 100644 index 24a96d44bd8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-008.html +++ /dev/null @@ -1,43 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009-notref.html deleted file mode 100644 index 9e9691241a0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009-notref.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009-ref.html deleted file mode 100644 index 5964aa6fe1a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009-ref.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009.html deleted file mode 100644 index 21aa044f8df..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-009.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-010-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-010-notref.html deleted file mode 100644 index c96a6e13219..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-010-notref.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-010.html deleted file mode 100644 index 8c660f87b52..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-010.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-011-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-011-notref.html deleted file mode 100644 index 74e83217d56..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-011-notref.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-table-011.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-table-011.html deleted file mode 100644 index 73a5c48dde8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-table-011.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-block-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-block-ref.html deleted file mode 100644 index 7f9de3be4a1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-block-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-block.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-block.html deleted file mode 100644 index 22e45dba7b5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-block.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-table-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-table-ref.html deleted file mode 100644 index 09efea81697..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-table-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-table.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-table.html deleted file mode 100644 index 5495f3a260a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-inline-table.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-list-item-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-list-item-ref.html deleted file mode 100644 index e7bc10b6561..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-list-item-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-list-item.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-list-item.html deleted file mode 100644 index f72682dabd1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-list-item.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-caption-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-caption-ref.html deleted file mode 100644 index cff6a943840..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-caption-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-caption.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-caption.html deleted file mode 100644 index e0bc5771928..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-caption.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-cell-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-cell-ref.html deleted file mode 100644 index 12c833411ed..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-cell-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-cell.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-cell.html deleted file mode 100644 index 28bfddb3ed9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-cell.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-footer-group-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-footer-group-ref.html deleted file mode 100644 index 6c271443583..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-footer-group-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-footer-group.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-footer-group.html deleted file mode 100644 index 92d6b63bc1f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-footer-group.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-header-group-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-header-group-ref.html deleted file mode 100644 index 1b9abeb2b76..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-header-group-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-header-group.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-header-group.html deleted file mode 100644 index a3665fcb1b1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-header-group.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-ref.html deleted file mode 100644 index 207673b3e7d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-group-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-group-ref.html deleted file mode 100644 index 2655cf8a55a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-group-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-group.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-group.html deleted file mode 100644 index 1aa7cf7c37f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-group.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-ref.html deleted file mode 100644 index e055c80e994..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row-ref.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row.html deleted file mode 100644 index fc24e57ad51..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table-row.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table.html deleted file mode 100644 index be01dc28831..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformable-table.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-caption-contains-fixed-position-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-caption-contains-fixed-position-ref.html deleted file mode 100644 index 5400f2a70dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-caption-contains-fixed-position-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-caption-contains-fixed-position.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-caption-contains-fixed-position.html deleted file mode 100644 index 69de54b900f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-caption-contains-fixed-position.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position-ref.html deleted file mode 100644 index f8db1643d62..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position.html deleted file mode 100644 index b96e94ed23d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tbody-contains-fixed-position.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-td-contains-fixed-position-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-td-contains-fixed-position-ref.html deleted file mode 100644 index 27981a65410..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-td-contains-fixed-position-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-td-contains-fixed-position.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-td-contains-fixed-position.html deleted file mode 100644 index 7e43d2adde4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-td-contains-fixed-position.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position-ref.html deleted file mode 100644 index 9b4628d1a73..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position.html deleted file mode 100644 index a04bba3b6de..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tfoot-contains-fixed-position.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-th-contains-fixed-position-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-th-contains-fixed-position-ref.html deleted file mode 100644 index 1c2d3bdf045..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-th-contains-fixed-position-ref.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-th-contains-fixed-position.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-th-contains-fixed-position.html deleted file mode 100644 index 4ddde403e38..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-th-contains-fixed-position.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-thead-contains-fixed-position-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-thead-contains-fixed-position-ref.html deleted file mode 100644 index e5e4217c820..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-thead-contains-fixed-position-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-thead-contains-fixed-position.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-thead-contains-fixed-position.html deleted file mode 100644 index 2270cff6725..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-thead-contains-fixed-position.html +++ /dev/null @@ -1,41 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-contains-fixed-position-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-contains-fixed-position-ref.html deleted file mode 100644 index b0b630999d4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-contains-fixed-position-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-contains-fixed-position.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-contains-fixed-position.html deleted file mode 100644 index 52f015d2923..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-contains-fixed-position.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-percent-height-child-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-percent-height-child-ref.html deleted file mode 100644 index 7e1ac99ba89..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-percent-height-child-ref.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-percent-height-child.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-percent-height-child.html deleted file mode 100644 index 91f2a5f0588..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-transformed-tr-percent-height-child.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-001.html deleted file mode 100644 index 70e0388a409..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-002.html deleted file mode 100644 index fc6b48c573c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-002.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-003.html deleted file mode 100644 index 9da63a63c03..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-003.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-004.html deleted file mode 100644 index 87e4bb0f3f0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-004.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-005.html deleted file mode 100644 index 06f550e9234..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-005.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-001-ref.html deleted file mode 100644 index 03aebe11448..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-001-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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; - /* Match scrollbar change caused by translateY transformation */ - margin-top: -250vh; - } -</style> -<div style="height: 400vh;"></div> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-001.html deleted file mode 100644 index bd14ebc25ee..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-001.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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); - } -</style> -<div style="height: 400vh;"></div> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-002.html deleted file mode 100644 index d714af2d07b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-background-002.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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%); - } -</style> -<div style="height: 400vh;"></div> -<script> - requestAnimationFrame(() => requestAnimationFrame(() => { - document.documentElement.style.transform = "translate(0, -250vh)"; - takeScreenshot(); - })); -</script> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-ref.html deleted file mode 100644 index 1a781a06145..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translate-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-001.html deleted file mode 100644 index fb00811d4c5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-002.html deleted file mode 100644 index 9e00765a82a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-002.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-003.html deleted file mode 100644 index c07d9ceca06..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-003.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-004.html deleted file mode 100644 index 83cd41c5a38..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-004.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-005.html deleted file mode 100644 index ec1f29c26ab..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-005.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-006.html deleted file mode 100644 index fd6f46fc165..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-006.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-ref.html deleted file mode 100644 index 326b39f7fab..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatex-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-001.html deleted file mode 100644 index 90d24604443..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-002.html deleted file mode 100644 index 5e77cb12373..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-002.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-003.html deleted file mode 100644 index bf76959a0fd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-003.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-004.html deleted file mode 100644 index 3f9f3e8c662..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-004.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-005.html deleted file mode 100644 index 44437dc1200..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-005.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-ref.html deleted file mode 100644 index 9971995a2fd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform-translatey-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-001.html deleted file mode 100644 index e0b1788a351..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-001.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-002.html deleted file mode 100644 index fbc08444409..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-002.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-003.html deleted file mode 100644 index a1c90c6687a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-003.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-004.html deleted file mode 100644 index a2e34817952..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-004.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-005.html deleted file mode 100644 index 74e4576ff3d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-005.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-006.html deleted file mode 100644 index 5dbfa98c75a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-006.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-007.html deleted file mode 100644 index ed239aa3555..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-007.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-008.html deleted file mode 100644 index 38aadb16278..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-backface-visibility-008.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-image-scale-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-image-scale-001.html deleted file mode 100644 index b7f8f0acc4d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-image-scale-001.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-image-scale-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-image-scale-002.html deleted file mode 100644 index fa26e4311e8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-image-scale-002.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-001-ref.html deleted file mode 100644 index a2d5dc890c0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-001-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-001.html deleted file mode 100644 index 2f4a98b1b68..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-001.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-002-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-002-ref.html deleted file mode 100644 index dfa60d0af96..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-002-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-002.html deleted file mode 100644 index f9bed47290c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-002.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-003-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-003-ref.html deleted file mode 100644 index c3275e3d7f4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-003-ref.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-003.html deleted file mode 100644 index eb1ee4d23d7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-003.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-004-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-004-ref.html deleted file mode 100644 index 7079851149a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-004-ref.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-004.html deleted file mode 100644 index 5a860e1fbb4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-004.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-005-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-005-ref.html deleted file mode 100644 index 872d6515eb2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-005-ref.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-005.html deleted file mode 100644 index 3b7dac4ae30..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-matrix3d-005.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-001-ref.html deleted file mode 100644 index 0585fcd3acd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-001-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-001.html deleted file mode 100644 index c97003e6451..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-001.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-002.html deleted file mode 100644 index fd54bc6712a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-002.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-003.html deleted file mode 100644 index 3be861b4174..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-003.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-004.html deleted file mode 100644 index 52b3e87c344..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-004.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-005.html deleted file mode 100644 index f23375d0c0c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-005.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-006.html deleted file mode 100644 index 90d436729d7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-006.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-007.html deleted file mode 100644 index 7b63265d1d0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-007.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-008.html deleted file mode 100644 index cdc70373a20..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-008.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-009-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-009-ref.html deleted file mode 100644 index 63cdd04d231..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-009-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-009.html deleted file mode 100644 index 8e783b66c58..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-009.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-origin-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-origin-001.html deleted file mode 100644 index 791d4bd136c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-origin-001.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-origin-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-origin-ref.html deleted file mode 100644 index e174d7596f7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-perspective-origin-ref.html +++ /dev/null @@ -1,16 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-001-ref.html deleted file mode 100644 index 383bc7a63eb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-001-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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(180deg); width: 100px; height: 100px;"> - Test Text - </div> - </body> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-001.html deleted file mode 100644 index dbebc64139a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-001.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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"> - <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"> - </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;"> - Test Text - </div> - </div> - </div> - </div> - </body> -</html> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-002.html deleted file mode 100644 index 2be42e9886b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-002.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-003.html deleted file mode 100644 index 2912b61ed6e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-003.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-004.html deleted file mode 100644 index 98850bb7dde..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-004.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-005.html deleted file mode 100644 index 0a0605fe700..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-005.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-006.html deleted file mode 100644 index b7c178f2fc9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-006.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-007.html deleted file mode 100644 index 91310b91bae..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-007.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-008.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-008.html deleted file mode 100644 index ee2ceaa5fd0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-008.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-009.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-009.html deleted file mode 100644 index e709462b5ff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-009.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-010.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-010.html deleted file mode 100644 index d00f71c1e32..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-010.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-011.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-011.html deleted file mode 100644 index a5e839380f4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-011.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-012.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-012.html deleted file mode 100644 index e0b6eeca630..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-012.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-013-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-013-ref.html deleted file mode 100644 index 0fa95b245d2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-013-ref.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-013.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-013.html deleted file mode 100644 index 224a9e7c81e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-preserve3d-013.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotate3d-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotate3d-001.html deleted file mode 100644 index 93a46f1c6ab..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotate3d-001.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotate3d-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotate3d-002.html deleted file mode 100644 index 49d75487c97..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotate3d-002.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-001.html deleted file mode 100644 index 2f75f15cd0d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-001.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-001.html deleted file mode 100644 index 6d35cae6326..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-001.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-002.html deleted file mode 100644 index ecf6a2f8d57..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-002.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-003.html deleted file mode 100644 index a371155f58e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-003.html +++ /dev/null @@ -1,42 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-notref.html deleted file mode 100644 index 109e34db0fa..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-notref.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-ref.html deleted file mode 100644 index 3d7c26f581b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-ref.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-ref.html deleted file mode 100644 index ca8789cfdc9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-transformorigin-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-transformorigin-001.html deleted file mode 100644 index 9c957d8acaf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-transformorigin-001.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-transformorigin-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-transformorigin-ref.html deleted file mode 100644 index 1c959312163..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatex-transformorigin-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatey-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatey-001.html deleted file mode 100644 index 75250b15107..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatey-001.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatey-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatey-ref.html deleted file mode 100644 index d12cd9267e6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-rotatey-ref.html +++ /dev/null @@ -1,12 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001-notref.html deleted file mode 100644 index ab5ae4cb402..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001-notref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001-ref.html deleted file mode 100644 index 05e7b31d27b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001.html deleted file mode 100644 index f89cf9c955a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-001.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-002.html deleted file mode 100644 index 85ed574042c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-002.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-003.html deleted file mode 100644 index c655bfebe5c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-003.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-004.html deleted file mode 100644 index ed8247cc5bd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-004.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-005-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-005-ref.html deleted file mode 100644 index 270e413ddb2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-005-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-005.html deleted file mode 100644 index 9b7acba8c2f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-005.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-006.html deleted file mode 100644 index 061a277b6b9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-006.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-007-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-007-ref.html deleted file mode 100644 index b719044a569..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-007-ref.html +++ /dev/null @@ -1,14 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-007.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-007.html deleted file mode 100644 index 88261b7ad65..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-scale-007.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-001.html deleted file mode 100644 index 82c062b18a9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-001.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-002.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-002.html deleted file mode 100644 index ba850c83753..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-002.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-003.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-003.html deleted file mode 100644 index e3900be63ef..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-003.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-004.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-004.html deleted file mode 100644 index 37416aa35cc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-004.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-005.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-005.html deleted file mode 100644 index 3038f9ab1e1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-005.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-006-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-006-ref.html deleted file mode 100644 index 8ed7f552827..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-006-ref.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-006.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-006.html deleted file mode 100644 index acc478079e7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-sorting-006.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translate3d-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translate3d-001.html deleted file mode 100644 index ca3bf337ec9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translate3d-001.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translate3d-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translate3d-ref.html deleted file mode 100644 index c79a7efb832..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translate3d-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-001.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-001.html deleted file mode 100644 index b000275e699..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-001.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-notref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-notref.html deleted file mode 100644 index 5f689cc3cfd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-notref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-ref.html deleted file mode 100644 index 0e4a06d0637..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform3d-translatez-ref.html +++ /dev/null @@ -1,13 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform_translate.html b/tests/wpt/web-platform-tests/css/css-transforms/transform_translate.html deleted file mode 100644 index 84288324554..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform_translate.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_invalid.html b/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_invalid.html deleted file mode 100644 index 9e74fe1ccc8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_invalid.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_max.html b/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_max.html deleted file mode 100644 index 146300309f4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_max.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_min.html b/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_min.html deleted file mode 100644 index 6881165e2dd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_min.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_neg.html b/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_neg.html deleted file mode 100644 index 404e14cf0c1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_neg.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_second_omited.html b/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_second_omited.html deleted file mode 100644 index 735fbc5237a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_second_omited.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_zero.html b/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_zero.html deleted file mode 100644 index 61feb7e61a4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transform_translate_zero.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transformed-preserve-3d-1.html b/tests/wpt/web-platform-tests/css/css-transforms/transformed-preserve-3d-1.html deleted file mode 100644 index 14ab46e29a1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transformed-preserve-3d-1.html +++ /dev/null @@ -1,43 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transformed-rotateX-3.html b/tests/wpt/web-platform-tests/css/css-transforms/transformed-rotateX-3.html deleted file mode 100644 index 2517eac8e40..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transformed-rotateX-3.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transformed-rotateY-1.html b/tests/wpt/web-platform-tests/css/css-transforms/transformed-rotateY-1.html deleted file mode 100644 index e1e9b2969d8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transformed-rotateY-1.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-degree-45.html b/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-degree-45.html deleted file mode 100644 index c5da4e864e2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-degree-45.html +++ /dev/null @@ -1,51 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-degree-90.html b/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-degree-90.html deleted file mode 100644 index 575be7808ff..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-degree-90.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-translate-scale.html b/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-translate-scale.html deleted file mode 100644 index a06a27d7cf9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotate-translate-scale.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotateY-degree-60.html b/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotateY-degree-60.html deleted file mode 100644 index 8bf73a60d45..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transforms-rotateY-degree-60.html +++ /dev/null @@ -1,34 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transforms-skewX.html b/tests/wpt/web-platform-tests/css/css-transforms/transforms-skewX.html deleted file mode 100644 index fafb7df24d6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transforms-skewX.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transforms-skewY.html b/tests/wpt/web-platform-tests/css/css-transforms/transforms-skewY.html deleted file mode 100644 index 49c6cbf6700..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transforms-skewY.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/transforms-support-calc.html b/tests/wpt/web-platform-tests/css/css-transforms/transforms-support-calc.html deleted file mode 100644 index a952d21b664..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/transforms-support-calc.html +++ /dev/null @@ -1,68 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate-getComputedStyle.html b/tests/wpt/web-platform-tests/css/css-transforms/translate-getComputedStyle.html deleted file mode 100644 index 2a4cdc6d6c6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate-getComputedStyle.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate-optional-second-001.html b/tests/wpt/web-platform-tests/css/css-transforms/translate-optional-second-001.html deleted file mode 100644 index 83bda6f2382..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate-optional-second-001.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate-ref.html deleted file mode 100644 index 20fb4ffb5b6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate-ref.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate.html b/tests/wpt/web-platform-tests/css/css-transforms/translate.html deleted file mode 100644 index 1c1f42e48ec..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate.html +++ /dev/null @@ -1,48 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html deleted file mode 100644 index 61bf38c03ab..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-abs-unit-combinations-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html deleted file mode 100644 index 297187d7532..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-ex-unit-ref.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html deleted file mode 100644 index eea34503ed1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-multiple-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html deleted file mode 100644 index 913349a833d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-multiple-relative-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-ref.html deleted file mode 100644 index 19d1187bd6f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html deleted file mode 100644 index bd22fefaaae..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/svg-translate-relative-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html deleted file mode 100644 index 1f60f3fcb0b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-and-transform-attribute-in-svg-ref.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html deleted file mode 100644 index cce3f40477d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-and-transform-css-property-in-svg-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-in-svg-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-in-svg-ref.html deleted file mode 100644 index ed185a63b69..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/reference/translate-in-svg-ref.html +++ /dev/null @@ -1,20 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-001.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-001.html deleted file mode 100644 index be48af33ff7..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-001.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-009.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-009.html deleted file mode 100644 index f59a0a1462c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-009.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-017.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-017.html deleted file mode 100644 index 864ca2e2d90..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-017.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-025.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-025.html deleted file mode 100644 index ffccb8e69cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-025.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-033.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-033.html deleted file mode 100644 index a218a4794ac..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-033.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-041.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-041.html deleted file mode 100644 index 175eb6e4467..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-041.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-049.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-049.html deleted file mode 100644 index 2684b07ed8d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-049.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-050.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-050.html deleted file mode 100644 index 2519e050852..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-050.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-051.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-051.html deleted file mode 100644 index bb965eb4125..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-051.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-052.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-052.html deleted file mode 100644 index d7656bf2e9d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-052.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-053.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-053.html deleted file mode 100644 index cf3da372ac2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-053.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-054.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-054.html deleted file mode 100644 index 90061d4c35b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-054.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-055.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-055.html deleted file mode 100644 index 54c5cc908bb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-055.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-multiple-001.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-multiple-001.html deleted file mode 100644 index 8c88e92f0b5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-multiple-001.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-multiple-002.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-multiple-002.html deleted file mode 100644 index c8c438c7777..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-multiple-002.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-with-units.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-with-units.html deleted file mode 100644 index 32561409ad6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/svg-translate-with-units.html +++ /dev/null @@ -1,21 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html deleted file mode 100644 index 5d316e0b6aa..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-and-transform-attribute-in-svg.html +++ /dev/null @@ -1,26 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html deleted file mode 100644 index e44fd145060..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-and-transform-css-property-in-svg.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-in-svg.html b/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-in-svg.html deleted file mode 100644 index 6652f543f47..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/translate/translate-in-svg.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/ttwf-css-3d-polygon-cycle-mismatch.html b/tests/wpt/web-platform-tests/css/css-transforms/ttwf-css-3d-polygon-cycle-mismatch.html deleted file mode 100644 index cdb2e59046a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/ttwf-css-3d-polygon-cycle-mismatch.html +++ /dev/null @@ -1,66 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/ttwf-css-3d-polygon-cycle.html b/tests/wpt/web-platform-tests/css/css-transforms/ttwf-css-3d-polygon-cycle.html deleted file mode 100644 index 857ba80cfb8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/ttwf-css-3d-polygon-cycle.html +++ /dev/null @@ -1,52 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/ttwf-reftest-rotate.html b/tests/wpt/web-platform-tests/css/css-transforms/ttwf-reftest-rotate.html deleted file mode 100644 index 168f0c83a76..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/ttwf-reftest-rotate.html +++ /dev/null @@ -1,53 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-skewx-001.html b/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-skewx-001.html deleted file mode 100644 index 40b6ea80531..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-skewx-001.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-skewy-001.html b/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-skewy-001.html deleted file mode 100644 index 599d615cb9d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-skewy-001.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-translatex-001.html b/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-translatex-001.html deleted file mode 100644 index bef05c05fd9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-translatex-001.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-translatey-001.html b/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-translatey-001.html deleted file mode 100644 index c8caa6bd7c1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/ttwf-transform-translatey-001.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-transforms/z-index-does-not-apply-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/z-index-does-not-apply-ref.html deleted file mode 100644 index f3b68dd6c95..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/z-index-does-not-apply-ref.html +++ /dev/null @@ -1,10 +0,0 @@ -<!doctype html> -<title>CSS test reference</title> -<style> - div { - background: green; - width: 100px; - height: 100px; - } -</style> -<div></div> diff --git a/tests/wpt/web-platform-tests/css/css-transforms/z-index-does-not-apply.html b/tests/wpt/web-platform-tests/css/css-transforms/z-index-does-not-apply.html deleted file mode 100644 index 26d3c49de0f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-transforms/z-index-does-not-apply.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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> |