tor-browser

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

browser_animation_keyframes-graph_computed-value-path-01.js (4049B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test for ComputedValuePath of animations that consist by multi types of animated
      7 // properties.
      8 
      9 requestLongerTimeout(2);
     10 
     11 const TEST_DATA = [
     12  {
     13    targetClass: "multi-types",
     14    properties: [
     15      {
     16        name: "background-color",
     17        computedValuePathClass: "color-path",
     18        expectedPathSegments: [
     19          { x: 0, y: 0 },
     20          { x: 0, y: 100 },
     21          { x: 1000, y: 100 },
     22        ],
     23        expectedStopColors: [
     24          { offset: 0, color: "rgb(255, 0, 0)" },
     25          { offset: 1, color: "rgb(0, 255, 0)" },
     26        ],
     27      },
     28      {
     29        name: "background-repeat",
     30        computedValuePathClass: "discrete-path",
     31        expectedPathSegments: [
     32          { x: 0, y: 0 },
     33          { x: 499.999, y: 0 },
     34          { x: 500, y: 100 },
     35          { x: 1000, y: 100 },
     36        ],
     37      },
     38      {
     39        name: "font-size",
     40        computedValuePathClass: "distance-path",
     41        expectedPathSegments: [
     42          { x: 0, y: 0 },
     43          { x: 500, y: 50 },
     44          { x: 1000, y: 100 },
     45        ],
     46      },
     47      {
     48        name: "margin-left",
     49        computedValuePathClass: "distance-path",
     50        expectedPathSegments: [
     51          { x: 0, y: 0 },
     52          { x: 500, y: 50 },
     53          { x: 1000, y: 100 },
     54        ],
     55      },
     56      {
     57        name: "opacity",
     58        computedValuePathClass: "distance-path",
     59        expectedPathSegments: [
     60          { x: 0, y: 0 },
     61          { x: 500, y: 50 },
     62          { x: 1000, y: 100 },
     63        ],
     64      },
     65      {
     66        name: "text-align",
     67        computedValuePathClass: "discrete-path",
     68        expectedPathSegments: [
     69          { x: 0, y: 0 },
     70          { x: 499.999, y: 0 },
     71          { x: 500, y: 100 },
     72          { x: 1000, y: 100 },
     73        ],
     74      },
     75      {
     76        name: "transform",
     77        computedValuePathClass: "distance-path",
     78        expectedPathSegments: [
     79          { x: 0, y: 0 },
     80          { x: 500, y: 50 },
     81          { x: 1000, y: 100 },
     82        ],
     83      },
     84    ],
     85  },
     86  {
     87    targetClass: "multi-types-reverse",
     88    properties: [
     89      {
     90        name: "background-color",
     91        computedValuePathClass: "color-path",
     92        expectedPathSegments: [
     93          { x: 0, y: 0 },
     94          { x: 0, y: 100 },
     95          { x: 1000, y: 100 },
     96        ],
     97        expectedStopColors: [
     98          { offset: 0, color: "rgb(0, 255, 0)" },
     99          { offset: 1, color: "rgb(255, 0, 0)" },
    100        ],
    101      },
    102      {
    103        name: "background-repeat",
    104        computedValuePathClass: "discrete-path",
    105        expectedPathSegments: [
    106          { x: 0, y: 0 },
    107          { x: 499.999, y: 0 },
    108          { x: 500, y: 100 },
    109          { x: 1000, y: 100 },
    110        ],
    111      },
    112      {
    113        name: "font-size",
    114        computedValuePathClass: "distance-path",
    115        expectedPathSegments: [
    116          { x: 0, y: 100 },
    117          { x: 500, y: 50 },
    118          { x: 1000, y: 0 },
    119        ],
    120      },
    121      {
    122        name: "margin-left",
    123        computedValuePathClass: "distance-path",
    124        expectedPathSegments: [
    125          { x: 0, y: 100 },
    126          { x: 500, y: 50 },
    127          { x: 1000, y: 0 },
    128        ],
    129      },
    130      {
    131        name: "opacity",
    132        computedValuePathClass: "distance-path",
    133        expectedPathSegments: [
    134          { x: 0, y: 100 },
    135          { x: 500, y: 50 },
    136          { x: 1000, y: 0 },
    137        ],
    138      },
    139      {
    140        name: "text-align",
    141        computedValuePathClass: "discrete-path",
    142        expectedPathSegments: [
    143          { x: 0, y: 0 },
    144          { x: 499.999, y: 0 },
    145          { x: 500, y: 100 },
    146          { x: 1000, y: 100 },
    147        ],
    148      },
    149      {
    150        name: "transform",
    151        computedValuePathClass: "distance-path",
    152        expectedPathSegments: [
    153          { x: 0, y: 100 },
    154          { x: 500, y: 50 },
    155          { x: 1000, y: 0 },
    156        ],
    157      },
    158    ],
    159  },
    160 ];
    161 
    162 add_task(async function () {
    163  await testKeyframesGraphComputedValuePath(TEST_DATA);
    164 });