Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

Browse source
This commit is contained in:
WPT Sync Bot 2021-09-07 11:16:33 +00:00 • committed by cybai
parent 35e95f55a1
commit 58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
Download patch file Download diff file Expand all files Collapse all files

54
tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-abspos.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (absolute positioning)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts">
<meta name="assert" content="Absolutely positioned elements participate in 3D Rendering Contexts based on their parent, not their containing block.">
<link rel="match" href="reference/green.html">
<style>
div {
width: 100px;
height: 100px;
}
.cb {
transform-style: preserve-3d;
background: red;
position: relative;
}
.parent {
}
.abspos {
position: absolute;
top: 0;
left: 0;
/* Since this element is not in the 3D Rendering Context, this translation
does not put it above the <div class="sibling">. */
transform: translateZ(20px);
background: red;
}
.sibling {
position: absolute;
top: 0;
left: 0;
transform: translateZ(10px);
background: green;
}
</style>
<p>Pass if there is NO red below:</p>
<div class="cb">
<div class="parent">
<div class="abspos">
</div>
</div>
<div class="sibling">
</div>
</div>

55
tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-fixpos.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (fixed positioning)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts">
<meta name="assert" content="Fixed positioned elements participate in 3D Rendering Contexts based on their parent, not their containing block.">
<link rel="match" href="reference/green.html">
<style>
div {
width: 100px;
height: 100px;
}
.cb {
transform-style: preserve-3d;
transform: translateX(0);
background: red;
position: relative;
}
.parent {
}
.abspos {
position: fixed;
top: 0;
left: 0;
/* Since this element is not in the 3D Rendering Context, this translation
does not put it above the <div class="sibling">. */
transform: translateZ(20px);
background: red;
}
.sibling {
position: absolute;
top: 0;
left: 0;
transform: translateZ(10px);
background: green;
}
</style>
<p>Pass if there is NO red below:</p>
<div class="cb">
<div class="parent">
<div class="abspos">
</div>
</div>
<div class="sibling">
</div>
</div>

39
tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-inline.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (inlines)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts">
<meta name="assert" content="Blocks inside of inlines participate in 3D Rendering Contexts based on their parent, not their containing block.">
<link rel="match" href="transform-blank-ref.html">
<style>
.outer {
display: block;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(90deg);
}
.middle {
display: inline;
}
.inner {
display: block;
width: 100px;
height: 100px;
transform: rotateX(-90deg);
background: red;
}
</style>
<p>Nothing should appear except this sentence.</p>
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>

54
tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-001.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Sorting outside of the 3-D Rendering Context</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="The #wrapper element is the root of the 3-D rendering context, so #tooltip should render on top of it per normal CSS z-ordering rules.">
<link rel="match" href="transform-lime-square-ref.html">
<style>
#contain {
position: relative;
padding-top: 5px;
}
#wrapper {
width: 30px;
height: 30px;
margin-top: 20px;
margin-left: 20px;
}
#cube {
width: 15px;
height: 15px;
transform-style: preserve-3d;
}
#face {
width: 15px;
height: 15px;
transform: translateZ(75px);
background: red;
}
#tooltip {
position: absolute;
background: lime;
width: 100px;
height: 100px;
top: 0;
left: 0;
}
</style>
<div id="contain">
<div id="wrapper">
<div id="cube">
<div id="face"></div>
</div>
</div>
<div id="tooltip"></div>
</div>

56
tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-002.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Sorting outside of the 3-D Rendering Context</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="The #wrapper element is the root of the 3-D rendering context, so #tooltip should render on top of it per normal CSS z-ordering rules.">
<link rel="match" href="transform-lime-square-ref.html">
<style>
#contain {
position: relative;
padding-top: 5px;
}
#wrapper {
width: 30px;
height: 30px;
margin-top: 20px;
margin-left: 20px;
perspective: 700px;
}
#cube {
width: 15px;
height: 15px;
transform-style: preserve-3d;
}
#face {
width: 15px;
height: 15px;
transform: translateZ(75px);
background: red;
}
#tooltip {
position: absolute;
background: lime;
width: 100px;
height: 100px;
top: 0;
left: 0;
}
</style>
<div id="contain">
<div id="wrapper">
<div id="cube">
<div id="face"></div>
</div>
</div>
<div id="tooltip"></div>
</div>

57
tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-and-z-ordering-003.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Sorting outside of the 3-D Rendering Context</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Philip Rogers" href="mailto:pdr@google.com">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="The #wrapper element is the root of the 3-D rendering context, so #tooltip should render on top of it per normal CSS z-ordering rules.">
<link rel="match" href="transform-lime-square-ref.html">
<style>
#contain {
position: relative;
padding-top: 5px;
}
#wrapper {
width: 30px;
height: 30px;
margin-top: 20px;
margin-left: 20px;
}
#cube {
width: 15px;
height: 15px;
transform-style: preserve-3d;
column-count: 5;
}
#face {
width: 15px;
height: 15px;
transform: translateX(5px);
background: red;
column-span: all;
}
#tooltip {
position: absolute;
background: lime;
width: 100px;
height: 100px;
top: 0;
left: 0;
}
</style>
<div id="contain">
<div id="wrapper">
<div id="cube">
<div id="face"></div>
</div>
</div>
<div id="tooltip"></div>
</div>

