transition-computed.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/parsing/transition-computed.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS Transitions: getComputedStyle().transition</title>

<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-shorthand-property">

<meta name="assert" content="transition computed value is as specified.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/css/support/computed-testcommon.js"></script>

</head>

<body>

<div id="target"></div>

<script>

// <single-transition> = [ none | <single-transition-property> ] ||

// <time> || <easing-function> || <time>

test(() => {

  assert_equals(getComputedStyle(document.getElementById('target')).transition, "all");

}, "Default transition value");

test_computed_value("transition", "1s");

test_computed_value("transition", "cubic-bezier(0, -2, 1, 3)");

test_computed_value("transition", "1s -3s");

test_computed_value("transition", "none");

test_computed_value("transition", "top");

test_computed_value("transition", "1s -3s cubic-bezier(0, -2, 1, 3) top", "top 1s cubic-bezier(0, -2, 1, 3) -3s");

test_computed_value("transition", "1s -3s, cubic-bezier(0, -2, 1, 3) top", "1s -3s, top cubic-bezier(0, -2, 1, 3)");

test_computed_value("transition", "all, all");

test(() => {

  const target = document.getElementById('target');

  target.style.transition = "initial";

  target.style.transitionDelay = "1s";

  assert_equals(getComputedStyle(target).transition, "0s 1s");

}, "Transition with a delay but no duration");

// TODO: Add test with a single timing-function keyword.

</script>

</body>

</html>