tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

animated_image_test_list.js (3660B)

      1 // This is shared by image/test/mochitest/test_animated_css_image.html
      2 // and image/test/browser/browser_animated_css_image.js
      3 // Make sure any referenced files/images exist in both of those directories.
      4 
      5 const kTests = [
      6  // Sanity test: background-image on a regular element.
      7  {
      8    html: `
      9      <!doctype html>
     10      <style>
     11        div {
     12          width: 100px;
     13          height: 100px;
     14          background-image: url(animated1.gif);
     15        }
     16      </style>
     17      <div></div>
     18    `,
     19    element(doc) {
     20      return doc.querySelector("div");
     21    },
     22  },
     23 
     24  // bug 1627585: content: url()
     25  {
     26    html: `
     27      <!doctype html>
     28      <style>
     29        div::before {
     30          content: url(animated1.gif);
     31        }
     32      </style>
     33      <div></div>
     34    `,
     35    element(doc) {
     36      return doc.querySelector("div");
     37    },
     38  },
     39 
     40  // bug 1627585: content: url() (on an element directly)
     41  {
     42    html: `
     43      <!doctype html>
     44      <style>
     45        div {
     46          content: url(animated1.gif);
     47        }
     48      </style>
     49      <div></div>
     50    `,
     51    element(doc) {
     52      return doc.querySelector("div");
     53    },
     54  },
     55 
     56  // bug 1625571: background propagated to canvas.
     57  {
     58    html: `
     59      <!doctype html>
     60      <style>
     61        body {
     62          background-image: url(animated1.gif);
     63        }
     64      </style>
     65    `,
     66    element(doc) {
     67      return doc.documentElement;
     68    },
     69  },
     70 
     71  // bug 1910297: background propagated to canvas with display: table
     72  {
     73    html: `
     74      <!doctype html>
     75      <style>
     76        html {
     77          display: table;
     78          background-image: url(animated1.gif);
     79        }
     80      </style>
     81    `,
     82    element(doc) {
     83      return doc.documentElement;
     84    },
     85  },
     86 
     87  // bug 1719375: CSS animation in SVG image.
     88  {
     89    html: `
     90      <!doctype html>
     91      <style>
     92        div {
     93          width: 100px;
     94          height: 100px;
     95          background-image: url(animated1.svg);
     96        }
     97      </style>
     98      <div></div>
     99    `,
    100    element(doc) {
    101      return doc.querySelector("div");
    102    },
    103  },
    104 
    105  // bug 1730834: stopped window.
    106  {
    107    html: `
    108      <!doctype html>
    109      <style>
    110        div {
    111          width: 100px;
    112          height: 100px;
    113        }
    114      </style>
    115      <body onload="window.stop(); document.querySelector('div').style.backgroundImage = 'url(animated1.gif)';">
    116        <div></div>
    117      </body>
    118    `,
    119    element(doc) {
    120      return doc.querySelector("div");
    121    },
    122  },
    123 
    124  // bug 1731138: Animated mask
    125  {
    126    html: `
    127      <!doctype html>
    128      <style>
    129        div {
    130          width: 100px;
    131          height: 100px;
    132          background-color: lime;
    133          mask-clip: border-box;
    134          mask-size: 100% 100%;
    135          mask-image: url(animatedMask.gif);
    136      }
    137      </style>
    138      <div></div>
    139    `,
    140    element(doc) {
    141      return doc.querySelector("div");
    142    },
    143  },
    144 
    145  // img element in preserve3d
    146  {
    147    html: `
    148      <!doctype html>
    149      <style>
    150        div {
    151          transform-style: preserve-3d;
    152        }
    153        img {
    154          translate: 0;
    155        }
    156      </style>
    157      <div><img src="animated1.gif"></div>
    158    `,
    159    element(doc) {
    160      return doc.querySelector("img");
    161    },
    162  },
    163 
    164  // img element in preserve3d with 3d transforms
    165  {
    166    html: `
    167      <!doctype html>
    168      <style>
    169        .card-inner {
    170          transform-style: preserve-3d;
    171          transform: rotateY(180deg);
    172        }
    173        .card-back {
    174          transform: rotateY(180deg);
    175        }
    176      </style>
    177      <div class="card-inner">
    178        <div class="card-back">
    179          <img src="animated1.gif">
    180        </div>
    181      </div>
    182    `,
    183    element(doc) {
    184      return doc.querySelector("img");
    185    },
    186  },
    187 ];