tor-browser

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

column-gap-interpolation.html (1844B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>column-gap interpolation</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap">
      5 <meta name="assert" content="column-gap supports animation by computed value type">
      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  column-gap: 90px;
     14 }
     15 .target {
     16  column-count: 2;
     17  column-gap: 10px;
     18 }
     19 .expected div {
     20  opacity: 0.7;
     21 }
     22 .target > div {
     23  height: 20px;
     24  background-color: black;
     25 }
     26 .target.expected > div {
     27  background-color: green;
     28 }
     29 </style>
     30 
     31 <body>
     32 <template id='target-template'>
     33  <div></div><div></div>
     34 </template>
     35 </body>
     36 
     37 <script>
     38 test_interpolation({
     39  property: 'column-gap',
     40  from: neutralKeyframe,
     41  to: '40px',
     42 }, [
     43  {at: -0.3, expect: '1px'},
     44  {at: 0, expect: '10px'},
     45  {at: 0.3, expect: '19px'},
     46  {at: 0.6, expect: '28px'},
     47  {at: 1, expect: '40px'},
     48  {at: 1.5, expect: '55px'},
     49 ]);
     50 
     51 test_no_interpolation({
     52  property: 'column-gap',
     53  from: 'initial',
     54  to: '20px',
     55 });
     56 
     57 test_interpolation({
     58  property: 'column-gap',
     59  from: 'inherit',
     60  to: '20px',
     61 }, [
     62  {at: -0.3, expect: '111px'},
     63  {at: 0, expect: '90px'},
     64  {at: 0.3, expect: '69px'},
     65  {at: 0.6, expect: '48px'},
     66  {at: 1, expect: '20px'},
     67  {at: 1.5, expect: '0px'},
     68 ]);
     69 
     70 test_no_interpolation({
     71  property: 'column-gap',
     72  from: 'unset',
     73  to: '20px',
     74 });
     75 
     76 test_no_interpolation({
     77  property: 'column-gap',
     78  from: 'normal',
     79  to: '20px',
     80 });
     81 
     82 test_interpolation({
     83  property: 'column-gap',
     84  from: '0px',
     85  to: '100px'
     86 }, [
     87  {at: -0.3, expect: '0'}, // column-gap can't be negative.
     88  {at: 0, expect: '0'},
     89  {at: 0.3, expect: '30px'},
     90  {at: 0.6, expect: '60px'},
     91  {at: 1, expect: '100px'},
     92  {at: 1.5, expect: '150px'}
     93 ]);
     94 </script>