tor-browser

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

change-css-property-while-animating-fill-freeze.html (1939B)

      1 <!doctype html>
      2 <html>
      3 <meta charset="utf-8">
      4 <title>This tests scripting a CSS property while animation is running</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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     10 
     11 <!-- an1: Change opacity from 0 to 0.5 in 4s, a script at 2s will set the opacity CSS property to 1, fill is freeze so this won't have any visible effect, nor any effect to the computed style -->
     12 <rect opacity="0" width="100" height="100" fill="green">
     13    <animate id="an1" attributeType="CSS" attributeName="opacity" fill="freeze" from="0" to="0.5" begin="0s" dur="4s"/>
     14 </rect>
     15 
     16 </svg>
     17 
     18 <script>
     19 var rootSVGElement = document.querySelector("svg");
     20 var epsilon = 1.0;
     21 
     22 // Setup animation test
     23 function sample1() {
     24    assert_approx_equals(parseFloat(getComputedStyle(rect).opacity), 0, epsilon);
     25 }
     26 
     27 function sample2() {
     28    assert_approx_equals(parseFloat(getComputedStyle(rect).opacity), 0.25, epsilon);
     29    rect.setAttribute("opacity", "1");
     30 }
     31 
     32 function sample3() {
     33    assert_approx_equals(parseFloat(getComputedStyle(rect).opacity), 0.25, epsilon);
     34 }
     35 
     36 function sample4() {
     37    assert_approx_equals(parseFloat(getComputedStyle(rect).opacity), 0.5, epsilon);
     38 }
     39 
     40 function sample5() {
     41    assert_approx_equals(parseFloat(getComputedStyle(rect).opacity), 0.5, epsilon);
     42 }
     43 
     44 smil_async_test((t) => {
     45    rect = rootSVGElement.ownerDocument.getElementsByTagName("rect")[0];
     46 
     47    const expectedValues = [
     48        // [animationId, time, sampleCallback]
     49        ["an1", 0.0,   sample1],
     50        ["an1", 2.0,   sample2],
     51        ["an1", 2.001, sample3],
     52        ["an1", 3.999, sample4],
     53        ["an1", 4.001, sample5],
     54        ["an1", 60.0,  sample5]
     55    ];
     56 
     57    runAnimationTest(t, expectedValues);
     58 });
     59 
     60 window.animationStartsImmediately = true;
     61 
     62 </script>