tor-browser

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

order-interpolation.html (2070B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>order interpolation</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property">
      5 <meta name="assert" content="order supports animation">
      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  order: 30;
     14 }
     15 
     16 .target {
     17  order: 10;
     18 }
     19 </style>
     20 <body>
     21 <script>
     22 test_interpolation({
     23  property: 'order',
     24  from: neutralKeyframe,
     25  to: '20',
     26 }, [
     27  {at: -3, expect: '-20'},
     28  {at: -0.5, expect: '5'},
     29  {at: 0, expect: '10'},
     30  {at: 0.3, expect: '13'},
     31  {at: 0.6, expect: '16'},
     32  {at: 1, expect: '20'},
     33  {at: 1.5, expect: '25'},
     34 ]);
     35 
     36 test_interpolation({
     37  property: 'order',
     38  from: 'initial',
     39  to: '20',
     40 }, [
     41  {at: -3, expect: '-60'},
     42  {at: -0.5, expect: '-10'},
     43  {at: 0, expect: '0'},
     44  {at: 0.3, expect: '6'},
     45  {at: 0.6, expect: '12'},
     46  {at: 1, expect: '20'},
     47  {at: 1.5, expect: '30'},
     48 ]);
     49 
     50 test_interpolation({
     51  property: 'order',
     52  from: 'inherit',
     53  to: '20',
     54 }, [
     55  {at: -3, expect: '60'},
     56  {at: -0.5, expect: '35'},
     57  {at: 0, expect: '30'},
     58  {at: 0.3, expect: '27'},
     59  {at: 0.6, expect: '24'},
     60  {at: 1, expect: '20'},
     61  {at: 1.5, expect: '15'},
     62 ]);
     63 
     64 test_interpolation({
     65  property: 'order',
     66  from: 'unset',
     67  to: '20',
     68 }, [
     69  {at: -3, expect: '-60'},
     70  {at: -0.5, expect: '-10'},
     71  {at: 0, expect: '0'},
     72  {at: 0.3, expect: '6'},
     73  {at: 0.6, expect: '12'},
     74  {at: 1, expect: '20'},
     75  {at: 1.5, expect: '30'},
     76 ]);
     77 
     78 test_interpolation({
     79  property: 'order',
     80  from: '10',
     81  to: '20'
     82 }, [
     83  {at: -3.0, expect: '-20'},
     84  {at: -0.5, expect: '5'},
     85  {at: 0, expect: '10'},
     86  {at: 0.3, expect: '13'},
     87  {at: 0.6, expect: '16'},
     88  {at: 1, expect: '20'},
     89  {at: 1.5, expect: '25'}
     90 ]);
     91 
     92 test_interpolation({
     93  property: 'order',
     94  from: '2',
     95  to: '4'
     96 }, [
     97  {at: -3.0, expect: '-4'},
     98  {at: -0.5, expect: '1'},
     99  {at: 0, expect: '2'},
    100  {at: 0.3, expect: '3'},
    101  {at: 0.6, expect: '3'},
    102  {at: 1, expect: '4'},
    103  {at: 1.5, expect: '5'}
    104 ]);
    105 </script>