LayoutTests/webarchive/test-css-url-resources-in-stylesheets.html

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