24
tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-behavior.tentative.html → tests/wpt/web-platform-tests/css/css-transforms/3d-rendering-context-behavior.html
View file

@ -35,12 +35,12 @@
</div>
<div class="parent rotateNeg45">
<div id=fixedChildOfPreserve3D class="child rotate45" style="position: absolute"></div>
<div id=fixedChildOfPreserve3D class="child rotate45" style="position: fixed"></div>
</div>
<div class="parent rotateNeg45">
<div>
<div id=childWithIntermediate class="child rotate45" style="position: absolute"></div>
<div id=childWithIntermediate class="child rotate45"></div>
</div>
</div>
@ -57,7 +57,7 @@
</div>
<div class="perspective">
<div id=childWithPerspectiveParent class="child rotate45" style="position: absolute"></div>
<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>
@ -73,15 +73,23 @@
<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");
}, "Direct DOM parent is root of rendering context (fixed)");
test(function() {
assert_equals(childWithIntermediate.getBoundingClientRect().width, 200);
assert_equals(absWithIntermediate.getBoundingClientRect().width, 200);
assert_equals(fixedWithIntermediate.getBoundingClientRect().width, 200);
}, "Intermediate DOM nodes cause rendering context to end");
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(

37
tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001-ref.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Filter on a 3d transformed element</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
body {
margin: 0;
}
.cover {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 220px;
}
</style>
<svg class="cover">
<polygon fill="blue"
style="transform: translateZ(0)"
points="278.470,115.594
553.80005,15.38214
587.9345,109.1657
312.6045,209.3776" />
</svg>
<svg class="cover">
<polygon fill="transparent" stroke="aqua" stroke-width="4"
points="278.470,115.594
553.80005,15.38214
587.9345,109.1657
312.6045,209.3776" />
</svg>

69
tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-filter-no-perspective-001.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Filter on a 3d transformed element</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
<meta name="assert" content="The filtered element is rendered correctly without clipping, despite the interesting transform.">
<link rel="match" href="3dtransform-and-filter-no-perspective-001-ref.html">
<style>
body {
margin: 0;
}
div {
height: 500px;
width: 750px;
overflow: hidden;
position: relative;
}
span {
background: blue;
display: inline-block;
top: 0;
left: 200px;
position: absolute;
width: 293px;
height: 174px;
transform-origin: 0px -400px 0px;
margin-top: 300px;
transform: rotateZ(-20deg) rotateX(55deg);
filter: drop-shadow(0px 60px 40px rgba(0,0,0,0));
}
svg.cover {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 600px;
height: 220px;
}
/*
The device-to-local transform here is:
left margin-top transform-origin transform -transform-origin
translateX(200px) translateY(300px) translateY(-400px) rotateZ(-20deg) rotateX(55deg) translateY(400px)
which is equivalent to:
matrix3d(0.939693, -0.34202, 0, 0, 0.196175, 0.538986, 0.819152, 0, -0.280166, -0.769751, 0.573576, 0, 278.47, 115.594, 327.661, 1)
*/
</style>
<div>
<span></span>
</div>
<!-- cover the blurred edge so we can match to a reference -->
<svg class="cover">
<polygon fill="transparent" stroke="aqua" stroke-width="4"
points="278.470,115.594
553.80005,15.38214
587.9345,109.1657
312.6045,209.3776" />
</svg>

52
tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-001.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): position:sticky on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-insets">
<meta name="assert" content="3D scene intersection is done correctly in the presence of position: sticky.">
<link rel="match" href="3dtransform-and-position-sticky-ref.html">
<style>
div, img {
height: 100px;
width: 100px;
}
#outer {
transform-style: preserve-3d;
perspective: 300px;
}
#middle {
transform-style: preserve-3d;
position: relative;
}
#inner1 {
background: aqua;
/* isn't really sticky because of the containing block established by transform and by transform-style */
position: sticky;
top: 0;
transform: translateZ(0);
}
#inner2 {
background: olive;
position: absolute;
top: 0;
left: 0;
transform: rotateX(30deg);
}
</style>
<div id="outer">
<div id="middle">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</div>

53
tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-002.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): position:sticky on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#stickypos-insets">
<meta name="assert" content="3D scene intersection is done correctly in the presence of position: sticky.">
<link rel="match" href="3dtransform-and-position-sticky-ref.html">
<style>
div, img {
height: 100px;
width: 100px;
}
#outer {
transform-style: preserve-3d;
perspective: 300px;
}
#middle {
transform-style: preserve-3d;
position: relative;
}
#inner1 {
background: aqua;
/* isn't really sticky because of the containing block established by transform and by transform-style */
position: sticky;
top: 0;
transform: translateZ(0);
transform-style: preserve-3d;
}
#inner2 {
background: olive;
position: absolute;
top: 0;
left: 0;
transform: rotateX(30deg);
}
</style>
<div id="outer">
<div id="middle">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</div>

