third_party/WebKit/LayoutTests/fast/css/percent-width-img-src-change.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script type="text/javascript">
   5 var completed = 0, failures = 0, failuresDetail = "";
   6 if (window.testRunner) {
   7     testRunner.dumpAsText();
   8     testRunner.waitUntilDone();
   9 }
  10 function printResult() {
  11     document.getElementById("result").innerText = failures ? "FAIL: " + failures + " cases failed\n" + failuresDetail : "PASS";
  12     if (window.testRunner)
  13         testRunner.notifyDone();
  14 }
  15 function imageCheckForMax(image) {
  16     if (image.src.match("greenbox.png")  != null)
  17         image.src = "resources/greenbox-100px.png";
  18     else {
  19         ++completed;
  20         if (image.width != 100) {
  21             ++failures;
  22             failuresDetail +=  image.id + ": " + image.width + " (expected: " + 100 + ")\n";
  23         }
  24         if (completed == 4)
  25              printResult();
  26     }
  27 }
  28 </script>
  29 </head>
  30
  31 <body>
  32 <div id="result"></div>
  33 <table>
  34 <tbody>
  35 <tr>
  36 <td>
  37 <img id="percentWidthInTable" style="width:100%;" src="resources/greenbox.png" onload="imageCheckForMax(this)">
  38 </td>
  39 </tr>
  40 </tbody>
  41 </table>
  42 <table>
  43 <tbody>
  44 <tr>
  45 <td>
  46 <img id="percentMaxWidthInTable" style="max-width:100%;" src="resources/greenbox.png" onload="imageCheckForMax(this)">
  47 </td>
  48 </tr>
  49 </tbody>
  50 </table>
  51 <div style="position:absolute;top:110px;left:110px">
  52 <img id="percentWidthInAbsolute" style="width:100%;" src="resources/greenbox.png" onload="imageCheckForMax(this)">
  53 </div>
  54 <div style="position:absolute;top:220px;left:110px">
  55 <img id="percentMaxWidthInAbsolute" style="max-width:100%;" src="resources/greenbox.png" onload="imageCheckForMax(this)">
  56 </div>
  57 </body>
  58 </html>