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

Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'

Browse source
This commit is contained in:
WPT Sync Bot 2022-01-20 04:38:55 +00:00 • committed by cybai
parent 4401622eb1
commit b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
Download patch file Download diff file Expand all files Collapse all files

1
tests/wpt/web-platform-tests/css/css-transforms/2d-rotate-001.html
View file

@ -5,6 +5,7 @@
<link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
<link rel="match" href="2d-rotate-ref.html">
<meta name="fuzzy" content="maxDifference=87-159;totalPixels=643-1193">
<meta name="flags" content="svg">
<meta name="assert" content="asserting that you can rotate an element with CSS">
<style type="text/css">

23
tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
#container {
perspective: 400px;
perspective-origin: 0 0;
}
#ref {
background-color: green;
width: 150px;
height: 100px;
transform: translateZ(200px);
}
</style>
<div id="container">
<div id="ref"></div>
</div>

70
tests/wpt/web-platform-tests/css/css-transforms/3d-scene-with-iframe-001.html Normal file
View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="UTF-8">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1264783">
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#3d-rendering-contexts">
<link rel="match" href="3d-scene-with-iframe-001-ref.html">
<meta name="assert" content="The iframe should be covered by the green div.">
<style>
#container {
perspective: 400px;
perspective-origin: 0 0;
}
#scene {
transform-style: preserve-3d;
transform: translate(100px, 100px);
width: 300px;
height: 300px;
}
.transform1, .transform2 {
position: absolute;
transform-style: preserve-3d;
top: 0;
left: 0;
}
.transform1 {
transform: translateZ(200px);
}
.transform1 > div {
background-color: green;
width: 150px;
height: 100px;
transform: translate(-100px, -100px)
}
.transform2 {
transform: translateZ(100px);
}
.transform2 > iframe {
display: block;
transform: translate(-50px, -75px);
}
</style>
<div id="container">
<div id="scene">
<div class="transform1">
<div></div>
</div>
<div class="transform2">
<iframe width="150" height="100"></iframe>
</div>
</div>
</div>
<script>
let iframe = document.getElementsByTagName("iframe")[0];
iframe.addEventListener("load", function() {
let root = iframe.contentDocument.documentElement;
root.style.height = "10000px";
root.style.background = "red";
document.documentElement.classList.remove("reftest-wait");
});
iframe.src = "/resources/blank.html";
</script>

4
tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-composition.html
View file