39
tests/wpt/web-platform-tests/css/css-transforms/3dtransform-and-position-sticky-ref.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE HTML>
<title>CSS Test Reference (Transforms): position:sticky on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
div, img {
height: 100px;
width: 100px;
}
#outer {
transform-style: preserve-3d;
perspective: 300px;
}
#middle {
transform-style: preserve-3d;
position: relative;
background: aqua;
}
#inner2 {
background: olive;
position: absolute;
top: 0;
left: 0;
transform: rotateX(30deg);
}
</style>
<div id="outer">
<div id="middle">
<div id="inner2">
</div>
</div>
</div>

20
tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer-ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/">
<style>
.empty-layer {
transform: rotateY(30deg) rotateX(-30deg);
width: 100px;
height: 100px;
}
.inserted {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<!--
Force to create composited layer with empty then inserts a child the layer.
-->
<div id="empty-layer" class="empty-layer">
<div id="inserted" class="inserted"></div>
</div>

32
tests/wpt/web-platform-tests/css/css-transforms/add-child-in-empty-layer.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Adding a child to an empty layer</title>
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/">
<link rel="match" href="add-child-in-empty-layer-ref.html">
<style>
.empty-layer {
transform: rotateY(30deg) rotateX(-30deg);
width: 100px;
height: 100px;
}
.inserted {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<!--
Force to create composited layer with empty then inserts a child the layer.
-->
<div id="empty-layer" class="empty-layer"></div>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
var div = document.getElementById("empty-layer");
div.innerHTML = '<div id="inserted" class="inserted"></div>';
requestAnimationFrame(() => {
document.documentElement.removeAttribute('class');
});
});
});
</script>

23
tests/wpt/web-platform-tests/css/css-transforms/animation/perspective-interpolation.html
View file

