rendering-broken-images-empty-alt.html

<!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>
chromium/third_party/blink/web_tests/images/rendering-broken-images-empty-alt.html