@ -125,7 +125,7 @@ test_composition({
comparisonFunction: compareRotations
}, [
{at: -1, expect: '0 -1 0 100deg'},
{at: 0, expect: '0.27 0.53 0.8 360deg'},
{at: 0, expect: '0deg'},
{at: 0.25, expect: 'y 25deg'},
{at: 0.75, expect: 'y 75deg'},
{at: 1, expect: 'y 100deg'},
@ -141,7 +141,7 @@ test_composition({
comparisonFunction: compareRotations
}, [
{at: -1, expect: '0 -1 0 100deg'},
{at: 0, expect: '0.27 0.53 0.8 360deg'},
{at: 0, expect: '0deg'},
{at: 0.25, expect: 'y 25deg'},
{at: 0.75, expect: 'y 75deg'},
{at: 1, expect: 'y 100deg'},

1
tests/wpt/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html
View file

@ -3,6 +3,7 @@
<meta charset="utf-8">
<title>Rotate transform equivalent</title>
<link rel="match" href="rotate-transform-equivalent-ref.html">
<meta name="fuzzy" content="maxDifference=0-46;totalPixels=0-277">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<script src="/common/reftest-wait.js"></script>
<style>

4
tests/wpt/web-platform-tests/css/css-transforms/animation/scale-composition.html
View file

@ -64,7 +64,7 @@ test_composition({
{at: 0, expect: '4 5 6'},
{at: 0.25, expect: '3.25 4 4.75'},
{at: 0.75, expect: '1.75 2 2.25'},
{at: 1, expect: 'none'},
{at: 1, expect: '1'},
{at: 2, expect: '-2 -3 -4'},
]);
@ -94,7 +94,7 @@ test_composition({
{at: 0.25, expect: '3.25 7.75 13.75'},
{at: 0.5, expect: '2.5 5.5 9.5'},
{at: 0.75, expect: '1.75 3.25 5.25'},
{at: 1, expect: 'none'},
{at: 1, expect: '1'},
{at: 1.5, expect: '-0.5 -3.5 -7.5'},
]);
</script>

57
tests/wpt/web-platform-tests/css/css-transforms/animation/support/transform-interpolation-reftests.js
View file

@ -73,8 +73,23 @@ const transformTests = {
matrix: [
// matched matrix parameters do not collapse the values after them
['matrix(1,0,0,1,0,0) rotate(0deg)', 'matrix(1.5,0,0,1.5,0,0) rotate(180deg)', 'matrix(2,0,0,2,0,0) rotate(360deg)']
],
perspective: [
// Since perspective doesn't do anything on its own, we need to
// combine it with a transform that does.
['perspective(none) translateZ(15px)', 'perspective(none) translateZ(15px)', 'perspective(none) translateZ(15px)'],
['perspective(100px) translateZ(50px)', 'perspective(200px) translateZ(50px)', 'perspective(none) translateZ(50px)'],
['perspective(none) translateZ(15px)', 'perspective(50px) translateZ(15px)', 'perspective(25px) translateZ(15px)'],
['perspective(100px) translateZ(15px)', 'perspective(40px) translateZ(15px)', 'perspective(25px) translateZ(15px)'],
// Test that perspective is clamped to 1px.
['perspective(0.1px) translateZ(0.25px)', 'perspective(1px) translateZ(0.25px)', 'perspective(0.1px) translateZ(0.25px)'],
['perspective(0px) translateZ(0.25px)', 'perspective(1px) translateZ(0.25px)', 'perspective(0px) translateZ(0.25px)'],
['perspective(0px) translateZ(0.5px)', 'perspective(1.5px) translateZ(0.5px)', 'perspective(3px) translateZ(0.5px)'],
{ test: ['perspective(10px) translateZ(0.5px)', 'translateZ(0.5px)', 'perspective(1px) translateZ(0.5px)'], midpoint: -1 },
{ test: ['perspective(1px) translateZ(0.5px)', 'perspective(1px) translateZ(0.5px)', 'perspective(10px) translateZ(0.5px)'], midpoint: -1 }
]
}
};
// Initial setup, which includes properties that will be overridden to
// test invalidation.
@ -101,13 +116,25 @@ function styleBody(){
body.style.flexWrap = 'wrap';
}
// Simulate a static image at 50% progeress with a running animation.
// Simulate a static image at 50% progress with a running animation.
// The easing curve has zero slope and curvature at its midpoint of 50% -> 50%.
// The timing values are chosen so as so that a delay of up to 10s will not
// cause a visual change.
const easing = 'cubic-bezier(0,1,1,0)';
const duration = 1e9;
const delay = -duration/2;
const midpointOptions = {
easing: 'cubic-bezier(0,1,1,0)',
duration: duration,
delay: -duration/2
};
// Similar to midpointOptions, but to produce the interpolation result
// at -1 instead of the interpolation result at 0.5. This easing curve
// has zero slope at its midpoint of -100% (though does have curvature).
const negoneOptions = {
easing: 'cubic-bezier(0,-1,1,-2)',
duration: duration,
delay: -duration/2
};
// Indices to unpack a test case, which is in the format
// [start, midpoint, end]
@ -117,13 +144,22 @@ const endIndex = 2;
async function createTests(tests) {
styleBody();
for (const test of tests) {
for (const obj of tests) {
let test = ("test" in obj) ? obj.test : obj;
let midpoint = ("midpoint" in obj) ? obj.midpoint : 0.5;
let options;
if (midpoint == 0.5) {
options = midpointOptions;
} else if (midpoint == -1) {
options = negoneOptions;
} else {
document.appendChild(document.createTextNode("unexpected midpoint " + midpoint));
}
let div = document.createElement('div');
document.body.appendChild(div);
initialStyle(div);
var anim = div.animate(
{transform: [test[startIndex], test[endIndex]]},
{duration: duration, delay: delay, easing: easing});
var anim =
div.animate({transform: [test[startIndex], test[endIndex]]}, options);
await anim.ready;
finalStyle(div); // Change size to test invalidation.
}
@ -138,14 +174,15 @@ async function createTests(tests) {
// animated and non-animated pathways.
async function createRefs(tests) {
styleBody();
for (const test of tests) {
for (const obj of tests) {
let test = ("test" in obj) ? obj.test : obj;
let div = document.createElement('div');
document.body.appendChild(div);
initialStyle(div);
finalStyle(div);
var anim = div.animate(
{transform: [test[midIndex], test[midIndex]]},
{duration: duration, delay: delay, easing: easing});
midpointOptions);
await anim.ready;
}

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

@ -45,12 +45,27 @@
// 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);
// TODO: This RegExp should be more precise to capture only what is a
// valid float, and this code should be merged with other code doing
// the same thing, e.g., RoundMatrix in
// web-animations/animation-model/animation-types/property-list.js .
const matrixRegExp = /^matrix3d\(((?:(?:[-0-9.e]+), ){15}(?:[-0-9.]+))\)$/;
const actualMatch = actual.match(matrixRegExp);
const expectedMatch = expected.match(matrixRegExp);
assert_not_equals(actualMatch, null, `${actual} should be a matrix`);
assert_not_equals(expectedMatch, null, `${expected} should be a matrix`);
if (actualMatch === null || expectedMatch === null) {
return;
}
const actualArray = actualMatch[1].split(", ").map(Number);
const expectedArray = expectedMatch[1].split(", ").map(Number);
assert_equals(actualArray.length, 16);
assert_equals(expectedArray.length, 16);
if (actualArray.length != expectedArray.length) {
return;
}
for (let i in actualArray) {
const error = Math.abs((actualArray[i] - expectedArray[i])) /
Math.max(1e-6,

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

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#interpolation-of-transform-functions">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#transformvalue-objects">
<meta name="assert" content="transform gives the correct computed values when interpolated">
<script src="/resources/testharness.js"></script>
@ -31,42 +31,34 @@ function interpolation_test(from, to, expected_50) {
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
}, "Interpolation between " + from + " and " + to + " gives the correct " +
"computed value halfway according to computedStyleMap with zoom active.");
test(t => {
let div = createDiv(t);
let anim = div.animate({transform: [from, to]}, 2000);
anim.pause();
anim.currentTime = 1000;
anim.commitStyles()
let halfway = div.style.transform;
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
}, "Interpolation between " + from + " and " + to + " gives the correct " +
"computed value halfway according to commitStyles.");
}
interpolation_test('translateX(0px)', 'translateX(50px)', 'translateX(25px)');
interpolation_test('translateX(0%)', 'translateX(50%)', 'translateX(25%)');
interpolation_test('translateX(0px)', 'translateX(50px)', 'translate(25px, 0px)');
interpolation_test('translateX(0%)', 'translateX(50%)', 'translate(25%, 0px)');
interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%, 0px)');
interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)');
interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)');
interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)');
interpolation_test('translateZ(-50px)','translateZ(50px)', 'translateZ(0px)');
interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%)');
interpolation_test('translateZ(-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%, 0px)');
interpolation_test('translate(50%)', 'translate(100%, 50%)', 'translate(75%, 25%)');
interpolation_test('translate(0%, 50%)', 'translate(50%, 100%)', 'translate(25%, 75%)');
interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
interpolation_test('translate(50px, 0px)', 'translate(100px, 0px)', 'translate(75px, 0px)');
interpolation_test('translate(50px, -50px)', 'translate(100px, 50px)', 'translate(75px, 0px)');
interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)');
interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotateZ(60deg)');
interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 60deg)');
interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)');
interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotateX(45deg)');
interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)');
interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)');
interpolation_test('scale(1)', 'scale(2)', 'scale(1.5)');
interpolation_test('scale(1)', 'scale(2)', 'scale(1.5, 1.5)');
interpolation_test('scale(1, 3)', 'scale(2)', 'scale(1.5, 2.5)');
interpolation_test('scaleX(1)', 'scaleX(2)', 'scaleX(1.5)');
interpolation_test('scaleY(1)', 'scaleY(2)', 'scaleY(1.5)');
interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scaleZ(1.5)');
interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5)');
interpolation_test('scaleX(1)', 'scaleX(2)', 'scale(1.5, 1)');
interpolation_test('scaleY(1)', 'scaleY(2)', 'scale(1, 1.5)');
interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scale3d(1, 1, 1.5)');
interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5, 1.5)');
interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)');
interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)');
interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)');
@ -80,4 +72,19 @@ interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)');
interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)');
interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)');
interpolation_test('perspective(10px)', 'perspective(2.5px)', 'perspective(4px)');
interpolation_test('perspective(10px)', 'perspective(none)', 'perspective(20px)');
interpolation_test('perspective(none)', 'perspective(none)', 'perspective(none)');
// A matrix() with just scale and translation.
interpolation_test('matrix(2, 0, 0, 2, 10, 30)', 'matrix(4, 0, 0, 6, 14, 10)', 'matrix(3, 0, 0, 4, 12, 20)');
// A matrix3d() with just scale and translation.
interpolation_test('matrix3d(1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 5, 10, 4, 1)', 'matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, -11, 2, 2, 1)', 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, -3, 6, 3, 1)');
// A matrix3d() with just perspective.
interpolation_test('matrix3d(1, 0, 0, 3, 0, 1, 0, 2, 0, 0, 1, 8, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 5, 0, 1, 0, 8, 0, 0, 1, 14, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 4, 0, 1, 0, 5, 0, 0, 1, 11, 0, 0, 0, 1)');
// NOTE: New tests added here should also be added in
// transform-interpolation-inline-value.html.
</script>