@ -40,8 +40,8 @@ test_interpolation({
from: neutralKeyframe,
to: '20px',
}, [
{at: -20, expect: 'none'},
{at: -1, expect: 'none'},
{at: -20, expect: '0px'},
{at: -1, expect: '0px'},
{at: -0.3, expect: '7px'},
{at: 0, expect: '10px'},
{at: 0.3, expect: '13px'},
@ -82,8 +82,8 @@ test_interpolation({
from: '50px',
to: '100px',
}, [
{at: -20, expect: 'none'}, // perspective does not accept 0 or negative values
{at: -1, expect: 'none'}, // perspective does not accept 0 or negative values
{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'},
@ -92,6 +92,21 @@ test_interpolation({
{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',

2
tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-interpolation.html
View file

@ -56,7 +56,7 @@ test_interpolation({
to: '-1 1 0 60deg',
}, [
{at: -1, expect: '0.447214 -0.447214 0.774597 104.478deg'},
{at: 0, expect: 'z 45deg'},
{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'},

99
tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-001.html
View file

@ -40,42 +40,99 @@
</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) => {
const matrixRegExp = /^matrix3d\(((?:(?:[-0-9.]+), ){15}(?:[-0-9.]+))\)$/;
const actualArray = actual.match(matrixRegExp)[1].split(", ").map(Number);
const expectedArray = expected.match(matrixRegExp)[1].split(", ").map(Number);
assert_equals(actualArray.length, 16);
assert_equals(expectedArray.length, 16);
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)'
to: 'perspective(500px)',
comparisonFunction: compareWithPerspective
}, [
{at: -1, expect: 'perspective(300px)'},
{at: 0, expect: 'perspective(400px)'},
{at: 0.25, expect: 'perspective(425px)'},
{at: 0.75, expect: 'perspective(475px)'},
{at: 1, expect: 'perspective(500px)'},
{at: 2, expect: 'perspective(600px)'},
{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)'
to: 'skewX(20rad) perspective(500px)',
comparisonFunction: compareWithPerspective
}, [
{at: -1, expect: 'skewX(0rad) perspective(300px)'},
{at: 0, expect: 'skewX(10rad) perspective(400px)'},
{at: 0.25, expect: 'skewX(12.5rad) perspective(425px)'},
{at: 0.75, expect: 'skewX(17.5rad) perspective(475px)'},
{at: 1, expect: 'skewX(20rad) perspective(500px)'},
{at: 2, expect: 'skewX(30rad) perspective(600px)'},
{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)'
to: 'scaleZ(2) perspective(500px)',
comparisonFunction: compareWithPerspective
}, [
{at: -1, expect: 'scaleZ(0) perspective(300px)'},
{at: 0, expect: 'scaleZ(1) perspective(400px)'},
{at: 0.25, expect: 'scaleZ(1.25) perspective(425px)'},
{at: 0.75, expect: 'scaleZ(1.75) perspective(475px)'},
{at: 1, expect: 'scaleZ(2) perspective(500px)'},
{at: 2, expect: 'scaleZ(3) perspective(600px)'},
{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

3
tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-computed-value.html
View file

@ -51,6 +51,8 @@ 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('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)');
@ -60,6 +62,7 @@ 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)');

2
tests/wpt/web-platform-tests/css/css-transforms/animation/transform-perspective-composition.html
View file

@ -23,7 +23,7 @@
//
// Since perspective cannot go negative, this is clamped to:
//
// perspective(10px) identity
// 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
tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-001.html
View file

@ -6,6 +6,7 @@
<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="0-25;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 {

44
tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-with-sibling-001.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<title>backface-visibility test</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#3d-transform-rendering">
<link rel="match" href="/common/blank.html">
<meta name="assert" content="The backface-visibility property still works correctly when there is an element outside the 3-D rendering context that is, in tree order, in between the element with backface-visibility and the root of the 3-D Rendering Context">
<style>
div {
width: 100px;
height: 100px;
}
#outer {
transform-style: preserve-3d;
transform: rotateX(120deg);
position: relative;
}
#outer > div {
position: absolute;
top: 0;
left: 0;
}
#grandchild {
transform: translateZ(1px);
}
#child2 {
transform-style: preserve-3d;
transform: translateX(0);
backface-visibility: hidden;
background: red;
}
</style>
<div id="outer">
<div id="child1"><div id="grandchild"></div></div>
<div id="child2"></div>
</div>

11
tests/wpt/web-platform-tests/css/css-transforms/crashtests/large-scaley-001.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Transform with large scaleY()</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@google.com">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1230937">
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#two-d-transform-functions">
<meta name="assert" content="This should not crash.">
<div style="transform: scaley(99e99);">a</div>
<div style="mix-blend-mode: saturation;">a</div>

9
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-001.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE HTML>
<html style="columns: 1">
<title>CSS Test (Transforms): preserve-3d, inlines, and being a containing block</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1226287">
<meta name="assert" content="This should not crash.">
<span style="transform-style: preserve-3d"><span style="position: absolute"></span></span>

8
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-block-inline-002.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): preserve-3d, inlines, and being a containing block</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1226287">
<meta name="assert" content="This should not crash.">
<span style="transform-style: preserve-3d"><span style="position: absolute"></span></span>

32
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-001.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Very large values in matrix3d()</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1224066">
<meta name="assert" content="This should not crash.">
<style>
.outer {
column-count:16384;
-webkit-mask-box-image: url('?') 10% 90% repeat;
}
.middle {
-webkit-transform-style:preserve-3d;
display:list-item;
}
table {
height:7.1px;
padding-right:4em;
transform:matrix3d(0,7.8,+9,+2,-3.6,3.4,6,8.8,9.5,7,7.3,5.3,6.4,3.7,8.3,8);
border-left: medium black solid;
}
tbody {
font:icon;
}
</style>
<div class="outer"><div class="middle"><table>

26
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-scene-002.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<style>
.outer {
column-count:16384;
-webkit-mask-box-image:url('?') 10% 90% repeat;
}
button {
font:icon;
}
.inner {
border-top:solid 1000000000px;
transform-style:preserve-3d;
display:list-item;
}
table {
height:7.1px;
padding-right:4em;
transform:matrix3d(0,7.8,9,2,-3.6,3.4,6,8.8,9.5,7,7.3,5.3,6.4,3.7,8.3,8);
border-left:outset black;
font-size:120%;
}
</style>
<div class="outer"><button><div class="inner"><table border></table></div></button></div>

8
tests/wpt/web-platform-tests/css/css-transforms/crashtests/transform-marquee-resize-div-image-001.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Transform and marquee with resize, etc.</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1226919">
<meta name="assert" content="This should not crash.">
<body style="transform: scalex(0.9)"><marquee style="resize: both"><div><img src="../not-found.png">

21
tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-crossing-zero-001.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Transform with w crossing zero</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1230937">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes">
<meta name="assert" content="This should not crash.">
<style>
#outer {
transform-style: preserve-3d;
}
#inner {
transform: matrix3d(4,947066.75,3,-57.374,1860.6956175,97,2291.191,-8.1785,9,46.047,5.02880,7.198084,2,8,2009,3.2);
border: medium solid;
}
</style>
<div id="outer">
<div id="inner">
</div>
</div>

17
tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-001.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<title>CSS Test (Transforms): Transform and perspective with w negative</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=455874">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes">
<meta name="assert" content="This should not crash.">
<style>
* {
transform: perspective(142176px);
mix-blend-mode: darken;
transform-origin: left center 537763.2px;
}
</style>
<hr size="1425"></hr>
<button autofocus></button>

14
tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-002.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Transform and perspective with w negative</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1173218">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes">
<meta name="assert" content="This should not crash.">
<style>
html, body { perspective: 9px }
body, div { transform: translateZ(14px) }
div { filter: hue-rotate(6deg) }
</style>
<div>x</div>

15
tests/wpt/web-platform-tests/css/css-transforms/crashtests/w-negative-003.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Transform and perspective with w negative</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1229117">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes">
<meta name="assert" content="This should not crash.">
<style>
button {
transform:translate3d(1866px, 1794px, 1359px) perspective(848px);
clip-path: ellipse(822px 405px);
}
</style>
<button autofocus='true'></button>

3
tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-001.html
View file

@ -26,7 +26,8 @@
</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(90)" transform="scale(0.5)"/>
<rect y="-100" width="100" height="100" fill="url(#grad)"
style="transform: rotate(90deg)" transform="scale(0.5)"/>
</svg>
</body>
</html>

3
tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-002.html
View file

@ -27,7 +27,8 @@
</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(-100)" transform="scale(0.5)"/>
<rect width="100" height="100" fill="url(#grad)"
style="transform: translateY(-100px)" transform="scale(0.5)"/>
</g>
</svg>
</body>

2
tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-003.html
View file

@ -26,7 +26,7 @@
</linearGradient>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<g style="transform: rotate(90)">
<g style="transform: rotate(90deg)">
<rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/>
</g>
</svg>

2
tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-004.html
View file

@ -26,7 +26,7 @@
</linearGradient>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<g style="transform: rotate(90)" transform="scale(0.5)">
<g style="transform: rotate(90deg)" transform="scale(0.5)">
<rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/>
</g>
</svg>

6
tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-012.html
View file

@ -27,7 +27,9 @@
</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: rotate(90,20px,20px)" transform="scale(0.5)"/>
<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>
</html>

5
tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-013.html
View file

@ -27,7 +27,8 @@
</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,20px,20px)"/>
<rect y="-60" width="100" height="100" fill="url(#grad)"
style="transform: scale(invalid)" transform="rotate(90,20,20)"/>
</svg>
</body>
</html>
</html>

10
tests/wpt/web-platform-tests/css/css-transforms/large-matrix-crash.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Very large values in matrix3d()</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
html, body, div {
transform: matrix3d(1, 1, 1, 1, 72770296304691886506301192829784762776379253934637144527855766046737093, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
}
</style>
<div>This should not crash.</div>

13
tests/wpt/web-platform-tests/css/css-transforms/parsing/rotate-parsing-valid.html
View file

@ -22,19 +22,24 @@ 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, y, or z axis, it must serialize as the appropriate keyword.
// 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");
test_valid_value("rotate", "z 400grad");
test_valid_value("rotate", "400grad z", "z 400grad");
test_valid_value("rotate", "0 0 1 400grad", "z 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>

2
tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-valid.html
View file

@ -36,7 +36,7 @@ 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>

8
tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-valid.html
View file

@ -32,6 +32,7 @@ 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)");
@ -42,11 +43,15 @@ 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)");
@ -62,6 +67,9 @@ 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>

43
tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-abspos.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<meta charset=UTF-8>
<title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918">
<meta name="assert" content="The perspective property influences an element's children.">
<link rel="match" href="reference/green.html">
<style>
div {
width: 100px;
height: 100px;
}
#outer {
position: relative;
background: red;
perspective: 100px;
}
#middle {
}
#inner {
transform: translateZ(-100px);
position: absolute;
top: 0;
left: 0;
background: green;
}
</style>
<p>Pass if there is NO red below:</p>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>

