third_party/WebKit/LayoutTests/animations/composition/border-right-width-composition.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <body>
   4 <script src="../interpolation/resources/interpolation-test.js"></script>
   5 <script>
   6 assertComposition({
   7   property: 'border-right-width',
   8   underlying: '50px',
   9   addFrom: '100px',
  10   addTo: '200px',
  11 }, [
  12   {at: -0.3, is: '120px'},
  13   {at: 0, is: '150px'},
  14   {at: 0.5, is: '200px'},
  15   {at: 1, is: '250px'},
  16   {at: 1.5, is: '300px'},
  17 ]);
  18
  19 assertComposition({
  20   property: 'border-right-width',
  21   underlying: '100px',
  22   addFrom: '10px',
  23   addTo: '2px',
  24 }, [
  25   {at: -0.5, is: '114px'},
  26   {at: 0, is: '110px'},
  27   {at: 0.5, is: '106px'},
  28   {at: 1, is: '102px'},
  29   {at: 1.5, is: '98px'}, // Value clamping should happen after composition.
  30 ]);
  31
  32 assertComposition({
  33   property: 'border-right-width',
  34   underlying: '10%',
  35   addFrom: '100px',
  36   addTo: '20%',
  37 }, [
  38   {at: -0.3, is: 'calc(130px + 4%)'},
  39   {at: 0, is: 'calc(100px + 10%)'},
  40   {at: 0.5, is: 'calc(50px + 20%)'},
  41   {at: 1, is: '30%'},
  42   {at: 1.5, is: 'calc(-50px + 40%)'},
  43 ]);
  44
  45 assertComposition({
  46   property: 'border-right-width',
  47   underlying: '50px',
  48   addFrom: '100px',
  49   replaceTo: '200px',
  50 }, [
  51   {at: -0.3, is: '135px'},
  52   {at: 0, is: '150px'},
  53   {at: 0.5, is: '175px'},
  54   {at: 1, is: '200px'},
  55   {at: 1.5, is: '225px'},
  56 ]);
  57
  58 assertComposition({
  59   property: 'border-right-width',
  60   underlying: '100px',
  61   addFrom: '100px',
  62   addTo: 'auto',
  63 }, [
  64   {at: -0.3, is: '200px'},
  65   {at: 0, is: '200px'},
  66   {at: 0.5, is: 'auto'},
  67   {at: 1, is: 'auto'},
  68   {at: 1.5, is: 'auto'},
  69 ]);
  70 </script>
  71 </body>