| <!DOCTYPE html> |
| <style> |
| #container > div { |
| font-size:1px; |
| } |
| img { |
| width:100px; |
| height:20px; |
| margin-left:100px; |
| } |
| iframe { |
| display:block; |
| height:20px; |
| } |
| </style> |
| <div id="container"> |
| <p>This tests <a href="http://www.w3.org/TR/css3-background/#background-positioning-area">background positioning area</a> in vertical-rl.</p> |
| <p>Test passes if single green rectangle below.</p> |
| <div><img src="../../images/resources/green-10.png"></div> |
| </div> |
| <template data-width="200px"> |
| <style> |
| html { |
| background-image:url(../../images/resources/green-10.png); |
| background-repeat:no-repeat; |
| background-size:100% 100%; |
| -webkit-writing-mode:vertical-rl; |
| width:100px; |
| } |
| </style> |
| </template> |
| <template data-width="200px"> |
| <style> |
| html { |
| background-image:url(../../images/resources/green-10.png); |
| background-repeat:no-repeat; |
| background-size:100% 100%; |
| -webkit-writing-mode:vertical-rl; |
| width:80px; |
| border-right:rgb(0,255,0) 20px solid; |
| } |
| </style> |
| </template> |
| <template data-width="250px"> |
| <style> |
| html { |
| background-image:url(../../images/resources/green-10.png); |
| background-repeat:no-repeat; |
| background-size:100% 100%; |
| -webkit-writing-mode:vertical-rl; |
| width:50px; |
| margin-right:50px; |
| padding-right:50px; |
| } |
| </style> |
| </template> |
| <template data-width="250px"> |
| <style> |
| html { |
| background-image:url(../../images/resources/green-10.png); |
| background-repeat:no-repeat; |
| background-size:100% 100%; |
| -webkit-writing-mode:vertical-rl; |
| width:50px; |
| margin-right:50px; |
| padding-right:50px; |
| border-left:20px white solid; |
| } |
| </style> |
| </template> |
| <script> |
| var templates = document.getElementsByTagName("template"); |
| for (var i = 0; i < templates.length; i++) { |
| var template = templates[i]; |
| var iframe = document.createElement("iframe"); |
| iframe.srcdoc = template.innerHTML; |
| iframe.frameBorder = 0; |
| iframe.width = template.dataset.width; |
| container.appendChild(iframe); |
| } |
| </script> |
