tor-browser

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

column-width-interpolation.html (2190B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>column-width interpolation</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/#cw">
      5 <meta name="assert" content="column-width 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-width: 30px;
     14 }
     15 .target {
     16  font-size: 0px; /* column-width "specified values must be greater than 0", so use font-size to achieve 0px computed value. */
     17  display: inline-block;
     18  column-width: 10px;
     19 }
     20 </style>
     21 
     22 <body>
     23 <template id="target-template">
     24  <div><div class="transformed"></div></div>
     25 </template>
     26 </body>
     27 
     28 <script>
     29 test_interpolation({
     30  property: 'column-width',
     31  from: neutralKeyframe,
     32  to: '20px',
     33 }, [
     34  {at: -20, expect: '1em'}, // column-width does not accept negative values
     35  {at: -1, expect: '1em'}, // column-width does not accept negative values
     36  {at: -0.3, expect: '7px'},
     37  {at: 0, expect: '10px'},
     38  {at: 0.3, expect: '13px'},
     39  {at: 0.6, expect: '16px'},
     40  {at: 1, expect: '20px'},
     41  {at: 1.5, expect: '25px'},
     42 ]);
     43 
     44 test_no_interpolation({
     45  property: 'column-width',
     46  from: 'initial',
     47  to: '20px',
     48 });
     49 
     50 test_interpolation({
     51  property: 'column-width',
     52  from: 'inherit',
     53  to: '20px',
     54 }, [
     55  {at: -20, expect: '230px'},
     56  {at: -1, expect: '40px'},
     57  {at: -0.3, expect: '33px'},
     58  {at: 0, expect: '30px'},
     59  {at: 0.3, expect: '27px'},
     60  {at: 0.6, expect: '24px'},
     61  {at: 1, expect: '20px'},
     62  {at: 1.5, expect: '15px'},
     63 ]);
     64 
     65 test_no_interpolation({
     66  property: 'column-width',
     67  from: 'unset',
     68  to: '20px',
     69 });
     70 
     71 test_interpolation({
     72  property: 'column-width',
     73  from: '50px',
     74  to: '100px',
     75 }, [
     76  {at: -20, expect: '1em'}, // column-width does not accept negative values
     77  {at: -1, expect: '1em'}, // column-width does not accept negative values
     78  {at: -0.3, expect: '35px'},
     79  {at: 0, expect: '50px'},
     80  {at: 0.3, expect: '65px'},
     81  {at: 0.6, expect: '80px'},
     82  {at: 1, expect: '100px'},
     83  {at: 1.5, expect: '125px'},
     84 ]);
     85 
     86 test_no_interpolation({
     87  property: 'column-width',
     88  from: '50px',
     89  to: 'auto',
     90 });
     91 </script>