| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 #container > div { | 3 #container > div { |
| 4 font-size:1px; | 4 font-size:1px; |
| 5 } | 5 } |
| 6 img { | 6 img { |
| 7 width:100px; | 7 width:100px; |
| 8 height:20px; | 8 height:20px; |
| 9 margin-left:100px; | 9 margin-left:100px; |
| 10 } | 10 } |
| 11 iframe { | 11 iframe { |
| 12 display:block; | 12 display:block; |
| 13 height:20px; | 13 height:20px; |
| 14 } | 14 } |
| 15 </style> | 15 </style> |
| 16 <div id="container"> | 16 <div id="container"> |
| 17 <p>This tests <a href="http://www.w3.org/TR/css3-background/#background-posi
tioning-area">background positioning area</a> in vertical-rl.</p> | 17 <p>This tests <a href="http://www.w3.org/TR/css3-background/#background-posi
tioning-area">background positioning area</a> in vertical-rl.</p> |
| 18 <p>Test passes if single green rectangle below.</p> | 18 <p>Test passes if single green rectangle below.</p> |
| 19 <div><img src="../images/resources/green-10.png"></div> | 19 <div><img src="../../images/resources/green-10.png"></div> |
| 20 </div> | 20 </div> |
| 21 <template data-width="200px"> | 21 <template data-width="200px"> |
| 22 <style> | 22 <style> |
| 23 html { | 23 html { |
| 24 background-image:url(../images/resources/green-10.png); | 24 background-image:url(../../images/resources/green-10.png); |
| 25 background-repeat:no-repeat; | 25 background-repeat:no-repeat; |
| 26 background-size:100% 100%; | 26 background-size:100% 100%; |
| 27 -webkit-writing-mode:vertical-rl; | 27 -webkit-writing-mode:vertical-rl; |
| 28 width:100px; | 28 width:100px; |
| 29 } | 29 } |
| 30 </style> | 30 </style> |
| 31 </template> | 31 </template> |
| 32 <template data-width="200px"> | 32 <template data-width="200px"> |
| 33 <style> | 33 <style> |
| 34 html { | 34 html { |
| 35 background-image:url(../images/resources/green-10.png); | 35 background-image:url(../../images/resources/green-10.png); |
| 36 background-repeat:no-repeat; | 36 background-repeat:no-repeat; |
| 37 background-size:100% 100%; | 37 background-size:100% 100%; |
| 38 -webkit-writing-mode:vertical-rl; | 38 -webkit-writing-mode:vertical-rl; |
| 39 width:80px; | 39 width:80px; |
| 40 border-right:rgb(0,255,0) 20px solid; | 40 border-right:rgb(0,255,0) 20px solid; |
| 41 } | 41 } |
| 42 </style> | 42 </style> |
| 43 </template> | 43 </template> |
| 44 <template data-width="250px"> | 44 <template data-width="250px"> |
| 45 <style> | 45 <style> |
| 46 html { | 46 html { |
| 47 background-image:url(../images/resources/green-10.png); | 47 background-image:url(../../images/resources/green-10.png); |
| 48 background-repeat:no-repeat; | 48 background-repeat:no-repeat; |
| 49 background-size:100% 100%; | 49 background-size:100% 100%; |
| 50 -webkit-writing-mode:vertical-rl; | 50 -webkit-writing-mode:vertical-rl; |
| 51 width:50px; | 51 width:50px; |
| 52 margin-right:50px; | 52 margin-right:50px; |
| 53 padding-right:50px; | 53 padding-right:50px; |
| 54 } | 54 } |
| 55 </style> | 55 </style> |
| 56 </template> | 56 </template> |
| 57 <template data-width="250px"> | 57 <template data-width="250px"> |
| 58 <style> | 58 <style> |
| 59 html { | 59 html { |
| 60 background-image:url(../images/resources/green-10.png); | 60 background-image:url(../../images/resources/green-10.png); |
| 61 background-repeat:no-repeat; | 61 background-repeat:no-repeat; |
| 62 background-size:100% 100%; | 62 background-size:100% 100%; |
| 63 -webkit-writing-mode:vertical-rl; | 63 -webkit-writing-mode:vertical-rl; |
| 64 width:50px; | 64 width:50px; |
| 65 margin-right:50px; | 65 margin-right:50px; |
| 66 padding-right:50px; | 66 padding-right:50px; |
| 67 border-left:20px white solid; | 67 border-left:20px white solid; |
| 68 } | 68 } |
| 69 </style> | 69 </style> |
| 70 </template> | 70 </template> |
| 71 <script> | 71 <script> |
| 72 var templates = document.getElementsByTagName("template"); | 72 var templates = document.getElementsByTagName("template"); |
| 73 for (var i = 0; i < templates.length; i++) { | 73 for (var i = 0; i < templates.length; i++) { |
| 74 var template = templates[i]; | 74 var template = templates[i]; |
| 75 var iframe = document.createElement("iframe"); | 75 var iframe = document.createElement("iframe"); |
| 76 iframe.srcdoc = template.innerHTML; | 76 iframe.srcdoc = template.innerHTML; |
| 77 iframe.frameBorder = 0; | 77 iframe.frameBorder = 0; |
| 78 iframe.width = template.dataset.width; | 78 iframe.width = template.dataset.width; |
| 79 container.appendChild(iframe); | 79 container.appendChild(iframe); |
| 80 } | 80 } |
| 81 </script> | 81 </script> |
| OLD | NEW |