80
tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-inline-value.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms/#interpolation-of-transform-functions">
<meta name="assert" content="transform gives the correct inline values when interpolated">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/web-animations/testcommon.js"></script>
<body>
<script>
function interpolation_test(from, to, expected_50) {
test(t => {
let div = createDiv(t);
let anim = div.animate({transform: [from, to]}, 2000);
anim.pause();
anim.currentTime = 1000;
anim.commitStyles()
let halfway = div.style.transform;
assert_equals(halfway, expected_50, "The value at 50% progress is as expected");
}, "Interpolation between " + from + " and " + to + " gives the correct " +
"computed value halfway according to commitStyles.");
}
interpolation_test('translateX(0px)', 'translateX(50px)', 'translateX(25px)');
interpolation_test('translateX(0%)', 'translateX(50%)', 'translateX(25%)');
interpolation_test('translateY(0%)', 'translateX(50%)', 'translate(25%)');
interpolation_test('translateX(50px)', 'translateY(50px)', 'translate(25px, 25px)');
interpolation_test('translateX(50px)', 'translateZ(50px)', 'translate3d(25px, 0px, 25px)');
interpolation_test('translateZ(50px)', 'translateX(50px)', 'translate3d(25px, 0px, 25px)');
interpolation_test('translateZ(-50px)','translateZ(50px)', 'translateZ(0px)');
interpolation_test('translate(0%)', 'translate(50%)', 'translate(25%)');
interpolation_test('translate(50%)', 'translate(100%, 50%)', 'translate(75%, 25%)');
interpolation_test('translate(0%, 50%)', 'translate(50%, 100%)', 'translate(25%, 75%)');
interpolation_test('translate3d(0,0,-50px)','translateZ(50px)', 'translate3d(0px, 0px, 0px)');
interpolation_test('translate(50px, 0px)', 'translate(100px, 0px)', 'translate(75px)');
interpolation_test('translate(50px, -50px)', 'translate(100px, 50px)', 'translate(75px)');
interpolation_test('rotate(30deg)', 'rotate(90deg)', 'rotate(60deg)');
interpolation_test('rotateZ(30deg)', 'rotateZ(90deg)', 'rotateZ(60deg)');
interpolation_test('rotate(0deg)', 'rotateZ(90deg)', 'rotate3d(0, 0, 1, 45deg)');
interpolation_test('rotateX(0deg)','rotateX(90deg)', 'rotateX(45deg)');
interpolation_test('rotate(0deg)', 'rotateX(90deg)', 'rotate3d(1, 0, 0, 45deg)');
interpolation_test('scale(1)', 'scale(2)', 'scale(1.5)');
interpolation_test('scale(1, 3)', 'scale(2)', 'scale(1.5, 2.5)');
interpolation_test('scaleX(1)', 'scaleX(2)', 'scaleX(1.5)');
interpolation_test('scaleY(1)', 'scaleY(2)', 'scaleY(1.5)');
interpolation_test('scaleZ(1)', 'scaleZ(2)', 'scaleZ(1.5)');
interpolation_test('scaleX(2)', 'scaleY(2)', 'scale(1.5)');
interpolation_test('scaleX(2)', 'scaleY(3)', 'scale(1.5, 2)');
interpolation_test('scaleZ(1)', 'scale(2)', 'scale3d(1.5, 1.5, 1)');
interpolation_test('scale(1, 2)', 'scale(3, 4)', 'scale(2, 3)');
interpolation_test('scale3d(1, 2, 3)', 'scale3d(4, 5, 6)', 'scale3d(2.5, 3.5, 4.5)');
interpolation_test('scale3d(1, 2, 3)', 'scale(4, 5)', 'scale3d(2.5, 3.5, 2)');
interpolation_test('scale(1, 2)', 'scale3d(3, 4, 5)', 'scale3d(2, 3, 3)');
interpolation_test('skewX(0deg)', 'skewX(60deg)', 'skewX(30deg)');
interpolation_test('skewX(0deg)', 'skewX(90deg)', 'skewX(45deg)');
interpolation_test('skewX(0deg)', 'skewX(180deg)', 'skewX(90deg)');
interpolation_test('skew(0deg, 0deg)', 'skew(60deg, 60deg)', 'skew(30deg, 30deg)');
interpolation_test('skew(45deg, 0deg)', 'skew(0deg, 45deg)', 'skew(22.5deg, 22.5deg)');
interpolation_test('perspective(10px)', 'perspective(2.5px)', 'perspective(4px)');
interpolation_test('perspective(10px)', 'perspective(none)', 'perspective(20px)');
interpolation_test('perspective(none)', 'perspective(none)', 'perspective(none)');
// A matrix() with just scale and translation.
interpolation_test('matrix(2, 0, 0, 2, 10, 30)', 'matrix(4, 0, 0, 6, 14, 10)', 'matrix(3, 0, 0, 4, 12, 20)');
// A matrix3d() with just scale and translation.
interpolation_test('matrix3d(1, 0, 0, 0, 0, 4, 0, 0, 0, 0, 1, 0, 5, 10, 4, 1)', 'matrix3d(3, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, -11, 2, 2, 1)', 'matrix3d(2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 2, 0, -3, 6, 3, 1)');
// A matrix3d() with just perspective.
interpolation_test('matrix3d(1, 0, 0, 3, 0, 1, 0, 2, 0, 0, 1, 8, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 5, 0, 1, 0, 8, 0, 0, 1, 14, 0, 0, 0, 1)', 'matrix3d(1, 0, 0, 4, 0, 1, 0, 5, 0, 0, 1, 11, 0, 0, 0, 1)');
// NOTE: New tests added here should also be added in
// transform-interpolation-computed-value.html.
</script>

12
tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-perspective.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?perspective">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<body>
<script>
createTests(transformTests.perspective);
</script>

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

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="transform-interpolation-ref.html?rotate">
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-17">
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
<script src="../../../common/reftest-wait.js"></script>

35
tests/wpt/web-platform-tests/css/css-transforms/animation/transform-interpolation-verify-reftests.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE HTML>
<meta charset="UTF-8">
<title>transform interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#interpolation-of-transforms">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<script src="support/transform-interpolation-reftests.js"></script>
<!--
The tests in transform-interpolation-reftests.js are used for reftests
that are designed to test animation that happens on the compositor.
Here we run those same tests through test_interpolation to check that
they match the non-compositor codepath.
-->
<body>
<script>
for (const set in transformTests) {
for (const obj of transformTests[set]) {
let test = ("test" in obj) ? obj.test : obj;
let midpoint = ("midpoint" in obj) ? obj.midpoint : 0.5;
test_interpolation({
property: 'transform',
from: test[0],
to: test[2]
}, [
{ at: midpoint, expect: test[1] },
]);
}
}
</script>

10
tests/wpt/web-platform-tests/css/css-transforms/animation/translate-composition.html
View file

