0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

Tests: Import a bunch of WPT tests from /css/css-transforms

Browse source
This commit is contained in:
Andreas Kling 2024-11-22 16:02:24 +01:00 • committed by Andreas Kling
parent b64ccb95ec
commit d6f7fccf49
Notes: github-actions[bot] 2024-11-22 19:08:01 +00:00
34 changed files with 1752 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/individual-transform/animation/individual-transform-combine-ref.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<style>
.block {
display: inline-block;
width: 50px;
height: 50px;
margin: 50px;
padding: 0;
transform-origin: center center;
background: lime;
transform: rotate(90deg) scale(2, 1);
}
</style>
</head>
<body>
<div>
<div class="block"></div>
<div class="block"></div>
</div>
<div>
<div class="block"></div>
<div class="block"></div>
</div>
<div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>

44
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/individual-transform/animation/individual-transform-ordering-ref.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<style>
@keyframes anim {
to {
transform: translate(50px, 50px) rotate(45deg) scale(2, 1);
}
}
.block {
display: inline-block;
width: 50px;
height: 50px;
margin: 50px;
padding: 0;
transform-origin: 0 0;
background: lime;
/* Freeze the animation at the midpoint. */
animation-timing-function: cubic-bezier(0, 1, 1, 0);
animation-duration: 1000000s;
animation-delay: -500000s;
animation-name: anim;
}
</style>
</head>
<body>
<div>
<div class="block"></div>
<div class="block"></div>
</div>
<div>
<div class="block"></div>
<div class="block"></div>
</div>
<div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>

90
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/individual-transform/individual-transform-1-ref.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: compare individual transform with transform functions</title>
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<meta name="assert" content="Tests whether individaul transform works correctlyi by compare the rendering result with transfrom functions of the 'transform' property."/>
<style>
div {
position: fixed;
width: 100px;
height: 100px;
transform-origin: 0 0;
border-style: solid;
border-width: 10px 0px 10px 0px;
border-color: lime;
}
.row_1 {
top: 100px;
}
.scale_1{
left: 100px;
width: 50px;
height: 100px;
transform: scale(2, 2);
}
.translate_1 {
left: 150px;
transform: translateX(150px);
}
.rotate_1 {
left: 450px;
transform-origin: 50% 50%;
transform: rotate(90deg);
}
.row_2 {
top: 250px;
}
.scale_2{
left: 100px;
width: 50px;
height: 50px;
transform: scale(2, 2);
}
.translate_2 {
left: 150px;
top: 200px;
transform: translate(150px, 50px);
}
.rotate_2 {
left: 450px;
transform-origin: 50% 50%;
transform: rotate3d(1, 0, 0, 45deg);
}
.row_3 {
transform: perspective(500px);
top: 400px;
}
.scale_3{
left: 100px;
width: 50px;
height: 50px;
transform: scale3d(2, 2, 2);
}
.translate_3 {
left: 150px;
transform: translate3d(150px, 10px, 10px);
}
.rotate_3 {
left: 450px;
transform-origin: 50% 50%;
transform: rotate3d(0, 1, 0, 45deg);
}
</style>
</head>
<body>
<div class="scale_1 row_1"></div>
<div class="translate_1 row_1"></div>
<div class="rotate_1 row_1"></div>
<div class="scale_2 row_2"></div>
<div class="translate_2 row_2"></div>
<div class="rotate_2 row_2"></div>
<div class="scale_3 row_3"></div>
<div class="translate_3 row_3"></div>
<div class="rotate_3 row_3"></div>
</body>
</html>

30
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/individual-transform/individual-transform-2-ref.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
<style>
div {
position: fixed;
width: 100px;
height: 100px;
top: 200px;
left: 200px;
transform-origin: 0 0;
border-style: solid;
border-width: 10px 0px 10px 0px;
border-color: lime;
transform: translate(50px, 50px) rotate(45deg) scale(2, 2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

27
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/individual-transform/stacking-context-ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>
Reference: Individual transform properties' animations create stacking context in delay phase
</title>
<style>
#back {
height: 100px;
width: 100px;
position: fixed;
background: green;
margin-top: 50px;
}
#test {
width: 100px;
height: 100px;
background: blue;
will-change: transform;
}
</style>
</head>
<body>
<div id="back"></div>
<div id="test"></div>
</body>
</html>

3
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform-box/reference/greensquare200x200.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<p>There should be a green 200x200 rectangle below, and no red.</p>
<div style="width: 200px; height: 200px; background-color: green"></div>

32
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/individual-transform-2a.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/individual-transform-2-ref.html">
<style>
div {
position: fixed;
width: 100px;
height: 100px;
top: 200px;
left: 200px;
transform-origin: 0 0;
border-style: solid;
border-width: 10px 0px 10px 0px;
border-color: lime;
translate: 50px 50px;
rotate: 45deg;
scale: 2 2;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

32
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/individual-transform-2b.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/individual-transform-2-ref.html">
<style>
div {
position: fixed;
width: 100px;
height: 100px;
top: 200px;
left: 200px;
transform-origin: 0 0;
border-style: solid;
border-width: 10px 0px 10px 0px;
border-color: lime;
rotate: 45deg;
scale: 2 2;
translate: 50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

32
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/individual-transform-2c.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/individual-transform-2-ref.html">
<style>
div {
position: fixed;
width: 100px;
height: 100px;
top: 200px;
left: 200px;
transform-origin: 0 0;
border-style: solid;
border-width: 10px 0px 10px 0px;
border-color: lime;
translate: 50px 50px;
rotate: 45deg;
transform: scale(2, 2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

31
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/individual-transform-2d.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/individual-transform-2-ref.html">
<style>
div {
position: fixed;
width: 100px;
height: 100px;
top: 200px;
left: 200px;
transform-origin: 0 0;
border-style: solid;
border-width: 10px 0px 10px 0px;
border-color: lime;
translate: 50px 50px;
transform: rotate(45deg) scale(2, 2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

31
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/individual-transform-2e.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Individual transform: combine individual transform properties</title>
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
<meta name="assert" content="Tests that we combine transforms in the correct order."/>
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/individual-transform-2-ref.html">
<style>
div {
position: fixed;
width: 100px;
height: 100px;
top: 200px;
left: 200px;
transform-origin: 0 0;
border-style: solid;
border-width: 10px 0px 10px 0px;
border-color: lime;
translate: 0px 50px;
transform: translateX(50px) rotate(45deg) scale(2, 2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>

40
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/stacking-context-001.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>
Individual transform properties' animations create stacking context in delay phase
</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/stacking-context-ref.html">
<meta name="assert" content="Individual transform properties' animations
should create stacking context even in delay
phase."/>
<style>
#back {
height: 100px;
width: 100px;
position: fixed;
background: green;
margin-top: 50px;
}
@keyframes scale {
from, to { scale: 1; }
}
#test {
width: 100px;
height: 100px;
background: blue;
animation: scale 100s 100s;
}
</style>
</head>
<body>
<div id="back"></div>
<div id="test"></div>
</body>
<script>
requestAnimationFrame(() => {
document.documentElement.classList.remove('reftest-wait');
});
</script>
</html>

37
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/translate-fill-box.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>transform-box: fill-box</title>
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/../transform-box/reference/greensquare200x200.html">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
<meta name="assert" content="translate percentages are relative to the reference box.">
<style>
svg {
background-color: red;
}
rect {
transform-box: fill-box;
}
#target1 {
rotate: 90deg;
}
#target2 {
translate: 50% -50%;
}
#target3 {
transform-origin: 25% 25%;
translate: 25% 25%;
rotate: 180deg;
}
#target4 {
transform-origin: 75px 75px;
translate: 25% 25%;
rotate: -180deg;
}
</style>
<p>There should be a green 200x200 rectangle below, and no red.</p>
<svg width="200" height="200">
<rect id="target1" x="100" y="100" width="100" height="100" fill="green"/>
<rect id="target2" x="50" y="50" width="100" height="100" fill="green"/>
<rect id="target3" x="25" y="25" width="100" height="100" fill="green"/>
<rect id="target4" x="25" y="25" width="100" height="100" fill="green"/>
</svg>

35
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/individual-transform/translate-view-box.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<title>transform-box: view-box</title>
<link rel="match" href="../../../../../expected/wpt-import/css/css-transforms/individual-transform/../transform-box/reference/greensquare200x200.html">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-box">
<meta name="assert" content="translate percentages are relative to the reference box.">
<style>
svg {
background-color: red;
}
rect {
transform-box: view-box;
}
#target1 {
transform-origin: 25% 25%;
scale: 2;
}
#target2 {
translate: 50%;
}
#target3 {
translate: 0 50%;
}
#target4 {
transform-origin: 50% 50%;
rotate: 180deg;
}
</style>
<p>There should be a green 200x200 rectangle below, and no red.</p>
<svg width="200" height="200">
<rect id="target1" x="25" y="25" width="50" height="50" fill="green"/>
<rect id="target2" width="100" height="100" fill="green"/>
<rect id="target3" width="100" height="100" fill="green"/>
<rect id="target4" width="100" height="100" fill="green"/>
</svg>