44
tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-fixpos.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset=UTF-8>
<title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918">
<meta name="assert" content="The perspective property influences an element's children.">
<link rel="match" href="reference/green.html">
<style>
div {
width: 100px;
height: 100px;
}
#outer {
transform: scale(1);
position: relative;
background: red;
perspective: 100px;
}
#middle {
}
#inner {
transform: translateZ(-100px);
position: fixed;
top: 0;
left: 0;
background: green;
}
</style>
<p>Pass if there is NO red below:</p>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>

40
tests/wpt/web-platform-tests/css/css-transforms/perspective-children-only-inline.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<meta charset=UTF-8>
<title>CSS Test (Transforms): perspective applies only to DOM children (position: absolute)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#perspective">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#propdef-perspective">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/918">
<meta name="assert" content="The perspective property influences an element's children.">
<link rel="match" href="reference/green.html">
<style>
div {
width: 100px;
height: 100px;
}
#outer {
background: red;
perspective: 100px;
}
#middle {
display: inline;
}
#inner {
transform: translateZ(-100px);
background: green;
}
</style>
<p>Pass if there is NO red below:</p>
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>

52
tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w-ref.html Normal file
View file

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
html { overflow: hidden }
body {
perspective: 500px;
perspective-origin: 400px 299px;
background: rgb(200, 200, 200);
}
div {
width: 1140px;
height: 990px;
transform-style: preserve-3d;
position: absolute;
top: 299.5px;
left: 400px;
transform: translate3d(-570px, -495px, 500px) rotateY(64.24deg) translateY(23px) rotateX(90deg);
background-image: url('support/tile-bg.png');
background-size: 100% 100%;
}
p.patch {
margin: 0;
position: absolute;
background: red;
height: 200px;
width: 800px;
left: 0px;
top: 400px;
z-index: -1;
}
</style>
<div></div>
<!--
This reference is the same as the test, but with this additional red
patch underneath it (in z-order). This means that if any content is
missing when drawing the test, the red patch will show through and the
test will fail. But if all the content is drawn, then the test will
pass.
-->
<p class="patch"></p>

35
tests/wpt/web-platform-tests/css/css-transforms/perspective-split-by-zero-w.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#processing-of-perspective-transformed-boxes">
<meta name="assert" content="A box that perspective causes to have parts with w<0 still has the w>0 parts rendered correctly. (Chromium issue 1202695)">
<link rel="match" href="perspective-split-by-zero-w-ref.html">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
html { overflow: hidden }
body {
perspective: 500px;
perspective-origin: 400px 299px;
background: rgb(200, 200, 200);
}
div {
width: 1140px;
height: 990px;
transform-style: preserve-3d;
position: absolute;
top: 299.5px;
left: 400px;
transform: translate3d(-570px, -495px, 500px) rotateY(64.24deg) translateY(23px) rotateX(90deg);
background-image: url('support/tile-bg.png');
background-size: 100% 100%;
}
</style>
<div></div>