@ -65,7 +65,7 @@ test_composition({
addTo: '100px',
}, [
{at: -1, expect: '-100px'},
{at: 0, expect: 'none'},
{at: 0, expect: '0px'},
{at: 0.25, expect: '25px'},
{at: 0.75, expect: '75px'},
{at: 1, expect: '100px'},
@ -79,7 +79,7 @@ test_composition({
addTo: '100px',
}, [
{at: -1, expect: '-100px'},
{at: 0, expect: 'none'},
{at: 0, expect: '0px'},
{at: 0.25, expect: '25px'},
{at: 0.75, expect: '75px'},
{at: 1, expect: '100px'},
@ -96,7 +96,7 @@ test_composition({
{at: 0, expect: '0px 40px 60px'},
{at: 0.25, expect: '0px 30px 45px'},
{at: 0.75, expect: '0px 10px 15px'},
{at: 1, expect: 'none'},
{at: 1, expect: '0px'},
{at: 2, expect: '0px -40px -60px'},
]);
@ -110,7 +110,7 @@ test_composition({
{at: 0, expect: '0px 40px 60px'},
{at: 0.25, expect: '0px 30px 45px'},
{at: 0.75, expect: '0px 10px 15px'},
{at: 1, expect: 'none'},
{at: 1, expect: '0px'},
{at: 2, expect: '0px -40px -60px'},
]);
@ -140,7 +140,7 @@ test_composition({
{at: 0.25, expect: '60px 45px 45px'},
{at: 0.5, expect: '40px 30px 30px'},
{at: 0.75, expect: '20px 15px 15px'},
{at: 1, expect: 'none'},
{at: 1, expect: '0px'},
{at: 2, expect: '-80px -60px -60px'},
]);
</script>

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

@ -122,7 +122,7 @@
to: '240% 160%',
}, [
{at: -1, expect: 'calc(960px - 240%) calc(800px - 160%) 640px'},
{at: 0, expect: '480px 400px 320px'},
{at: 0, expect: 'calc(0% + 480px) calc(0% + 400px) 320px'},
{at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%) 280px'},
{at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px) 40px'},
{at: 1, expect: '240% 160%'},

1
tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-001.html
View file

@ -3,6 +3,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="backface-visibility-001.ref.html">
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-1">
<meta name="assert" content="backface-visibility should have no effect when no transforms are present">
<style>
.box {

6
tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-001.html
View file

@ -6,7 +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="fuzzy" content="maxDifference=0-79;totalPixels=0-200">
<meta name="assert" content="When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.">
<style type="text/css">
.greenSquare {
@ -41,7 +41,7 @@
.container {
width: 200px;
height: 200px;
perspective: 1000;
perspective: 1000px;
transform: rotateY(45deg);
}
@ -56,4 +56,4 @@
</div>
</div>
</body>
</html>
</html>

10
tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-translate.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#backface-visibility-property">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="background: green; width: 100px">
<div style="transform: rotateY(180deg); backface-visibility: hidden">
<div style="background: red; transform: translateX(20px); height: 100px"></div>
</div>
</div>

10
tests/wpt/web-platform-tests/css/css-transforms/backface-visibility-hidden-child-will-change-transform.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#backface-visibility-property">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="background: green; width: 100px">
<div style="transform: rotateY(180deg); backface-visibility: hidden">
<div style="background: red; will-change: transform; height: 100px"></div>
</div>
</div>

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

@ -0,0 +1,10 @@
<!doctype html>
<meta charset="utf-8">
<link rel="author" href="mailto:0xdevssh@gmail.com">
<link rel="help" href="https://crbug.com/1246754">
<div id="test">
</div>
<script>
document.getElementById('test').style['transform']='scale3d(0.27729718037880957e1857, 0.27729718037880957e1857, 0.27729718037880957e1857)';
</script>

11
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-001.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<title>CSS Test (Transforms): preserve-3d containing a br</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1275856">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property">
<meta name="assert" content="This should not crash.">
<div style="transform-style: preserve-3d">
<br>
</div>

11
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-containing-br-002.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<title>CSS Test (Transforms): preserve-3d containing a br</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276151">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property">
<meta name="assert" content="This should not crash.">
<div style="transform-style: preserve-3d; column-count: 128">
<br>
</div>

9
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-inline-hit-test.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE HTML>
<title>CSS Test (Transforms): preserve-3d on inline and hit test</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127348">
<meta name="assert" content="This should not crash.">
<span style="transform-style: preserve-3d; position: relative">TEST</span>
<script>
document.elementFromPoint(10, 10);
</script>

20
tests/wpt/web-platform-tests/css/css-transforms/crashtests/preserve3d-svg-foreign-object-hit-test.svg Normal file
View file

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
<g id="testmeta">
<title>CSS Test (Transforms): preserve-3d on foreignObject and hit test</title>
<html:link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property" />
<html:link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1277221" />
<html:meta name="assert" content="This should not crash." />
</g>
<style>
foreignObject {
display:table;
overflow:auto;
transform-style:preserve-3d;
}
</style>
<foreignObject width="200" height="200"></foreignObject>
<script>
document.elementFromPoint(100, 100);
</script>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 670 B

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

@ -6,6 +6,7 @@
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com">
<link rel="match" href="css-skew-002-ref.html">
<meta name="fuzzy" content="maxDifference=5-32;totalPixels=12-159">
<style type="text/css">
div {
top:0px;

8
tests/wpt/web-platform-tests/css/css-transforms/css-transforms-transformlist.html
View file

@ -6,7 +6,7 @@
<link rel="author" title="Rik Cabanier" href="mailto:cabanier@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-attribute-dom">
<link rel="match" href="reference/css-transforms-transformlist-ref.html">
<meta name="assert" content="This test verifies that the CSS transform ends up in the list of SVG transforms">
<meta name="assert" content="This test verifies that the CSS transform does not end up in the list of SVG transforms">
<style type="text/css">
#rect {
@ -25,8 +25,8 @@
window.addEventListener('load', function(){
var r = document.getElementById("rect");
var result = document.getElementById("result");
if(r.transform.baseVal.length>0)
result.style.backgroundColor = "rgb(0, 255, 0)";
if (r.transform.baseVal.length == 0)
result.style.backgroundColor = "green";
document.getElementById("svgelement").style.display="none";
}, false);
@ -35,7 +35,7 @@
<body>
<p>The test passes if there is a green square and no red.</p>
<svg id="svgelement">
<rect id="rect" width="100" height="100"></rect>
<rect id="rect" style="transform: translate(20px, 20px)" width="100" height="100"></rect>
</svg>
<div id="result"></div>
</body>

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

@ -30,7 +30,7 @@
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<g class="testGroup" transform="scale(0.5)">
<rect width="100" height="100" fill="url(#grad)" transform="translateY(-100)"/>
<rect width="100" height="100" fill="url(#grad)" transform="translate(0 -100)"/>
</g>
</svg>
</body>

5
tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-012.html
View file

@ -15,7 +15,8 @@
width: 300px;
}
rect.testRect {
transform: rotate(90deg,20px,20px);
transform: rotate(90deg);
transform-origin: 20px 20px;
}
</style>
</head>
@ -33,4 +34,4 @@
<rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="scale(0.5)"/>
</svg>
</body>
</html>
</html>

2
tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-013.html
View file

@ -30,7 +30,7 @@
</linearGradient>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="rotate(90,20px,20px)"/>
<rect class="testRect" y="-60" width="100" height="100" fill="url(#grad)" transform="rotate(90,20,20)"/>
</svg>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/document-styles/svg-document-styles-014.html
View file

@ -30,7 +30,7 @@
</linearGradient>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect class="testRect" width="100" height="100" fill="url(#grad)" transform="rotate(90deg,invalid,invalid)"/>
<rect class="testRect" width="100" height="100" fill="url(#grad)" transform="rotate(90,invalid,invalid)"/>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/external-styles/svg-external-styles-014.html
View file

@ -28,7 +28,7 @@
</linearGradient>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect class="invalid" width="100" height="100" fill="url(#grad)" transform="rotate(90deg,)"/>
<rect class="invalid" width="100" height="100" fill="url(#grad)" transform="rotate(90,)"/>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-002.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="translate(40px 0)">
<g transform="translate(40 0)">
<rect y="40" width="80" height="80" fill="green"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-005.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="scaleX(2)">
<g transform="scale(2 1)">
<rect x="20" y="40" width="40" height="80" fill="green"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-006.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="scaleY(2)">
<g transform="scale(1 2)">
<rect x="40" y="20" width="80" height="40" fill="green"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-group-011.html
View file

@ -20,9 +20,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="rotate(90deg,20px,20px)">
<g transform="rotate(90,20,20)">
<rect x="40" y="-80" width="80" height="80" fill="green"/>
</g>
</svg>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-005.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="scaleX(2)">
<rect x="10" y="40" width="20" height="80" fill="green" transform="scaleX(2)"/>
<g transform="scale(2 1)">
<rect x="10" y="40" width="20" height="80" fill="green" transform="scale(2 1)"/>
</g>
</svg>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-006.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="scaleY(2)">
<rect x="40" y="10" width="80" height="20" fill="green" transform="scaleY(2)"/>
<g transform="scale(1 2)">
<rect x="40" y="10" width="80" height="20" fill="green" transform="scale(1 2)"/>
</g>
</svg>
</body>
</html>
</html>

3
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-009.html
View file

@ -6,6 +6,7 @@
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="match" href="reference/svg-green-square-250x250-ref.html">
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-1">
<meta name="flags" content="svg">
<meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed vertically. Additionally, the child rect should be skewed vertically.">
<style type="text/css">
@ -25,4 +26,4 @@
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-012.html
View file

@ -20,8 +20,8 @@
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="translate(40 0)">
<rect y="20" width="80" height="40" fill="green" transform="scaleY(2)"/>
<rect y="20" width="80" height="40" fill="green" transform="scale(1 2)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-015.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="scaleX(2)">
<g transform="scale(2 1)">
<rect x="40" y="-60" width="80" height="40" fill="green" transform="rotate(90)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-016.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="scaleY(2)">
<g transform="scale(1 2)">
<rect y="20" width="80" height="40" fill="green" transform="translate(40 0)"/>
</g>
</svg>
</body>
</html>
</html>

5
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-018.html
View file

@ -21,8 +21,9 @@
<svg>
<path d="M 2,1 100,1 198,99 100,99 Z" fill="red"/>
<g transform="skewX(45)">
<rect width="200" height="100" fill="green" transform="scaleX(0.5)"/>
<!-- FIXME: This test will still pass if the transform= is ignored -->
<rect width="200" height="100" fill="green" transform="scale(0.5 1)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-020.html
View file

@ -20,8 +20,8 @@
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="matrix(-1 0 0 -2 120 120)">
<rect width="40" height="40" fill="green" transform="scaleX(2)"/>
<rect width="40" height="40" fill="green" transform="scale(2 1)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-021.html
View file

@ -20,9 +20,9 @@
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="translate(20 20)">
<rect x="21" y="42" width="78" height="156" fill="red" transform="scaleY(0.5)"/> <!-- false positive if scaleY is negative; need to fix -->
<rect x="21" y="42" width="78" height="156" fill="red" transform="scale(1 0.5)"/> <!-- false positive if scaleY is negative; need to fix -->
<rect x="20" y="-100" width="80" height="80" fill="green" transform="rotate(90)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-022.html
View file

@ -20,9 +20,9 @@
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="translate(20 0)">
<rect x="42" y="41" width="156" height="78" fill="red" transform="scaleX(0.5)"/> <!-- false positive if scaleX is negative -->
<rect x="42" y="41" width="156" height="78" fill="red" transform="scale(0.5 1)"/> <!-- false positive if scaleX is negative -->
<rect width="40" height="40" fill="green" transform="matrix(-2 0 0 -2 100 120)"/>
</g>
</svg>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-023.html
View file

@ -19,10 +19,10 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="translate(0 25px)">
<rect x="1" y="1" width="78" height="78" fill="red" transform="translate(40px 15px)"/>
<g transform="translate(0 25)">
<rect x="1" y="1" width="78" height="78" fill="red" transform="translate(40 15)"/>
<rect x="80" y="30" width="160" height="160" fill="green" transform="scale(0.5)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-024.html
View file

@ -21,8 +21,8 @@
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="scale(0.5)">
<rect x="62" y="82" width="156" height="156" fill="red" transform="translate(20 0)"/>
<rect x="160" y="80" width="320" height="160" fill="green" transform="scaleX(0.5)"/>
<rect x="160" y="80" width="320" height="160" fill="green" transform="scale(0.5 1)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-025.html
View file

@ -19,10 +19,10 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="scaleX(0.5)">
<g transform="scale(0.5 1)">
<rect x="82" y="21" width="156" height="78" fill="red" transform="translate(0 20)"/>
<rect x="160" y="80" width="320" height="160" fill="green" transform="scale(0.5)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-026.html
View file

@ -19,10 +19,10 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="scaleY(0.5)"> <!-- false positive if scaleY is negative; need to fix -->
<g transform="scale(1 0.5)"> <!-- false positive if scaleY is negative; need to fix -->
<rect x="21" y="42" width="78" height="156" fill="red" transform="translate(20 40)"/>
<rect x="80" y="-120" width="160" height="80" fill="green" transform="rotate(90)"/>
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-027.html
View file

@ -21,8 +21,8 @@
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="rotate(90)">
<rect x="20" y="-120" width="80" height="80" fill="green" transform="translate(20 0)"/>
<rect x="40" y="-240" width="80" height="160" fill="green" transform="scaleY(0.5)"/> <!-- false positive if scaleY is negative; need to fix -->
<rect x="40" y="-240" width="80" height="160" fill="green" transform="scale(1 0.5)"/> <!-- false positive if scaleY is negative; need to fix -->
</g>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-028.html
View file

@ -20,9 +20,9 @@
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/> <!-- this rect is outside the group to catch failures of the group transform -->
<g transform="matrix(-0.5 0 0 -0.5 120 90)">
<rect x="2" y="-116" width="156" height="312" fill="red" transform="scaleY(0.5)"/> <!-- false positive if scaleY is between 0.4 and -0.3 -->
<rect x="2" y="-116" width="156" height="312" fill="red" transform="scale(1 0.5)"/> <!-- false positive if scaleY is between 0.4 and -0.3 -->
<rect width="160" height="160" fill="green" transform="translate(0 -60)"/>
</g>
</svg>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-transforms/group/svg-transform-nested-029.html
View file

@ -19,9 +19,9 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="41" y="41" width="78" height="78" fill="red"/>
<g transform="scaleX(2)">
<rect x="40" y="-20" width="80" height="40" fill="green" transform="rotate(90deg,20px,20px)"/>
<g transform="scale(2 1)">
<rect x="40" y="-20" width="80" height="40" fill="green" transform="rotate(90,20,20)"/>
</g>
</svg>
</body>
</html>
</html>

2
tests/wpt/web-platform-tests/css/css-transforms/inheritance.html
View file

@ -34,7 +34,7 @@ assert_not_inherited('scale', 'none', '10 11 12');
assert_not_inherited('transform', 'none', 'matrix(2, 0, 0, 3, 1, 4)');
assert_not_inherited('transform-box', 'view-box', 'fill-box');
assert_not_inherited('transform-origin', '30px 20px', '5px 6px'); // '50% 50%' is '30px 20px'
assert_not_inherited('transform-style', 'auto', 'preserve-3d');
assert_not_inherited('transform-style', 'flat', 'preserve-3d');
assert_not_inherited('translate', 'none', '13px 14px 15px');
</script>
</body>

4
tests/wpt/web-platform-tests/css/css-transforms/inline-styles/svg-inline-styles-014.html
View file

@ -27,7 +27,7 @@
</linearGradient>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="rotate(90deg,invalid,invalid)"/>
<rect width="100" height="100" fill="url(#grad)" style="transform: scale(invalid)" transform="rotate(90,invalid,invalid)"/>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-064.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="match" href="reference/svg-matrix-four-color-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The matrix function does not support percentage values. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.">
@ -28,7 +28,7 @@
</pattern>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(50% 0 0 -0.5 100 100) translateX(100)"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(50% 0 0 -0.5 100 100) translate(100 0)"/>
</svg>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-065.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="match" href="reference/svg-matrix-four-color-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The matrix function does not support radian units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.">
@ -28,7 +28,7 @@
</pattern>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 45rad 0 -0.5 100 100) translateY(100)"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 45rad 0 -0.5 100 100) translate(0 100)"/>
</svg>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-068.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="match" href="reference/svg-matrix-four-color-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The matrix function does not support pc units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.">
@ -28,7 +28,7 @@
</pattern>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100pc 100) scaleX(0.5)"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100pc 100) scale(0.5 1)"/>
</svg>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/matrix/svg-matrix-069.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix">
<link rel="match" href="reference/svg-matrix-four-color-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The matrix function does not support mm units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.">
@ -28,7 +28,7 @@
</pattern>
</defs>
<rect x="1" y="1" width="98" height="98" fill="red"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100 100mm) scaleY(0.5)"/>
<rect width="100" height="100" fill="url(#coloredBoxes)" transform="matrix(0.5 0 0.5 0.5 100 100mm) scale(1 0.5)"/>
</svg>
</body>
</html>

2
tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change-ref.html Normal file
View file

@ -0,0 +1,2 @@
<!DOCTYPE html>
<div style="position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: green;"></div>

35
tests/wpt/web-platform-tests/css/css-transforms/paint-order-with-transform-change.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<title>Changes to transform should not affect paint order</title>
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
<link rel="help" href="https://crbug.com/1267689">
<link rel="match" href="paint-order-with-transform-change-ref.html">
<style>
#bottom {
will-change: transform;
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background: red;
}
#top {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="bottom"></div>
<div id="top"></div>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
bottom.style.transform = 'translate(-100px, 0px)';
document.documentElement.removeAttribute('class');
});
});
</script>

