tor-browser

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

columns-interpolation.html (2887B)

      1 <!DOCTYPE html>
      2 <title>columns shorthand interpolation</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-multicol/#propdef-columns">
      4 <link rel="help" href="https://drafts.csswg.org/css-multicol-2/#propdef-columns">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/css/support/interpolation-testcommon.js"></script>
      8 <style>
      9  .parent {
     10    columns: 50px / 100px;
     11  }
     12  .target {
     13    columns: 200px / 100px;
     14  }
     15 </style>
     16 <body>
     17 </body>
     18 <script>
     19 test_interpolation({
     20  property: 'columns',
     21  from: '200px 10',
     22  to: '100px 20',
     23 }, [
     24  {at: -1, expect: '300px 1'},
     25  {at: -0.5, expect: '250px 5'},
     26  {at: 0, expect: '200px 10'},
     27  {at: 0.5, expect: '150px 15'},
     28  {at: 1, expect: '100px 20'},
     29 ]);
     30 
     31 test_interpolation({
     32  property: 'columns',
     33  from: neutralKeyframe,
     34  to: '100px / 200px',
     35 }, [
     36  {at: -1, expect: '300px / 0px'},
     37  {at: -0.5, expect: '250px / 50px'},
     38  {at: 0, expect: '200px / 100px'},
     39  {at: 0.5, expect: '150px / 150px'},
     40  {at: 1, expect: '100px / 200px'},
     41 ]);
     42 
     43 test_interpolation({
     44  property: 'columns',
     45  from: '1000px / 500px',
     46  to: '100px / 200px',
     47 }, [
     48  {at: -1, expect: '1900px / 800px'},
     49  {at: -0.5, expect: '1450px / 650px'},
     50  {at: 0, expect: '1000px / 500px'},
     51  {at: 0.5, expect: '550px / 350px'},
     52  {at: 1, expect: '100px / 200px'},
     53 ]);
     54 
     55 test_interpolation({
     56  property: 'columns',
     57  from: '10 / 100px',
     58  to: '20 / 200px',
     59 }, [
     60  {at: -0.5, expect: '5 / 50px'},
     61  {at: 0, expect: '10 / 100px'},
     62  {at: 0.5, expect: '15 / 150px'},
     63  {at: 1, expect: '20 / 200px'},
     64 ]);
     65 
     66 test_interpolation({
     67  property: 'columns',
     68  from: '10 100px',
     69  to: '20 200px',
     70 }, [
     71  {at: -0.5, expect: '5 50px'},
     72  {at: 0, expect: '10 100px'},
     73  {at: 0.5, expect: '15 150px'},
     74  {at: 1, expect: '20 200px'},
     75 ]);
     76 
     77 test_interpolation({
     78  property: 'columns',
     79  from: '10 100px / auto',
     80  to: '20 200px / auto',
     81 }, [
     82  {at: -0.5, expect: '5 50px'},
     83  {at: 0, expect: '10 100px'},
     84  {at: 0.5, expect: '15 150px'},
     85  {at: 1, expect: '20 200px'},
     86 ]);
     87 
     88 test_interpolation({
     89  property: 'columns',
     90  from: 'inherit',
     91  to: '200px / 900px',
     92 }, [
     93  {at: -0.5, expect: '0px / 0px'},
     94  {at: -0.2, expect: '20px / 0px'},
     95  {at: -0.1, expect: '35px / 20px'},
     96  {at: 0, expect: '50px / 100px'},
     97  {at: 0.5, expect: '125px / 500px'},
     98  {at: 1, expect: '200px / 900px'},
     99 ]);
    100 
    101 test_no_interpolation({
    102  property: 'columns',
    103  from: 'initial',
    104  to: '100px / 200px',
    105 });
    106 
    107 test_no_interpolation({
    108  property: 'columns',
    109  from: 'initial',
    110  to: '100px',
    111 });
    112 
    113 test_no_interpolation({
    114  property: 'columns',
    115  from: 'initial',
    116  to: '10',
    117 });
    118 
    119 test_no_interpolation({
    120  property: 'columns',
    121  from: 'auto',
    122  to: '100px / 200px',
    123 });
    124 
    125 test_no_interpolation({
    126  property: 'columns',
    127  from: '100px / 200px',
    128  to: 'auto',
    129 });
    130 
    131 test_no_interpolation({
    132  property: 'columns',
    133  from: 'inherit',
    134  to: 'auto',
    135 });
    136 </script>