<!DOCTYPE html>
<p>crbug.com/644802: Render alt text per html5 spec</p>
<div style="columns:4; -moz-columns: 4; height: 800px;">
<div style="break-inside: avoid;">
<p>Different dimensions</p>
1.<img src="test.jpg" alt="alt text" style="height:1px; width:1px; background-color: green;"/> <br>
2.<img src="test.jpg" alt="alt text" style="width:1px; background-color: green;"/><br>
3.<img src="test.jpg" alt="alt text" style="height:1px; background-color: green;"/><br>
4.<img src="test.jpg" alt="alt text" style="background-color: green;"/>
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, no alt text</p>
1.<img src="est.jpg" style="height:1px; width:1px; background-color: green;"/><br>
2.<img src="est.jpg" style="width:1px; background-color: green;"/><br>
3.<img src="est.jpg" style="height:1px; background-color: green;"/><br>
4.<img src="est.jpg" />
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, no alt text, src = ""</p>
1.<img src="" style="height:1px; width:1px; background-color: green;"/><br>
2.<img src="" style="width:1px; background-color: green;"/><br>
3.<img src="" style="height:1px; background-color: green;"/><br>
4.<img src="" /><br>
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, no alt text, no src</p>
1.<img style="height:1px; width:1px; background-color: green;"/> <br>
2.<img style="width:1px; background-color: green;"/> <br>
3.<img style="height:1px; background-color: green;"/> <br>
4.<img />
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, alt text, src = ""</p>
1.<img src="" alt="alt text" style="height:1px; width:1px; background-color: green;"/> <br>
2.<img src="" alt="alt text" style="width:1px; background-color: green;"/> <br>
3.<img src="" alt="alt text" style="height:1px; background-color: green;"/> <br>
4.<img src="" /> <br>
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, alt text, no src</p>
1.<img alt="alt text" style="height:1px; width:1px; background-color: green;"/> <br>
2.<img alt="alt text" style="width:1px; background-color: green;"/> <br>
3.<img alt="alt text" style="height:1px; background-color: green;"/> <br>
4.<img alt="alt text"/> <br>
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, alt text, src = </p>
1.<img src alt="alt text" style="height:1px; width:1px; background-color: green;"/> <br>
2.<img src alt="alt text" style="width:1px; background-color: green;"/> <br>
3.<img src alt="alt text" style="height:1px; background-color: green;"/> <br>
4.<img src /> <br>
</div>
</div>
Codebase Browser
chromium