ddkilzer@apple.com | e9a5504 | 2008-12-23 00:00:14 +0000 | [diff] [blame] | 1 | <html> |
| 2 | <head> |
| 3 | <script> |
rniwa@webkit.org | cc082ecd | 2012-06-16 03:42:58 +0000 | [diff] [blame] | 4 | if (window.testRunner) { |
| 5 | testRunner.dumpDOMAsWebArchive(); |
| 6 | testRunner.waitUntilDone(); |
ddkilzer@apple.com | e9a5504 | 2008-12-23 00:00:14 +0000 | [diff] [blame] | 7 | } |
| 8 | |
| 9 | function notifyDone() |
| 10 | { |
rniwa@webkit.org | cc082ecd | 2012-06-16 03:42:58 +0000 | [diff] [blame] | 11 | if (window.testRunner) { |
ddkilzer@apple.com | e9a5504 | 2008-12-23 00:00:14 +0000 | [diff] [blame] | 12 | // 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.org | cc082ecd | 2012-06-16 03:42:58 +0000 | [diff] [blame] | 14 | setTimeout("testRunner.notifyDone()", 1000); |
ddkilzer@apple.com | e9a5504 | 2008-12-23 00:00:14 +0000 | [diff] [blame] | 15 | } |
| 16 | } |
| 17 | </script> |
| 18 | <style> |
| 19 | |
| 20 | @font-face { |
| 21 | font-family: webkit-ahem; |
| 22 | font-style: normal; |
commit-queue@webkit.org | c754be1 | 2011-11-21 17:55:07 +0000 | [diff] [blame] | 23 | src: url(firstInvalidURL), url(secondInvalidURL), url(../resources/Ahem.ttf); |
ddkilzer@apple.com | e9a5504 | 2008-12-23 00:00:14 +0000 | [diff] [blame] | 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) 75 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/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> |