wpt / css / css-masking / animations / clip-composition.html

Status: FAIL | Duration: 319ms | Subtests: 27/72 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (27/72)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
Compositing CSS Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (-1) should be [rect(-60px -40px -20px 0px)]FAILassert_equals: expected "rect ( - 60px , - 40px , - 20px , 0px ) " but got "rect ( - 60px , - 50px , - 40px , - 30px ) "
Compositing CSS Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (0) should be [rect(40px 60px 80px 100px)]FAILassert_equals: expected "rect ( 40px , 60px , 80px , 100px ) " but got "rect ( 40px , 50px , 60px , 70px ) "
Compositing CSS Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (0.25) should be [rect(65px 85px 105px 125px)]FAILassert_equals: expected "rect ( 65px , 85px , 105px , 125px ) " but got "rect ( 65px , 75px , 85px , 95px ) "
Compositing CSS Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (0.75) should be [rect(115px 135px 155px 175px)]FAILassert_equals: expected "rect ( 115px , 135px , 155px , 175px ) " but got "rect ( 115px , 125px , 135px , 145px ) "
Compositing CSS Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (1) should be [rect(140px 160px 180px 200px)]FAILassert_equals: expected "rect ( 140px , 160px , 180px , 200px ) " but got "rect ( 140px , 150px , 160px , 170px ) "
Compositing CSS Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (2) should be [rect(240px 260px 280px 300px)]FAILassert_equals: expected "rect ( 240px , 260px , 280px , 300px ) " but got "rect ( 240px , 250px , 260px , 270px ) "
Compositing Web Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (-1) should be [rect(-60px -40px -20px 0px)]FAILassert_equals: expected "rect ( - 60px , - 40px , - 20px , 0px ) " but got "rect ( 0px , 10px , 20px , 30px ) "
Compositing Web Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (0) should be [rect(40px 60px 80px 100px)]FAILassert_equals: expected "rect ( 40px , 60px , 80px , 100px ) " but got "rect ( 0px , 10px , 20px , 30px ) "
Compositing Web Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (0.25) should be [rect(65px 85px 105px 125px)]FAILassert_equals: expected "rect ( 65px , 85px , 105px , 125px ) " but got "rect ( 0px , 10px , 20px , 30px ) "
Compositing Web Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (0.75) should be [rect(115px 135px 155px 175px)]FAILassert_equals: expected "rect ( 115px , 135px , 155px , 175px ) " but got "rect ( 0px , 10px , 20px , 30px ) "
Compositing Web Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (1) should be [rect(140px 160px 180px 200px)]FAILassert_equals: expected "rect ( 140px , 160px , 180px , 200px ) " but got "rect ( 0px , 10px , 20px , 30px ) "
Compositing Web Animations: property <clip> underlying [rect(0px 10px 20px 30px)] from add [rect(40px 50px 60px 70px)] to add [rect(140px 150px 160px 170px)] at (2) should be [rect(240px 260px 280px 300px)]FAILassert_equals: expected "rect ( 240px , 260px , 280px , 300px ) " but got "rect ( 0px , 10px , 20px , 30px ) "
Compositing CSS Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (-1) should be [rect(-100px -100px -100px -100px)]PASS
Compositing CSS Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (0) should be [rect(0px 0px 0px 0px)]PASS
Compositing CSS Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (0.25) should be [rect(25px 25px 25px 25px)]PASS
Compositing CSS Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (0.75) should be [rect(75px 75px 75px 75px)]PASS
Compositing CSS Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (1) should be [rect(100px 100px 100px 100px)]PASS
Compositing CSS Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (2) should be [rect(200px 200px 200px 200px)]PASS
Compositing Web Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (-1) should be [rect(-100px -100px -100px -100px)]FAILassert_equals: expected "rect ( - 100px , - 100px , - 100px , - 100px ) " but got "auto "
Compositing Web Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (0) should be [rect(0px 0px 0px 0px)]FAILassert_equals: expected "rect ( 0px , 0px , 0px , 0px ) " but got "auto "
Compositing Web Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (0.25) should be [rect(25px 25px 25px 25px)]FAILassert_equals: expected "rect ( 25px , 25px , 25px , 25px ) " but got "auto "
Compositing Web Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (0.75) should be [rect(75px 75px 75px 75px)]FAILassert_equals: expected "rect ( 75px , 75px , 75px , 75px ) " but got "auto "
Compositing Web Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (1) should be [rect(100px 100px 100px 100px)]FAILassert_equals: expected "rect ( 100px , 100px , 100px , 100px ) " but got "auto "
Compositing Web Animations: property <clip> underlying [auto] from add [rect(0px 0px 0px 0px)] to add [rect(100px 100px 100px 100px)] at (2) should be [rect(200px 200px 200px 200px)]FAILassert_equals: expected "rect ( 200px , 200px , 200px , 200px ) " but got "auto "
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (-1) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (0) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (0.25) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (0.75) should be [rect(100px 100px 100px 100px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (1) should be [rect(100px 100px 100px 100px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (2) should be [rect(100px 100px 100px 100px)]PASS
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (-1) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (0) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (0.25) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (0.75) should be [rect(100px 100px 100px 100px)]FAILassert_equals: expected "rect ( 100px , 100px , 100px , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (1) should be [rect(100px 100px 100px 100px)]FAILassert_equals: expected "rect ( 100px , 100px , 100px , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px 100px 100px 100px)] at (2) should be [rect(100px 100px 100px 100px)]FAILassert_equals: expected "rect ( 100px , 100px , 100px , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (-1) should be [rect(0px auto auto 0px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (0) should be [rect(50px auto auto 50px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (0.25) should be [rect(62.5px auto auto 62.5px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (0.75) should be [rect(87.5px auto auto 87.5px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (1) should be [rect(100px auto auto 100px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (2) should be [rect(150px auto auto 150px)]PASS
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (-1) should be [rect(0px auto auto 0px)]FAILassert_equals: expected "rect ( 0px , auto , auto , 0px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (0) should be [rect(50px auto auto 50px)]FAILassert_equals: expected "rect ( 50px , auto , auto , 50px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (0.25) should be [rect(62.5px auto auto 62.5px)]FAILassert_equals: expected "rect ( 62.5px , auto , auto , 62.5px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (0.75) should be [rect(87.5px auto auto 87.5px)]FAILassert_equals: expected "rect ( 87.5px , auto , auto , 87.5px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (1) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [rect(100px auto auto 100px)] at (2) should be [rect(150px auto auto 150px)]FAILassert_equals: expected "rect ( 150px , auto , auto , 150px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (-1) should be [rect(50px 50px 50px 50px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (0) should be [rect(50px 50px 50px 50px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (0.25) should be [rect(50px 50px 50px 50px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (0.75) should be [rect(100px auto auto 100px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (1) should be [rect(100px auto auto 100px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (2) should be [rect(100px auto auto 100px)]PASS
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (-1) should be [rect(50px 50px 50px 50px)]FAILassert_equals: expected "rect ( 50px , 50px , 50px , 50px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (0) should be [rect(50px 50px 50px 50px)]FAILassert_equals: expected "rect ( 50px , 50px , 50px , 50px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (0.25) should be [rect(50px 50px 50px 50px)]FAILassert_equals: expected "rect ( 50px , 50px , 50px , 50px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (0.75) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (1) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px auto auto 50px)] from add [rect(50px 50px 50px 50px)] to replace [rect(100px auto auto 100px)] at (2) should be [rect(100px auto auto 100px)]FAILassert_equals: expected "rect ( 100px , auto , auto , 100px ) " but got "rect ( 50px , auto , auto , 50px ) "
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (-1) should be [rect(50px auto auto 50px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (0) should be [rect(50px auto auto 50px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (0.25) should be [rect(50px auto auto 50px)]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (0.75) should be [auto]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (1) should be [auto]PASS
Compositing CSS Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (2) should be [auto]PASS
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (-1) should be [rect(50px auto auto 50px)]FAILassert_equals: expected "rect ( 50px , auto , auto , 50px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (0) should be [rect(50px auto auto 50px)]FAILassert_equals: expected "rect ( 50px , auto , auto , 50px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (0.25) should be [rect(50px auto auto 50px)]FAILassert_equals: expected "rect ( 50px , auto , auto , 50px ) " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (0.75) should be [auto]FAILassert_equals: expected "auto " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (1) should be [auto]FAILassert_equals: expected "auto " but got "rect ( 50px , 50px , 50px , 50px ) "
Compositing Web Animations: property <clip> underlying [rect(50px 50px 50px 50px)] from add [rect(50px auto auto 50px)] to add [auto] at (2) should be [auto]FAILassert_equals: expected "auto " but got "rect ( 50px , 50px , 50px , 50px ) "

/css/css-masking/animations/clip-composition.html

<!DOCTYPE html>
<title>clip composition</title>
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<body>
<script>
test_composition({
  property: 'clip',
  underlying: 'rect(0px 10px 20px 30px)',
  addFrom: 'rect(40px 50px 60px 70px)',
  addTo: 'rect(140px 150px 160px 170px)',
}, [
  {at: -1, expect: 'rect(-60px -40px -20px 0px)'},
  {at: 0, expect: 'rect(40px 60px 80px 100px)'},
  {at: 0.25, expect: 'rect(65px 85px 105px 125px)'},
  {at: 0.75, expect: 'rect(115px 135px 155px 175px)'},
  {at: 1, expect: 'rect(140px 160px 180px 200px)'},
  {at: 2, expect: 'rect(240px 260px 280px 300px)'},
]);

test_composition({
  property: 'clip',
  underlying: 'auto',
  addFrom: 'rect(0px 0px 0px 0px)',
  addTo: 'rect(100px 100px 100px 100px)',
}, [
  {at: -1, expect: 'rect(-100px -100px -100px -100px)'},
  {at: 0, expect: 'rect(0px 0px 0px 0px)'},
  {at: 0.25, expect: 'rect(25px 25px 25px 25px)'},
  {at: 0.75, expect: 'rect(75px 75px 75px 75px)'},
  {at: 1, expect: 'rect(100px 100px 100px 100px)'},
  {at: 2, expect: 'rect(200px 200px 200px 200px)'},
]);

test_composition({
  property: 'clip',
  underlying: 'rect(50px auto auto 50px)',
  addFrom: 'rect(50px auto auto 50px)',
  addTo: 'rect(100px 100px 100px 100px)',
}, [
  {at: -1, expect: 'rect(100px auto auto 100px)'},
  {at: 0, expect: 'rect(100px auto auto 100px)'},
  {at: 0.25, expect: 'rect(100px auto auto 100px)'},
  {at: 0.75, expect: 'rect(100px 100px 100px 100px)'},
  {at: 1, expect: 'rect(100px 100px 100px 100px)'},
  {at: 2, expect: 'rect(100px 100px 100px 100px)'},
]);

test_composition({
  property: 'clip',
  underlying: 'rect(50px 50px 50px 50px)',
  addFrom: 'rect(50px auto auto 50px)',
  addTo: 'rect(100px auto auto 100px)',
}, [
  {at: -1, expect: 'rect(0px auto auto 0px)'},
  {at: 0, expect: 'rect(50px auto auto 50px)'},
  {at: 0.25, expect: 'rect(62.5px auto auto 62.5px)'},
  {at: 0.75, expect: 'rect(87.5px auto auto 87.5px)'},
  {at: 1, expect: 'rect(100px auto auto 100px)'},
  {at: 2, expect: 'rect(150px auto auto 150px)'},
]);

test_composition({
  property: 'clip',
  underlying: 'rect(50px auto auto 50px)',
  addFrom: 'rect(50px 50px 50px 50px)',
  replaceTo: 'rect(100px auto auto 100px)',
}, [
  {at: -1, expect: 'rect(50px 50px 50px 50px)'},
  {at: 0, expect: 'rect(50px 50px 50px 50px)'},
  {at: 0.25, expect: 'rect(50px 50px 50px 50px)'},
  {at: 0.75, expect: 'rect(100px auto auto 100px)'},
  {at: 1, expect: 'rect(100px auto auto 100px)'},
  {at: 2, expect: 'rect(100px auto auto 100px)'},
]);

test_composition({
  property: 'clip',
  underlying: 'rect(50px 50px 50px 50px)',
  addFrom: 'rect(50px auto auto 50px)',
  addTo: 'auto',
}, [
  {at: -1, expect: 'rect(50px auto auto 50px)'},
  {at: 0, expect: 'rect(50px auto auto 50px)'},
  {at: 0.25, expect: 'rect(50px auto auto 50px)'},
  {at: 0.75, expect: 'auto'},
  {at: 1, expect: 'auto'},
  {at: 2, expect: 'auto'},
]);
</script>