summaryrefslogtreecommitdiff
path: root/Base/res/html/misc/gifsuite.html
blob: fb9756561ca4468bd454f29c0fb70ffdbcbd7a65 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!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>