serenity/Base/res/html/misc/gifsuite.html
2020-11-08 21:40:47 +01:00

184 lines
8.2 KiB
HTML

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>GIF Suite Image List</title>
<style>
.b { background:url(gifsuite_files/bkgd.png); }
</style>
</head>
<body class="vsc-initialized">
<h1>GIF Suite Image List</h1>
<p>
Test GIF images are displayed in the leftmost column. Where they contain multiple frames,
each frame is rendered as a reference PNG in subsequent columns, exactly as it should appear.
Any differences indicate a bug in the GIF decoder.
</p>
<table cellpadding="8" border="1">
<tbody>
<tr>
<th>Image</th>
<th>Frame 1</th>
<th>Frame 2</th>
<th>Frame 3</th>
<th>Frame 4</th>
<th>Notes</th>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/static_nontransparent.gif"></td>
<td class="b"><img src="gifsuite_files/static_nontransparent.png"></td>
<td class="b">N/A</td>
<td class="b">N/A</td>
<td class="b">N/A</td>
<td>Static gif with no animation, no transparency</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_noloop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_noloop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_noloop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_noloop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_noloop-3.png"></td>
<td>Animated gif with 4 frames, no loop, no transparency</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_loop-3.png"></td>
<td>Animated gif with 4 frames, looping forever, no transparency</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_interlaced_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_interlaced_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_interlaced_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_interlaced_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_interlaced_loop-3.png"></td>
<td>Interlaced gif with 4 frames, looping forever, no transparency</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_loop_variable_delay.gif"></td>
<td class="b"><img src="gifsuite_files/animated_loop_variable_delay-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_loop_variable_delay-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_loop_variable_delay-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_loop_variable_delay-3.png"></td>
<td>Animated gif with 4 frames, looping forever, no transparency, shorter delay between frames 2 and 3</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/static_transparent.gif"></td>
<td class="b"><img src="gifsuite_files/static_transparent.png"></td>
<td class="b">N/A</td>
<td class="b">N/A</td>
<td class="b">N/A</td>
<td>Static transparent gif with no animation</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_transparent_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop-3.png"></td>
<td>Transparent gif with 4 frames, loops forever</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_transparent_restoreprev_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_restoreprev_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_restoreprev_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_restoreprev_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_restoreprev_loop-3.png"></td>
<td>Transparent gif with 4 frames, loops forever, restore previous</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_transparent_firstframerestoreprev_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_firstframerestoreprev_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_firstframerestoreprev_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_firstframerestoreprev_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_firstframerestoreprev_loop-3.png"></td>
<td>Transparent gif with 4 frames, loops forever, first frame restore previous</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_norestore_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_norestore_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_norestore_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_norestore_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_norestore_loop-3.png"></td>
<td>Transparent gif with 4 transparent frames, loops forever, no dispose</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restorebackground_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restorebackground_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restorebackground_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restorebackground_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restorebackground_loop-3.png"></td>
<td>Transparent gif with 4 transparent frames, loops forever, restore background</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restoreprev_loop.gif"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restoreprev_loop-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restoreprev_loop-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restoreprev_loop-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_frame_restoreprev_loop-3.png"></td>
<td>Transparent gif with 4 transparent frames, loops forever, restore previous</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/animated_transparent_loop_frames_out_of_bounds.gif"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop_frames_out_of_bounds-0.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop_frames_out_of_bounds-1.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop_frames_out_of_bounds-2.png"></td>
<td class="b"><img src="gifsuite_files/animated_transparent_loop_frames_out_of_bounds-3.png"></td>
<td>
<p><strong>Erroneous test case:</strong> frame out-of-bounds.
The first frame is located at offset (200,0) and so is wholly outside of the bounds of the 100x100 GIF.
The last frame is partially out of bounds, located at (60,60) and of size (50,50).</p>
<p>Note that the GIF specification is unclear on what to do if a frame extends past the logical
screen of the GIF, therefore different renderers behave differently here:</p>
<ul>
<li>Firefox, ImageMagick: don't expand logical screen, render unwritten pixels as transparent
<strong>(this is what the reference frames show)</strong>
<li>Chrome, Edge, IE11: expand logical screen, render unwritten pixels as transparent
<li>Safari: don't expand logical screen, render unwritten pixels as GIF background colour
</ul>
</td>
</tr>
<tr>
<td class="b"><img src="gifsuite_files/bad_lzw_data.gif"></td>
<td class="b">N/A</td>
<td class="b">N/A</td>
<td class="b">N/A</td>
<td class="b">N/A</td>
<td>
<p><strong>Erroneous test case:</strong>. Final frame contains bad LZW data and will fail to decode.
Decoder implementations are not under any obligation to render anything useful here, however they
should fail gracefully and not crash.</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>