blob: 37a72002cbf1383c065e7eca045312b19609dcef [file] [log] [blame]
ddkilzer@apple.come9a55042008-12-23 00:00:14 +00001<html>
2<head>
3<script>
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +00004if (window.testRunner) {
5 testRunner.dumpDOMAsWebArchive();
6 testRunner.waitUntilDone();
ddkilzer@apple.come9a55042008-12-23 00:00:14 +00007}
8
9function notifyDone()
10{
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +000011 if (window.testRunner) {
ddkilzer@apple.come9a55042008-12-23 00:00:14 +000012 // FIXME: Web fonts are loaded asynchronously, and there is
13 // no way to know when they're done, so just wait a bit.
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +000014 setTimeout("testRunner.notifyDone()", 1000);
ddkilzer@apple.come9a55042008-12-23 00:00:14 +000015 }
16}
17</script>
18<style>
19
20@font-face {
21 font-family: webkit-ahem;
22 font-style: normal;
commit-queue@webkit.orgc754be12011-11-21 17:55:07 +000023 src: url(firstInvalidURL), url(secondInvalidURL), url(../resources/Ahem.ttf);
ddkilzer@apple.come9a55042008-12-23 00:00:14 +000024}
25
26div.background {
27 border: solid black 1px;
28 height: 64px;
29 background: url(resources/apple.gif?background) no-repeat top left;
30}
31
32div.background-image {
33 border: solid black 1px;
34 height: 125px;
35 background-image: url(resources/apple.gif?background-image);
36}
37
38div.content {
39 border: solid black 1px;
40 height: 64px;
41}
42
43img.content {
44 content: url(resources/apple.gif?content);
45}
46
47div.cursor {
48 border: solid black 1px;
49 height: 100px;
50 cursor: url(resources/apple.gif?cursor), auto;
51}
52
53div.font-family {
54 border: solid black 1px;
55 height: 25px;
56}
57
58span.font-family {
59 font-family: webkit-ahem;
60}
61
62div.list-style-image {
63 border: solid black 1px;
64 list-style: square inside url(resources/apple.gif?list-style-image);
65}
66
67div.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
80div.webkit-box-reflect {
81 border: solid black 1px;
82 height: 130px;
83 background-color: white;
84}
85
86img.webkit-box-reflect {
87 -webkit-box-reflect: below 2px url(resources/apple.gif?webkit-box-reflect) 75 75 75 75 stretch stretch;
88}
89
90div.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
97div.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
106div.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
118div.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/apple.gif?mask-top-right), url(resources/apple.gif?mask-bottom-left), url(resources/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/apple.gif?mask-left), url(resources/apple.gif?mask-center);
124 -webkit-mask-position: top left, top right, bottom left, bottom right, top center, 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, repeat-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 saved in webarchives.</p></div>
134<div class="background">This element should have one Apple logo in the background at the top left.</div>
135<div class="background-image">This element should have repeated Apple logos in both x- and y-dimensions in the background.</div>
136<div class="content"><img class="content">This element should contain an img element that draws an Apple logo.</div>
137<div class="cursor">The cursor should change to an Apple logo inside this element.</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 Apple 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 logos for "borders" with a maroon background.</div>
151<div class="webkit-mask-image">This element should have black Apple logos for its background.</div>
152<div class="webkit-mask-image-list"><br>This element should have lime Apple logos for its background and borders with a black outer border.</div>
153<div></div>
154</body>
155</html>