background-position-responsive.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Animation with neutral keyframe is responsive to change in underlying style</title>
  <link rel="help" href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="responsive-test.js"></script>
</head>
<body></body>
<script type="text/javascript">
  promise_test(async t => {
    const responsiveTest =
        createResponsiveTest(t, {
          property: 'backgroundPosition',
          to: '100px 100px'
        });
    await responsiveTest.ready;
    responsiveTest.underlyingValue = '20px 60px';
    responsiveTest.assertResponsive([
      {at: 0.25, is: '40px 70px'},
      {at: 0.75, is: '80px 90px'},
    ]);
    responsiveTest.underlyingValue = '60px 20px';
    responsiveTest.assertResponsive([
      {at: 0.25, is: '70px 40px'},
      {at: 0.75, is: '90px 80px'},
    ]);
  }, 'Animating from a neutral keyframe when the underlying style is ' +
     'explicitly set');

  promise_test(async t => {
    const responsiveTest =
        createResponsiveTest(t, {
          property: 'backgroundPosition',
          from: 'inherit',
          to: '100px 100px'
        });
    await responsiveTest.ready;
    responsiveTest.inheritedValue = '20px 60px';
    responsiveTest.assertResponsive([
      {at: 0.25, is: '40px 70px'},
      {at: 0.75, is: '80px 90px'},
    ]);
    responsiveTest.inheritedValue = '60px 20px';
    responsiveTest.assertResponsive([
      {at: 0.25, is: '70px 40px'},
      {at: 0.75, is: '90px 80px'},
    ]);
  }, 'Animating from a neutral keyframe when the underlying style is ' +
     'inherited from the parent');
</script>
chromium/third_party/blink/web_tests/external/wpt/web-animations/responsive/background-position-responsive.html
