mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
|
||||
<link rel="match" href="clip-path-animation-incompatible-shapes1-ref.html">
|
||||
<meta name=fuzzy content="0-255;0-2">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
/* Use a long animation that start at 30% progress where the slope of the
|
||||
selected timing function is zero. By setting up the animation in this way,
|
||||
we accommodate lengthy delays in running the test without a potential drift
|
||||
in the animated property value. This is important for avoiding flakes,
|
||||
especially on debug builds. The screenshots are taken as soon as the
|
||||
animation is ready, thus the long animation duration has no bearing on
|
||||
the actual duration of the test. */
|
||||
animation: clippath 1000000s cubic-bezier(0,1,1,0) -300000s;
|
||||
}
|
||||
@keyframes clippath {
|
||||
0% { clip-path: circle(50% at 50% 50%); }
|
||||
100% { clip-path: ellipse(10% 20% at 50% 50%); }
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
|
||||
<script>
|
||||
// This test ensures that when selected keyframe shapes are incompatible
|
||||
// and progress is less than 0.5, "from" keyframe is selected as a result.
|
||||
document.getAnimations()[0].ready.then(() => {
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: green;
|
||||
clip-path: path('M 100 100 L 200 0 L 200 200 L 0 120 z');
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
|
||||
<link rel="match" href="clip-path-animation-incompatible-shapes2-ref.html">
|
||||
<meta name=fuzzy content="0-255;0-300">
|
||||
<style>
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: green;
|
||||
/* Use a long animation that start at 60% progress where the slope of the
|
||||
selected timing function is zero. By setting up the animation in this way,
|
||||
we accommodate lengthy delays in running the test without a potential drift
|
||||
in the animated property value. This is important for avoiding flakes,
|
||||
especially on debug builds. The screenshots are taken as soon as the
|
||||
animation is ready, thus the long animation duration has no bearing on
|
||||
the actual duration of the test. */
|
||||
animation: clippath 1000000s cubic-bezier(0,1,1,0) -600000s;
|
||||
}
|
||||
@keyframes clippath {
|
||||
0% { clip-path: circle(50% at 50% 50%); }
|
||||
100% { clip-path: path('M 100 100 L 200 0 L 200 200 L 0 120 z'); }
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
|
||||
<script>
|
||||
// This test ensures that when selected keyframe shapes are incompatible
|
||||
// and progress >= 0.5, "to" keyframe is selected as a result.
|
||||
document.getAnimations()[0].ready.then(() => {
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: circle(35% at 35% 35%);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: ellipse(15% 25% at 60% 60%);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
|
||||
<link rel="match" href="clip-path-animation-three-keyframes1-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
/* Use a long animation that start at 5% progress where the slope of the
|
||||
selected timing function is zero. By setting up the animation in this way,
|
||||
we accommodate lengthy delays in running the test without a potential drift
|
||||
in the animated property value. This is important for avoiding flakes,
|
||||
especially on debug builds. The screenshots are taken as soon as the
|
||||
animation is ready, thus the long animation duration has no bearing on
|
||||
the actual duration of the test. */
|
||||
animation: clippath 1000000s cubic-bezier(0,1,1,0) -50000s;
|
||||
}
|
||||
@keyframes clippath {
|
||||
0% { clip-path: ellipse(10% 20% at 50% 50%) }
|
||||
10% {
|
||||
clip-path: ellipse(20% 30% at 70% 70%);
|
||||
animation-timing-function: cubic-bezier(0,1,1,0);
|
||||
}
|
||||
100% {
|
||||
clip-path: ellipse(10% 20% at 50% 50%);
|
||||
animation-timing-function: cubic-bezier(0,1,1,0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
|
||||
<script>
|
||||
// This test ensures that we select the correct start and end keyframes for
|
||||
// interpolation. In this test, the start delay of the animation makes it
|
||||
// jump to 5% right away. So for this test, we would choose the keyframes at
|
||||
// 0% and 10% for interpolation.
|
||||
document.getAnimations()[0].ready.then(() => {
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: green;
|
||||
clip-path: path('M 150 150 L 250 0 L 250 250 L 0 160 z');
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
|
||||
<link rel="match" href="clip-path-animation-three-keyframes2-ref.html">
|
||||
<meta name=fuzzy content="0-255;0-1000">
|
||||
<style>
|
||||
.container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background-color: green;
|
||||
/* Use a long animation that start at 50% progress where the slope of the
|
||||
selected timing function is zero. By setting up the animation in this way,
|
||||
we accommodate lengthy delays in running the test without a potential drift
|
||||
in the animated property value. This is important for avoiding flakes,
|
||||
especially on debug builds. The screenshots are taken as soon as the
|
||||
animation is ready, thus the long animation duration has no bearing on
|
||||
the actual duration of the test. */
|
||||
animation: clippath 1000000s cubic-bezier(0,1,1,0) -500000s;
|
||||
}
|
||||
@keyframes clippath {
|
||||
0% {
|
||||
clip-path: path('M 300 300 L 500 0 L 500 500 L 0 300 z');
|
||||
}
|
||||
10% {
|
||||
clip-path: path('M 100 100 L 200 0 L 200 200 L 0 120 z');
|
||||
animation-timing-function: cubic-bezier(0,1,1,0);
|
||||
}
|
||||
100% {
|
||||
clip-path: path('M 200 200 L 300 0 L 300 300 L 0 200 z');
|
||||
animation-timing-function: cubic-bezier(0,1,1,0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
|
||||
<script>
|
||||
// The start delay of the animation makes it jump 50% of the animation, which
|
||||
// means we would select the keyframes at 10% and 100% for animation. The
|
||||
// progress would be (0.5-0.1) / (1-0.1) = 0.44. So a timing function input of
|
||||
// 0.44 results in an output of 0.5.
|
||||
document.getAnimations()[0].ready.then(() => {
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
|
||||
<link rel="match" href="clip-path-animation-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
/* Use a long animation that start at 50% progress where the slope of the
|
||||
selected timing function is zero. By setting up the animation in this way,
|
||||
we accommodate lengthy delays in running the test without a potential drift
|
||||
in the animated property value. This is important for avoiding flakes,
|
||||
especially on debug builds. The screenshots are taken as soon as the
|
||||
animation is ready, thus the long animation duration has no bearing on
|
||||
the actual duration of the test. */
|
||||
animation: clippath 1000000s cubic-bezier(0,1,1,0) -500000s;
|
||||
}
|
||||
@keyframes clippath {
|
||||
0% { clip-path: circle(50% at 50% 50%); }
|
||||
100% { clip-path: circle(20% at 20% 20%); }
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<body>
|
||||
<div class="container"></div>
|
||||
|
||||
<script>
|
||||
document.getAnimations()[0].ready.then(() => {
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: deeppink;
|
||||
clip-path: inset(80px 0 0 round 8px);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>inset() with percentages resolves against reference box, not inset rect</title>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1704742">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-functions">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="match" href="clip-path-inset-round-percent-ref.html">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: deeppink;
|
||||
clip-path: inset(80% 0 0 round 8%)
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-font-loading/#font-face-load">
|
||||
<link rel="help" href="https://crbug.com/1222734">
|
||||
<link rel="match" href="reference/green-100x100.html">
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-right: 100px solid red;
|
||||
clip-path: url(#clip);
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<svg height="0">
|
||||
<clipPath id="clip">
|
||||
<text y="80" font-size="100" font-family="DelayedAhem, serif">X</text>
|
||||
</clipPath>
|
||||
</svg>
|
||||
<script>
|
||||
waitForAtLeastOneFrame().then(() => {
|
||||
let font = new FontFace('DelayedAhem', 'url("/fonts/Ahem.ttf")');
|
||||
document.fonts.add(font);
|
||||
font.load().then(takeScreenshot);
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue