testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/animation/contain-intrinsic-size-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <title>contain-intrinsic-size interpolation</title>
   4 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
   5 <script src="/resources/testharness.js"></script>
   6 <script src="/resources/testharnessreport.js"></script>
   7 <script src="/css/support/interpolation-testcommon.js"></script>
   8
   9 <style>
  10 .target {
  11   contain: strict;
  12   contain-intrinsic-size: 50px 60px;
  13 }
  14 </style>
  15
  16 <body></body>
  17
  18 <script>
  19 // none doesn't interpolate
  20 test_interpolation({
  21   property: 'contain-intrinsic-size',
  22   from: neutralKeyframe,
  23   to: '20px 10px',
  24 }, [
  25   {at: -0.3, expect: '59px 75px'},
  26   {at: 0, expect: '50px 60px'},
  27   {at: 0.3, expect: '41px 45px'},
  28   {at: 0.6, expect: '32px 30px'},
  29   {at: 1, expect: '20px 10px'},
  30   {at: 1.5, expect: '5px 0px'}
  31 ]);
  32
  33 test_no_interpolation({
  34   property: 'contain-intrinsic-size',
  35   from: 'initial',
  36   to: '20px 20px',
  37 });
  38
  39 test_no_interpolation({
  40   property: 'contain-intrinsic-size',
  41   from: 'inherit',
  42   to: '20px',
  43 });
  44
  45 test_no_interpolation({
  46   property: 'contain-intrinsic-size',
  47   from: 'unset',
  48   to: '20px',
  49 });
  50
  51 test_no_interpolation({
  52   property: 'contain-intrinsic-size',
  53   from: 'none',
  54   to: '20px 20px',
  55 });
  56
  57 test_no_interpolation({
  58   property: 'contain-intrinsic-size',
  59   from: '10px 15px',
  60   to: 'none',
  61 });
  62
  63 test_interpolation({
  64   property: 'contain-intrinsic-size',
  65   from: 'auto 0px 0px',
  66   to: 'auto 10px 10px'
  67 }, [
  68   {at: -0.3, expect: 'auto 0px 0px'}, // contain-intrinsic-size can't be negative.
  69   {at: 0, expect: 'auto 0px 0px'},
  70   {at: 0.3, expect: 'auto 3px 3px'},
  71   {at: 0.6, expect: 'auto 6px 6px'},
  72   {at: 1, expect: 'auto 10px 10px'},
  73   {at: 1.5, expect: 'auto 15px 15px'}
  74 ]);
  75
  76 test_no_interpolation({
  77   property: 'contain-intrinsic-size',
  78   from: 'auto 10px 15px',
  79   to: '20px 15px',
  80 });
  81
  82 test_no_interpolation({
  83   property: 'contain-intrinsic-size',
  84   from: 'none 15px',
  85   to: '20px 15px',
  86 });
  87
  88 test_no_interpolation({
  89   property: 'contain-intrinsic-size',
  90   from: 'none 15px',
  91   to: 'auto 20px 15px',
  92 });
  93
  94 test_interpolation({
  95   property: 'contain-intrinsic-size',
  96   from: '0px 0px',
  97   to: '10px'
  98 }, [
  99   {at: -0.3, expect: '0px 0px'}, // contain-intrinsic-size can't be negative.
 100   {at: 0, expect: '0px 0px'},
 101   {at: 0.3, expect: '3px 3px'},
 102   {at: 0.6, expect: '6px 6px'},
 103   {at: 1, expect: '10px 10px'},
 104   {at: 1.5, expect: '15px 15px'}
 105 ]);
 106
 107 test_interpolation({
 108   property: 'contain-intrinsic-size',
 109   from: '20px 40px',
 110   to: '30px 50px'
 111 }, [
 112   {at: -0.3, expect: '17px 37px'},
 113   {at: 0, expect: '20px 40px'},
 114   {at: 0.3, expect: '23px 43px'},
 115   {at: 0.6, expect: '26px 46px'},
 116   {at: 1, expect: '30px 50px'},
 117   {at: 1.5, expect: '35px 55px'}
 118 ]);
 119 </script>