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
|
<!--------------------------------------
Basics
--------------------------------------->
<!--no src attributes-->
<p><img /></p>
<p><img src="" /></p>
<!--basics-->
<p><img src="/relative_url" /></p>
<p><img src="www.example.com/absolute_url" /></p>
<!--other attributes-->
<p><img src="/url" alt="alt text" /></p>
<p><img src="/url" title="title text" /></p>
<p><img src="/url" alt="alt text" title="title text" /></p>
<!--------------------------------------
Special Characters
--------------------------------------->
<p><img src="/url" alt=" the alt attribute " /></p>
<p><img src="/url" alt='the alt "attribute"' /></p>
<p><img src="/url" alt="the alt 'attribute'" /></p>
<p><img src="/url" alt="the
alt
attribute" /></p>
<p><img src="/url" alt="the [alt] attribute" /></p>
<p><img src="/url" alt="the (alt) attribute" /></p>
<p><img src="/url" alt="the ](alt) attribute" /></p>
<hr />
<p><img src="/url" title=" the title attribute " /></p>
<p><img src="/url" title='the title "attribute"' /></p>
<p><img src="/url" title="the title 'attribute'" /></p>
<p><img src="/url" title="the
title
attribute" /></p>
<p><img src="/url" title="the [title] attribute" /></p>
<p><img src="/url" title="the (title) attribute" /></p>
<p><img src="/url" title="the )(title) attribute" /></p>
<!--------------------------------------
Weird URLs
--------------------------------------->
<!--image with data uri-->
<p><img src="data:image/gif;base64,abcdefghij" /></p>
<p><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1080' height='956'></svg>" /></p>
<!--------------------------------------
Combinations
--------------------------------------->
<!-- link with just image -->
<p>
<a><i><img src="/search.svg" alt="Such Icon" /></i></a>
<a><i><img src="/email.svg" alt="Email Icon" /></i></a>
</p>
<p>
<i><a><img src="/search.svg" alt="Such Icon" /></a></i>
<i><a><img src="/email.svg" alt="Email Icon" /></a></i>
</p>
<hr />
<p>
<!--image inside a link-->
<a href="/page.html" title="link title text">
<img src="/image.jpg" alt="image alt text" title="image title text" />
</a>
<br />
<!--image inside an empty link-->
<a href="" title="link title text">
<img src="/src" alt="image alt text" />
</a>
</p>
<!--------------------------------------
Picture / Figure
--------------------------------------->
<picture>
<source srcset="/image.webp 960w, /image.webp 520w" sizes="(max-width: 519px) 100vw" type="image/webp" />
<img src="/image.jpg" title="title text" alt="alt text" />
</picture>
<hr />
<figure>
<div>
<picture>
<source srcset="/image.webp 960w, /image.webp 520w" sizes="(max-width: 519px) 100vw" type="image/webp" />
<img src="/image.jpg" title="title text" alt="alt text" />
</picture>
</div>
<figcaption>
caption text
</figcaption>
</figure>
|