4
tests/wpt/web-platform-tests/css/css-transforms/parsing/scale-parsing-invalid.html
View file

@ -14,6 +14,10 @@
test_invalid_value("scale", "100px");
test_invalid_value("scale", "100 200 300 400");
test_invalid_value("scale", "1 junk");
test_invalid_value("scale", "1 2 junk");
test_invalid_value("scale", "1 2 3 junk");
</script>
</body>
</html>

27
tests/wpt/web-platform-tests/css/css-transforms/parsing/transform-computed.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 1: getComputedStyle().transform</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#serialization-of-the-computed-value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#target {
width: 200px;
height: 300px;
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("transform", "perspective(none)", "matrix(1, 0, 0, 1, 0, 0)");
test_computed_value("transform", "perspective(10px)", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.1, 0, 0, 0, 1)");
// FIXME: This needs more tests to cover all the other transform functions.
</script>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-invalid.html
View file

@ -15,6 +15,10 @@ test_invalid_value("translate", "100deg");
test_invalid_value("translate", "100px 200px 300%");
test_invalid_value("translate", "100px 200px calc(30px + 30%)");
test_invalid_value("translate", "100px junk");
test_invalid_value("translate", "100px 200px junk");
test_invalid_value("translate", "100px 200px 300px junk");
</script>
</body>
</html>

