tor-browser

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

animate-gradient-transform.html (3886B)

      1 <!doctype html>
      2 <html>
      3 <meta charset="utf-8">
      4 <title>Tests if gradientTransform of a gradient is animateable.</title>
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/resources/SVGAnimationTestCase-testharness.js"></script>
      8 
      9 <svg>
     10 </svg>
     11 
     12 <script>
     13 var rootSVGElement = document.querySelector("svg");
     14 var epsilon = 1.0;
     15 
     16 // Setup test document
     17 var gradient = createSVGElement("linearGradient");
     18 gradient.setAttribute("id", "gradient");
     19 gradient.setAttribute("gradientUnits", "userSpaceOnUse");
     20 gradient.setAttribute("x1", "0");
     21 gradient.setAttribute("x2", "200");
     22 gradient.setAttribute("gradientTransform", "translate(0)");
     23 
     24 var stop1 = createSVGElement("stop");
     25 stop1.setAttribute("offset", "0");
     26 stop1.setAttribute("stop-color", "green");
     27 
     28 var stop2 = createSVGElement("stop");
     29 stop2.setAttribute("offset", "1");
     30 stop2.setAttribute("stop-color", "red");
     31 
     32 var animate = createSVGElement("animateTransform");
     33 animate.setAttribute("id", "animation");
     34 animate.setAttribute("attributeName", "gradientTransform");
     35 animate.setAttribute("type", "translate");
     36 animate.setAttribute("from", "0");
     37 animate.setAttribute("to", "200");
     38 animate.setAttribute("begin", "0s");
     39 animate.setAttribute("dur", "4s");
     40 animate.setAttribute("fill", "freeze");
     41 
     42 var rect = createSVGElement("rect");
     43 rect.setAttribute("id", "rect");
     44 rect.setAttribute("fill", "url(#gradient)");
     45 rect.setAttribute("width", "200");
     46 rect.setAttribute("height", "200");
     47 rect.setAttribute("onclick", "executeTest()");
     48 
     49 gradient.appendChild(stop1);
     50 gradient.appendChild(stop2);
     51 gradient.appendChild(animate);
     52 
     53 rootSVGElement.appendChild(gradient);
     54 rootSVGElement.appendChild(rect);
     55 
     56 // Setup animation test
     57 function sample1() {
     58    // Check initial conditions
     59    shouldThrow("gradient.gradientTransform.animVal.consolidate()");
     60    assert_equals(gradient.gradientTransform.animVal.numberOfItems, 1);
     61    assert_approx_equals(gradient.gradientTransform.animVal.getItem(0).matrix.e, 0, epsilon);
     62    assert_equals(gradient.gradientTransform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
     63 
     64    assert_equals(gradient.gradientTransform.baseVal.numberOfItems, 1);
     65    assert_equals(gradient.gradientTransform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
     66    assert_equals(gradient.gradientTransform.baseVal.getItem(0).matrix.e, 0);
     67 }
     68 
     69 function sample2() {
     70    // Check half-time conditions
     71    assert_equals(gradient.gradientTransform.animVal.numberOfItems, 1);
     72    assert_equals(gradient.gradientTransform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
     73    assert_approx_equals(gradient.gradientTransform.animVal.getItem(0).matrix.e, 100, epsilon);
     74 
     75    assert_equals(gradient.gradientTransform.baseVal.numberOfItems, 1);
     76    assert_equals(gradient.gradientTransform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
     77    assert_equals(gradient.gradientTransform.baseVal.getItem(0).matrix.e, 0);
     78 }
     79 
     80 function sample3() {
     81    // Check end conditions
     82    assert_equals(gradient.gradientTransform.animVal.numberOfItems, 1);
     83    assert_equals(gradient.gradientTransform.animVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
     84    assert_approx_equals(gradient.gradientTransform.animVal.getItem(0).matrix.e, 200, epsilon);
     85 
     86    assert_equals(gradient.gradientTransform.baseVal.numberOfItems, 1);
     87    assert_equals(gradient.gradientTransform.baseVal.getItem(0).type, SVGTransform.SVG_TRANSFORM_TRANSLATE);
     88    assert_equals(gradient.gradientTransform.baseVal.getItem(0).matrix.e, 0);
     89 }
     90 
     91 smil_async_test((t) => {
     92    const expectedValues = [
     93        // [animationId, time, sampleCallback]
     94        ["animation", 0.0, sample1],
     95        ["animation", 2.0, sample2],
     96        ["animation", 3.999, sample3],
     97        ["animation", 4.001, sample3]
     98    ];
     99 
    100    runAnimationTest(t, expectedValues);
    101 });
    102 
    103 </script>