svg-orient-composition.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
<template id="target-template">
<svg width="90" height="90">
<defs>
<marker class="target" />
</defs>
</svg>
</template>
<script src="../svg-attribute-interpolation/resources/interpolation-test.js"></script>
<script>
'use strict';
assertAttributeInterpolation({
  property: 'orient',
  underlying: '50',
  from: '130',
  fromComposite: 'add',
  to: '200grad', // 180deg
  toComposite: 'add'
}, [
  {at: -3, is: 30},
  {at: 0, is: 180},
  {at: 0.2, is: 190},
  {at: 0.6, is: 210},
  {at: 1, is: 230},
  {at: 1.4, is: 250}
]);
assertAttributeInterpolation({
  property: 'orient',
  underlying: '50',
  from: '90deg',
  fromComposite: 'add',
  to: 'auto',
  toComposite: 'add'
}, [
  {at: -0.4, is: 140},
  {at: 0, is: 140},
  {at: 0.2, is: 140},
  {at: 0.6, is: 'auto'},
  {at: 1, is: 'auto'},
  {at: 1.4, is: 'auto'}
]);
assertAttributeInterpolation({
  property: 'orient',
  underlying: '20',
  from: '120',
  fromComposite: 'replace',
  to: '180',
  toComposite: 'add'
}, [
  {at: -0.4, is: 88},
  {at: 0, is: 120},
  {at: 0.2, is: 136},
  {at: 0.6, is: 168},
  {at: 1, is: 200},
  {at: 1.4, is: 232}
]);
assertAttributeInterpolation({
  property: 'orient',
  underlying: '20',
  from: neutralKeyframe,
  to: '180',
  toComposite: 'replace'
}, [
  {at: -0.4, is: -44},
  {at: 0, is: 20},
  {at: 0.2, is: 52},
  {at: 0.6, is: 116},
  {at: 1, is: 180},
  {at: 1.4, is: 244}
]);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/animations/svg-attribute-composition/svg-orient-composition.html
