third_party/WebKit/LayoutTests/animations/cross-fade-border-image-source.html

   1 <html>
   2 <head>
   3   <style>
   4     #box {
   5         position: absolute;
   6         left: 100px;
   7         top: 100px;
   8         height: 100px;
   9         width: 100px;
  10         background-color: green;
  11         -webkit-animation: anim 1s linear infinite;
  12         border-image: url() 5 5 5 5 /20px stretch stretch;
  13     }
  14     #boxShorthand {
  15         position: absolute;
  16         left: 100px;
  17         top: 250px;
  18         height: 100px;
  19         width: 100px;
  20         background-color: green;
  21         -webkit-animation: animShorthand 1s linear infinite;
  22     }
  23     #boxStatic {
  24         position: absolute;
  25         left: 100px;
  26         top: 400px;
  27         height: 100px;
  28         width: 100px;
  29         background-color: green;
  30         border-image: -webkit-cross-fade(url(resources/stripes-100.png), url(resources/green-100.png), 50%) 5 5 5 5 /20px stretch stretch;
  31     }
  32     @-webkit-keyframes anim {
  33         from { border-image-source: url(resources/stripes-100.png); }
  34         to   { border-image-source: url(resources/green-100.png); }
  35     }
  36     @-webkit-keyframes animShorthand {
  37         from { border-image: url(resources/stripes-100.png) 5 5 5 5 /20px stretch stretch; }
  38         to   { border-image: url(resources/green-100.png) 5 5 5 5 /20px stretch stretch; }
  39     }
  40   </style>
  41   <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  42   <script type="text/javascript" charset="utf-8">
  43   // This test was flaky because it would start before the images were loaded.
  44   var imagesLoaded = 0;
  45   function imageLoaded() {
  46     ++imagesLoaded;
  47     if (imagesLoaded == 2) {
  48       const expectedValues = [
  49         // [time, element-id, property, expected-value, tolerance]
  50         // FIXME: We can't test reading the borderImage shorthand because of bug #13658.
  51         [2.5, ["box", "boxStatic"], "borderImageSource", 0.5, 0.05],
  52         [2.5, ["boxShorthand", "boxStatic"], "borderImageSource", 0.5, 0.05],
  53       ];
  54
  55       var doPixelTest = true;
  56       var disablePauseAPI = false;
  57       var startTestImmediately = true;
  58       runAnimationTest(expectedValues, null, undefined, disablePauseAPI, undefined, startTestImmediately);
  59     }
  60   }
  61   </script>
  62 </head>
  63 <body>
  64 <div id="box"></div>
  65 <div id="boxShorthand"></div>
  66 <div id="boxStatic"></div>
  67 <div id="result"></div>
  68 <img src="../animations/resources/stripes-100.png" onLoad="imageLoaded();"/>
  69 <img src="../animations/resources/green-100.png" onLoad="imageLoaded();"/>
  70 </body>
  71 </html>