tor-browser

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

CSSKeyframeRule.html (1648B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title></title>
      4 <link rel="help" href="https://drafts.csswg.org/css-animations/#interface-csskeyframerule">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style type="text/css" id="styleElement">
      8  div { animation: 3s slidein; }
      9  @keyframes slidein {
     10    from {
     11      margin-left: 100%;
     12      width: 300%;
     13    }
     14 
     15    to {
     16      margin-left: 0%;
     17      width: 100%;
     18    }
     19  }
     20 </style>
     21 <script>
     22  var styleSheet = document.getElementById("styleElement").sheet;
     23  var keyframesRule = styleSheet.cssRules[1];
     24  var fromRule = keyframesRule.cssRules[0];
     25  var toRule = keyframesRule.cssRules[1];
     26 
     27  test(function() {
     28    assert_equals(keyframesRule.name, "slidein");
     29    assert_equals(typeof fromRule.style, "object");
     30    assert_equals(fromRule.style.marginLeft, "100%");
     31    assert_equals(fromRule.style.width, "300%");
     32 
     33    assert_equals(typeof toRule.style, "object");
     34    assert_equals(toRule.style.marginLeft, "0%");
     35    assert_equals(toRule.style.width, "100%");
     36 
     37    toRule.style.marginLeft = "-5%";
     38    toRule.style.width = "50%";
     39 
     40    assert_equals(fromRule.style.marginLeft, "100%");
     41    assert_equals(fromRule.style.width, "300%");
     42    assert_equals(toRule.style.marginLeft, "-5%");
     43    assert_equals(toRule.style.width, "50%");
     44  }, "CSSKeyframeRule: style property");
     45 
     46  test(function() {
     47    fromRule.style = "margin-left: 50%; width: 100%;";
     48 
     49    assert_equals(fromRule.style.marginLeft, "50%", "margin-left");
     50    assert_equals(fromRule.style.width, "100%", "width");
     51  }, "CSSKeyframeRule: style property has [PutForwards]");
     52 </script>