svg-d-responsive.html | Explore in Territory

<!DOCTYPE html>
<script src="resources/responsive-test.js"></script>
<script>
assertSVGResponsive({
  targetTag: 'path',
  property: 'd',
  getter(target) {
    return getComputedStyle(target).getPropertyValue('d');
  },
  from: 'm 10 10 h 100',
  to: neutralKeyframe,
  configurations: [{
    state: {underlying: 'M 30 30 H 250'},
    expect: [
      {at: 0.25, is: 'M 15 15 H 145'},
      {at: 0.75, is: 'M 25 25 H 215'},
    ],
  }, {
    state: {underlying: 'm 30 30 h 200'},
    expect: [
      {at: 0.25, is: 'm 15 15 h 125'},
      {at: 0.75, is: 'm 25 25 h 175'},
    ],
  }, {
    state: {underlying: 'M 30 30 L 100 100'},
    expect: [
      {at: 0.25, is: 'm 10 10 h 100'},
      {at: 0.75, is: 'M 30 30 L 100 100'},
    ],
  }],
});

assertSVGResponsive({
  targetTag: 'path',
  property: 'd',
  getter(target) {
    return getComputedStyle(target).getPropertyValue('d');
  },
  from: '',
  to: neutralKeyframe,
  configurations: [{
    state: {underlying: 'm 10 10 h 100'},
    expect: [
      {at: 0.25, is: ''},
      {at: 0.75, is: 'm 10 10 h 100'},
    ],
  }],
});
</script>

chromium/third_party/blink/web_tests/animations/responsive/interpolation/svg-d-responsive.html