img-fallback-baseline-alignment.html (947B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Image fallback baseline alignment</title> 4 <link rel="author" href="mailto:zhoupeng.1996@bytedance.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#images-3"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 div { 10 background: red; 11 line-height: 200px; 12 width: 100px; 13 } 14 img { 15 border-right: solid 30px black; 16 width: 30px; 17 height: 30px; 18 } 19 </style> 20 <body> 21 <div> 22 <img src=""> 23 </div> 24 <script> 25 async_test(t => { 26 const img = document.querySelector('img'); 27 const div = document.querySelector('div'); 28 img.src = ''; 29 img.onerror = t.step_func_done(() => { 30 assert_greater_than(img.offsetTop, div.offsetTop); 31 assert_less_than(img.offsetTop + img.offsetHeight, div.offsetTop + div.offsetHeight); 32 }); 33 }); 34 </script> 35 </body>