10
tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2-ref.html
View file

@ -5,18 +5,22 @@
<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: 200px;
height: 200px;
width: 100px;
height: 100px;
position: absolute;
}
.child-3d {
background: green;
transform: translateZ(1px);
transform: translateZ(0.5px);
}
</style>
</head>

11
tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2.html
View file

@ -5,6 +5,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">
@ -12,18 +14,21 @@
<style type="text/css">
.parent {
perspective: 0px;
perspective-origin: top left;
}
.parent > div {
width: 200px;
height: 200px;
position: absolute;
}
.child-2d {
background: red;
width: 200px;
height: 200px;
}
.child-3d {
width: 100px;
height: 100px;
background: green;
transform: translateZ(1px);
transform: translateZ(0.5px);
}
</style>
</head>

28
tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-3.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset=UTF-8>
<title>CSS Test: perspective(0)</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413">
<meta name="assert" content="perspective: 0 should be clamped to 1px">
<link rel="match" href="reference/green.html">
<style>
#outer {
width: 100px;
height: 100px;
background: red;
perspective: 0;
perspective-origin: top left;
}
#inner {
width: 50px;
height: 50px;
background: green;
/* perspective: 0 should be treated as perspective(1px), which should
* cause this box to be much larger. */
transform: translateZ(0.5px);
}
</style>
<p>Pass if there is NO red below:</p>
<div id="outer"><div id="inner"></div></div>

23
tests/wpt/web-platform-tests/css/css-transforms/perspective-zero.html
View file

@ -3,29 +3,28 @@
<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">
<meta name="assert" content="perspective(0) should behave like identity transform function.">
<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, #test {
#cover-me {
width: 100px;
height: 100px;
}
#cover-me {
background: red;
position: relative;
margin-bottom: -100px;
}
#test {
background: green;
/* This should be an identity transform, since perspective(0) must be
* treated as perspective(infinity), and consequently translateZ()
* doesn't have any effect, so that it covers up #cover-me.
* If perspective(0) is invalid, #test would not create a stacking
* context, and #cover-me would be placed on top of #test showing red.
* If perspective(0) is handled as perspective(epsilon), #test would
* be invisible. */
transform: perspective(0) translateZ(50px);
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>

21
tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>CSS Test Reference: transform-style: preserve-3d not being a containing block on inlines</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
body {
margin: 0;
}
#ref {
display: block;
width: 50px;
height: 50px;
background: blue;
}
</style>
<span id="ref"></span>

34
tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block-inline.tentative.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>CSS Test: transform-style: preserve-3d not being a containing block on inlines</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6430">
<link rel="match" href="preserve-3d-flat-grouping-properties-containing-block-inline-ref.html">
<style>
#container {
margin: 150px;
}
#outer {
transform-style: preserve-3d;
}
#inner {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: blue;
}
</style>
<div id="container">
<span id="outer">
<span id="inner"></span>
</span>
</div>

2
tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.tentative.html → tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties-containing-block.html
View file

@ -31,8 +31,6 @@
</div>
<script>
nonflatWidth = nonflat.getBoundingClientRect().width;
test(function() {
assert_equals(absoluteUnderGrouping.offsetParent, parentWithGrouping);
}, "Preserve-3d element with a grouping property still a containing block");

25
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective-ref.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE HTML>
<title>CSS Test Reference (Transforms): Filter on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
svg.cover {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 500px;
height: 570px;
}
</style>
<svg class="cover">
<polygon fill="black" stroke="blue" stroke-width="8"
points="266.429,351
301.1586,351
301.1586,551
266.429,551" />
</svg>

85
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-no-perspective.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): Filter on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
<meta name="assert" content="The filtered element is rendered correctly without clipping, despite the interesting transform.">
<link rel="match" href="preserve3d-and-filter-no-perspective-ref.html">
<style>
.scene {
width: 400px;
height: 400px;
position: absolute;
left: 100px;
top: 100px;
}
.chair {
width: 400px;
height: 400px;
transform: rotateY(80deg);
transform-style: preserve-3d;
transform-origin: 50% 50% 50%;
}
.shadow {
position: absolute;
top: 250px;
left: 0;
width: 200px;
height: 200px;
filter: blur(1px);
background: black;
transform: translate3d(1px, 1px, 1px);
}
svg.cover {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 500px;
height: 570px;
}
</style>
<!--
The overall transform here from the viewport to the
<div class="shadow"></div> is:
translate(100px, 100px) translate(200px, 200px) rotateY(80deg) translate(-200px, -200px) translateY(250px) translate(100px, 100px) translate3d(1px, 1px, 1px) translate(-100px, -100px)
which according to https://codepen.io/milosdjakonovic/pen/QyqJyp
is equivalent to the matrix:
matrix3d(0.173648, 0, -0.984808, 0,
0, 1, 0, 0,
0.984808, 0, 0.173648, 0,
266.429, 351, 196.15, 1)
[ 0.173648 0 0.984808 266.429 ]
[ 0 1 0 351 ]
[ -0.984808 0 0.173648 196.15 ]
[ 0 0 0 1 ]
-->
<div class="scene">
<div class="chair">
<div class="shadow"></div>
</div>
</div>
<!-- cover the blurred edge so we can match to a reference -->
<svg class="cover">
<polygon fill="transparent" stroke="blue" stroke-width="8"
points="266.429,351
301.1586,351
301.1586,551
266.429,551" />
</svg>

