Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Port APNG tests to WPT, add test assertions. Fix #5546 #42893

Merged
merged 8 commits into from
Nov 17, 2023
Merged

Port APNG tests to WPT, add test assertions. Fix #5546 #42893

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
00a2774
Port APNG tests to WPT, add test assertions. Fix #5546
svgeesus Nov 1, 2023
18431d6
lint whitespace
svgeesus Nov 1, 2023
0dde7ab
Correct rel=""help"
svgeesus Nov 3, 2023
9b4c6bd
Add original author, pass number to setTimeout
svgeesus Nov 7, 2023
28a727e
remove unnecessary file
svgeesus Nov 7, 2023
9e1fd74
Add source, script and readme to resources
svgeesus Nov 8, 2023
c265693
just to kick the lint task
svgeesus Nov 15, 2023
cc2d44b
line endings
svgeesus Nov 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
29 changes: 29 additions & 0 deletions lint.ignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,35 @@ SET TIMEOUT: navigation-timing/*
SET TIMEOUT: old-tests/submission/Microsoft/history/history_000.htm
SET TIMEOUT: paint-timing/resources/subframe-painting.html
SET TIMEOUT: performance-timeline/resources/navigation-id-detached-frame-page.html
SET TIMEOUT: png/apng/acTL-plays-one.html
SET TIMEOUT: png/apng/acTL-plays-two.html
SET TIMEOUT: png/apng/fdAT-split-basic.html
SET TIMEOUT: png/apng/fdAT-split-zero-length.html
SET TIMEOUT: png/apng/fcTL-acTL-ordering.html
SET TIMEOUT: png/apng/fcTL-blend-over-repeatedly.html
SET TIMEOUT: png/apng/fcTL-blend-over-solid.html
SET TIMEOUT: png/apng/fcTL-blend-source-nearly-transparent.html
SET TIMEOUT: png/apng/fcTL-blend-source-solid.html
SET TIMEOUT: png/apng/fcTL-blend-source-transparent.html
SET TIMEOUT: png/apng/fcTL-dispose-background-final.html
SET TIMEOUT: png/apng/fcTL-dispose-background.html
SET TIMEOUT: png/apng/fcTL-dispose-before-region-background.html
SET TIMEOUT: png/apng/fcTL-dispose-in-region-background.html
SET TIMEOUT: png/apng/fcTL-dispose-in-region-none.html
SET TIMEOUT: png/apng/fcTL-dispose-in-region-previous.html
SET TIMEOUT: png/apng/fcTL-dispose-none.html
SET TIMEOUT: png/apng/fcTL-dispose-previous-final.html
SET TIMEOUT: png/apng/fcTL-dispose-previous-first.html
SET TIMEOUT: png/apng/fcTL-dispose-previous.html
SET TIMEOUT: png/apng/fdAT-16bit.html
SET TIMEOUT: png/apng/fdAT-1bit-PLTE-tRNS.html
SET TIMEOUT: png/apng/fdAT-1bit-PLTE.html
SET TIMEOUT: png/apng/fdAT-2bit-PLTE-tRNS.html
SET TIMEOUT: png/apng/fdAT-8bit-gray-alpha.html
SET TIMEOUT: png/apng/fdAT-8bit-gray.html
SET TIMEOUT: png/apng/first-frame-IDAT.html
SET TIMEOUT: png/apng/first-frame-not-IDAT.html
SET TIMEOUT: png/apng/tester-check.html
SET TIMEOUT: portals/resources/portals-adopt-predecessor-portal.html
SET TIMEOUT: preload/single-download-preload.html
SET TIMEOUT: preload/resources/slow-exec.js
Expand Down
34 changes: 34 additions & 0 deletions png/apng/acTL-plays-one.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, plays</title>
<link rel="author" title="Philip Taylor" href="mailto:excors@gmail.com">
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://www.w3.org/TR/png-3/#apng-frame-based-animation">
<link rel="help" href="https://www.w3.org/TR/png-3/#fcTL-chunk">
<link rel="match" href="apng-blue-rectangle-ref.html">
<meta name="assert" content="num_plays indicates the number of times that this animation should play. If nonzero, the animation should come to rest on the final frame at the end of the last play.">
<script>
const el = document.querySelector(".reftest-wait");
setTimeout(() => {
el.classList.remove('reftest-wait');
}, 3000);
</script>
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if this flashes yellow for one second, then stays blue forever</p>
<div class="test"><img src="support/031.png" alt=""></div>
</body>
35 changes: 35 additions & 0 deletions png/apng/acTL-plays-two.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, plays</title>
<link rel="author" title="Philip Taylor" href="mailto:excors@gmail.com">
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://www.w3.org/TR/png-3/#apng-frame-based-animation">
<link rel="help" href="https://www.w3.org/TR/png-3/#fcTL-chunk">
<link rel="match" href="apng-blue-rectangle-ref.html">
<meta name="assert" content="num_plays indicates the number of times that this animation should play. If nonzero, the animation should come to rest on the final frame at the end of the last play.">
<script>
const el = document.querySelector(".reftest-wait");
setTimeout(() => {
el.classList.remove('reftest-wait');
}, 5000);
</script>
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if this flashes yellow for one second, then
blue for one second, then yellow for one second, then blue forever.</p>
<div class="test"><img src="support/032.png" alt=""></div>
</body>
24 changes: 24 additions & 0 deletions png/apng/apng-blue-rect-checkerboard-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, dispose ops and regions</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if you see solid blue rectangle containing a smaller region with a grey checkerboard, and no red.</p>
<div class="test"><img src="support/blue-with-hole.png" alt=""></div>
</body>
</html>
23 changes: 23 additions & 0 deletions png/apng/apng-blue-rectangle-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, plays</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if this flashes yellow for one second, then
blue for one second, then yellow for one second, then blue forever.</p>
<div class="test"><img src="support/blue.png" alt=""></div>
</body>
24 changes: 24 additions & 0 deletions png/apng/apng-checkerboard-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, dispose ops</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if you see a grey checkerboard, and no red.</p>
<div class="test"></div>
</body>
</html>
22 changes: 22 additions & 0 deletions png/apng/apng-darkblue-rectangle-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, bit depth</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if you see a dark blue rectangle, and no red.</p>
<div class="test"><img src="support/darkblue.png" alt=""></div>
</body>
8 changes: 8 additions & 0 deletions png/apng/apng-graywhite-rectangle-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, bit depth. 8bit grayscale</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<body>
<p>Test passes if you see a gray rectangle, with a white rectangle in the middle, and no red.</p>
<div class="test"><img src="support/gray-white.png" alt=""></div>
</body>
8 changes: 8 additions & 0 deletions png/apng/apng-lime-rectangle-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<body>
<p>Test passes if you see a lime green rectangle, and no red.</p>
<div class="test"><img src="support/lime.png" alt=""></div>
</body>
8 changes: 8 additions & 0 deletions png/apng/apng-solidgray-rectangle-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, bit depth. blended 8bit grayscale with alpha</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<body>
<p>Test passes if you see a solid gray rectangle, and no red.</p>
<div class="test"><img src="support/solid-gray.png" alt=""></div>
</body>
8 changes: 8 additions & 0 deletions png/apng/apng-solidlime-rectangle-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, bit depth. 1-bit palette</title>
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<body>
<p>Test passes if you see a solid lime green rectangle, and no red.</p>
<div class="test"><img src="support/lime.png" alt=""></div>
</body>
35 changes: 35 additions & 0 deletions png/apng/fcTL-acTL-ordering.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, blend ops</title>
<link rel="author" title="Philip Taylor" href="mailto:excors@gmail.com">
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://www.w3.org/TR/png-3/#apng-frame-based-animation">
<link rel="help" href="https://www.w3.org/TR/png-3/#fcTL-chunk">
<link rel="match" href="apng-lime-rectangle-ref.html">
<meta name="assert" content="acTL must be before PLTE and IDAT. One fcTL may occur before IDAT; all others shall be after IDAT">
<script>
const el = document.querySelector(".reftest-wait");
setTimeout(() => {
el.classList.remove('reftest-wait');
}, 2000);
</script>
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if you see a lime green rectangle, and no red.</p>
<div class="test"><img src="support/024.png" alt=""></div>
</body>
</html>
35 changes: 35 additions & 0 deletions png/apng/fcTL-blend-over-repeatedly.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, blend ops</title>
<link rel="author" title="Philip Taylor" href="mailto:excors@gmail.com">
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://www.w3.org/TR/png-3/#apng-frame-based-animation">
<link rel="help" href="https://www.w3.org/TR/png-3/#fcTL-chunk">
<link rel="match" href="apng-lime-rectangle-ref.html">
<meta name="assert" content="If blend_op is APNG_BLEND_OP_OVER the frame should be composited onto the output buffer based on its alpha, using a simple OVER operation as described in Alpha Channel Processing.">
<script>
const el = document.querySelector(".reftest-wait");
setTimeout(() => {
el.classList.remove('reftest-wait');
}, 2500);
</script>
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if you see a lime green rectangle, and no red.</p>
<div class="test"><img src="support/021.png" alt=""></div>
</body>
</html>
35 changes: 35 additions & 0 deletions png/apng/fcTL-blend-over-solid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, blend ops</title>
<link rel="author" title="Philip Taylor" href="mailto:excors@gmail.com">
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://www.w3.org/TR/png-3/#apng-frame-based-animation">
<link rel="help" href="https://www.w3.org/TR/png-3/#fcTL-chunk">
<link rel="match" href="apng-lime-rectangle-ref.html">
<meta name="assert" content="If blend_op is APNG_BLEND_OP_OVER the frame should be composited onto the output buffer based on its alpha, using a simple OVER operation as described in Alpha Channel Processing.">
<script>
const el = document.querySelector(".reftest-wait");
setTimeout(() => {
el.classList.remove('reftest-wait');
}, 2000);
</script>
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if you see a lime green rectangle, and no red.</p>
<div class="test"><img src="support/020.png" alt=""></div>
</body>
</html>
35 changes: 35 additions & 0 deletions png/apng/fcTL-blend-source-nearly-transparent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>PNG Third Edition: animated PNG, blend ops</title>
<link rel="author" title="Philip Taylor" href="mailto:excors@gmail.com">
<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
<link rel="help" href="https://www.w3.org/TR/png-3/#apng-frame-based-animation">
<link rel="help" href="https://www.w3.org/TR/png-3/#fcTL-chunk">
<link rel="match" href="nearly-transparent-ref.html">
<meta name="assert" content="If blend_op is APNG_BLEND_OP_SOURCE all color components of the frame, including alpha, overwrite the current contents of the frame's output buffer region.">
<script>
const el = document.querySelector(".reftest-wait");
setTimeout(() => {
el.classList.remove('reftest-wait');
}, 1200);
</script>
<style>
.test {
width: 128px;
height: 64px;
background-color: white;
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size: 16px 16px;
background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}
</style>
<body>
<p>Test passes if you see a grey checkerboard, and no red.</p>
<div class="test"><img src="support/019.png" alt=""></div>
</body>
</html>