mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'1d9b01e2fad6af3a057d571b1e088e15fa9bc8e6'
This commit is contained in:
WPT Sync Bot
parent
cfef75c99b
commit
bb34f95b33
1683 changed files with 37170 additions and 4252 deletions
|
|
@ -5,10 +5,11 @@
|
|||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
|
||||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
|
||||
<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
|
||||
<html:meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-184"/>
|
||||
<metadata class="flags">svg</metadata>
|
||||
<desc class="assert">A basic shape function circle() applied to an SVG
|
||||
rectangle. The specified keyword fill-box defines the reference box
|
||||
(here objectBoundingBox). You should see a full green circle.</desc>
|
||||
</g>
|
||||
<rect width="100" height="100" fill="green" stroke="green" stroke-width="10" style="clip-path: circle() fill-box;"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 884 B After Width: | Height: | Size: 960 B |
|
|
@ -5,10 +5,11 @@
|
|||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
|
||||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path"/>
|
||||
<html:link rel="match" href="reference/clip-path-circle-001-ref.svg" />
|
||||
<html:meta name="fuzzy" content="maxDifference=0-64; totalPixels=0-76"/>
|
||||
<metadata class="flags">svg</metadata>
|
||||
<desc class="assert">A basic shape function circle() applied to an SVG
|
||||
rectangle. The specified keyword stroke-box defines the reference box
|
||||
stroking bounding box. You should see a full green circle.</desc>
|
||||
</g>
|
||||
<rect x="10" y="10" width="80" height="80" fill="green" stroke="green" stroke-width="20" style="clip-path: circle() stroke-box;"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 899 B After Width: | Height: | Size: 974 B |
|
|
@ -5,12 +5,13 @@
|
|||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
|
||||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
|
||||
<html:link rel="match" href="reference/clip-path-text-001-ref.svg" />
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
<metadata class="flags">svg</metadata>
|
||||
<desc class="assert">A clipPath element can contain text. You should
|
||||
see a green text "CLIP" and nothing else.</desc>
|
||||
see four adjacent 40x40 green squares and nothing else.</desc>
|
||||
</g>
|
||||
<clipPath id="clip1">
|
||||
<text x="20" y="150" style="font-size: 60px; font-weight: bold;">CLIP</text>
|
||||
<text x="20" y="150" style="font: 40px/1 Ahem">XXXX</text>
|
||||
</clipPath>
|
||||
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 826 B After Width: | Height: | Size: 876 B |
|
|
@ -5,13 +5,15 @@
|
|||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
|
||||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
|
||||
<html:link rel="match" href="reference/clip-path-text-001-ref.svg" />
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
<metadata class="flags">svg</metadata>
|
||||
<desc class="assert">A clipPath element can contain text. Text styling
|
||||
should not influence the clipping path. You should see a green text "CLIP"
|
||||
and nothing else.</desc>
|
||||
(e.g. stroke/stroke-width) should not influence the clipping path.
|
||||
You should see four adjacent 40x40 green squares and nothing else.
|
||||
</desc>
|
||||
</g>
|
||||
<clipPath id="clip1">
|
||||
<text x="20" y="150" style="font-size:60px; font-weight:bold;" stroke="red" stroke-width="10">CLIP</text>
|
||||
<text x="20" y="150" style="font: 40px/1 Ahem" stroke="red" stroke-width="10">XXXX</text>
|
||||
</clipPath>
|
||||
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 921 B After Width: | Height: | Size: 1,002 B |
|
|
@ -5,13 +5,14 @@
|
|||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
|
||||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
|
||||
<html:link rel="match" href="reference/clip-path-text-002-ref.svg" />
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
<metadata class="flags">svg</metadata>
|
||||
<desc class="assert">A clipPath element can contain text. Text can be
|
||||
combined with other clipping shapes like polygons. You should see a green
|
||||
text "CLIP" through the hole of a green rectangle.</desc>
|
||||
stripe through the hole of a green rectangle.</desc>
|
||||
</g>
|
||||
<clipPath id="clip1">
|
||||
<text x="20" y="150" style="font-size:60px; font-weight:bold;" stroke="red" stroke-width="10">CLIP</text>
|
||||
<text x="20" y="120" style="font: 40px/1 Ahem" stroke="red" stroke-width="10">XXXX</text>
|
||||
<polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" clip-rule="evenodd" />
|
||||
</clipPath>
|
||||
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 1.1 KiB |
|
|
@ -5,14 +5,15 @@
|
|||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#svg-clipping-paths"/>
|
||||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
|
||||
<html:link rel="match" href="reference/clip-path-text-001-ref.svg" />
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
<metadata class="flags">svg</metadata>
|
||||
<desc class="assert">A clipPath element can contain text in a
|
||||
tspan element. Text styling on text element or tspan element should not influence
|
||||
the clipping path. You should see a green text "CLIP" and nothing else.
|
||||
</desc>
|
||||
tspan element. Text styling on text element or tspan element should
|
||||
not influence the clipping path. You should see four adjacent 40x40
|
||||
green squares and nothing else.</desc>
|
||||
</g>
|
||||
<clipPath id="clip1">
|
||||
<text x="20" y="150" style="font-size:60px; font-weight:bold;"><tspan stroke="red" fill="none">CLIP</tspan></text>
|
||||
<text x="20" y="150" style="font: 40px/1 Ahem"><tspan stroke="red" fill="none">XXXX</tspan></text>
|
||||
</clipPath>
|
||||
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 992 B After Width: | Height: | Size: 1 KiB |
|
|
@ -6,16 +6,17 @@
|
|||
<html:link rel="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement"/>
|
||||
<html:link rel="match" href="reference/clip-path-text-003-ref.svg" />
|
||||
<metadata class="flags">svg</metadata>
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
<desc class="assert">A clipPath element can contain text. The
|
||||
clipPath element can be clipped itself with the text. You should see
|
||||
fragments of a green text "CLIP" and nothing else.
|
||||
fragments of four adjacent 40x40 green squares and nothing else.
|
||||
</desc>
|
||||
</g>
|
||||
<clipPath id="clip2">
|
||||
<rect x="50" y="50" width="100" height="100"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1" clip-path="url(#clip2)">
|
||||
<text x="20" y="150" style="font-size:60px; font-weight:bold;">CLIP</text>
|
||||
<text x="20" y="150" style="font: 40px/1 Ahem">XXXX</text>
|
||||
</clipPath>
|
||||
<rect height="200" width="200" fill="green" clip-path="url(#clip1)"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1,011 B After Width: | Height: | Size: 1 KiB |
|
|
@ -2,6 +2,7 @@
|
|||
<g id="testmeta">
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
</g>
|
||||
<text x="20" y="150" fill="green" style="font-size:60px; font-weight:bold;">CLIP</text>
|
||||
<text x="20" y="150" fill="green" style="font: 40px/1 Ahem">XXXX</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 329 B After Width: | Height: | Size: 367 B |
|
|
@ -2,7 +2,8 @@
|
|||
<g id="testmeta">
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
</g>
|
||||
<text x="20" y="150" fill="green" style="font-size:60px; font-weight:bold;">CLIP</text>
|
||||
<text x="20" y="120" fill="green" style="font: 40px/1 Ahem">XXXX</text>
|
||||
<polygon points="0 0, 200 0, 200 200, 0 200, 0 50, 150 50, 150 150, 50 150, 50 50, 0 50" fill-rule="evenodd" fill="green"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 453 B After Width: | Height: | Size: 491 B |
|
|
@ -2,9 +2,10 @@
|
|||
<g id="testmeta">
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<html:link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"/>
|
||||
<html:link rel="stylesheet" href="/fonts/ahem.css"/>
|
||||
</g>
|
||||
<clipPath id="clip2">
|
||||
<rect x="50" y="50" width="100" height="100"/>
|
||||
</clipPath>
|
||||
<text x="20" y="150" style="font-size:60px; font-weight:bold;" clip-path="url(#clip2)" fill="green">CLIP</text>
|
||||
</svg>
|
||||
<text x="20" y="150" style="font: 40px/1 Ahem" clip-path="url(#clip2)" fill="green">XXXX</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 473 B |
|
|
@ -3,11 +3,9 @@
|
|||
<style>
|
||||
.green {
|
||||
background-color: green;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
clip-path: inset(10.59741054822%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<style>
|
||||
.green {
|
||||
background-color: green;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
clip-path: inset(6.850317545375803%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="green"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
<!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-custom-timing-function-ref.html">
|
||||
<link rel="match" href="clip-path-animation-custom-timing-function-reverse-ref.html">
|
||||
<meta name=fuzzy content="0-1;0-350">
|
||||
<!--
|
||||
Test that ensures that the bounding rect for a clip path animation is not
|
||||
limited to the size of the largest keyframe.
|
||||
|
||||
Test is done by occulsion to prevent flakes. Test succeeds if the extrapolated
|
||||
clip area (green) is large enough to occlude the entire red area.
|
||||
limited to the size of the largest keyframe.a.
|
||||
|
||||
This is the reverse of clip-path-animation-custom-timing-fumction.html,
|
||||
and tests extrapolation in the negative direction
|
||||
|
|
@ -19,7 +17,7 @@
|
|||
}
|
||||
|
||||
25% {
|
||||
clip-path: inset(49% 459);
|
||||
clip-path: inset(49% 49%);
|
||||
}
|
||||
|
||||
50% {
|
||||
|
|
@ -39,27 +37,10 @@
|
|||
|
||||
.green {
|
||||
background-color: green;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* for this test to succeed, the red rect needs to be entirely
|
||||
occluded by the inner green rect, requiring extrapolation
|
||||
beyond the largest keyframe. */
|
||||
.red {
|
||||
background-color: red;
|
||||
position: fixed;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.anim {
|
||||
animation: clippath 10000000s -8750000s
|
||||
animation: clippath 10000000s -8717082s
|
||||
/* halfway between the second to last and last keyframes.*/
|
||||
;
|
||||
}
|
||||
|
|
@ -68,11 +49,7 @@
|
|||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<body>
|
||||
<div class="green">
|
||||
<div class="red">
|
||||
<div class="green anim"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="green anim"></div>
|
||||
|
||||
<script>
|
||||
document.getAnimations()[0].ready.then(takeScreenshot);
|
||||
|
|
|
|||
|
|
@ -2,12 +2,10 @@
|
|||
<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-custom-timing-function-ref.html">
|
||||
<meta name=fuzzy content="0-2;0-320">
|
||||
<!--
|
||||
Test that ensures that the bounding rect for a clip path animation is not
|
||||
limited to the size of the largest keyframe.
|
||||
|
||||
Test is done by occulsion to prevent flakes. Test succeeds if the extrapolated
|
||||
clip area (green) is large enough to occlude the entire red area.
|
||||
-->
|
||||
<style>
|
||||
@keyframes clippath {
|
||||
|
|
@ -34,28 +32,10 @@
|
|||
|
||||
.green {
|
||||
background-color: green;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* for this test to succeed, the red rect needs to be entirely
|
||||
occluded by the inner green rect, requiring extrapolation
|
||||
beyond the largest keyframe. */
|
||||
.red {
|
||||
background-color: red;
|
||||
position: fixed;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.anim {
|
||||
animation: clippath 10000000s -1250000s
|
||||
/* halfway between the first and second keyframes. */
|
||||
animation: clippath 10000000s -1286796s
|
||||
/* roughly where the derivative of the cubic-bezier is zero */
|
||||
;
|
||||
animation-timing-function: cubic-bezier(0, 9, 1, 9);
|
||||
}
|
||||
|
|
@ -64,11 +44,7 @@
|
|||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<body>
|
||||
<div class="green">
|
||||
<div class="red">
|
||||
<div class="green anim"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="green"></div>
|
||||
|
||||
<script>
|
||||
document.getAnimations()[0].ready.then(takeScreenshot);
|
||||
|
|
|
|||
|
|
@ -3,44 +3,23 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-shapes-1/#basic-shape-interpolation">
|
||||
<link rel="match" href="clip-path-animation-custom-timing-function-ref.html">
|
||||
<style>
|
||||
.transition {
|
||||
clip-path: inset(45%);
|
||||
transition-property: clip-path;
|
||||
transition-duration: 1000000s;
|
||||
transition-timing-function: cubic-bezier(0, 9, 1, 9);
|
||||
transition-delay: -500000s;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: green;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* for this test to succeed, the red rect needs to be entirely
|
||||
occluded by the inner green rect, requiring extrapolation
|
||||
beyond the largest keyframe. */
|
||||
.red {
|
||||
background-color: red;
|
||||
position: fixed;
|
||||
left: 50px;
|
||||
top: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
clip-path: inset(45%);
|
||||
transition-property: clip-path;
|
||||
transition-duration: 10000000s;
|
||||
transition-timing-function: cubic-bezier(0, 9, 1, 9);
|
||||
transition-delay: -5220715s;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
|
||||
<body>
|
||||
<div class="green">
|
||||
<div class="red">
|
||||
<div class="green transition" id="target"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="green" id="target"></div>
|
||||
|
||||
<script>
|
||||
function update() {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="clip-path-round-zero-size-ref.html">
|
||||
<!-- Allow differences of antialised pixels along rounded edges -->
|
||||
<meta name="fuzzy" content="0-64;0-28">
|
||||
<style>
|
||||
#target {
|
||||
margin: 50px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel=author href="mailto:jarhar@chromium.org">
|
||||
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/interpolation-testcommon.js"></script>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
test_no_interpolation({
|
||||
property: 'clip-rule',
|
||||
from: 'initial',
|
||||
to: 'evenodd'
|
||||
});
|
||||
</script>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
|
||||
<link rel="match" href="mask-image-2-ref.html">
|
||||
<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2400">
|
||||
<meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue