mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="match" href="2d-rotate-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=87-159;totalPixels=643-1193">
|
||||
<meta name="fuzzy" content="maxDifference=87-159;totalPixels=643-1290">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="asserting that you can rotate an element with CSS">
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test (Transforms): Transform and perspective with w negative</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Google" href="http://www.google.com/">
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: rotateY(44deg);
|
||||
background: fuchsia;
|
||||
transform-origin: 100px 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Test (Transforms): Transform and perspective with w negative</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Google" href="http://www.google.com/">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=696374">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="match" href="rotate-animation-with-will-change-transform-001-ref.html">
|
||||
|
||||
<!--
|
||||
|
||||
This is a simplified version of one case within the Blink web test
|
||||
virtual/threaded-no-composited-antialiasing/animations/composited-animations-rotate-zero-degrees.html
|
||||
but with will-change: transform added, so that it fails with the bug
|
||||
that is introduced in the intermediate state of fixing
|
||||
https://bugs.chromium.org/p/chromium/issues/detail?id=696374
|
||||
|
||||
-->
|
||||
|
||||
<style>
|
||||
|
||||
@keyframes a {
|
||||
from { rotate: 0 1 0 44deg; }
|
||||
to { rotate: 0 1 0 44deg; }
|
||||
}
|
||||
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: a linear 10s infinite;
|
||||
/* rotate: 0 1 0 44deg; */
|
||||
background: fuchsia;
|
||||
transform-origin: 100px 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="transform-interpolation-ref.html?rotate">
|
||||
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-17">
|
||||
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-246">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms/">
|
||||
|
||||
<script src="../../../common/reftest-wait.js"></script>
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@
|
|||
to: '8px 80% 800px',
|
||||
}, [
|
||||
{at: -1, expect: '-8px -80% -800px'},
|
||||
{at: 0, expect: '0px'},
|
||||
{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'},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Change perspective property</title>
|
||||
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1365255">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#target {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: red;
|
||||
transform: translateZ(-10px);
|
||||
}
|
||||
#container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
perspective: 100px;
|
||||
perspective-origin: -10px -10px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
container.style.perspective = '1px';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Change transform-origin property</title>
|
||||
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1365255">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#target {
|
||||
will-change: transform;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: 100px 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
#container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.style.transformOrigin = '50px 50px';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1772640">
|
||||
<div id="test">
|
||||
<style>
|
||||
* {
|
||||
overflow-x: scroll;
|
||||
perspective: 0px;
|
||||
}
|
||||
#a {
|
||||
rotate: 1deg 0 1 0;
|
||||
}
|
||||
</style>
|
||||
<ul id="a">IjzXS</ul>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="author" title="Adrien Pachkoff" href="mailto:adrien@pachkoff.com">
|
||||
<link rel="match" href="css-skew-002-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=5-32;totalPixels=12-159">
|
||||
<meta name="fuzzy" content="maxDifference=5-36;totalPixels=12-174">
|
||||
<style type="text/css">
|
||||
div {
|
||||
top:0px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<body style="margin: 0">
|
||||
Should be fully white, without any red.
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1330509">
|
||||
<link rel="match" href="fractional-scale-gradient-bg-obscure-red-bg-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-350">
|
||||
<style>
|
||||
body {
|
||||
background: red;
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
}
|
||||
.transform {
|
||||
transform-origin: 0 0;
|
||||
will-change: transform;
|
||||
background: linear-gradient(white, white);
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
Should be fully white, without any red.
|
||||
<div class="transform" style="transform: scale(3.777)"></div>
|
||||
<div class="transform" style="transform: scale(2.777)"></div>
|
||||
<div class="transform" style="transform: scale(1.777)"></div>
|
||||
<div class="transform" style="transform: scale(1.129)"></div>
|
||||
<div class="transform" style="transform: scale(0.971)"></div>
|
||||
<div class="transform" style="transform: scale(0.457)"></div>
|
||||
</div>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
<link rel="match" href="reference/svg-gradientTransform-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support functions with unit less arguments for translation-value. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.">
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support multiple transform functions the same element. The gradient in the test should be moved 100 pixels in the X direction resulting in a solid green rect.">
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-16000">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-gradient-transform-pattern-transform">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The gradientTransform attribute must support multiple transform functions in both directions. The gradient in the test should be moved 100 pixels in the X direction resulting in a solid green rect.">
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-16000">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine animated transformations with the underlying style correctly."/>
|
||||
<link rel="match" href="individual-transform-combine-ref.html">
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px;
|
||||
padding: 0;
|
||||
transform-origin: center center;
|
||||
background: lime;
|
||||
/* Freeze the animation at the midpoint. */
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
animation-duration: 1000000s;
|
||||
animation-delay: -500000s;
|
||||
}
|
||||
|
||||
@keyframes anim-1 {
|
||||
to { rotate: 180deg; }
|
||||
}
|
||||
#div-1 {
|
||||
scale: 2 1;
|
||||
animation-name: anim-1;
|
||||
}
|
||||
|
||||
@keyframes anim-2 {
|
||||
from { scale: 1 1; }
|
||||
to { scale: 3 1; }
|
||||
}
|
||||
#div-2 {
|
||||
/* The scale property is replaced in the animation. */
|
||||
scale: 1 3;
|
||||
rotate: 90deg;
|
||||
animation-name: anim-2;
|
||||
}
|
||||
|
||||
@keyframes anim-3 {
|
||||
to { rotate: 180deg; }
|
||||
}
|
||||
#div-3 {
|
||||
transform: scale(2, 1);
|
||||
animation-name: anim-3;
|
||||
}
|
||||
|
||||
@keyframes anim-4 {
|
||||
to { transform: scale(7, 1); }
|
||||
}
|
||||
#div-4 {
|
||||
rotate: 90deg;
|
||||
/* As transform is a separate property from scale, the two scales are
|
||||
chained together. */
|
||||
scale: 0.5 1;
|
||||
animation-name: anim-4;
|
||||
}
|
||||
|
||||
/* transform origin tests */
|
||||
|
||||
@keyframes anim-5 {
|
||||
to { rotate: 180deg; translate: 100px -50px; }
|
||||
}
|
||||
#div-5 {
|
||||
transform-origin: top left;
|
||||
scale: 2 1;
|
||||
animation-name: anim-5;
|
||||
}
|
||||
|
||||
@keyframes anim-6 {
|
||||
to { rotate: 180deg; translate: -100px 50px; }
|
||||
}
|
||||
#div-6 {
|
||||
transform-origin: bottom right;
|
||||
scale: 2 1;
|
||||
animation-name: anim-6;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div id="div-1" class="block"></div>
|
||||
<div id="div-2" class="block"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="div-3" class="block"></div>
|
||||
<div id="div-4" class="block"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="div-5" class="block"></div>
|
||||
<div id="div-6" class="block"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Individual transform: combine individual transform properties</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
|
||||
<meta name="assert" content="Tests that we combine transforms in the correct order when animating."/>
|
||||
<link rel="match" href="individual-transform-ordering-ref.html">
|
||||
<style>
|
||||
.block {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 50px;
|
||||
padding: 0;
|
||||
transform-origin: 0 0;
|
||||
background: lime;
|
||||
/* Freeze the animation at the midpoint. */
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
animation-duration: 1000000s;
|
||||
animation-delay: -500000s;
|
||||
}
|
||||
@keyframes anim-1 {
|
||||
to {
|
||||
translate: 50px 50px;
|
||||
rotate: 45deg;
|
||||
scale: 2 1;
|
||||
}
|
||||
}
|
||||
#div-1 {
|
||||
animation-name: anim-1;
|
||||
}
|
||||
@keyframes anim-2 {
|
||||
to {
|
||||
rotate: 45deg;
|
||||
scale: 2 1;
|
||||
translate: 50px 50px;
|
||||
}
|
||||
}
|
||||
#div-2 {
|
||||
animation-name: anim-2;
|
||||
}
|
||||
@keyframes anim-3 {
|
||||
to {
|
||||
transform: scale(2, 1);
|
||||
translate: 50px 50px;
|
||||
rotate: 45deg;
|
||||
}
|
||||
}
|
||||
#div-3 {
|
||||
animation-name: anim-3;
|
||||
}
|
||||
@keyframes anim-4 {
|
||||
to {
|
||||
transform: rotate(45deg) scale(2, 1);
|
||||
translate: 50px 50px;
|
||||
}
|
||||
}
|
||||
#div-4 {
|
||||
animation-name: anim-4;
|
||||
}
|
||||
@Keyframes anim-5 {
|
||||
to { transform: rotate(45deg); }
|
||||
}
|
||||
@Keyframes anim-6 {
|
||||
from { transform: none; }
|
||||
to { transform: translate(50px, 50px) rotate(45deg) scale(2, 1); }
|
||||
}
|
||||
/* anim-6 replaces anim-5 since both updating the transform property. */
|
||||
#div-5 {
|
||||
animation-name: anim-5, anim-6;
|
||||
}
|
||||
@keyframes anim-7 {
|
||||
to {
|
||||
rotate: 45deg;
|
||||
scale: 2 2;
|
||||
}
|
||||
}
|
||||
@keyframes anim-8 {
|
||||
from {
|
||||
translate: 0px 0px;
|
||||
scale: 1 1;
|
||||
}
|
||||
to {
|
||||
translate: 50px 50px;
|
||||
scale: 2 1;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* The scale property is overridden in anim-8, but the rotate property
|
||||
* from anim-7 is still relevant and must be applied in the correct order
|
||||
* (after translate but before scale).
|
||||
*/
|
||||
#div-6 {
|
||||
animation-name: anim-7, anim-8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div id="div-1" class="block"></div>
|
||||
<div id="div-2" class="block"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="div-3" class="block"></div>
|
||||
<div id="div-4" class="block"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="div-5" class="block"></div>
|
||||
<div id="div-6" class="block"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Change rotate property</title>
|
||||
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1365255">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#target {
|
||||
will-change: transform;
|
||||
rotate: 45deg;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
#container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.style.rotate = '0deg';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Change scale property</title>
|
||||
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1365255">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#target {
|
||||
will-change: transform;
|
||||
scale: 0.5;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
#container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.style.scale = '1';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<title>Change translate property</title>
|
||||
<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
|
||||
<link rel="help" href="https://crbug.com/1365255">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#target {
|
||||
will-change: transform;
|
||||
transform: translateX(100px);
|
||||
translate: 100px 100px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: green;
|
||||
}
|
||||
#container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
target.style.translate = '-100px 0px';
|
||||
document.documentElement.removeAttribute('class');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1321302">
|
||||
<span id="elm" style="filter:blur(1px); backface-visibility:hidden;">x</span>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(()=> {
|
||||
assert_equals(elm, document.elementFromPoint(10, 10));
|
||||
}, "Hit test");
|
||||
</script>
|
||||
|
|
@ -18,6 +18,7 @@ test_valid_value("transform", "matrix(1, 2, 3, 4, 5, 6)");
|
|||
test_valid_value("transform", "matrix(-0.1, -0.2, -0.3, -0.4, -0.5, -0.6)");
|
||||
|
||||
test_valid_value("transform", "translate(1px)");
|
||||
test_valid_value("transform", "translate(1px, 0%)");
|
||||
test_valid_value("transform", "translate(2%, -3%)");
|
||||
|
||||
test_valid_value("transform", "translateX(-4px)");
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ 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%", "100px");
|
||||
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");
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
Perspective with different transforms can have small anti-aliasing
|
||||
pixel differences, so the test should fuzzy patch to the ref.
|
||||
-->
|
||||
<meta name="fuzzy" content="maxDifference=0-27;totalPixels=0-235">
|
||||
<meta name="fuzzy" content="maxDifference=0-29;totalPixels=0-235">
|
||||
<style>
|
||||
|
||||
#container {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<div id=filter class=child></div>
|
||||
</div>
|
||||
|
||||
<div class=parent style="backdrop-filter: invert(0)">
|
||||
<div class=parent style="-webkit-backdrop-filter: invert(0); backdrop-filter: invert(0)">
|
||||
<div id=backdropFilter class=child></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty">
|
||||
<meta name="assert" content="The filtered element is rendered correctly without clipping, despite the interesting transform.">
|
||||
<link rel="match" href="preserve3d-and-filter-with-perspective-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-4;totalPixels=0-26">
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="author" title="Google" href="http://www.google.com/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
|
||||
<meta name="assert" content="Elements are drawn in the correct z-order.">
|
||||
<meta name="fuzzy" content="maxDifference=1; totalPixels=0-3244">
|
||||
<link rel="match" href="reference/green.html">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
|
||||
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(45)"/>
|
||||
<path d="M 106,37 175,106 106,175 37,106 Z" fill="red"/>
|
||||
<rect x="100" y="-50" width="100" height="100" fill="green" transform="rotate(45)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
|
||||
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(405)"/>
|
||||
<path d="M 106,37 175,106 106,175 37,106 Z" fill="red"/>
|
||||
<rect x="100" y="-50" width="100" height="100" fill="green" transform="rotate(405)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<svg>
|
||||
<path d="M 142,2 210,71 142,139 73,71 Z" fill="red"/>
|
||||
<rect x="100" y="-100" width="100" height="100" fill="green" transform="rotate(450e-1)"/>
|
||||
<path d="M 106,37 175,106 106,175 37,106 Z" fill="red"/>
|
||||
<rect x="100" y="-50" width="100" height="100" fill="green" transform="rotate(450e-1)"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1314671">
|
||||
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
||||
<link rel="match" href="reference/green.html">
|
||||
<p>Pass if there is NO red below:</p>
|
||||
<div style="width: 100px; height: 100px; position: absolute; background: green">
|
||||
<div style="transform: rotate(60deg); opacity: 0.5; overflow: hidden; width: 100px; height: 400px">
|
||||
<div style="will-change: transform; transform: rotate(-60deg); width: 100px; height: 400px; background: white"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="help" href="https://www.w3.org/TR/cssom-view-1/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/testdriver.js"></script>
|
||||
<script src="/resources/testdriver-actions.js"></script>
|
||||
<script src="/resources/testdriver-vendor.js"></script>
|
||||
<style>
|
||||
body, h1 { margin: 20px; }
|
||||
#vp {
|
||||
height: 400px;
|
||||
width: 600px;
|
||||
overflow: scroll;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
border: 5px solid #8cf;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="vp">
|
||||
<div style="transform-style: preserve-3d">
|
||||
<h1 style="height:2000px; transform: translateZ(0)">
|
||||
Gazing into the stars
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
promise_test(async () => {
|
||||
let scroll_promise = new Promise((resolve, reject) => {
|
||||
vp.addEventListener("scroll", resolve);
|
||||
});
|
||||
await new test_driver.Actions().scroll(100, 100, 0, 50).send();
|
||||
await scroll_promise;
|
||||
assert_true(vp.scrollTop > 0);
|
||||
}, "Element is scrollable over preserve-3d descendant");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="match" href="reference/skew-test1-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=17-233;totalPixels=96-771">
|
||||
<meta name="fuzzy" content="maxDifference=17-233;totalPixels=90-858">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<link rel="match" href="reference/svg-skewxy-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="The green rect in this test should be skewed horizontally 45 degrees and vertically 45 degrees to completely cover the red path.">
|
||||
<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-1">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
height: 300px;
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
<svg height="50px" width="50px" viewBox="0 0 50 50"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<polygon fill="blue" points="0,25 50,50 50,0" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 144 B |
|
|
@ -74,7 +74,9 @@
|
|||
return transform;
|
||||
}
|
||||
function clear(id) {
|
||||
document.getElementById(id).style.display = 'none';
|
||||
const element = document.getElementById(id);
|
||||
element.style.display = 'none';
|
||||
assert_equals(window.getComputedStyle(element).getPropertyValue("transform"), "none", "Computed style for an element with 'display: none' should be 'transform: none'");
|
||||
}
|
||||
|
||||
test(function() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://crbug.com/1308269">
|
||||
<div style="position: fixed; opacity: 0.5">
|
||||
<div style="position: fixed; transform: rotate3d(0, 1, 1, 20deg)">ROTATE1</div>
|
||||
<div style="position: fixed; transform: rotate3d(0, 1, 1, 20deg)">ROTATE2</div>
|
||||
</div>
|
||||
<div style="height: 2000px"></div>
|
||||
|
|
@ -45,7 +45,7 @@ div {
|
|||
}
|
||||
#three {
|
||||
width: 33px;
|
||||
height: 147px;
|
||||
height: 148px;
|
||||
top: 21px;
|
||||
left: 86px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="author" title="Apple Inc." href="http://www.apple.com/"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/>
|
||||
<link rel="match" href="reference/transform-3d-rotateY-stair-above-ref-001.xht"/>
|
||||
<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-80" />
|
||||
<meta name="fuzzy" content="maxDifference=0-14;totalPixels=0-80" />
|
||||
<meta name="assert" content="A rotateY transform with perspective
|
||||
should result in a trapezoid."/>
|
||||
<style type="text/css"><![CDATA[
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
border box, so they need to be transformed along with it.">
|
||||
<meta name="flags" content="svg">
|
||||
<link rel="match" href="transform-background-ref-1.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400">
|
||||
<meta name="fuzzy" content="maxDifference=0-4;totalPixels=0-400">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
border box, so they need to be transformed along with it.">
|
||||
<meta name="flags" content="svg">
|
||||
<link rel="match" href="transform-background-ref-1.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400">
|
||||
<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-400">
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<meta name="assert" content="Background images fall within the element's
|
||||
border box, so they need to be transformed along with it.">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400">
|
||||
<link rel="match" href="transform-background-ref-1.html">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
that a transform on the parent works correctly, not just on the element
|
||||
itself.">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400">
|
||||
<link rel="match" href="transform-background-ref-1.html">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -5,23 +5,10 @@
|
|||
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
|
||||
<link rel="reviewer" title="Apple Inc." href="http://www.apple.com">
|
||||
<meta name="assert" content='"If the root element is transformed, the
|
||||
transformation applies to the entire canvas, including any background
|
||||
specified for the root element. Since the background painting area for the
|
||||
root element is the entire canvas, which is infinite, the transformation
|
||||
might cause parts of the background that were originally off-screen to
|
||||
appear. For example, if the root element's background were repeating
|
||||
dots, and a transformation of 'scale(0.5)' were specified on the
|
||||
root element, the dots would shrink to half their size, but there will be
|
||||
twice as many, so they still cover the whole viewport." In this case, the
|
||||
background is specified on the body but propagates to the root element.
|
||||
The transform is on the root element, so it needs to affect the background.
|
||||
The rotation 90 degrees clockwise means that most of the screen will be
|
||||
filled with triangles that were originally above the top of the viewport;
|
||||
the original top row of triangles will now be on the left.'>
|
||||
<meta name="assert" content='"If the root element is transformed, the transformation should not apply to
|
||||
any background specified for the root element.'>
|
||||
<meta name="flags" content="svg">
|
||||
<link rel="match" href="transform-background-ref-2.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4800">
|
||||
<link rel="match" href="transform-root-bg-001-ref.html">
|
||||
<style>
|
||||
html {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -10,8 +10,7 @@
|
|||
root element instead of being specified on the body and propagating to the
|
||||
root.'>
|
||||
<meta name="flags" content="svg">
|
||||
<link rel="match" href="transform-background-ref-2.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-4800">
|
||||
<link rel="match" href="transform-root-bg-001-ref.html">
|
||||
<style>
|
||||
html {
|
||||
background: url(support/transform-triangle-left.svg);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<!doctype html>
|
||||
<title>CSS test reference</title>
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
</style>
|
||||
<div style="width: 200px; height: 10px; background-color: blue; margin: 10px"></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="UTF-8">
|
||||
<title>CSS transforms and clipping</title>
|
||||
<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel=author href="https://mozilla.org" title="Mozilla">
|
||||
<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1799216">
|
||||
<link rel=help href="https://drafts.csswg.org/css-transforms/">
|
||||
<link rel=match href="transform-clip-001-ref.html">
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
</style>
|
||||
<div style="overflow: clip; width: 200px; height: 200px; transform: translate(10px, 10px)">
|
||||
<div style="overflow: clip; pointer-events: none; width: 200px; height: 200px; transform: translate(0px, -190px)">
|
||||
<div style="background: blue; width: 200px; height: 200px; transform: translate(0px, 190px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Test (Transforms): Hit Testing</title>
|
||||
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
||||
<link rel="author" title="Google" href="http://www.google.com/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms">
|
||||
<meta name="flags" content="dom">
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body { margin: 50px; }
|
||||
|
||||
</style>
|
||||
<script>
|
||||
|
||||
let body_x_margin = 50;
|
||||
let body_y_margin = 50;
|
||||
|
||||
</script>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
|
||||
class Point {
|
||||
constructor(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
}
|
||||
|
||||
let simple_tests = [
|
||||
// In this list of tests, test_points_inside and test_points_outside
|
||||
// are relative to the element's untransformed origin (top, left).
|
||||
{
|
||||
description: "rectangle with 'translate' and 'rotate'",
|
||||
styles: "width: 100px; height: 50px; translate: 30px; rotate: 20deg;",
|
||||
test_points_inside: [
|
||||
new Point(28, 32),
|
||||
new Point(44, -10),
|
||||
new Point(133, 22),
|
||||
new Point(117, 64),
|
||||
new Point(65, 27),
|
||||
],
|
||||
test_points_outside: [
|
||||
new Point(30, 5),
|
||||
new Point(28, 37),
|
||||
new Point(100, 2),
|
||||
new Point(124, 58),
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "rectangle with 'transform'",
|
||||
styles: "width: 100px; height: 50px; transform: translate(30px) rotate(20deg);",
|
||||
test_points_inside: [
|
||||
new Point(28, 32),
|
||||
new Point(44, -10),
|
||||
new Point(133, 22),
|
||||
new Point(117, 64),
|
||||
new Point(65, 27),
|
||||
],
|
||||
test_points_outside: [
|
||||
new Point(30, 5),
|
||||
new Point(28, 37),
|
||||
new Point(100, 2),
|
||||
new Point(124, 58),
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "rectangle with 'translate' and 'rotate' and 'scale' and 'transform'",
|
||||
styles: "width: 100px; height: 50px; translate: 30px; rotate: 40deg; scale: 2; transform: rotate(-20deg) scale(0.5)",
|
||||
test_points_inside: [
|
||||
new Point(28, 32),
|
||||
new Point(44, -10),
|
||||
new Point(133, 22),
|
||||
new Point(117, 64),
|
||||
new Point(65, 27),
|
||||
],
|
||||
test_points_outside: [
|
||||
new Point(30, 5),
|
||||
new Point(28, 37),
|
||||
new Point(100, 2),
|
||||
new Point(124, 58),
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "square with 'rotate'",
|
||||
styles: "width: 10px; height: 10px; rotate: 90deg; transform-origin: 0 10px",
|
||||
test_points_inside: [
|
||||
new Point(1, 11),
|
||||
new Point(9, 11),
|
||||
new Point(1, 19),
|
||||
new Point(9, 19),
|
||||
],
|
||||
test_points_outside: [
|
||||
new Point(1, 9),
|
||||
new Point(9, 9),
|
||||
],
|
||||
},
|
||||
{
|
||||
description: "square with 'scale'",
|
||||
styles: "width: 10px; height: 10px; scale: 0.2;",
|
||||
test_points_inside: [
|
||||
new Point(4, 4),
|
||||
new Point(5, 4),
|
||||
new Point(4, 5),
|
||||
new Point(5, 5),
|
||||
],
|
||||
test_points_outside: [
|
||||
new Point(3, 3),
|
||||
new Point(3, 5),
|
||||
new Point(3, 6),
|
||||
new Point(5, 3),
|
||||
new Point(5, 6),
|
||||
new Point(6, 3),
|
||||
new Point(6, 5),
|
||||
new Point(6, 6),
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
for (let t of simple_tests) {
|
||||
test(function() {
|
||||
let e = document.createElement("div");
|
||||
e.setAttribute("style", t.styles);
|
||||
document.body.appendChild(e);
|
||||
|
||||
for (let p of t.test_points_inside) {
|
||||
let res = document.elementFromPoint(p.x + body_x_margin,
|
||||
p.y + body_y_margin);
|
||||
assert_equals(res, e,
|
||||
`point (${p.x}, ${p.y}) is inside element`);
|
||||
}
|
||||
|
||||
for (let p of t.test_points_outside) {
|
||||
let res = document.elementFromPoint(p.x + body_x_margin,
|
||||
p.y + body_y_margin);
|
||||
assert_equals(res, document.body,
|
||||
`point (${p.x}, ${p.y}) is outside element`);
|
||||
}
|
||||
|
||||
e.remove();
|
||||
}, `hit testing of ${t.description}`);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-origin-property">
|
||||
<link rel="match" href="transform-origin-013-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4000">
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
|
||||
<style>
|
||||
html {
|
||||
background: url(support/transform-triangle-right.svg) top right;
|
||||
background: url(support/transform-triangle-left.svg) top left;
|
||||
}
|
||||
body {
|
||||
/* The default 8px margin makes the background not line up exactly */
|
||||
|
|
|
|||
|
|
@ -5,15 +5,10 @@
|
|||
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering">
|
||||
<meta name="assert" content="The background here extends to the whole
|
||||
canvas, and a transform on the root element must transform the whole
|
||||
canvas, background included. Thus the entire tiled background of
|
||||
left-pointing triangles needs to be rotated 180 degrees (same as scale(-1))
|
||||
around the top center of the viewport, which is the default
|
||||
transform-origin of 50% 50% in this case. An implementation that doesn't
|
||||
draw the background on parts of the canvas outside the viewport might
|
||||
incorrectly display nothing, because the part of the background that's
|
||||
supposed to be rotated into view was initially above the visible part of
|
||||
the canvas.">
|
||||
canvas, and a transform on the root element should not transform the
|
||||
canvas background. Thus the entire tiled background of left-pointing triangles
|
||||
should not be rotated. An implementation that doesn't draw the background
|
||||
correctly may rotate the background, or incorrectly clip it.">
|
||||
<link rel="match" href="transform-root-bg-001-ref.html">
|
||||
<style>
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
|
||||
<style>
|
||||
html {
|
||||
background: url(support/transform-triangle-left-small.svg);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
transform-root-bg-001.html, except that it uses scale(0.5) instead of
|
||||
scale(-1). It also specifies a transform-origin, because the default of
|
||||
50% 50% wouldn't work well with the way the reference image is constructed.">
|
||||
<link rel="match" href="transform-root-bg-003-ref.html">
|
||||
<link rel="match" href="transform-root-bg-001-ref.html">
|
||||
<style>
|
||||
html {
|
||||
background: url(support/transform-triangle-left.svg);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<tbody>, so nothing should vanish.">
|
||||
<link rel="match" href="transform-table-009-ref.html">
|
||||
<link rel="mismatch" href="transform-table-009-notref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-3">
|
||||
<style>
|
||||
table, tbody, tr, td {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
display (mirrored).">
|
||||
<link rel="match" href="transform-table-009-ref.html">
|
||||
<link rel="mismatch" href="transform-table-010-notref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-3">
|
||||
<style>
|
||||
body > div {
|
||||
transform: rotateX(90deg);
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
preserve-3d specified, so the text should not vanish.">
|
||||
<link rel="match" href="transform-table-009-ref.html">
|
||||
<link rel="mismatch" href="transform-table-011-notref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-3">
|
||||
<style>
|
||||
body > div {
|
||||
transform: rotateX(90deg);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<style>
|
||||
html {
|
||||
background: green;
|
||||
/* Match scrollbar change caused by translateY transformation */
|
||||
margin-top: -250vh;
|
||||
}
|
||||
</style>
|
||||
<div style="height: 400vh;"></div>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=988446">
|
||||
<link rel="match" href="transform-translate-background-001-ref.html">
|
||||
<meta name="assert" content="Checks that the linear gradient is modified when you vertically translate the root element. The test passes if you see only green.">
|
||||
<meta name="assert" content="Checks that the linear gradient is not modified when you vertically translate the root element. The test passes if you see only green.">
|
||||
<style>
|
||||
html {
|
||||
background: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
|
||||
background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%);
|
||||
transform: translate(0, -250vh);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-transforms/#transform-rendering">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=988446">
|
||||
<link rel="match" href="transform-translate-background-001-ref.html">
|
||||
<meta name="assert" content="Checks that the linear gradient is modified when you dynamically translate the root element. The test passes if you see only green.">
|
||||
<meta name="assert" content="Checks that the linear gradient is not modified when you dynamically translate the root element. The test passes if you see only green.">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
html {
|
||||
background: linear-gradient(to bottom, red 0%, red 50%, green 50%, green 100%);
|
||||
background: linear-gradient(to bottom, green 0%, green 50%, red 50%, red 100%);
|
||||
}
|
||||
</style>
|
||||
<div style="height: 400vh;"></div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property">
|
||||
<meta name="assert" content="This tests that 'perspective: inherit' works
|
||||
the same as specifying that perspective to start with.">
|
||||
<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-215">
|
||||
<link rel="match" href="transform3d-perspective-001-ref.html">
|
||||
<link rel="mismatch" href="transform-lime-square-ref.html">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
shift it, depending on 'transform-origin'). Without 'transform-style:
|
||||
preserve-3d', the rotations on parent and child shouldn't cancel, so its
|
||||
height should be halved with no other effect.">
|
||||
<meta name="fuzzy" content="maxDifference=0-55;totalPixels=0-299">
|
||||
<link rel="match" href="transform-lime-square-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<meta name="assert" content="This is identical to
|
||||
transform3d-preserve3d-006.html, except with rotatey() instead of
|
||||
rotatex().">
|
||||
<meta name="fuzzy" content="maxDifference=0-54;totalPixels=0-200">
|
||||
<link rel="match" href="transform-lime-square-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
'transform-style: preserve-3d' would normally make the result different,
|
||||
but 'overflow: hidden' overrides its effect and causes it to work the same
|
||||
as 'transform-style: flat'.">
|
||||
<meta name="fuzzy" content="maxDifference=0-55;totalPixels=0-299">
|
||||
<link rel="match" href="transform-lime-square-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<meta name="assert" content="This is identical to
|
||||
transform3d-preserve3d-008.html, except with 'overflow: auto' instead of
|
||||
'hidden'.">
|
||||
<meta name="fuzzy" content="maxDifference=0-55;totalPixels=0-299">
|
||||
<link rel="match" href="transform-lime-square-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
'hidden'. (Note that the ref is nontrivial, because the scrollbar has to
|
||||
be scaled appropriately.)">
|
||||
<link rel="match" href="transform3d-preserve3d-013-ref.html">
|
||||
<meta name=fuzzy content="0-100;0-1750">
|
||||
<meta name=fuzzy content="maxDifference=0-100;totalPixels=0-3422">
|
||||
</head>
|
||||
<body>
|
||||
<div style="transform: rotatex(45deg); transform-origin: top;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<meta name="assert" content="This tests that scale3d(2, 2, 2) on some text
|
||||
has the same effect as scaleX(2) scaleY(2). The Z part should be
|
||||
irrelevant, because the text is flat.">
|
||||
<meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-796">
|
||||
<link rel="match" href="transform3d-scale-001-ref.html">
|
||||
<link rel="mismatch" href="transform3d-scale-001-notref.html">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<meta name="assert" content="This tests that rotatex(90deg)
|
||||
scale3d(2, 1, 2) rotatex(-90deg) is the same as scalex(2) scaley(2).
|
||||
Conjugating by the rotation swaps the Y and Z coordinates for the scale.">
|
||||
<meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-796">
|
||||
<link rel="match" href="transform3d-scale-001-ref.html">
|
||||
<link rel="mismatch" href="transform3d-scale-001-notref.html">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<meta name="assert" content="This is the same as
|
||||
transform3d-scale-001.html, except that it uses scaleX(2) scaleY(2)
|
||||
scaleZ(2) instead of scale3D(2, 2, 2).">
|
||||
<meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-796">
|
||||
<link rel="match" href="transform3d-scale-001-ref.html">
|
||||
<link rel="mismatch" href="transform3d-scale-001-notref.html">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<meta name="assert" content="This tests that rotateX(90deg)
|
||||
scale3d(1, 1, 2) rotateX(-90deg) is the same as scaleY(2). Conjugating by
|
||||
the rotation swaps the Y and Z coordinates for the scale.">
|
||||
<meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-200">
|
||||
<link rel="match" href="transform3d-scale-005-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<meta name="assert" content="This is identical to
|
||||
transform3d-scale-005-ref.html, except with scaleZ(2) instead of
|
||||
scale3d(1, 1, 2).">
|
||||
<meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-200">
|
||||
<link rel="match" href="transform3d-scale-005-ref.html">
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="match" href="reference/transforms-rotate-degree-45-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-16;totalPixels=0-564">
|
||||
<meta name="fuzzy" content="maxDifference=0-19;totalPixels=0-564">
|
||||
<meta name="assert" content="If the rotate and scale with parameter not provided, greenSquare will not cover redSquare.">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
|
||||
<link rel="match" href="reference/transforms-skewX-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200">
|
||||
<meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-200">
|
||||
<meta name="assert" content="If the skew for X axis not provided, greenSquare will not cover redSquare.">
|
||||
<style type="text/css">
|
||||
.greenSquare {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering">
|
||||
<!-- See also: http://http://en.wikipedia.org/wiki/Newell's_algorithm -->
|
||||
<link rel="match" href="reference/ttwf-css-3d-polygon-cycle-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-113;totalPixels=0-622">
|
||||
<meta name="fuzzy" content="maxDifference=0-113;totalPixels=0-674">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert"
|
||||
content="The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's.">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue