block-shift-repaint.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <html>
  2. <head>
  3. <title>Test for http://bugs.webkit.org/show_bug.cgi?id=12079</title>
  4. <style type="text/css">
  5. div.playground { position: relative; width: 90px; height: 90px; }
  6. .red { background-color: yellow; }
  7. .blue { background-color: blue; }
  8. .green { background-color: green; }
  9. .zero { height: 0; width: 60px; }
  10. .half { height: 30px; width: 60px; }
  11. .full { height: 60px; width: 60px; }
  12. </style>
  13. <script src="resources/text-based-repaint.js" type="text/javascript"></script>
  14. <script type="text/javascript">
  15. function repaintTest()
  16. {
  17. var div1 = document.getElementById("div1");
  18. div1.style.height = "0";
  19. var div2 = document.getElementById("div2");
  20. div2.style.height = "30px";
  21. var top = document.getElementById("top");
  22. top.style.height = "0";
  23. var top = document.getElementById("innerDiv");
  24. innerDiv.style.height = "15px";
  25. }
  26. </script>
  27. </head>
  28. <body onload="runRepaintAndPixelTest()">
  29. <div class="playground">
  30. <div id="div1" class="blue half"></div>
  31. <div class="red half"></div>
  32. <div class="green half"></div>
  33. </div>
  34. <div class="playground">
  35. <div><div id="top" class="blue half"></div></div>
  36. <div class="red half"></div>
  37. <div class="green half"></div>
  38. </div>
  39. <div class="playground">
  40. <div id="div2" class="zero"></div>
  41. <div class="green half"></div>
  42. <div class="red half"></div>
  43. </div>
  44. <div class="playground" style="margin-top: 30px;">
  45. <div style="width: 10px; margin: auto;">
  46. <div id="innerDiv"></div>
  47. </div>
  48. <div class="half"></div>
  49. <div class="half" style="border-top: solid yellow 8px;"></div>
  50. </div>
  51. </body>
  52. </html>