blob: d1b50365211beb2e452fee72d5b16291182bc6ee [file] [log] [blame]
<!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, empty alt text</p>
1.<img alt="" src="test.jpg" style="height:25px; width:25px; background-color: green;"/><br>
2.<img alt="" src="test.jpg" style="height:50px; width:50px; background-color: green;"/><br>
3.<img alt="" src="test.jpg" style="width:50px; background-color: green;"/><br>
4.<img alt="" src="test.jpg" style="height:50px; background-color: green;"/><br>
5.<img alt="" src="test.jpg" />
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, empty alt text, src = ""</p>
1.<img alt="" src="" style="height:25px; width:25px; background-color: green;"/><br>
2.<img alt="" src="" style="height:50px; width:50px; background-color: green;"/><br>
3.<img alt="" src="" style="width:50px; background-color: green;"/><br>
4.<img alt="" src="" style="height:50px; background-color: green;"/><br>
5.<img alt="" src="" /><br>
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, empty alt text, no src</p>
1.<img alt="" style="height:25px; width:25px; background-color: green;"/> <br>
2.<img alt="" style="height:50px; width:50px; background-color: green;"/> <br>
3.<img alt="" style="width:50px; background-color: green;"/> <br>
4.<img alt="" style="height:50px; background-color: green;"/> <br>
5.<img alt="" />
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, empty alt text, src = </p>
1.<img src alt="" style="height:25px; width:25px; background-color: green;"/> <br>
2.<img src alt="" style="height:50px; width:50px; background-color: green;"/> <br>
3.<img src alt="" style="width:50px; background-color: green;"/> <br>
4.<img src alt="" style="height:50px; background-color: green;"/> <br>
5.<img src alt=""/> <br>
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, no alt text</p>
1.<img alt src="test.jpg" style="height:25px; width:25px; background-color: green;"/><br>
2.<img alt src="test.jpg" style="height:50px; width:50px; background-color: green;"/><br>
3.<img alt src="test.jpg" style="width:50px; background-color: green;"/><br>
4.<img alt src="test.jpg" style="height:50px; background-color: green;"/><br>
5.<img alt src="test.jpg" />
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, no alt text, src = ""</p>
1.<img alt src="" style="height:25px; width:25px; background-color: green;"/><br>
2.<img alt src="" style="height:50px; width:50px; background-color: green;"/><br>
3.<img alt src="" style="width:50px; background-color: green;"/><br>
4.<img alt src="" style="height:50px; background-color: green;"/><br>
5.<img alt src="" /><br>
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, no alt text, no src</p>
1.<img alt style="height:25px; width:25px; background-color: green;"/> <br>
2.<img alt style="height:50px; width:50px; background-color: green;"/> <br>
3.<img alt style="width:50px; background-color: green;"/> <br>
4.<img alt style="height:50px; background-color: green;"/> <br>
5.<img alt />
</div>
<div style="break-inside: avoid;">
<p>Different dimensions, no alt text, src = </p>
1.<img src alt style="height:25px; width:25px; background-color: green;"/> <br>
2.<img src alt style="height:50px; width:50px; background-color: green;"/> <br>
3.<img src alt style="width:50px; background-color: green;"/> <br>
4.<img src alt style="height:50px; background-color: green;"/> <br>
5.<img src alt/> <br>
</div>
</div>