mozilla-central: testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001.html@f14d1c1492bc6791542a001365abbca4bd9b28db

Mercurial > mozilla-central / file revision / testing/web-platform/tests/web-animations/animation-model/keyframe-effects/transform-and-opacity-on-inline-001.html@f14d1c1492bc6791542a001365abbca4bd9b28db

author	Lando <lando@lando.test>
	Fri, 11 Jul 2025 04:32:24 +0000 (3 hours ago)
changeset 796014	f14d1c1492bc6791542a001365abbca4bd9b28db
parent 617455	eb48d82f10c0e8cb914dd748da06b46b24c1d32a
permissions	-rw-r--r--

<!DOCTYPE html>
<html>
<title>CSS Test (Animations): Element.animate() animating both transform and opacity on an inline</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Google" href="http://www.google.com/">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1316688">
<link rel="match" href="transform-and-opacity-on-inline-001-ref.html">
<meta name="assert" content="This should not crash, and should render as opacity 0.5.">

<script>
// The transform animation should be ignored; the opacity animation should work.
window.onload = function() {
  document.getElementById("target").animate(
    [
      {
        "transform": "translateX(0px)",
        "opacity": "0.8",
      },
      {
        "transform": "translateX(300px)",
        "opacity": "0.0",
      }
    ],
    { duration:1000000, delay: -500000, easing: "steps(3, jump-both)" });
}
</script>
<body><span id="target">x</span></body>