| 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 |