58
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective-ref.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<title>CSS Test Reference (Transforms): Filter on an element in a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
.scene {
width: 400px;
height: 400px;
position: absolute;
left: 100px;
top: 100px;
perspective:1300px;
}
.chair {
width: 400px;
height: 400px;
transform: rotateY(88deg);
transform-style: preserve-3d;
transform-origin: 50% 50% 50%;
}
.shadow {
position: absolute;
top: 250px;
left: 0;
width: 200px;
height: 200px;
background: white;
transform: rotateX(90deg) translate3d(0,-60px,0);
}
svg.cover {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 500px;
height: 500px;
}
</style>
<div class="scene">
<div class="chair">
<div class="shadow"></div>
</div>
</div>
<svg class="cover">
<polygon fill="black" stroke="blue" stroke-width="11"
points="103.793,476.3579
140.7813,449.3585
340.0185,450.1613
339.0401,477.4783" />
</svg>

86
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-filter-with-perspective.html Normal file
View file

@ -0,0 +1,86 @@
<!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">
<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>

2
tests/wpt/web-platform-tests/css/css-transforms/reference/transform-origin-01-ref.html
View file

@ -24,7 +24,7 @@
</style>
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<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>

1
tests/wpt/web-platform-tests/css/css-transforms/rotate_x_45deg.html
View file

@ -5,6 +5,7 @@
<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="159-200;200">
<meta name="flags" content="" />
<meta name="assert" content="Rotate 45 degree in y axis"/>
<style type="text/css">

1
tests/wpt/web-platform-tests/css/css-transforms/rotate_y_45deg.html
View file

@ -5,6 +5,7 @@
<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="159-200;200">
<meta name="flags" content="" />
<meta name="assert" content="Rotate 45 degree in y axis"/>
<style type="text/css">

21
tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<head>
<title>CSS Test (Transforms): Tests overlap testing + clipping + scale transforms + compositing.</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/">
</head>
<style>
div {
position: absolute;
width: 50px;
height: 50px;
transform-origin: 0px 0px;
}
</style>
<div style="width: 250px; height: 100px; transform: translate(-250px, 50px) scale(1.8, 1.8);">
<div style="transform: translate(160px, 0px)">
<div style="background: lightblue"></div>
<div style="background: green; left: 10px; top: 10px;"></div>
</div>
</div>

22
tests/wpt/web-platform-tests/css/css-transforms/scale-transform-overlap.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<head>
<title>CSS Test (Transforms): Tests overlap testing + clipping + scale transforms + compositing.</title>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/">
<link rel="match" href="scale-transform-overlap-ref.html">
</head>
<style>
div {
position: absolute;
width: 50px;
height: 50px;
transform-origin: 0px 0px;
}
</style>
<div style="width: 250px; height: 100px; overflow: hidden; transform: translate(-250px, 50px) scale(1.8, 1.8);">
<div style="transform: translate(160px, 0px)">
<div style="background: lightblue; will-change: transform"></div>
<div style="background: green; left: 10px; top: 10px;"></div>
</div>
</div>

16
tests/wpt/web-platform-tests/css/css-transforms/scaley-ref.html
View file

@ -1,31 +1,19 @@
<!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">
<!DOCTYPE html>
<head>
<title>CSS Reference File</title>
<style type="text/css">
.container {
position: absolute;
border: 1px solid green;
height: 200px;
width: 100px;
background-color:green;
margin-top: 150px;
}
.hidden {
position: absolute;
border: 2px solid red;
height: 200px;
width: 100px;
background-color:red;
margin-top: 150px;
}
</style>
</head>
<body>
<p>You should see only 1 green box.</p>
<p>You should see only 1 green area.</p>
<div class="container">
</div>
</body>

15
tests/wpt/web-platform-tests/css/css-transforms/scaley.html
View file

