wpt / css / css-backgrounds / animations / border-bottom-right-radius-composition.html

Status: FAIL | Duration: 141ms | Subtests: 2/42 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (2/42)

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

SubtestStatusMessage
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (-0.25) should be [75px]FAILassert_equals: expected "75px " but got "35px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0) should be [100px]FAILassert_equals: expected "100px " but got "60px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0.25) should be [125px]FAILassert_equals: expected "125px " but got "85px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0.5) should be [150px]FAILassert_equals: expected "150px " but got "110px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0.75) should be [175px]FAILassert_equals: expected "175px " but got "135px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (1) should be [200px]FAILassert_equals: expected "200px " but got "160px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (1.25) should be [225px]FAILassert_equals: expected "225px " but got "185px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (-0.25) should be [75px]FAILassert_equals: expected "75px " but got "40px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0) should be [100px]FAILassert_equals: expected "100px " but got "40px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0.25) should be [125px]FAILassert_equals: expected "125px " but got "40px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0.5) should be [150px]FAILassert_equals: expected "150px " but got "40px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (0.75) should be [175px]FAILassert_equals: expected "175px " but got "40px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (1) should be [200px]FAILassert_equals: expected "200px " but got "40px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 40px] from add [60px 60px] to add [160px 160px] at (1.25) should be [225px]FAILassert_equals: expected "225px " but got "40px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (-0.25) should be [75px 100px]FAILassert_equals: expected "75px 100px " but got "85px 135px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0) should be [100px 120px]PASS
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0.25) should be [125px 140px]FAILassert_equals: expected "125px 140px " but got "115px 105px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0.5) should be [150px 160px]FAILassert_equals: expected "150px 160px " but got "130px 90px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0.75) should be [175px 180px]FAILassert_equals: expected "175px 180px " but got "145px 75px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (1) should be [200px]FAILassert_equals: expected "200px " but got "160px 60px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (1.25) should be [225px 220px]FAILassert_equals: expected "225px 220px " but got "175px 45px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (-0.25) should be [75px 100px]FAILassert_equals: expected "75px 100px " but got "40px 140px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0) should be [100px 120px]FAILassert_equals: expected "100px 120px " but got "40px 140px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0.25) should be [125px 140px]FAILassert_equals: expected "125px 140px " but got "40px 140px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0.5) should be [150px 160px]FAILassert_equals: expected "150px 160px " but got "40px 140px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (0.75) should be [175px 180px]FAILassert_equals: expected "175px 180px " but got "40px 140px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (1) should be [200px]FAILassert_equals: expected "200px " but got "40px 140px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 140px] from replace [100px 120px] to add [160px 60px] at (1.25) should be [225px 220px]FAILassert_equals: expected "225px 220px " but got "40px 140px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (-0.25) should be [75px 220px]FAILassert_equals: expected "75px 220px " but got "25px 145px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0) should be [100px 200px]FAILassert_equals: expected "100px 200px " but got "60px 140px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0.25) should be [125px 180px]FAILassert_equals: expected "125px 180px " but got "95px 135px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0.5) should be [150px 160px]FAILassert_equals: expected "150px 160px " but got "130px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0.75) should be [175px 140px]FAILassert_equals: expected "175px 140px " but got "165px 125px "
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (1) should be [200px 120px]PASS
Compositing CSS Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (1.25) should be [225px 100px]FAILassert_equals: expected "225px 100px " but got "235px 115px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (-0.25) should be [75px 220px]FAILassert_equals: expected "75px 220px " but got "40px 60px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0) should be [100px 200px]FAILassert_equals: expected "100px 200px " but got "40px 60px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0.25) should be [125px 180px]FAILassert_equals: expected "125px 180px " but got "40px 60px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0.5) should be [150px 160px]FAILassert_equals: expected "150px 160px " but got "40px 60px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (0.75) should be [175px 140px]FAILassert_equals: expected "175px 140px " but got "40px 60px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (1) should be [200px 120px]FAILassert_equals: expected "200px 120px " but got "40px 60px "
Compositing Web Animations: property <border-bottom-right-radius> underlying [40px 60px] from add [60px 140px] to replace [200px 120px] at (1.25) should be [225px 100px]FAILassert_equals: expected "225px 100px " but got "40px 60px "

/css/css-backgrounds/animations/border-bottom-right-radius-composition.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>border-bottom-right-radius composition</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-border-radius">
<meta name="assert" content="border-bottom-right-radius supports animation by computed value">

<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: 'border-bottom-right-radius',
  underlying: '40px 40px',
  addFrom: '60px 60px',
  addTo: '160px 160px',
}, [
  {at: -0.25, expect: '75px'},
  {at: 0, expect: '100px'},
  {at: 0.25, expect: '125px'},
  {at: 0.5, expect: '150px'},
  {at: 0.75, expect: '175px'},
  {at: 1, expect: '200px'},
  {at: 1.25, expect: '225px'},
]);

test_composition({
  property: 'border-bottom-right-radius',
  underlying: '40px 140px',
  replaceFrom: '100px 120px',
  addTo: '160px 60px',
}, [
  {at: -0.25, expect: '75px 100px'},
  {at: 0, expect: '100px 120px'},
  {at: 0.25, expect: '125px 140px'},
  {at: 0.5, expect: '150px 160px'},
  {at: 0.75, expect: '175px 180px'},
  {at: 1, expect: '200px'},
  {at: 1.25, expect: '225px 220px'},
]);

test_composition({
  property: 'border-bottom-right-radius',
  underlying: '40px 60px',
  addFrom: '60px 140px',
  replaceTo: '200px 120px',
}, [
  {at: -0.25, expect: '75px 220px'},
  {at: 0, expect: '100px 200px'},
  {at: 0.25, expect: '125px 180px'},
  {at: 0.5, expect: '150px 160px'},
  {at: 0.75, expect: '175px 140px'},
  {at: 1, expect: '200px 120px'},
  {at: 1.25, expect: '225px 100px'},
]);
</script>
</body>