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 |