| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| height: 100px; |
| width: 100px; |
| margin: 5px; |
| border: 1px solid black; |
| float: left; |
| } |
| br { clear: both; } |
| </style> |
| <script> |
| const UNPREFIXED_STYLE = "linear-gradient(to bottom, orange, blue)"; |
| const PREFIXED_STYLE = "-webkit-linear-gradient( bottom, orange, blue)"; |
| |
| function doTest() |
| { |
| initStyles(); |
| } |
| |
| function initStyles() |
| { |
| u.style.backgroundImage = UNPREFIXED_STYLE; |
| u2p.style.backgroundImage = PREFIXED_STYLE; |
| |
| p.style.backgroundImage = PREFIXED_STYLE; |
| p2u.style.backgroundImage = UNPREFIXED_STYLE; |
| } |
| window.addEventListener('load', doTest, false); |
| </script> |
| </head> |
| <body> |
| Orange at top:<br> |
| <div id="u"></div> |
| <div id="p2u"></div> |
| <br>Blue at top:<br> |
| <div id="p"></div> |
| <div id="u2p"></div> |
| </body> |
| </html> |