5
tests/wpt/web-platform-tests/css/css-transforms/parsing/translate-parsing-valid.html
View file

@ -24,10 +24,15 @@ test_valid_value("translate", "100px 200%");
test_valid_value("translate", "100% 200px");
test_valid_value("translate", "100px 200px 0px", "100px 200px");
test_valid_value("translate", "100px 0px 300px", "100px 0px 300px");
test_valid_value("translate", "100px 0px 0px", "100px");
test_valid_value("translate", "100px 200px 300px");
test_valid_value("translate", "100% 200% 300px");
test_valid_value("translate", "100% 0% 200px", "100% 0% 200px");
test_valid_value("translate", "0% 0% 100px", "0% 0% 100px");
test_valid_value("translate", "0em 0em 100px", "0em 0em 100px");
test_valid_value("translate", "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)");
test_valid_value("translate", "0", "0px");

1
tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-001.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'perspective-origin' property set 'center' computes to 50% for the vertical position.">
<style>
div {

1
tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-002.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'perspective-origin' property set 'center' computes to 50% for the horizontal position.">
<style>
div {

1
tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-003.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'perspective-origin' property set 'bottom' computes to 100% for the vertical position.">
<style>
div {

1
tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-004.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'perspective-origin' property set 'top' computes to 0% for the vertical position.">
<style>
div {

1
tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-005.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'perspective-origin' property set 'left' computes to 0% for the horizontal position.">
<style>
div {

1
tests/wpt/web-platform-tests/css/css-transforms/perspective-origin-006.html
View file

@ -5,7 +5,6 @@
<link rel="author" title="Jieqiong Cui" href="mailto:jieqiongx.cui@intel.com">
<link rel="help" title="11. The 'perspective-origin' Property" href="http://www.w3.org/TR/css-transforms-2/#propdef-perspective-origin">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<meta name="flags" content="">
<meta name="assert" content="The 'perspective-origin' property set 'right' computes to 100% for the horizontal position.">
<style>
div {

16
tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001-ref.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>CSS Test Reference</title>
<div>
<svg overflow="hidden"
width="100%"
height="100%"
viewBox="0 0 365760 205740"
style="
backface-visibility: hidden;
transform: translate3d(0px, 0px, 0px)
rotate3d(0, 0, 0, 0deg) translate3d(0px, 0px, 0px)
translate3d(0px, 0px, 0px);
">
<rect fill="green" width="100%" height="100%"></rect>
</svg>
</div>

19
tests/wpt/web-platform-tests/css/css-transforms/perspective-svg-001.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<title>Perspective on SVG</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1741124">
<link rel="match" href="perspective-svg-001-ref.html">
<div style="perspective: 1500px;">
<svg overflow="hidden"
width="100%"
height="100%"
viewBox="0 0 365760 205740"
style="
backface-visibility: hidden;
transform: translate3d(0px, 0px, 0px)
rotate3d(0, 0, 0, 0deg) translate3d(0px, 0px, 0px)
translate3d(0px, 0px, 0px);
">
<rect fill="green" width="100%" height="100%"></rect>
</svg>
</div>

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

@ -9,7 +9,7 @@
Perspective with different transforms can have small anti-aliasing
pixel differences, so the test should fuzzy patch to the ref.
-->
<meta name="fuzzy" content="maxDifference=0-10;totalPixels=0-10">
<meta name="fuzzy" content="maxDifference=0-27;totalPixels=0-235">
<style>
#container {

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

@ -9,15 +9,6 @@
width: 200px;
height: 200px;
}
.parent {
transform-style: preserve-3d;
transform: rotateY(45deg)
}
.child {
transform: rotateY(45deg);
background: lightblue
}
</style>
<div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden">

99
tests/wpt/web-platform-tests/css/css-transforms/preserve-3d-flat-grouping-properties.html
View file

@ -5,7 +5,10 @@
<script src="/resources/testharnessreport.js"></script>
<style>
div {
.testContainer div {
/* Note: .testContainer is just here to prevent this rule from squishing
the dynamically-generated human-readable divs that show this test's
pass/fail results. */
width: 200px;
height: 200px;
}
@ -20,54 +23,56 @@
}
</style>
<div class=parent>
<div id=nonflat class=child></div>
</div>
<div class=parent style="opacity: 0.5">
<div id=opacity class=child></div>
</div>
<div class=parent style="overflow: hidden">
<div id=overflowClip class=child></div>
</div>
<div class=parent style="filter: invert(0)">
<div id=filter class=child></div>
</div>
<div class=parent style="backdrop-filter: invert(0)">
<div id=backdropFilter class=child></div>
</div>
<div class=parent style="mix-blend-mode: multiply;">
<div id=mixBlendMode class=child></div>
</div>
<div class=parent style="clip: rect(1px, 2px, 3px, 4px); position: absolute">
<div id=cssClip class=child></div>
</div>
<div class=parent style="clip-path: circle(40%)">
<div id=clipPath class=child></div>
</div>
<div class=parent style="isolation: isolate">
<div id=isolation class=child></div>
</div>
<div class=parent style="-webkit-mask:linear-gradient(black,transparent);
mask:linear-gradient(black,transparent)">
<div id=mask class=child></div>
</div>
<div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden">
<div id=absoluteUnderGrouping style="position: absolute">
<div class=testContainer>
<div class=parent>
<div id=nonflat class=child></div>
</div>
</div>
<div id=parentWithoutGrouping style="transform-style: preserve-3d">
<div id=absoluteNotUnderGrouping style="position: absolute">
<div class=parent style="opacity: 0.5">
<div id=opacity class=child></div>
</div>
<div class=parent style="overflow: hidden">
<div id=overflowClip class=child></div>
</div>
<div class=parent style="filter: invert(0)">
<div id=filter class=child></div>
</div>
<div class=parent style="backdrop-filter: invert(0)">
<div id=backdropFilter class=child></div>
</div>
<div class=parent style="mix-blend-mode: multiply;">
<div id=mixBlendMode class=child></div>
</div>
<div class=parent style="clip: rect(1px, 2px, 3px, 4px); position: absolute">
<div id=cssClip class=child></div>
</div>
<div class=parent style="clip-path: circle(40%)">
<div id=clipPath class=child></div>
</div>
<div class=parent style="isolation: isolate">
<div id=isolation class=child></div>
</div>
<div class=parent style="-webkit-mask:linear-gradient(black,transparent);
mask:linear-gradient(black,transparent)">
<div id=mask class=child></div>
</div>
<div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden">
<div id=absoluteUnderGrouping style="position: absolute">
</div>
</div>
<div id=parentWithoutGrouping style="transform-style: preserve-3d">
<div id=absoluteNotUnderGrouping style="position: absolute">
</div>
</div>
</div>

21
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001-ref.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test Reference (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
body {
margin: 0;
}
.reference {
background: blue;
width: 100px;
height: 100px;
transform-origin: 0 0;
transform: translate(50px, 100px) perspective(1000px) rotateX(30deg) translateY(50px) translateZ(100px);
}
</style>
<div class="reference"></div>

51
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-001.html Normal file
View file

@ -0,0 +1,51 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="The element is rendered at the correct position.">
<link rel="match" href="preserve3d-and-flattening-001-ref.html">
<meta name="fuzzy" content="maxDifference=0-127;totalPixels=0-101">
<style>
body {
margin: 0;
}
.scene-wrapper {
margin-top: 100px;
margin-left: 50px;
width: 200px;
height: 200px;
perspective: 1000px;
perspective-origin: 0px 0px;
}
.scene-root {
transform: rotateX(30deg);
transform-origin: 0px 0px;
transform-style:preserve-3d;
/* This is in place of a transition in the original. */
will-change: transform;
}
.descendent-of-flattener {
height: 50px;
will-change: transform;
}
.scene-3d-element {
background: blue;
transform: translateZ(100px);
width: 100px;
height: 100px;
transform-style:preserve-3d
}
</style>
<div class="scene-wrapper">
<div class="scene-root">
<div class="scene-flattener">
<div class="descendent-of-flattener"></div>
</div>
<div class="scene-3d-element"></div>
</div>
</div>

34
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002-ref.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<style>
body {
margin: 0;
}
div {
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.flattener {
background: fuchsia;
}
.sibling {
background: blue;
top: 50px;
left: 25px;
}
.child {
background: silver;
left: 50px;
}
</style>
<div class="sibling"></div>
<div class="flattener"></div>
<div class="child"></div>

46
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-002.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="The element is rendered at the correct position.">
<link rel="match" href="preserve3d-and-flattening-002-ref.html">
<style>
body {
margin: 0;
}
div {
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.outer {
background: gray;
}
.flattener {
background: fuchsia;
}
.sibling {
background: blue;
transform: translate3d(25px, 50px, -20px);
}
.child {
background: silver;
transform: translate3d(50px, 0, 10px);
}
</style>
<div class="outer">
<div class="flattener">
<div class="child"></div>
</div>
<div class="sibling"></div>
</div>

47
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-003.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="The element is rendered at the correct position.">
<link rel="match" href="preserve3d-and-flattening-002-ref.html">
<style>
body {
margin: 0;
}
div {
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.outer {
background: gray;
}
.flattener {
background: fuchsia;
transform: translateX(0);
}
.sibling {
background: blue;
transform: translate3d(25px, 50px, -20px);
}
.child {
background: silver;
transform: translate3d(50px, 0, 10px);
}
</style>
<div class="outer">
<div class="flattener">
<div class="child"></div>
</div>
<div class="sibling"></div>
</div>

34
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-001.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="reference/green.html">
<style>
div {
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
background: red;
}
.outer {
position: relative;
}
.outer, .sibling {
transform-style: preserve-3d;
}
</style>
<p>Pass if there is NO red below:</p>
<div class="outer">
<div class="sibling"></div>
<div class="flattener"><div class="child"></div></div>
<div class="sibling" style="background: green"></div>
</div>

37
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-002.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="reference/green.html">
<style>
div {
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
background: red;
}
.outer {
position: relative;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.flattener {
transform: translateX(0);
}
</style>
<p>Pass if there is NO red below:</p>
<div class="outer">
<div class="sibling"></div>
<div class="flattener"><div class="child"></div></div>
<div class="sibling" style="background: green"></div>
</div>

36
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-003.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="reference/green.html">
<style>
div {
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
background: red;
}
.outer {
position: relative;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.child {
background: green;
}
</style>
<p>Pass if there is NO red below:</p>
<div class="outer">
<div class="sibling"></div>
<div class="flattener"><div class="child"></div></div>
</div>

39
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-004.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="reference/green.html">
<style>
div {
position: absolute;
height: 100px;
width: 100px;
top: 0;
left: 0;
background: red;
}
.outer {
position: relative;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.flattener {
transform: translateX(0);
}
.child {
background: green;
}
</style>
<p>Pass if there is NO red below:</p>
<div class="outer">
<div class="sibling"></div>
<div class="flattener"><div class="child"></div></div>
</div>

44
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-005.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="reference/green.html">
<style>
div, span {
height: 100px;
width: 100px;
background: red;
}
span {
display: inline-block;
vertical-align: top;
}
div:not(:first-child):not(.outer) {
/* put everything at the same position without using absolute positioning */
margin-top: -100px;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.sibling {
transform: translateZ(-10px);
}
.child {
will-change: transform;
position: relative;
z-index: -1;
}
</style>
<p>Pass if there is NO red below:</p>
<div class="outer">
<div class="sibling"></div>
<div class="flattener"><span style="background: green"></span><div class="child"></div><div></div></div>
<div class="flattener"><div class="child"></div><div></div></div>
</div>

53
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-006.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="preserve3d-and-flattening-002-ref.html">
<style>
body {
margin: 0;
}
div, span {
height: 100px;
width: 100px;
background: red;
}
span {
display: inline-block;
vertical-align: top;
}
div:not(:first-child):not(.outer) {
/* put everything at the same position without using absolute positioning */
margin-top: -100px;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.outer {
background: gray;
}
.flattener {
/* adding position:relative or a transform changes things */
background: fuchsia;
}
.sibling {
background: blue;
transform: translate3d(25px, 50px, -20px);
}
.child {
background: silver;
transform: translate3d(50px, 0, 10px);
}
</style>
<div class="outer">
<div class="flattener">
<div class="child"></div>
</div>
<div class="sibling"></div>
</div>

54
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-007.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="preserve3d-and-flattening-002-ref.html">
<style>
body {
margin: 0;
}
div, span {
height: 100px;
width: 100px;
background: red;
}
span {
display: inline-block;
vertical-align: top;
}
div:not(:first-child):not(.outer) {
/* put everything at the same position without using absolute positioning */
margin-top: -100px;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.outer {
background: gray;
}
.flattener {
/* adding position:relative or a transform changes things */
background: fuchsia;
}
.sibling {
background: blue;
transform: translate3d(25px, 50px, -20px);
}
.child {
background: silver;
transform: translate3d(50px, 0, 10px);
will-change: transform;
}
</style>
<div class="outer">
<div class="flattener">
<div class="child"></div>
</div>
<div class="sibling"></div>
</div>

55
tests/wpt/web-platform-tests/css/css-transforms/preserve3d-and-flattening-z-order-008.html Normal file
View file

@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>CSS Test (Transforms): Flattening at the leafward edges of a preserve-3d scene</title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255544">
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
<meta name="assert" content="Elements are drawn in the correct z-order.">
<link rel="match" href="reference/green.html">
<style>
div, span {
height: 100px;
width: 100px;
background: red;
}
span {
display: inline-block;
vertical-align: bottom;
}
.outer, .sibling {
transform-style: preserve-3d;
}
.sibling {
margin-top: -100px;
transform: translateZ(-10px);
}
.flattener:first-child {
background: linear-gradient(to bottom, green 0%, green 25%, red 25%, red 100%);
}
.flattener:first-child > .child {
background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%);
margin-top: 50px;
height: 50px;
}
.flattener:last-child {
background: linear-gradient(to bottom, green 0px, green 25px, red 25px, red 75px);
margin-top: -75px;
height: 75px;
}
.flattener:last-child > .child {
background: green;
margin-top: 50px;
height: 25px;
}
</style>
<p>Pass if there is NO red below:</p>
<div class="outer">
<div class="flattener"><span class="child"></span></div>
<div class="sibling"></div>
<div class="flattener"><span class="child"></span></div>
</div>

4
tests/wpt/web-platform-tests/css/css-transforms/reference/skew-test1-ref.html
View file

@ -26,8 +26,8 @@
<h4>
There should be a green block on the page.
</h4>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="0,0 150,55 235,205 88,150" style="fill:lime"/>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<polygon points="0,0 150,54.595535 236.602540,204.595535 86.602540,150" style="fill:lime"/>
</svg>
</body>

0
tests/wpt/web-platform-tests/css/css-transforms/reference/transform-translateX-001-ref.html → tests/wpt/web-platform-tests/css/css-transforms/reference/transform-translatex-006-ref.html
View file

2
tests/wpt/web-platform-tests/css/css-transforms/reference/ttwf-reftest-transform-translatex-001.html
View file

@ -7,7 +7,7 @@
.greenSquare {
position: absolute;
top: 100px;
left: 1000px;
left: 150px;
width: 100px;
height: 100px;
background: green;

6
tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-001.html
View file

@ -7,7 +7,7 @@
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then both translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise but the transform origin should not be translated. The green rect should completely cover the red rect.">
<meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect.">
<style type="text/css">
svg {
width: 200px;
@ -19,7 +19,7 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg 20px)"/>
<rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90 20)"/>
</svg>
</body>
</html>
</html>

4
tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-002.html
View file

@ -19,7 +19,7 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90deg,)"/>
<rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90,)"/>
</svg>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-003.html
View file

@ -7,7 +7,7 @@
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If a third absolute translation-value argument is provided, then all translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise, but the transform origin should not be translated. The green rect should completely cover the red rect.">
<meta name="assert" content="The rotate transform function takes two optional translation values. If a third absolute translation-value argument is provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect.">
<style type="text/css">
svg {
width: 200px;
@ -19,7 +19,7 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg,20px,20px,20px)"/>
<rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90,20,20,20)"/>
</svg>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-004.html
View file

@ -7,7 +7,7 @@
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then both translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise but the transform origin should not be translated. The green rect should completely cover the red rect.">
<meta name="assert" content="The rotate transform function takes two optional translation values. If one of the translation values is not provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect.">
<style type="text/css">
svg {
width: 200px;
@ -19,7 +19,7 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg 30%)"/>
<rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90 30%)"/>
</svg>
</body>
</html>
</html>

6
tests/wpt/web-platform-tests/css/css-transforms/rotate/svg-rotate-3args-invalid-005.html
View file

@ -7,7 +7,7 @@
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform-functions">
<link rel="match" href="reference/svg-rotate-3args-ref.html">
<meta name="flags" content="svg">
<meta name="assert" content="The rotate transform function takes two optional translation values. If a third relative translation-value argument is provided, then all translation-value parameters fall back to zero. The green rect in this test should be rotated by 90 degrees clockwise, but the transform origin should not be translated. The green rect should completely cover the red rect.">
<meta name="assert" content="The rotate transform function takes two optional translation values. If a third relative translation-value argument is provided, then the entire argument list is invalid and therefore no transform is applied. The green rect in this test should not be rotated. The green rect should completely cover the red rect.">
<style type="text/css">
svg {
width: 200px;
@ -19,7 +19,7 @@
<p>The test passes if there is a green square and no red.</p>
<svg>
<rect x="1" y="1" width="78" height="78" fill="red"/>
<rect x="0" y="-80" width="80" height="80" fill="green" transform="rotate(90deg,30%,20%,40%)"/>
<rect x="0" y="0" width="80" height="80" fill="green" transform="rotate(90,30%,20%,40%)"/>
</svg>
</body>
</html>
</html>

2
tests/wpt/web-platform-tests/css/css-transforms/rotate_45deg.html
View file

@ -5,7 +5,7 @@
<link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/>
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"/>
<link rel="match" href="rotate_45deg-ref.html"/>
<meta name="flags" content="" />
<meta name="fuzzy" content="maxDifference=159-255;totalPixels=50-200">
<meta name="assert" content="Rotate 45 degree in y axis"/>
<style type="text/css">
.container {

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

@ -5,8 +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="fuzzy" content="maxDifference=159-255;totalPixels=50-200">
<meta name="assert" content="Rotate 45 degree in y axis"/>
<style type="text/css">
.container {

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

@ -5,8 +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="fuzzy" content="maxDifference=159-255;totalPixels=50-200">
<meta name="assert" content="Rotate 45 degree in y axis"/>
<style type="text/css">
.container {

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

@ -5,7 +5,6 @@
<link rel="author" title="Ebay Inc." href="mailto:xiatian@ebay.com"/>
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-scalex"/>
<link rel="match" href="scalex-ref.html"/>
<meta name="flags" content="" />
<meta name="assert" content="scale x 2"/>
<style type="text/css">
.container {

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