-
Notifications
You must be signed in to change notification settings - Fork 143
Expand file tree
/
Copy pathexpected.html
More file actions
22 lines (22 loc) · 3.42 KB
/
expected.html
File metadata and controls
22 lines (22 loc) · 3.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html lang="en">
<head>
<meta charset="utf-8">
<title>...</title>
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/foo1.jpg" imagesrcset="https://example.com/foo1-480w.jpg 480w, https://example.com/foo1-800w.jpg 800w" imagesizes="(width <= 480px) 432px, (480px < width <= 600px) 540px, (600px < width <= 782px) 703px, (782px < width) 900px" crossorigin="anonymous" media="screen">
</head>
<body>
<div id="page">
<div class="carousel">
<img data-od-removed-loading="lazy" data-od-replaced-fetchpriority="low" data-od-replaced-sizes="(max-width: 600px) 480px, 800px" src="https://example.com/foo1.jpg" alt="Foo" width="1200" height="800" fetchpriority="high" srcset="https://example.com/foo1-480w.jpg 480w, https://example.com/foo1-800w.jpg 800w" sizes="(width <= 480px) 432px, (480px < width <= 600px) 540px, (600px < width <= 782px) 703px, (782px < width) 900px" crossorigin="anonymous">
<img data-od-added-fetchpriority data-od-removed-loading="eager" data-od-replaced-sizes="(max-width: 600px) 480px, 800px" fetchpriority="low" src="https://example.com/foo2.jpg" alt="Foo" width="1200" height="800" srcset="https://example.com/foo2-480w.jpg 480w, https://example.com/foo2-800w.jpg 800w" sizes="(width <= 480px) 432px, (480px < width <= 600px) 540px, (600px < width <= 782px) 703px, (782px < width) 900px">
<img data-od-replaced-fetchpriority="high" data-od-replaced-sizes="(max-width: 600px) 480px, 800px" src="https://example.com/foo3.jpg" alt="Foo" width="1200" height="800" fetchpriority="low" srcset="https://example.com/foo3-480w.jpg 480w, https://example.com/foo3-800w.jpg 800w" sizes="(width <= 480px) 432px, (480px < width <= 600px) 540px, (600px < width <= 782px) 703px, (782px < width) 900px">
</div>
<p>Pretend this is a super long paragraph that pushes the next image mostly out of the initial viewport.</p>
<img data-od-removed-fetchpriority="high" data-od-removed-loading="lazy" data-od-replaced-sizes="(max-width: 1024px) 100vw, 1024px" src="https://example.com/bar.jpg" alt="Bar" width="1024" height="768" srcset="https://example.com/bar-300w.jpg 300w, https://example.com/bar-480w.jpg 480w, https://example.com/bar-800w.jpg 800w, https://example.com/bar-900w.jpg 900w, https://example.com/bar-1000w.jpg 1000w" sizes="(width <= 480px) 470px, (480px < width <= 600px) 590px, (600px < width <= 782px) 772px, (782px < width) 990px">
<p>Now the following image is definitely outside the initial viewport.</p>
<img data-od-added-loading data-od-removed-fetchpriority="high" data-od-replaced-sizes="(max-width: 3000px) 100vw, 3000px" loading="lazy" src="https://example.com/baz.jpg" alt="Baz" width="3000" height="1500" srcset="https://example.com/baz-300w.jpg 300w, https://example.com/baz-480w.jpg 480w, https://example.com/baz-800w.jpg 800w, https://example.com/baz-900w.jpg 900w, https://example.com/baz-1000w.jpg 1000w, https://example.com/baz-1500w.jpg 1500w, https://example.com/baz-2000w.jpg 2000w, https://example.com/baz-2500w.jpg 2500w" sizes="auto, (max-width: 3000px) 100vw, 3000px">
<img data-od-removed-fetchpriority="high" data-od-replaced-loading="eager" src="https://example.com/qux.jpg" alt="Qux" width="10" height="10" loading="lazy">
<img src="https://example.com/quux.jpg" alt="Quux" width="10" height="10" loading="LAZY"><!-- This one is all good. -->
</div>
</body>
</html>