418
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/animation/translate-interpolation.txt Normal file
View file

@ -0,0 +1,418 @@
Summary
Harness status: OK
Rerun
Found 408 tests
408 Fail
Details
Result Test Name MessageFail CSS Transitions: property <translate> from [-100px] to [100px] at (-1) should be [-300px]
Fail CSS Transitions: property <translate> from [-100px] to [100px] at (0) should be [-100px]
Fail CSS Transitions: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]
Fail CSS Transitions: property <translate> from [-100px] to [100px] at (0.75) should be [50px]
Fail CSS Transitions: property <translate> from [-100px] to [100px] at (1) should be [100px]
Fail CSS Transitions: property <translate> from [-100px] to [100px] at (2) should be [300px]
Fail CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (-1) should be [-300px]
Fail CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (0) should be [-100px]
Fail CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]
Fail CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (0.75) should be [50px]
Fail CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (1) should be [100px]
Fail CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (2) should be [300px]
Fail CSS Animations: property <translate> from [-100px] to [100px] at (-1) should be [-300px]
Fail CSS Animations: property <translate> from [-100px] to [100px] at (0) should be [-100px]
Fail CSS Animations: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]
Fail CSS Animations: property <translate> from [-100px] to [100px] at (0.75) should be [50px]
Fail CSS Animations: property <translate> from [-100px] to [100px] at (1) should be [100px]
Fail CSS Animations: property <translate> from [-100px] to [100px] at (2) should be [300px]
Fail Web Animations: property <translate> from [-100px] to [100px] at (-1) should be [-300px]
Fail Web Animations: property <translate> from [-100px] to [100px] at (0) should be [-100px]
Fail Web Animations: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]
Fail Web Animations: property <translate> from [-100px] to [100px] at (0.75) should be [50px]
Fail Web Animations: property <translate> from [-100px] to [100px] at (1) should be [100px]
Fail Web Animations: property <translate> from [-100px] to [100px] at (2) should be [300px]
Fail CSS Transitions: property <translate> from [-100%] to [100%] at (-1) should be [-300%]
Fail CSS Transitions: property <translate> from [-100%] to [100%] at (0) should be [-100%]
Fail CSS Transitions: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]
Fail CSS Transitions: property <translate> from [-100%] to [100%] at (0.75) should be [50%]
Fail CSS Transitions: property <translate> from [-100%] to [100%] at (1) should be [100%]
Fail CSS Transitions: property <translate> from [-100%] to [100%] at (2) should be [300%]
Fail CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (-1) should be [-300%]
Fail CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (0) should be [-100%]
Fail CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]
Fail CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (0.75) should be [50%]
Fail CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (1) should be [100%]
Fail CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (2) should be [300%]
Fail CSS Animations: property <translate> from [-100%] to [100%] at (-1) should be [-300%]
Fail CSS Animations: property <translate> from [-100%] to [100%] at (0) should be [-100%]
Fail CSS Animations: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]
Fail CSS Animations: property <translate> from [-100%] to [100%] at (0.75) should be [50%]
Fail CSS Animations: property <translate> from [-100%] to [100%] at (1) should be [100%]
Fail CSS Animations: property <translate> from [-100%] to [100%] at (2) should be [300%]
Fail Web Animations: property <translate> from [-100%] to [100%] at (-1) should be [-300%]
Fail Web Animations: property <translate> from [-100%] to [100%] at (0) should be [-100%]
Fail Web Animations: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]
Fail Web Animations: property <translate> from [-100%] to [100%] at (0.75) should be [50%]
Fail Web Animations: property <translate> from [-100%] to [100%] at (1) should be [100%]
Fail Web Animations: property <translate> from [-100%] to [100%] at (2) should be [300%]
Fail CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]
Fail CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]
Fail CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]
Fail CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]
Fail CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]
Fail CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]
Fail CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]
Fail CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]
Fail CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]
Fail CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]
Fail CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]
Fail CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]
Fail Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]
Fail Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]
Fail Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]
Fail Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]
Fail Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]
Fail Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]
Fail CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (-1) should be [140px 80px 20px]
Fail CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0) should be [220px 240px 260px]
Fail CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.125) should be [230px 260px 290px]
Fail CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.875) should be [290px 380px 470px]
Fail CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (1) should be [300px 400px 500px]
Fail CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (2) should be [380px 560px 740px]
Fail CSS Transitions with transition: all: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (-1) should be [140px 80px 20px]
Fail CSS Transitions with transition: all: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0) should be [220px 240px 260px]
Fail CSS Transitions with transition: all: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.125) should be [230px 260px 290px]
Fail CSS Transitions with transition: all: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.875) should be [290px 380px 470px]
Fail CSS Transitions with transition: all: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (1) should be [300px 400px 500px]
Fail CSS Transitions with transition: all: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (2) should be [380px 560px 740px]
Fail CSS Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (-1) should be [140px 80px 20px]
Fail CSS Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0) should be [220px 240px 260px]
Fail CSS Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.125) should be [230px 260px 290px]
Fail CSS Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.875) should be [290px 380px 470px]
Fail CSS Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (1) should be [300px 400px 500px]
Fail CSS Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (2) should be [380px 560px 740px]
Fail Web Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (-1) should be [140px 80px 20px]
Fail Web Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0) should be [220px 240px 260px]
Fail Web Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.125) should be [230px 260px 290px]
Fail Web Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0.875) should be [290px 380px 470px]
Fail Web Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (1) should be [300px 400px 500px]
Fail Web Animations: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (2) should be [380px 560px 740px]
Fail CSS Transitions: property <translate> from [0px] to [-100px -50px 100px] at (-1) should be [100px 50px -100px]
Fail CSS Transitions: property <translate> from [0px] to [-100px -50px 100px] at (0) should be [0px]
Fail CSS Transitions: property <translate> from [0px] to [-100px -50px 100px] at (0.25) should be [-25px -12.5px 25px]
Fail CSS Transitions: property <translate> from [0px] to [-100px -50px 100px] at (0.75) should be [-75px -37.5px 75px]
Fail CSS Transitions: property <translate> from [0px] to [-100px -50px 100px] at (1) should be [-100px -50px 100px]
Fail CSS Transitions: property <translate> from [0px] to [-100px -50px 100px] at (2) should be [-200px -100px 200px]
Fail CSS Transitions with transition: all: property <translate> from [0px] to [-100px -50px 100px] at (-1) should be [100px 50px -100px]
Fail CSS Transitions with transition: all: property <translate> from [0px] to [-100px -50px 100px] at (0) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from [0px] to [-100px -50px 100px] at (0.25) should be [-25px -12.5px 25px]
Fail CSS Transitions with transition: all: property <translate> from [0px] to [-100px -50px 100px] at (0.75) should be [-75px -37.5px 75px]
Fail CSS Transitions with transition: all: property <translate> from [0px] to [-100px -50px 100px] at (1) should be [-100px -50px 100px]
Fail CSS Transitions with transition: all: property <translate> from [0px] to [-100px -50px 100px] at (2) should be [-200px -100px 200px]
Fail CSS Animations: property <translate> from [0px] to [-100px -50px 100px] at (-1) should be [100px 50px -100px]
Fail CSS Animations: property <translate> from [0px] to [-100px -50px 100px] at (0) should be [0px]
Fail CSS Animations: property <translate> from [0px] to [-100px -50px 100px] at (0.25) should be [-25px -12.5px 25px]
Fail CSS Animations: property <translate> from [0px] to [-100px -50px 100px] at (0.75) should be [-75px -37.5px 75px]
Fail CSS Animations: property <translate> from [0px] to [-100px -50px 100px] at (1) should be [-100px -50px 100px]
Fail CSS Animations: property <translate> from [0px] to [-100px -50px 100px] at (2) should be [-200px -100px 200px]
Fail Web Animations: property <translate> from [0px] to [-100px -50px 100px] at (-1) should be [100px 50px -100px]
Fail Web Animations: property <translate> from [0px] to [-100px -50px 100px] at (0) should be [0px]
Fail Web Animations: property <translate> from [0px] to [-100px -50px 100px] at (0.25) should be [-25px -12.5px 25px]
Fail Web Animations: property <translate> from [0px] to [-100px -50px 100px] at (0.75) should be [-75px -37.5px 75px]
Fail Web Animations: property <translate> from [0px] to [-100px -50px 100px] at (1) should be [-100px -50px 100px]
Fail Web Animations: property <translate> from [0px] to [-100px -50px 100px] at (2) should be [-200px -100px 200px]
Fail CSS Transitions: property <translate> from [-100px -50px 100px] to [0px] at (-1) should be [-200px -100px 200px]
Fail CSS Transitions: property <translate> from [-100px -50px 100px] to [0px] at (0) should be [-100px -50px 100px]
Fail CSS Transitions: property <translate> from [-100px -50px 100px] to [0px] at (0.25) should be [-75px -37.5px 75px]
Fail CSS Transitions: property <translate> from [-100px -50px 100px] to [0px] at (0.75) should be [-25px -12.5px 25px]
Fail CSS Transitions: property <translate> from [-100px -50px 100px] to [0px] at (1) should be [0px]
Fail CSS Transitions: property <translate> from [-100px -50px 100px] to [0px] at (2) should be [100px 50px -100px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px 100px] to [0px] at (-1) should be [-200px -100px 200px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px 100px] to [0px] at (0) should be [-100px -50px 100px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px 100px] to [0px] at (0.25) should be [-75px -37.5px 75px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px 100px] to [0px] at (0.75) should be [-25px -12.5px 25px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px 100px] to [0px] at (1) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from [-100px -50px 100px] to [0px] at (2) should be [100px 50px -100px]
Fail CSS Animations: property <translate> from [-100px -50px 100px] to [0px] at (-1) should be [-200px -100px 200px]
Fail CSS Animations: property <translate> from [-100px -50px 100px] to [0px] at (0) should be [-100px -50px 100px]
Fail CSS Animations: property <translate> from [-100px -50px 100px] to [0px] at (0.25) should be [-75px -37.5px 75px]
Fail CSS Animations: property <translate> from [-100px -50px 100px] to [0px] at (0.75) should be [-25px -12.5px 25px]
Fail CSS Animations: property <translate> from [-100px -50px 100px] to [0px] at (1) should be [0px]
Fail CSS Animations: property <translate> from [-100px -50px 100px] to [0px] at (2) should be [100px 50px -100px]
Fail Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (-1) should be [-200px -100px 200px]
Fail Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (0) should be [-100px -50px 100px]
Fail Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (0.25) should be [-75px -37.5px 75px]
Fail Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (0.75) should be [-25px -12.5px 25px]
Fail Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (1) should be [0px]
Fail Web Animations: property <translate> from [-100px -50px 100px] to [0px] at (2) should be [100px 50px -100px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail CSS Transitions: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail CSS Transitions with transition: all: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail CSS Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]
Fail Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]
Fail CSS Transitions: property <translate> from [none] to [none] at (-1) should be [none]
Fail CSS Transitions: property <translate> from [none] to [none] at (0) should be [none]
Fail CSS Transitions: property <translate> from [none] to [none] at (0.125) should be [none]
Fail CSS Transitions: property <translate> from [none] to [none] at (0.875) should be [none]
Fail CSS Transitions: property <translate> from [none] to [none] at (1) should be [none]
Fail CSS Transitions: property <translate> from [none] to [none] at (2) should be [none]
Fail CSS Transitions with transition: all: property <translate> from [none] to [none] at (-1) should be [none]
Fail CSS Transitions with transition: all: property <translate> from [none] to [none] at (0) should be [none]
Fail CSS Transitions with transition: all: property <translate> from [none] to [none] at (0.125) should be [none]
Fail CSS Transitions with transition: all: property <translate> from [none] to [none] at (0.875) should be [none]
Fail CSS Transitions with transition: all: property <translate> from [none] to [none] at (1) should be [none]
Fail CSS Transitions with transition: all: property <translate> from [none] to [none] at (2) should be [none]
Fail CSS Animations: property <translate> from [none] to [none] at (-1) should be [none]
Fail CSS Animations: property <translate> from [none] to [none] at (0) should be [none]
Fail CSS Animations: property <translate> from [none] to [none] at (0.125) should be [none]
Fail CSS Animations: property <translate> from [none] to [none] at (0.875) should be [none]
Fail CSS Animations: property <translate> from [none] to [none] at (1) should be [none]
Fail CSS Animations: property <translate> from [none] to [none] at (2) should be [none]
Fail Web Animations: property <translate> from [none] to [none] at (-1) should be [none]
Fail Web Animations: property <translate> from [none] to [none] at (0) should be [none]
Fail Web Animations: property <translate> from [none] to [none] at (0.125) should be [none]
Fail Web Animations: property <translate> from [none] to [none] at (0.875) should be [none]
Fail Web Animations: property <translate> from [none] to [none] at (1) should be [none]
Fail Web Animations: property <translate> from [none] to [none] at (2) should be [none]
Fail CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px]
Fail CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (0) should be [0px 0%]
Fail CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px]
Fail CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px]
Fail CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px]
Fail CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px]
Fail CSS Transitions with transition: all: property <translate> from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px]
Fail CSS Transitions with transition: all: property <translate> from [none] to [8px 80% 800px] at (0) should be [0px 0%]
Fail CSS Transitions with transition: all: property <translate> from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px]
Fail CSS Transitions with transition: all: property <translate> from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px]
Fail CSS Transitions with transition: all: property <translate> from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px]
Fail CSS Transitions with transition: all: property <translate> from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px]
Fail CSS Animations: property <translate> from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px]
Fail CSS Animations: property <translate> from [none] to [8px 80% 800px] at (0) should be [0px 0%]
Fail CSS Animations: property <translate> from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px]
Fail CSS Animations: property <translate> from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px]
Fail CSS Animations: property <translate> from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px]
Fail CSS Animations: property <translate> from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px]
Fail Web Animations: property <translate> from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px]
Fail Web Animations: property <translate> from [none] to [8px 80% 800px] at (0) should be [0px 0%]
Fail Web Animations: property <translate> from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px]
Fail Web Animations: property <translate> from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px]
Fail Web Animations: property <translate> from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px]
Fail Web Animations: property <translate> from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px]
Fail CSS Transitions: property <translate> from neutral to [20px] at (-1) should be [0px]
Fail CSS Transitions: property <translate> from neutral to [20px] at (0) should be [10px]
Fail CSS Transitions: property <translate> from neutral to [20px] at (0.25) should be [12.5px]
Fail CSS Transitions: property <translate> from neutral to [20px] at (0.75) should be [17.5px]
Fail CSS Transitions: property <translate> from neutral to [20px] at (1) should be [20px]
Fail CSS Transitions: property <translate> from neutral to [20px] at (2) should be [30px]
Fail CSS Transitions with transition: all: property <translate> from neutral to [20px] at (-1) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from neutral to [20px] at (0) should be [10px]
Fail CSS Transitions with transition: all: property <translate> from neutral to [20px] at (0.25) should be [12.5px]
Fail CSS Transitions with transition: all: property <translate> from neutral to [20px] at (0.75) should be [17.5px]
Fail CSS Transitions with transition: all: property <translate> from neutral to [20px] at (1) should be [20px]
Fail CSS Transitions with transition: all: property <translate> from neutral to [20px] at (2) should be [30px]
Fail CSS Animations: property <translate> from neutral to [20px] at (-1) should be [0px]
Fail CSS Animations: property <translate> from neutral to [20px] at (0) should be [10px]
Fail CSS Animations: property <translate> from neutral to [20px] at (0.25) should be [12.5px]
Fail CSS Animations: property <translate> from neutral to [20px] at (0.75) should be [17.5px]
Fail CSS Animations: property <translate> from neutral to [20px] at (1) should be [20px]
Fail CSS Animations: property <translate> from neutral to [20px] at (2) should be [30px]
Fail Web Animations: property <translate> from neutral to [20px] at (-1) should be [0px]
Fail Web Animations: property <translate> from neutral to [20px] at (0) should be [10px]
Fail Web Animations: property <translate> from neutral to [20px] at (0.25) should be [12.5px]
Fail Web Animations: property <translate> from neutral to [20px] at (0.75) should be [17.5px]
Fail Web Animations: property <translate> from neutral to [20px] at (1) should be [20px]
Fail Web Animations: property <translate> from neutral to [20px] at (2) should be [30px]
Fail CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (-1) should be [-200px -100px -200px]
Fail CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (0) should be [0px]
Fail CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (0.25) should be [50px 25px 50px]
Fail CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (0.75) should be [150px 75px 150px]
Fail CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (2) should be [400px 200px 400px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [200px 100px 200px] at (-1) should be [-200px -100px -200px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [200px 100px 200px] at (0) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [200px 100px 200px] at (0.25) should be [50px 25px 50px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [200px 100px 200px] at (0.75) should be [150px 75px 150px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [200px 100px 200px] at (2) should be [400px 200px 400px]
Fail CSS Animations: property <translate> from [initial] to [200px 100px 200px] at (-1) should be [-200px -100px -200px]
Fail CSS Animations: property <translate> from [initial] to [200px 100px 200px] at (0) should be [0px]
Fail CSS Animations: property <translate> from [initial] to [200px 100px 200px] at (0.25) should be [50px 25px 50px]
Fail CSS Animations: property <translate> from [initial] to [200px 100px 200px] at (0.75) should be [150px 75px 150px]
Fail CSS Animations: property <translate> from [initial] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail CSS Animations: property <translate> from [initial] to [200px 100px 200px] at (2) should be [400px 200px 400px]
Fail Web Animations: property <translate> from [initial] to [200px 100px 200px] at (-1) should be [-200px -100px -200px]
Fail Web Animations: property <translate> from [initial] to [200px 100px 200px] at (0) should be [0px]
Fail Web Animations: property <translate> from [initial] to [200px 100px 200px] at (0.25) should be [50px 25px 50px]
Fail Web Animations: property <translate> from [initial] to [200px 100px 200px] at (0.75) should be [150px 75px 150px]
Fail Web Animations: property <translate> from [initial] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail Web Animations: property <translate> from [initial] to [200px 100px 200px] at (2) should be [400px 200px 400px]
Fail CSS Transitions: property <translate> from [200px 100px 400px] to [initial] at (-1) should be [400px 200px 800px]
Fail CSS Transitions: property <translate> from [200px 100px 400px] to [initial] at (0) should be [200px 100px 400px]
Fail CSS Transitions: property <translate> from [200px 100px 400px] to [initial] at (0.25) should be [150px 75px 300px]
Fail CSS Transitions: property <translate> from [200px 100px 400px] to [initial] at (0.75) should be [50px 25px 100px]
Fail CSS Transitions: property <translate> from [200px 100px 400px] to [initial] at (1) should be [0px]
Fail CSS Transitions: property <translate> from [200px 100px 400px] to [initial] at (2) should be [-200px -100px -400px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 400px] to [initial] at (-1) should be [400px 200px 800px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 400px] to [initial] at (0) should be [200px 100px 400px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 400px] to [initial] at (0.25) should be [150px 75px 300px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 400px] to [initial] at (0.75) should be [50px 25px 100px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 400px] to [initial] at (1) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 400px] to [initial] at (2) should be [-200px -100px -400px]
Fail CSS Animations: property <translate> from [200px 100px 400px] to [initial] at (-1) should be [400px 200px 800px]
Fail CSS Animations: property <translate> from [200px 100px 400px] to [initial] at (0) should be [200px 100px 400px]
Fail CSS Animations: property <translate> from [200px 100px 400px] to [initial] at (0.25) should be [150px 75px 300px]
Fail CSS Animations: property <translate> from [200px 100px 400px] to [initial] at (0.75) should be [50px 25px 100px]
Fail CSS Animations: property <translate> from [200px 100px 400px] to [initial] at (1) should be [0px]
Fail CSS Animations: property <translate> from [200px 100px 400px] to [initial] at (2) should be [-200px -100px -400px]
Fail Web Animations: property <translate> from [200px 100px 400px] to [initial] at (-1) should be [400px 200px 800px]
Fail Web Animations: property <translate> from [200px 100px 400px] to [initial] at (0) should be [200px 100px 400px]
Fail Web Animations: property <translate> from [200px 100px 400px] to [initial] at (0.25) should be [150px 75px 300px]
Fail Web Animations: property <translate> from [200px 100px 400px] to [initial] at (0.75) should be [50px 25px 100px]
Fail Web Animations: property <translate> from [200px 100px 400px] to [initial] at (1) should be [0px]
Fail Web Animations: property <translate> from [200px 100px 400px] to [initial] at (2) should be [-200px -100px -400px]
Fail CSS Transitions: property <translate> from [unset] to [20px] at (-1) should be [-20px]
Fail CSS Transitions: property <translate> from [unset] to [20px] at (0) should be [0px]
Fail CSS Transitions: property <translate> from [unset] to [20px] at (0.25) should be [5px]
Fail CSS Transitions: property <translate> from [unset] to [20px] at (0.75) should be [15px]
Fail CSS Transitions: property <translate> from [unset] to [20px] at (1) should be [20px]
Fail CSS Transitions: property <translate> from [unset] to [20px] at (2) should be [40px]
Fail CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (-1) should be [-20px]
Fail CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (0) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (0.25) should be [5px]
Fail CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (0.75) should be [15px]
Fail CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (1) should be [20px]
Fail CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (2) should be [40px]
Fail CSS Animations: property <translate> from [unset] to [20px] at (-1) should be [-20px]
Fail CSS Animations: property <translate> from [unset] to [20px] at (0) should be [0px]
Fail CSS Animations: property <translate> from [unset] to [20px] at (0.25) should be [5px]
Fail CSS Animations: property <translate> from [unset] to [20px] at (0.75) should be [15px]
Fail CSS Animations: property <translate> from [unset] to [20px] at (1) should be [20px]
Fail CSS Animations: property <translate> from [unset] to [20px] at (2) should be [40px]
Fail Web Animations: property <translate> from [unset] to [20px] at (-1) should be [-20px]
Fail Web Animations: property <translate> from [unset] to [20px] at (0) should be [0px]
Fail Web Animations: property <translate> from [unset] to [20px] at (0.25) should be [5px]
Fail Web Animations: property <translate> from [unset] to [20px] at (0.75) should be [15px]
Fail Web Animations: property <translate> from [unset] to [20px] at (1) should be [20px]
Fail Web Animations: property <translate> from [unset] to [20px] at (2) should be [40px]
Fail CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (-1) should be [0px 300px 400px]
Fail CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (0) should be [100px 200px 300px]
Fail CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (0.25) should be [125px 175px 275px]
Fail CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (0.75) should be [175px 125px 225px]
Fail CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (2) should be [300px 0px 100px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [200px 100px 200px] at (-1) should be [0px 300px 400px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [200px 100px 200px] at (0) should be [100px 200px 300px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [200px 100px 200px] at (0.25) should be [125px 175px 275px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [200px 100px 200px] at (0.75) should be [175px 125px 225px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [200px 100px 200px] at (2) should be [300px 0px 100px]
Fail CSS Animations: property <translate> from [inherit] to [200px 100px 200px] at (-1) should be [0px 300px 400px]
Fail CSS Animations: property <translate> from [inherit] to [200px 100px 200px] at (0) should be [100px 200px 300px]
Fail CSS Animations: property <translate> from [inherit] to [200px 100px 200px] at (0.25) should be [125px 175px 275px]
Fail CSS Animations: property <translate> from [inherit] to [200px 100px 200px] at (0.75) should be [175px 125px 225px]
Fail CSS Animations: property <translate> from [inherit] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail CSS Animations: property <translate> from [inherit] to [200px 100px 200px] at (2) should be [300px 0px 100px]
Fail Web Animations: property <translate> from [inherit] to [200px 100px 200px] at (-1) should be [0px 300px 400px]
Fail Web Animations: property <translate> from [inherit] to [200px 100px 200px] at (0) should be [100px 200px 300px]
Fail Web Animations: property <translate> from [inherit] to [200px 100px 200px] at (0.25) should be [125px 175px 275px]
Fail Web Animations: property <translate> from [inherit] to [200px 100px 200px] at (0.75) should be [175px 125px 225px]
Fail Web Animations: property <translate> from [inherit] to [200px 100px 200px] at (1) should be [200px 100px 200px]
Fail Web Animations: property <translate> from [inherit] to [200px 100px 200px] at (2) should be [300px 0px 100px]
Fail CSS Transitions: property <translate> from [200px 100px 200px] to [inherit] at (-1) should be [300px 0px 100px]
Fail CSS Transitions: property <translate> from [200px 100px 200px] to [inherit] at (0) should be [200px 100px 200px]
Fail CSS Transitions: property <translate> from [200px 100px 200px] to [inherit] at (0.25) should be [175px 125px 225px]
Fail CSS Transitions: property <translate> from [200px 100px 200px] to [inherit] at (0.75) should be [125px 175px 275px]
Fail CSS Transitions: property <translate> from [200px 100px 200px] to [inherit] at (1) should be [100px 200px 300px]
Fail CSS Transitions: property <translate> from [200px 100px 200px] to [inherit] at (2) should be [0px 300px 400px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 200px] to [inherit] at (-1) should be [300px 0px 100px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 200px] to [inherit] at (0) should be [200px 100px 200px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 200px] to [inherit] at (0.25) should be [175px 125px 225px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 200px] to [inherit] at (0.75) should be [125px 175px 275px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 200px] to [inherit] at (1) should be [100px 200px 300px]
Fail CSS Transitions with transition: all: property <translate> from [200px 100px 200px] to [inherit] at (2) should be [0px 300px 400px]
Fail CSS Animations: property <translate> from [200px 100px 200px] to [inherit] at (-1) should be [300px 0px 100px]
Fail CSS Animations: property <translate> from [200px 100px 200px] to [inherit] at (0) should be [200px 100px 200px]
Fail CSS Animations: property <translate> from [200px 100px 200px] to [inherit] at (0.25) should be [175px 125px 225px]
Fail CSS Animations: property <translate> from [200px 100px 200px] to [inherit] at (0.75) should be [125px 175px 275px]
Fail CSS Animations: property <translate> from [200px 100px 200px] to [inherit] at (1) should be [100px 200px 300px]
Fail CSS Animations: property <translate> from [200px 100px 200px] to [inherit] at (2) should be [0px 300px 400px]
Fail Web Animations: property <translate> from [200px 100px 200px] to [inherit] at (-1) should be [300px 0px 100px]
Fail Web Animations: property <translate> from [200px 100px 200px] to [inherit] at (0) should be [200px 100px 200px]
Fail Web Animations: property <translate> from [200px 100px 200px] to [inherit] at (0.25) should be [175px 125px 225px]
Fail Web Animations: property <translate> from [200px 100px 200px] to [inherit] at (0.75) should be [125px 175px 275px]
Fail Web Animations: property <translate> from [200px 100px 200px] to [inherit] at (1) should be [100px 200px 300px]
Fail Web Animations: property <translate> from [200px 100px 200px] to [inherit] at (2) should be [0px 300px 400px]
Fail CSS Transitions: property <translate> from [initial] to [inherit] at (-1) should be [-100px -200px -300px]
Fail CSS Transitions: property <translate> from [initial] to [inherit] at (0) should be [0px]
Fail CSS Transitions: property <translate> from [initial] to [inherit] at (0.25) should be [25px 50px 75px]
Fail CSS Transitions: property <translate> from [initial] to [inherit] at (0.75) should be [75px 150px 225px]
Fail CSS Transitions: property <translate> from [initial] to [inherit] at (1) should be [100px 200px 300px]
Fail CSS Transitions: property <translate> from [initial] to [inherit] at (2) should be [200px 400px 600px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [inherit] at (-1) should be [-100px -200px -300px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [inherit] at (0) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [inherit] at (0.25) should be [25px 50px 75px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [inherit] at (0.75) should be [75px 150px 225px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [inherit] at (1) should be [100px 200px 300px]
Fail CSS Transitions with transition: all: property <translate> from [initial] to [inherit] at (2) should be [200px 400px 600px]
Fail CSS Animations: property <translate> from [initial] to [inherit] at (-1) should be [-100px -200px -300px]
Fail CSS Animations: property <translate> from [initial] to [inherit] at (0) should be [0px]
Fail CSS Animations: property <translate> from [initial] to [inherit] at (0.25) should be [25px 50px 75px]
Fail CSS Animations: property <translate> from [initial] to [inherit] at (0.75) should be [75px 150px 225px]
Fail CSS Animations: property <translate> from [initial] to [inherit] at (1) should be [100px 200px 300px]
Fail CSS Animations: property <translate> from [initial] to [inherit] at (2) should be [200px 400px 600px]
Fail Web Animations: property <translate> from [initial] to [inherit] at (-1) should be [-100px -200px -300px]
Fail Web Animations: property <translate> from [initial] to [inherit] at (0) should be [0px]
Fail Web Animations: property <translate> from [initial] to [inherit] at (0.25) should be [25px 50px 75px]
Fail Web Animations: property <translate> from [initial] to [inherit] at (0.75) should be [75px 150px 225px]
Fail Web Animations: property <translate> from [initial] to [inherit] at (1) should be [100px 200px 300px]
Fail Web Animations: property <translate> from [initial] to [inherit] at (2) should be [200px 400px 600px]
Fail CSS Transitions: property <translate> from [inherit] to [initial] at (-1) should be [200px 400px 600px]
Fail CSS Transitions: property <translate> from [inherit] to [initial] at (0) should be [100px 200px 300px]
Fail CSS Transitions: property <translate> from [inherit] to [initial] at (0.25) should be [75px 150px 225px]
Fail CSS Transitions: property <translate> from [inherit] to [initial] at (0.75) should be [25px 50px 75px]
Fail CSS Transitions: property <translate> from [inherit] to [initial] at (1) should be [0px]
Fail CSS Transitions: property <translate> from [inherit] to [initial] at (2) should be [-100px -200px -300px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [initial] at (-1) should be [200px 400px 600px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [initial] at (0) should be [100px 200px 300px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [initial] at (0.25) should be [75px 150px 225px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [initial] at (0.75) should be [25px 50px 75px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [initial] at (1) should be [0px]
Fail CSS Transitions with transition: all: property <translate> from [inherit] to [initial] at (2) should be [-100px -200px -300px]
Fail CSS Animations: property <translate> from [inherit] to [initial] at (-1) should be [200px 400px 600px]
Fail CSS Animations: property <translate> from [inherit] to [initial] at (0) should be [100px 200px 300px]
Fail CSS Animations: property <translate> from [inherit] to [initial] at (0.25) should be [75px 150px 225px]
Fail CSS Animations: property <translate> from [inherit] to [initial] at (0.75) should be [25px 50px 75px]
Fail CSS Animations: property <translate> from [inherit] to [initial] at (1) should be [0px]
Fail CSS Animations: property <translate> from [inherit] to [initial] at (2) should be [-100px -200px -300px]
Fail Web Animations: property <translate> from [inherit] to [initial] at (-1) should be [200px 400px 600px]
Fail Web Animations: property <translate> from [inherit] to [initial] at (0) should be [100px 200px 300px]
Fail Web Animations: property <translate> from [inherit] to [initial] at (0.25) should be [75px 150px 225px]
Fail Web Animations: property <translate> from [inherit] to [initial] at (0.75) should be [25px 50px 75px]
Fail Web Animations: property <translate> from [inherit] to [initial] at (1) should be [0px]
Fail Web Animations: property <translate> from [inherit] to [initial] at (2) should be [-100px -200px -300px]

27
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/rotate-parsing-computed.txt Normal file
View file

@ -0,0 +1,27 @@
Summary
Harness status: OK
Rerun
Found 17 tests
17 Pass
Details
Result Test Name MessagePass Property rotate value 'none'
Pass Property rotate value '0deg'
Pass Property rotate value '100 200 300 400grad'
Pass Property rotate value '400grad 100 200 300'
Pass Property rotate value '0 0 0 400grad'
Pass Property rotate value 'x 400grad'
Pass Property rotate value '400grad x'
Pass Property rotate value '0.5 0 0 400grad'
Pass Property rotate value '1 0 0 400grad'
Pass Property rotate value 'y 400grad'
Pass Property rotate value '400grad y'
Pass Property rotate value '0 0.5 0 400grad'
Pass Property rotate value '0 1 0 400grad'
Pass Property rotate value '400grad'
Pass Property rotate value '400grad z'
Pass Property rotate value '0 0 0.5 400grad'
Pass Property rotate value '0 0 1 400grad'

19
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/rotate-parsing-invalid.txt Normal file
View file

@ -0,0 +1,19 @@
Summary
Harness status: OK
Rerun
Found 9 tests
9 Pass
Details
Result Test Name MessagePass e.style['rotate'] = "100px" should not set the property value
Pass e.style['rotate'] = "100 400deg" should not set the property value
Pass e.style['rotate'] = "100 200 400deg" should not set the property value
Pass e.style['rotate'] = "100 200 300 500 400deg" should not set the property value
Pass e.style['rotate'] = "x y 45deg" should not set the property value
Pass e.style['rotate'] = "45deg x y" should not set the property value
Pass e.style['rotate'] = "z" should not set the property value
Pass e.style['rotate'] = "1 2" should not set the property value
Pass e.style['rotate'] = "1 2 3" should not set the property value

28
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/rotate-parsing-valid.txt Normal file
View file

@ -0,0 +1,28 @@
Summary
Harness status: OK
Rerun
Found 17 tests
2 Pass
15 Fail
Details
Result Test Name MessagePass e.style['rotate'] = "none" should set the property value
Pass e.style['rotate'] = "0deg" should set the property value
Fail e.style['rotate'] = "100 200 300 400grad" should set the property value
Fail e.style['rotate'] = "400grad 100 200 300" should set the property value
Fail e.style['rotate'] = "0 0 0 400grad" should set the property value
Fail e.style['rotate'] = "x 400grad" should set the property value
Fail e.style['rotate'] = "400grad x" should set the property value
Fail e.style['rotate'] = "0.5 0 0 400grad" should set the property value
Fail e.style['rotate'] = "1 0 0 400grad" should set the property value
Fail e.style['rotate'] = "y 400grad" should set the property value
Fail e.style['rotate'] = "400grad y" should set the property value
Fail e.style['rotate'] = "0 0.5 0 400grad" should set the property value
Fail e.style['rotate'] = "0 1 0 400grad" should set the property value
Fail e.style['rotate'] = "400grad" should set the property value
Fail e.style['rotate'] = "400grad z" should set the property value
Fail e.style['rotate'] = "0 0 0.5 400grad" should set the property value
Fail e.style['rotate'] = "0 0 1 400grad" should set the property value

32
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/scale-parsing-computed.txt Normal file
View file

@ -0,0 +1,32 @@
Summary
Harness status: OK
Rerun
Found 22 tests
22 Fail
Details
Result Test Name MessageFail Property scale value 'none'
Fail Property scale value '1'
Fail Property scale value '1%'
Fail Property scale value '100'
Fail Property scale value '100%'
Fail Property scale value '100 100'
Fail Property scale value '100% 100%'
Fail Property scale value '100 100 1'
Fail Property scale value '100% 100% 1'
Fail Property scale value '-100'
Fail Property scale value '-100%'
Fail Property scale value '-100 -100'
Fail Property scale value '-100% -100%'
Fail Property scale value '-100 -100 1'
Fail Property scale value '-100% -100% 1'
Fail Property scale value '100 200'
Fail Property scale value '100% 200%'
Fail Property scale value '100 200 1'
Fail Property scale value '100% 200% 1'
Fail Property scale value '100 200 300'
Fail Property scale value '100 100 2'
Fail Property scale value '100% 200% 300%'

15
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/scale-parsing-invalid.txt Normal file
View file

@ -0,0 +1,15 @@
Summary
Harness status: OK
Rerun
Found 5 tests
5 Pass
Details
Result Test Name MessagePass e.style['scale'] = "100px" should not set the property value
Pass e.style['scale'] = "100 200 300 400" should not set the property value
Pass e.style['scale'] = "1 junk" should not set the property value
Pass e.style['scale'] = "1 2 junk" should not set the property value
Pass e.style['scale'] = "1 2 3 junk" should not set the property value

32
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/scale-parsing-valid.txt Normal file
View file

@ -0,0 +1,32 @@
Summary
Harness status: OK
Rerun
Found 22 tests
22 Fail
Details
Result Test Name MessageFail e.style['scale'] = "none" should set the property value
Fail e.style['scale'] = "1" should set the property value
Fail e.style['scale'] = "1%" should set the property value
Fail e.style['scale'] = "100" should set the property value
Fail e.style['scale'] = "100%" should set the property value
Fail e.style['scale'] = "100 100" should set the property value
Fail e.style['scale'] = "100% 100%" should set the property value
Fail e.style['scale'] = "100 100 1" should set the property value
Fail e.style['scale'] = "100% 100% 1" should set the property value
Fail e.style['scale'] = "-100" should set the property value
Fail e.style['scale'] = "-100%" should set the property value
Fail e.style['scale'] = "-100 -100" should set the property value
Fail e.style['scale'] = "-100% -100%" should set the property value
Fail e.style['scale'] = "-100 -100 1" should set the property value
Fail e.style['scale'] = "-100% -100% 1" should set the property value
Fail e.style['scale'] = "100 200" should set the property value
Fail e.style['scale'] = "100% 200%" should set the property value
Fail e.style['scale'] = "100 200 1" should set the property value
Fail e.style['scale'] = "100% 200% 1" should set the property value
Fail e.style['scale'] = "100 200 300" should set the property value
Fail e.style['scale'] = "100 100 2" should set the property value
Fail e.style['scale'] = "100% 200% 300%" should set the property value

29
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-computed.txt Normal file
View file

@ -0,0 +1,29 @@
Summary
Harness status: OK
Rerun
Found 19 tests
19 Fail
Details
Result Test Name MessageFail Property translate value 'none'
Fail Property translate value '0px'
Fail Property translate value '100%'
Fail Property translate value '100px 0px'
Fail Property translate value '100px 0.1px'
Fail Property translate value '100px 0%'
Fail Property translate value '100px calc(10px - 10%)'
Fail Property translate value '100px 200%'
Fail Property translate value '100% 200px'
Fail Property translate value '100px 200px 0px'
Fail Property translate value '100px 0px 300px'
Fail Property translate value '100px 0px 0px'
Fail Property translate value '100px 200px 300px'
Fail Property translate value '100% 200% 300px'
Fail Property translate value '100% 0% 200px'
Fail Property translate value '0% 0% 100px'
Fail Property translate value '0em 0em 100px'
Fail Property translate value '0'
Fail Property translate value '1px 2px 0'

16
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-invalid.txt Normal file
View file

@ -0,0 +1,16 @@
Summary
Harness status: OK
Rerun
Found 6 tests
6 Pass
Details
Result Test Name MessagePass e.style['translate'] = "100deg" should not set the property value
Pass e.style['translate'] = "100px 200px 300%" should not set the property value
Pass e.style['translate'] = "100px 200px calc(30px + 30%)" should not set the property value
Pass e.style['translate'] = "100px junk" should not set the property value
Pass e.style['translate'] = "100px 200px junk" should not set the property value
Pass e.style['translate'] = "100px 200px 300px junk" should not set the property value

30
Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-valid.txt Normal file
View file

@ -0,0 +1,30 @@
Summary
Harness status: OK
Rerun
Found 20 tests
20 Fail
Details
Result Test Name MessageFail e.style['translate'] = "none" should set the property value
Fail e.style['translate'] = "0px" should set the property value
Fail e.style['translate'] = "100%" should set the property value
Fail e.style['translate'] = "100px 0px" should set the property value
Fail e.style['translate'] = "100px 0.1px" should set the property value
Fail e.style['translate'] = "100px 0%" should set the property value
Fail e.style['translate'] = "100px calc(10px - 10%)" should set the property value
Fail e.style['translate'] = "100px 200%" should set the property value
Fail e.style['translate'] = "100% 200px" should set the property value
Fail e.style['translate'] = "100px 200px 0px" should set the property value
Fail e.style['translate'] = "100px 0px 300px" should set the property value
Fail e.style['translate'] = "100px 0px 0px" should set the property value
Fail e.style['translate'] = "100px 200px 300px" should set the property value
Fail e.style['translate'] = "100% 200% 300px" should set the property value
Fail e.style['translate'] = "100% 0% 200px" should set the property value
Fail e.style['translate'] = "0% 0% 100px" should set the property value
Fail e.style['translate'] = "0em 0em 100px" should set the property value
Fail e.style['translate'] = "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)" should set the property value
Fail e.style['translate'] = "0" should set the property value
Fail e.style['translate'] = "1px 2px 0" should set the property value

271
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/animation/translate-interpolation.html Normal file
View file

@ -0,0 +1,271 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>translate interpolation</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<meta name="assert" content="translate supports <length> and <percentage> animation.">
<meta name="timeout" content="long">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/interpolation-testcommon.js"></script>
<style>
.parent {
translate: 100px 200px 300px;
}
.target {
width: 100px;
height: 100px;
background-color: black;
translate: 10px;
}
.expected {
background-color: green;
}
</style>
</head>
<body>
<template id="target-template">
<div class="parent">
<div class="target"></div>
</div>
</template>
<script>
// Matching one-length (pixels) animation.
test_interpolation({
property: 'translate',
from: '-100px',
to: '100px',
}, [
{at: -1, expect: '-300px'},
{at: 0, expect: '-100px'},
{at: 0.25, expect: '-50px'},
{at: 0.75, expect: '50px'},
{at: 1, expect: '100px'},
{at: 2, expect: '300px'},
]);
// Matching one-length (percentage) animation.
test_interpolation({
property: 'translate',
from: '-100%',
to: '100%',
}, [
{at: -1, expect: '-300%'},
{at: 0, expect: '-100%'},
{at: 0.25, expect: '-50%'},
{at: 0.75, expect: '50%'},
{at: 1, expect: '100%'},
{at: 2, expect: '300%'},
]);
// Matching two-length (all pixels) animation.
test_interpolation({
property: 'translate',
from: '-100px -50px',
to: '100px 50px',
}, [
{at: -1, expect: '-300px -150px'},
{at: 0, expect: '-100px -50px'},
{at: 0.25, expect: '-50px -25px'},
{at: 0.75, expect: '50px 25px'},
{at: 1, expect: '100px 50px'},
{at: 2, expect: '300px 150px'},
]);
// Matching three-length (all pixels) animation.
test_interpolation({
property: 'translate',
from: '220px 240px 260px',
to: '300px 400px 500px',
}, [
{at: -1, expect: '140px 80px 20px'},
{at: 0, expect: '220px 240px 260px'},
{at: 0.125, expect: '230px 260px 290px'},
{at: 0.875, expect: '290px 380px 470px'},
{at: 1, expect: '300px 400px 500px'},
{at: 2, expect: '380px 560px 740px'}
]);
// Going from one length to three lengths.
test_interpolation({
property: 'translate',
from: '0px',
to: '-100px -50px 100px',
}, [
{at: -1, expect: '100px 50px -100px'},
{at: 0, expect: '0px'},
{at: 0.25, expect: '-25px -12.5px 25px'},
{at: 0.75, expect: '-75px -37.5px 75px'},
{at: 1, expect: '-100px -50px 100px'},
{at: 2, expect: '-200px -100px 200px'},
]);
// Going from three lengths to one length.
test_interpolation({
property: 'translate',
from: '-100px -50px 100px',
to: '0px',
}, [
{at: -1, expect: '-200px -100px 200px'},
{at: 0, expect: '-100px -50px 100px'},
{at: 0.25, expect: '-75px -37.5px 75px'},
{at: 0.75, expect: '-25px -12.5px 25px'},
{at: 1, expect: '0px'},
{at: 2, expect: '100px 50px -100px'},
]);
// Going from three-lengths to two-percentages.
test_interpolation({
property: 'translate',
from: '480px 400px 320px',
to: '240% 160%',
}, [
{at: -1, expect: 'calc(960px - 240%) calc(800px - 160%) 640px'},
{at: 0, expect: 'calc(0% + 480px) calc(0% + 400px) 320px'},
{at: 0.125, expect: 'calc(420px + 30%) calc(350px + 20%) 280px'},
{at: 0.875, expect: 'calc(210% + 60px) calc(140% + 50px) 40px'},
{at: 1, expect: '240% 160%'},
{at: 2, expect: 'calc(480% - 480px) calc(320% - 400px) -320px'}
]);
// Handling of the none value.
test_interpolation({
property: 'translate',
from: 'none',
to: 'none',
}, [
{at: -1, expect: 'none'},
{at: 0, expect: 'none'},
{at: 0.125, expect: 'none'},
{at: 0.875, expect: 'none'},
{at: 1, expect: 'none'},
{at: 2, expect: 'none'}
]);
// Going from none to a valid value; test that it converts properly.
test_interpolation({
property: 'translate',
from: 'none',
to: '8px 80% 800px',
}, [
{at: -1, expect: '-8px -80% -800px'},
{at: 0, expect: '0px 0%'},
{at: 0.125, expect: '1px 10% 100px'},
{at: 0.875, expect: '7px 70% 700px'},
{at: 1, expect: '8px 80% 800px'},
{at: 2, expect: '16px 160% 1600px'}
]);
// Test neutral keyframe; make sure it adds the underlying.
test_interpolation({
property: 'translate',
from: neutralKeyframe,
to: '20px',
}, [
{at: -1, expect: '0px'},
{at: 0, expect: '10px'},
{at: 0.25, expect: '12.5px'},
{at: 0.75, expect: '17.5px'},
{at: 1, expect: '20px'},
{at: 2, expect: '30px'},
]);
// Test initial value; for 'scale' this is 'none'.
test_interpolation({
property: 'translate',
from: 'initial',
to: '200px 100px 200px',
}, [
{at: -1, expect: '-200px -100px -200px'},
{at: 0, expect: '0px'},
{at: 0.25, expect: '50px 25px 50px'},
{at: 0.75, expect: '150px 75px 150px'},
{at: 1, expect: '200px 100px 200px'},
{at: 2, expect: '400px 200px 400px'},
]);
test_interpolation({
property: 'translate',
from: '200px 100px 400px',
to: 'initial',
}, [
{at: -1, expect: '400px 200px 800px'},
{at: 0, expect: '200px 100px 400px'},
{at: 0.25, expect: '150px 75px 300px'},
{at: 0.75, expect: '50px 25px 100px'},
{at: 1, expect: '0px'},
{at: 2, expect: '-200px -100px -400px'},
]);
// Test unset value; for 'translate' this is 'none'.
test_interpolation({
property: 'translate',
from: 'unset',
to: '20px',
}, [
{at: -1, expect: '-20px'},
{at: 0, expect: '0px'},
{at: 0.25, expect: '5px'},
{at: 0.75, expect: '15px'},
{at: 1, expect: '20px'},
{at: 2, expect: '40px'},
]);
// Test inherited value.
test_interpolation({
property: 'translate',
from: 'inherit',
to: '200px 100px 200px',
}, [
{at: -1, expect: '0px 300px 400px'},
{at: 0, expect: '100px 200px 300px'},
{at: 0.25, expect: '125px 175px 275px'},
{at: 0.75, expect: '175px 125px 225px'},
{at: 1, expect: '200px 100px 200px'},
{at: 2, expect: '300px 0px 100px'},
]);
test_interpolation({
property: 'translate',
from: '200px 100px 200px',
to: 'inherit',
}, [
{at: -1, expect: '300px 0px 100px'},
{at: 0, expect: '200px 100px 200px'},
{at: 0.25, expect: '175px 125px 225px'},
{at: 0.75, expect: '125px 175px 275px'},
{at: 1, expect: '100px 200px 300px'},
{at: 2, expect: '0px 300px 400px'},
]);
// Test combination of initial and inherit.
test_interpolation({
property: 'translate',
from: 'initial',
to: 'inherit',
}, [
{at: -1, expect: '-100px -200px -300px'},
{at: 0, expect: '0px'},
{at: 0.25, expect: '25px 50px 75px'},
{at: 0.75, expect: '75px 150px 225px'},
{at: 1, expect: '100px 200px 300px'},
{at: 2, expect: '200px 400px 600px'},
]);
test_interpolation({
property: 'translate',
from: 'inherit',
to: 'initial',
}, [
{at: -1, expect: '200px 400px 600px'},
{at: 0, expect: '100px 200px 300px'},
{at: 0.25, expect: '75px 150px 225px'},
{at: 0.75, expect: '25px 50px 75px'},
{at: 1, expect: '0px'},
{at: 2, expect: '-100px -200px -300px'},
]);
</script>
</body>
</html>

47
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/rotate-parsing-computed.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: rotate computed values.</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
// https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization
// Serialize as the keyword none if and only if none was originally specified.
test_computed_value("rotate", "none");
// If a 2d rotation is specified, the property must serialize as just an <angle>.
test_computed_value("rotate", "0deg");
// If a 3d rotation is specified, the property must serialize with an axis specified.
test_computed_value("rotate", "100 200 300 400grad", "100 200 300 360deg");
test_computed_value("rotate", "400grad 100 200 300", "100 200 300 360deg");
test_computed_value("rotate", "0 0 0 400grad", "0 0 0 360deg");
// If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword.
test_computed_value("rotate", "x 400grad", "x 360deg");
test_computed_value("rotate", "400grad x", "x 360deg");
test_computed_value("rotate", "0.5 0 0 400grad", "x 360deg");
test_computed_value("rotate", "1 0 0 400grad", "x 360deg");
test_computed_value("rotate", "y 400grad", "y 360deg");
test_computed_value("rotate", "400grad y", "y 360deg");
test_computed_value("rotate", "0 0.5 0 400grad", "y 360deg");
test_computed_value("rotate", "0 1 0 400grad", "y 360deg");
// If the axis is parallel with the z axis the property must serialize as just an <angle>.
test_computed_value("rotate", "400grad", "360deg");
test_computed_value("rotate", "400grad z", "360deg");
test_computed_value("rotate", "0 0 0.5 400grad", "360deg");
test_computed_value("rotate", "0 0 1 400grad", "360deg");
</script>
</body>
</html>

27
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/rotate-parsing-invalid.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing rotate with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
<meta name="assert" content="rotate supports only the grammar 'none | <number>{3}? <angle>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("rotate", "100px");
test_invalid_value("rotate", "100 400deg");
test_invalid_value("rotate", "100 200 400deg");
test_invalid_value("rotate", "100 200 300 500 400deg");
test_invalid_value("rotate", "x y 45deg");
test_invalid_value("rotate", "45deg x y");
test_invalid_value("rotate", "z");
test_invalid_value("rotate", "1 2");
test_invalid_value("rotate", "1 2 3");
</script>
</body>
</html>

45
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/rotate-parsing-valid.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing rotate with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-rotate">
<meta name="assert" content="rotate supports the full grammar 'none | <number>{3}? <angle>'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
// https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization
// Serialize as the keyword none if and only if none was originally specified.
test_valid_value("rotate", "none");
// If a 2d rotation is specified, the property must serialize as just an <angle>.
test_valid_value("rotate", "0deg");
// If a 3d rotation is specified, the property must serialize with an axis specified.
test_valid_value("rotate", "100 200 300 400grad");
test_valid_value("rotate", "400grad 100 200 300", "100 200 300 400grad");
test_valid_value("rotate", "0 0 0 400grad", "0 0 0 400grad");
// If the axis is parallel with the x or y axis, it must serialize as the appropriate keyword.
test_valid_value("rotate", "x 400grad");
test_valid_value("rotate", "400grad x", "x 400grad");
test_valid_value("rotate", "0.5 0 0 400grad", "x 400grad");
test_valid_value("rotate", "1 0 0 400grad", "x 400grad");
test_valid_value("rotate", "y 400grad");
test_valid_value("rotate", "400grad y", "y 400grad");
test_valid_value("rotate", "0 0.5 0 400grad", "y 400grad");
test_valid_value("rotate", "0 1 0 400grad", "y 400grad");
// If the axis is parallel with the z axis the property must serialize as just an <angle>.
test_valid_value("rotate", "400grad");
test_valid_value("rotate", "400grad z", "400grad");
test_valid_value("rotate", "0 0 0.5 400grad", "400grad");
test_valid_value("rotate", "0 0 1 400grad", "400grad");
</script>
</body>
</html>

44
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/scale-parsing-computed.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: scale computed values.</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<meta name="assert" content="scale supports the full grammar 'none | <number>{1,3}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("scale", "none");
test_computed_value("scale", "1");
test_computed_value("scale", "1%", "0.01");
test_computed_value("scale", "100");
test_computed_value("scale", "100%", "1");
test_computed_value("scale", "100 100", "100");
test_computed_value("scale", "100% 100%", "1");
test_computed_value("scale", "100 100 1", "100");
test_computed_value("scale", "100% 100% 1", "1");
test_computed_value("scale", "-100");
test_computed_value("scale", "-100%", "-1");
test_computed_value("scale", "-100 -100", "-100");
test_computed_value("scale", "-100% -100%", "-1");
test_computed_value("scale", "-100 -100 1", "-100");
test_computed_value("scale", "-100% -100% 1", "-1");
test_computed_value("scale", "100 200");
test_computed_value("scale", "100% 200%", "1 2");
test_computed_value("scale", "100 200 1", "100 200");
test_computed_value("scale", "100% 200% 1", "1 2");
test_computed_value("scale", "100 200 300");
test_computed_value("scale", "100 100 2", "100 100 2");
test_computed_value("scale", "100% 200% 300%", "1 2 3");
</script>
</body>
</html>

23
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/scale-parsing-invalid.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing scale with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
<meta name="assert" content="scale supports only the grammar 'none | <number>{1,3}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("scale", "100px");
test_invalid_value("scale", "100 200 300 400");
test_invalid_value("scale", "1 junk");
test_invalid_value("scale", "1 2 junk");
test_invalid_value("scale", "1 2 3 junk");
</script>
</body>
</html>

42
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/scale-parsing-valid.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing scale with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-scale">
<meta name="assert" content="scale supports the full grammar 'none | <number>{1,3}'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("scale", "none");
test_valid_value("scale", "1");
test_valid_value("scale", "1%", "0.01");
test_valid_value("scale", "100");
test_valid_value("scale", "100%", "1");
test_valid_value("scale", "100 100", "100");
test_valid_value("scale", "100% 100%", "1");
test_valid_value("scale", "100 100 1", "100");
test_valid_value("scale", "100% 100% 1", "1");
test_valid_value("scale", "-100");
test_valid_value("scale", "-100%", "-1");
test_valid_value("scale", "-100 -100", "-100");
test_valid_value("scale", "-100% -100%", "-1");
test_valid_value("scale", "-100 -100 1", "-100");
test_valid_value("scale", "-100% -100% 1", "-1");
test_valid_value("scale", "100 200");
test_valid_value("scale", "100% 200%", "1 2");
test_valid_value("scale", "100 200 1", "100 200");
test_valid_value("scale", "100% 200% 1", "1 2");
test_valid_value("scale", "100 200 300");
test_valid_value("scale", "100 100 2", "100 100 2");
test_valid_value("scale", "100% 200% 300%", "1 2 3");
</script>
</body>
</html>

42
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/translate-parsing-computed.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: translate computed values.</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<meta name="assert" content="translate supports the full grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("translate", "none");
test_computed_value("translate", "0px");
test_computed_value("translate", "100%");
test_computed_value("translate", "100px 0px", "100px");
test_computed_value("translate", "100px 0.1px", "100px 0.1px");
test_computed_value("translate", "100px 0%");
test_computed_value("translate", "100px calc(10px - 10%)", "100px calc(-10% + 10px)");
test_computed_value("translate", "100px 200%");
test_computed_value("translate", "100% 200px");
test_computed_value("translate", "100px 200px 0px", "100px 200px");
test_computed_value("translate", "100px 0px 300px", "100px 0px 300px");
test_computed_value("translate", "100px 0px 0px", "100px");
test_computed_value("translate", "100px 200px 300px");
test_computed_value("translate", "100% 200% 300px");
test_computed_value("translate", "100% 0% 200px", "100% 0% 200px");
test_computed_value("translate", "0% 0% 100px", "0% 0% 100px");
test_computed_value("translate", "0em 0em 100px", "0px 0px 100px");
test_computed_value("translate", "0", "0px");
test_computed_value("translate", "1px 2px 0", "1px 2px");
</script>
</body>
</html>

24
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/translate-parsing-invalid.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing translate with invalid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<meta name="assert" content="translate supports only the grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_invalid_value("translate", "100deg");
test_invalid_value("translate", "100px 200px 300%");
test_invalid_value("translate", "100px 200px calc(30px + 30%)");
test_invalid_value("translate", "100px junk");
test_invalid_value("translate", "100px 200px junk");
test_invalid_value("translate", "100px 200px 300px junk");
</script>
</body>
</html>

42
Tests/LibWeb/Text/input/wpt-import/css/css-transforms/parsing/translate-parsing-valid.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transform Module Level 2: parsing translate with valid values</title>
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
<meta name="assert" content="translate supports the full grammar 'none | <length-percentage> [ <length-percentage> <length>? ]?'.">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../css/support/parsing-testcommon.js"></script>
</head>
<body>
<script>
test_valid_value("translate", "none");
test_valid_value("translate", "0px");
test_valid_value("translate", "100%");
test_valid_value("translate", "100px 0px", "100px");
test_valid_value("translate", "100px 0.1px", "100px 0.1px");
test_valid_value("translate", "100px 0%");
test_valid_value("translate", "100px calc(10px - 10%)", "100px calc(-10% + 10px)");
test_valid_value("translate", "100px 200%");
test_valid_value("translate", "100% 200px");
test_valid_value("translate", "100px 200px 0px", "100px 200px");
test_valid_value("translate", "100px 0px 300px", "100px 0px 300px");
test_valid_value("translate", "100px 0px 0px", "100px");
test_valid_value("translate", "100px 200px 300px");
test_valid_value("translate", "100% 200% 300px");
test_valid_value("translate", "100% 0% 200px", "100% 0% 200px");
test_valid_value("translate", "0% 0% 100px", "0% 0% 100px");
test_valid_value("translate", "0em 0em 100px", "0em 0em 100px");
test_valid_value("translate", "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)");
test_valid_value("translate", "0", "0px");
test_valid_value("translate", "1px 2px 0", "1px 2px");
</script>
</body>
</html>