| <!DOCTYPE html> |
| <style> |
| img { |
| height: 100%; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| <script> |
| function setHeight(){ |
| document.getElementById('container').style.height = '10px'; |
| } |
| var numLoads = 0; |
| function loaded() { |
| numLoads++; |
| if (numLoads == document.querySelectorAll('img').length) |
| checkLayout('img'); |
| } |
| </script> |
| |
| <p>You should see two 20x10 green squares below.</p> |
| |
| <div style="height: 10px"> |
| <img data-expected-width=20 data-expected-height=10 onload="loaded()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAAABmJLR0QA/wD/AP+gvaeTAAAAj0lEQVR4nO3RQQ0AIBDAsAP/nuGNAvZoFSzZmjNnyNi/A3gZEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsRcpb0CYiXEAt8AAAAASUVORK5CYII="> |
| </div> |
| |
| <br><br> |
| |
| <div id="container"> |
| <!-- 100x50 green square --> |
| <img data-expected-width=20 data-expected-height=10 onload="setHeight();loaded()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAYAAACqNX6+AAAABmJLR0QA/wD/AP+gvaeTAAAAj0lEQVR4nO3RQQ0AIBDAsAP/nuGNAvZoFSzZmjNnyNi/A3gZEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsQYEmNIjCExhsRcpb0CYiXEAt8AAAAASUVORK5CYII="> |
| </div> |
