tor-browser

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

outline-offset-interpolation.html (2081B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>outline-offset interpolation</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset">
      5 <meta name="assert" content="outline-offset supports animation by computed value">
      6 
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/css/support/interpolation-testcommon.js"></script>
     10 
     11 <style>
     12 .parent {
     13  outline: solid 0px;
     14  outline-offset: 30px;
     15 }
     16 .target {
     17  width: 50px;
     18  height: 50px;
     19  background-color: black;
     20  display: inline-block;
     21  margin: 40px 0px 0px 40px;
     22  outline: 4px solid orange;
     23  outline-offset: 10px;
     24 }
     25 .expected {
     26  background-color: green;
     27  margin-right: 18px;
     28 }
     29 </style>
     30 
     31 <body></body>
     32 
     33 <script>
     34 test_interpolation({
     35  property: 'outline-offset',
     36  from: neutralKeyframe,
     37  to: '20px',
     38 }, [
     39  {at: -0.3, expect: '7px'},
     40  {at: 0, expect: '10px'},
     41  {at: 0.3, expect: '13px'},
     42  {at: 0.6, expect: '16px'},
     43  {at: 1, expect: '20px'},
     44  {at: 1.5, expect: '25px'},
     45 ]);
     46 
     47 test_interpolation({
     48  property: 'outline-offset',
     49  from: 'initial',
     50  to: '20px',
     51 }, [
     52  {at: -0.3, expect: '-6px'},
     53  {at: 0, expect: '0px'},
     54  {at: 0.3, expect: '6px'},
     55  {at: 0.6, expect: '12px'},
     56  {at: 1, expect: '20px'},
     57  {at: 1.5, expect: '30px'},
     58 ]);
     59 
     60 test_interpolation({
     61  property: 'outline-offset',
     62  from: 'inherit',
     63  to: '20px',
     64 }, [
     65  {at: -0.3, expect: '33px'},
     66  {at: 0, expect: '30px'},
     67  {at: 0.3, expect: '27px'},
     68  {at: 0.6, expect: '24px'},
     69  {at: 1, expect: '20px'},
     70  {at: 1.5, expect: '15px'},
     71 ]);
     72 
     73 test_interpolation({
     74  property: 'outline-offset',
     75  from: 'unset',
     76  to: '20px',
     77 }, [
     78  {at: -0.3, expect: '-6px'},
     79  {at: 0, expect: '0px'},
     80  {at: 0.3, expect: '6px'},
     81  {at: 0.6, expect: '12px'},
     82  {at: 1, expect: '20px'},
     83  {at: 1.5, expect: '30px'},
     84 ]);
     85 
     86 test_interpolation({
     87  property: 'outline-offset',
     88  from: '-5px',
     89  to: '5px',
     90 }, [
     91  {at: -0.3, expect: '-8px'},
     92  {at: 0, expect: '-5px'},
     93  {at: 0.3, expect: '-2px'},
     94  {at: 0.6, expect: '1px'},
     95  {at: 1, expect: '5px'},
     96  {at: 1.5, expect: '10px'},
     97 ]);
     98 </script>