@ -1,5 +1,4 @@
<!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">
<!DOCTYPE html>
<head>
<title>CSS Test: test scale y</title>
<link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/>
@ -8,9 +7,9 @@
<meta name="flags" content="" />
<meta name="assert" content="scale y 2"/>
<style type="text/css">
.container {
position: absolute;
z-index: 11;
.container {
position: absolute;
z-index: 11;
height: 100px;
width: 100px;
background-color:green;
@ -19,8 +18,8 @@
}
.hidden {
position: absolute;
z-index: 10;
position: absolute;
z-index: 10;
height: 200px;
width: 100px;
background-color:red;
@ -30,7 +29,7 @@
</head>
<body>
<p style="margin-top:70px;">You should see only 1 green area</p>
<p>You should see only 1 green area.</p>
<div class="container">
</div>

0
tests/wpt/web-platform-tests/css/css-transforms/scrolalble-hidden-3d-transform-z-ref.html → tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z-ref.html
View file

4
tests/wpt/web-platform-tests/css/css-transforms/scrolalble-hidden-3d-transform-z.html → tests/wpt/web-platform-tests/css/css-transforms/scrollable-hidden-3d-transform-z.html
View file

@ -1,7 +1,7 @@
<!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="scrolalble-hidden-3d-transform-z-ref.html">
<link rel="match" href="scrollable-hidden-3d-transform-z-ref.html">
<style>
#container {
width: 100px;
@ -23,4 +23,4 @@
<div id="scroller">
<div style="height: 300px"></div>
</div>
</div>
</div>

0
tests/wpt/web-platform-tests/css/css-transforms/scrolalble-scroll-3d-transform-z-ref.html → tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z-ref.html
View file

2
tests/wpt/web-platform-tests/css/css-transforms/scrolalble-scroll-3d-transform-z.html → tests/wpt/web-platform-tests/css/css-transforms/scrollable-scroll-3d-transform-z.html
View file

@ -1,7 +1,7 @@
<!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="scrolalble-scroll-3d-transform-z-ref.html">
<link rel="match" href="scrollable-scroll-3d-transform-z-ref.html">
<style>
#container {
width: 100px;

26
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-002.html
View file

@ -1,26 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with degree 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="match" href="reference/svg-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support the unit 'degree' on 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(45deg)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-003.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with grad 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="match" href="reference/svg-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support the unit 'grad' on 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(50grad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-004.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with turn 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="match" href="reference/svg-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support the unit 'turn' on 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(0.125turn)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-005.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with radian 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="match" href="reference/svg-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support the unit 'rad' on 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(0.785398163rad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-007.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with negative degrees</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support negative, 'degree' 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(-315deg)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-008.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with negative gradians</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support negative 'grad' 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(-350grad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-009.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with negative radians</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support negative 'rad' 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(-5.497787144rad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-010.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with negative turns</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support negative 'turn' 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(-0.875turn)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-012.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle skewX with angle 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/#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 'modulo whole circle' for arguments in. 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(405deg)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-013.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle skewX with angle in gradian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support 'modulo whole circle' for arguments in gradian. 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(450grad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-014.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle skewX with angle in radian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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-skewx-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewX transform function must support 'modulo whole circle' for arguments in radian. 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(7.068583471rad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-015.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle skewX with angle in 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="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 arguments in turn. 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(1.125turn)"/>
</svg>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-017.html
View file

@ -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 angle arguments in degree. 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.5e1deg)"/>
</svg>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-018.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers on gradian 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-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 angle arguments in gradians. 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(5.0e1grad)"/>
</svg>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-019.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers on radian 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-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 angle arguments in radians. 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(.0785398163e1rad)"/>
</svg>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-020.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers on turns</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="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-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 angle arguments in turns. 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(0.0125e1turn)"/>
</svg>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-022.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX 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-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 angle arguments in degree. 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-1deg)"/>
</svg>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-023.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX and scientific numbers with negative exponents for arguments in gradian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="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-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 angle arguments in gradian. 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(500e-1grad)"/>
</svg>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-024.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX and scientific numbers with negative exponents for arguments in radian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="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-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 angle arguments in radian. 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(7.85398163e-1rad)"/>
</svg>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-025.html
View file

@ -1,28 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewX with scientific numbers with negative exponents for arguments in turns</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="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-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 angle arguments in radian. 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(1.25e-1turn)"/>
</svg>
</body>
</html>

19
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewx-with-units.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG transform attribute with units on skewX</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#svg-syntax">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2623">
<link rel="match" href="reference/svg-skewx-ref.html">
<meta name="assert" content="The skewX transform function should not support the CSS transform syntax with units. The green rects in this test should have no transform applied.">
</head>
<body>
<p>The test passes if there is a green square and no red.</p>
<svg width="250" height="250" style="background: green">
<rect width="100" height="100" fill="red"/>
<rect y="0" width="100" height="50" fill="green" transform="skewX(45deg)"/>
<rect y="50" width="100" height="50" fill="green" transform="skewX(45rad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewX/svg-skewxy-002.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute with skewX and skewY with different units</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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 completely cover the red path by being skewed horizontally 45 degrees and vertically 45 degrees specified in different units in each function">
<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(45deg) skewY(50grad) "/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-002.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with degree 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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support the unit 'degree' on 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(45deg)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-003.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with grad 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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support the unit 'grad' on 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(50grad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-004.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with turn 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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support the unit 'turn' on 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(0.125turn)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-005.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and angle argument with radian 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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support the unit 'rad' on 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(0.785398163rad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-007.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewY with negative degrees</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support negative, 'degree' 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(-315deg)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-008.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewY with negative gradians</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support negative 'grad' 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(-350grad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-009.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewY with negative radians</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support negative 'rad' 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(-5.49778714rad)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-010.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and skewY with negative turns</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support negative 'turn' 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(-0.875turn)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-012.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle skewY with angle 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/#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="flags" content="svg">
<meta name="assert" content="The skewY transform function must support 'modulo whole circle' for arguments in. 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(405deg)"/>
</svg>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/skewY/svg-skewy-013.html
View file

@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Transforms Test: SVG presentation attribute and more than full circle skewY with angle in gradian</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/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="match" href="reference/svg-skewy-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The skewY transform function must support 'modulo whole circle' for arguments in gradian. 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(450grad)"/>
</svg>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more