[LFC] Introduce UsedHorizontalValues::Constraints
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / html / semantics / embedded-content / the-img-element / intrinsicsize / intrinsicsize-with-responsive-images.tentative.html
1 <!DOCTYPE html>
2 <body>
3 <script src="/resources/testharness.js"></script>
4 <script src="/resources/testharnessreport.js"></script>
5 <script>
6 'use strict';
7
8 const srcs = [
9   "/images/green.svg",
10   "/images/green.png",
11 ];
12
13 for (var src of srcs) {
14   async_test(t => {
15     var img = document.createElement('IMG');
16     img.intrinsicSize = '400 x 500';
17     var expected_intrinsic_width = 400;
18     var expected_intrinsic_height = 500;
19     var expected_width = expected_intrinsic_width;
20     var expected_height = expected_intrinsic_height;
21
22     document.body.appendChild(img);
23     img.addEventListener('load', t.step_func(() => {
24       assert_equals(img.width, expected_width, 'width');
25       assert_equals(img.height, expected_height, 'height');
26       assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
27       assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
28       t.done();
29     }));
30     img.srcset = src + ' 3x';
31   }, 'Test image ' + src + ' with no specified sizes, width, or height');
32
33   async_test(t => {
34     var img = document.createElement('IMG');
35     img.intrinsicSize = '400 x 500';
36     img.width = '800'; /* 2x of intrinsic width */
37     var expected_intrinsic_width = 400;
38     var expected_intrinsic_height = 500;
39     var expected_width = expected_intrinsic_width * 2;
40     var expected_height = expected_intrinsic_height * 2;
41
42     document.body.appendChild(img);
43     img.addEventListener('load', t.step_func(() => {
44       assert_equals(img.width, expected_width, 'width');
45       assert_equals(img.height, expected_height, 'height');
46       assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
47       assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
48       t.done();
49     }));
50     img.srcset = src + ' 3x';
51   }, 'Test image ' + src + ' with width = 800, no specified sizes, or height');
52
53   async_test(t => {
54     var img = document.createElement('IMG');
55     img.intrinsicSize = '400 x 500';
56     img.width = '800';
57     img.style = 'height:800px;';
58     var expected_intrinsic_width = 400;
59     var expected_intrinsic_height = 500;
60     var expected_width = 800;
61     var expected_height = 800;
62
63     document.body.appendChild(img);
64     img.addEventListener('load', t.step_func(() => {
65       assert_equals(img.width, expected_width, 'width');
66       assert_equals(img.height, expected_height, 'height');
67       assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
68       assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
69       t.done();
70     }));
71     img.srcset = src + ' 3x';
72   }, 'Test image ' + src + ' with width = 800, height = 800, and no specified sizes');
73 }
74
75 async_test(t => {
76   var img = document.createElement('IMG');
77   img.intrinsicSize = '400 x 500';
78   img.sizes = '100px';
79   var expected_intrinsic_width = 100;
80   var expected_intrinsic_height = 125;
81   var expected_width = 100;
82   var expected_height = 125;
83
84   document.body.appendChild(img);
85   img.addEventListener('load', t.step_func(() => {
86     assert_equals(img.width, expected_width, 'width');
87     assert_equals(img.height, expected_height, 'height');
88     assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
89     assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
90     t.done();
91   }));
92   img.srcset = '/images/background.png 32w';
93 }, 'Test image (32 x 32) with sizes = 100 and srcset descriptor = 32w');
94
95 </script>
96 </body>