OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <script> | |
4 if (window.testRunner) { | |
5 testRunner.dumpDOMAsWebArchive(); | |
6 testRunner.waitUntilDone(); | |
7 } | |
8 | |
9 function notifyDone() | |
10 { | |
11 if (window.testRunner) { | |
12 // FIXME: Web fonts are loaded asynchronously, and there is | |
13 // no way to know when they're done, so just wait a bit. | |
14 setTimeout("testRunner.notifyDone()", 1000); | |
15 } | |
16 } | |
17 </script> | |
18 <style> | |
19 | |
20 @font-face { | |
21 font-family: webkit-ahem; | |
22 font-style: normal; | |
23 src: url(firstInvalidURL), url(secondInvalidURL), url(../resources/Ahem.ttf)
; | |
24 } | |
25 | |
26 div.background { | |
27 border: solid black 1px; | |
28 height: 64px; | |
29 background: url(resources/apple.gif?background) no-repeat top left; | |
30 } | |
31 | |
32 div.background-image { | |
33 border: solid black 1px; | |
34 height: 125px; | |
35 background-image: url(resources/apple.gif?background-image); | |
36 } | |
37 | |
38 div.content { | |
39 border: solid black 1px; | |
40 height: 64px; | |
41 } | |
42 | |
43 img.content { | |
44 content: url(resources/apple.gif?content); | |
45 } | |
46 | |
47 div.cursor { | |
48 border: solid black 1px; | |
49 height: 100px; | |
50 cursor: url(resources/apple.gif?cursor), auto; | |
51 } | |
52 | |
53 div.font-family { | |
54 border: solid black 1px; | |
55 height: 25px; | |
56 } | |
57 | |
58 span.font-family { | |
59 font-family: webkit-ahem; | |
60 } | |
61 | |
62 div.list-style-image { | |
63 border: solid black 1px; | |
64 list-style: square inside url(resources/apple.gif?list-style-image); | |
65 } | |
66 | |
67 div.webkit-border-image { | |
68 border: solid black 1px; | |
69 display: inline-block; | |
70 height: 100px; | |
71 width: 200px; | |
72 border-color: transparent; | |
73 border-style: solid; | |
74 -webkit-box-sizing: border-box; | |
75 -webkit-border-fit: lines; | |
76 border-width: 20px 15px 10px 15px; | |
77 -webkit-border-image: url(resources/apple.gif?webkit-border-image) 20 15 10
15; | |
78 } | |
79 | |
80 div.webkit-box-reflect { | |
81 border: solid black 1px; | |
82 height: 130px; | |
83 background-color: white; | |
84 } | |
85 | |
86 img.webkit-box-reflect { | |
87 -webkit-box-reflect: below 2px url(resources/apple.gif?webkit-box-reflect) 7
5 75 75 75 stretch stretch; | |
88 } | |
89 | |
90 div.webkit-mask { | |
91 border: solid black 1px; | |
92 background-color: pink; | |
93 height: 100px; | |
94 -webkit-mask: url(resources/apple.gif?mask) repeat scroll center top; | |
95 } | |
96 | |
97 div.webkit-mask-box-image { | |
98 border: solid black 1px; | |
99 height: 125px; | |
100 padding: 50px; | |
101 color: white; | |
102 background-color: maroon; | |
103 -webkit-mask-box-image: url(resources/apple.gif?mask-box-image) 75 75 75 75; | |
104 } | |
105 | |
106 div.webkit-mask-image { | |
107 border: solid black 1px; | |
108 height: 100px; | |
109 margin: 6px; | |
110 border: 1px dotted green; | |
111 color: white; | |
112 background-color: black; | |
113 -webkit-mask-image: url(resources/apple.gif?mask-image); | |
114 -webkit-mask-origin: padding; | |
115 -webkit-mask-size: 25px 25px; | |
116 } | |
117 | |
118 div.webkit-mask-image-list { | |
119 border: solid black 1px; | |
120 height: 140px; | |
121 border: 10px solid black; | |
122 background-color: lime; | |
123 -webkit-mask-image: url(resources/apple.gif?mask-top-left), url(resources/ap
ple.gif?mask-top-right), url(resources/apple.gif?mask-bottom-left), url(resource
s/apple.gif?mask-bottom-right), url(resources/apple.gif?mask-top), url(resources
/apple.gif?mask-right), url(resources/apple.gif?mask-bottom), url(resources/appl
e.gif?mask-left), url(resources/apple.gif?mask-center); | |
124 -webkit-mask-position: top left, top right, bottom left, bottom right, top c
enter, center right, bottom center, center left, center; | |
125 -webkit-mask-origin: border; | |
126 -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-x, r
epeat-y, repeat-x, repeat-y, repeat; | |
127 -webkit-mask-composite: copy; | |
128 } | |
129 | |
130 </style> | |
131 </head> | |
132 <body onload="notifyDone()"> | |
133 <div><p>This page tests that url() resources referenced in CSS stylesheets are s
aved in webarchives.</p></div> | |
134 <div class="background">This element should have one Apple logo in the backgroun
d at the top left.</div> | |
135 <div class="background-image">This element should have repeated Apple logos in b
oth x- and y-dimensions in the background.</div> | |
136 <div class="content"><img class="content">This element should contain an img ele
ment that draws an Apple logo.</div> | |
137 <div class="cursor">The cursor should change to an Apple logo inside this elemen
t.</div> | |
138 <div class="font-family">This element contains "Ahem" written in the Ahem font:
<span class="font-family">Ahem</span></div> | |
139 <div class="list-style-image"> | |
140 <ul> | |
141 <li>These items</li> | |
142 <li>should have</li> | |
143 <li>Apple logos</li> | |
144 <li>as bullets.</li> | |
145 </ul> | |
146 </div> | |
147 <div class="webkit-border-image">This content should be inside a strectched Appl
e logo.</div> | |
148 <div class="webkit-box-reflect"><img src="resources/apple.gif?webkit-box-reflect
-image" class="webkit-box-reflect">This element should have an image of an Apple
logo with a full reflection below it.</div> | |
149 <div class="webkit-mask"><br>This element should have solid pink Apple logos as
its mask.</div> | |
150 <div class="webkit-mask-box-image"><br>This element should have maroon Apple log
os for "borders" with a maroon background.</div> | |
151 <div class="webkit-mask-image">This element should have black Apple logos for it
s background.</div> | |
152 <div class="webkit-mask-image-list"><br>This element should have lime Apple logo
s for its background and borders with a black outer border.</div> | |
153 <div></div> | |
154 </body> | |
155 </html> | |
OLD | NEW |