img-sizes-auto.html (1262B)
1 <!doctype html> 2 <title>default styles for <img sizes=auto></title> 3 <meta name="viewport" content="width=device-width"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/html/rendering/support/test-ua-stylesheet.js"></script> 7 <style> 8 /* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */ 9 @namespace url(urn:not-html); 10 11 img:is([sizes="auto" i], [sizes^="auto," i]) { 12 contain: size !important; 13 contain-intrinsic-size: 300px 150px; 14 } 15 </style> 16 17 <style> 18 /* Test !important */ 19 img.test-important { contain: style; contain-intrinsic-size: 30px 15px; } 20 </style> 21 22 <div id="log"></div> 23 24 <div id="tests"> 25 <img sizes=auto> 26 <img sizes=auto width=10 height=20> 27 <img sizes=AuTo> 28 <img sizes=auto,xyz> 29 <img sizes=AuTo,xyz> 30 31 <!-- UA style should not apply: --> 32 <img> 33 <img sizes> 34 <img sizes=xyz,auto> 35 <picture data-skip> 36 <source data-skip sizes=auto> 37 <img> 38 </picture> 39 40 <!-- Test !important --> 41 <img sizes=auto class=test-important> 42 </div> 43 44 <div id="refs"></div> 45 46 <script> 47 const props = [ 48 'contain', 49 'contain-intrinsic-size' 50 ]; 51 runUAStyleTests(props); 52 53 </script>