| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
| <title>Reflection Redraw</title> |
| <style type="text/css" media="screen"> |
| #container { |
| position: absolute; |
| top: 120px; |
| } |
| .box { |
| position: absolute; |
| width: 150px; |
| height: 100px; |
| margin: 10px; |
| padding: 10px; |
| -webkit-box-sizing: border-box; |
| text-align: center; |
| border: 1px solid black; |
| background-color: gray; |
| } |
| .reflect { |
| background-color: gray; |
| -webkit-box-reflect: left 5px; |
| } |
| |
| </style> |
| <script src="resources/text-based-repaint.js" type="text/javascript" charset="utf-8"></script> |
| <script type="text/javascript" charset="utf-8"> |
| function repaintTest() |
| { |
| var paras = document.getElementsByTagName('p'); |
| for (var i = 0; i < paras.length; ++i) |
| paras[i].style.color = 'green'; |
| } |
| </script> |
| </head> |
| <body onload="runRepaintTest()"> |
| <div id="container"> |
| <div class="box reflect-top" style="left: 275px; -webkit-box-reflect: above 10px;"> |
| <p>The color of this text in the reflection should be green</p> |
| </div> |
| |
| <div class="box reflect-left" style="top: 110px; left: 200px; -webkit-box-reflect: left 10px;"> |
| <p>The color of this text in the reflection should be green</p> |
| </div> |
| |
| <div class="box reflect-right" style="top: 110px; left: 350px; -webkit-box-reflect: right 10px;"> |
| <p>The color of this text in the reflection should be green</p> |
| </div> |
| |
| <div class="box reflect-bottom" style="top: 220px; left: 275px; -webkit-box-reflect: below 10px;"> |
| <p>The color of this text in the reflection should be green</p> |
| </div> |
| </div> |
| |
| </html> |
