all-interpolates-same-as-explicit-property.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/all-interpolates-same-as-explicit-property.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

<title>transition:all interpolates the same as transition:the-actual-property</title>

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

<script src="/resources/testharness.js" type="text/javascript"></script>

<script src="/resources/testharnessreport.js" type="text/javascript"></script>

<script src="./support/helper.js" type="text/javascript"></script>

</head>

<body>

<div id="log"></div>

<script>

const cases = [

  // Property name, from-value, to-value, transition at 50%

  ["width", "100px", "200px", "150px"],

  ["height", "100px", "200px", "150px"],

  ["z-index", "100", "200", "150"],

  ["display", "none", "block", "block"],

  ["margin-left", "100px", "200px", "150px"],

  ["font-kerning", "normal", "none", "none"],

  ["font-optical-sizing", "none", "auto", "auto"],

  ["font-size", "10px", "12px", "11px"],

  ["font-stretch", "100%", "150%", "125%"],

  ["font-style", "normal", "oblique 10deg", "oblique 5deg"],

  ["font-variant-ligatures", "common-ligatures", "none", "none"],

  ["font-variant-caps", "normal", "small-caps", "small-caps"],

  ["font-variant-east-asian", "normal", "ruby", "ruby"],

  ["font-variant-numeric", "normal", "slashed-zero", "slashed-zero"],

  ["font-weight", "400", "600", "500"],

  ["text-rendering", "none", "optimizespeed", "optimizespeed"],

  ["background-attachment", "scroll", "local", "local"],

  ["background-clip", "border-box", "text", "text"],

  ["background-image", "auto", "none", "none"],

  ["background-origin", "border-box", "padding-box", "padding-box"],

  ["background-position-x", "100px", "200px", "150px"],

  ["background-position-y", "100px", "200px", "150px"],

  ["background-repeat", "repeat-x", "repeat-y", "repeat-y"],

  ["background-size", "auto", "cover", "cover"],

  ["border-image-outset", "10px", "20px", "15px"],

  ["border-image-repeat", "stretch", "repeat", "repeat"],

  ["border-image-slice", "100", "200", "150"],

  ["border-image-width", "100px", "200px", "150px"],

  ["border-left-color", "black", "white", "rgb(128, 128, 128)"],

  ["counter-increment", "example-counter 10", "example-counter 20", "example-counter 20"],

  ["vertical-align", "10px", "20px", "15px"],

  ["vertical-align", "baseline", "super", "super"],

];

for (const c of cases) {

  let propertyName = c[0];

  let fromValue = c[1];

  let toValue = c[2];

  let midValue = c[3];

  promise_test(async t => {

    // Start a 100s transition 50% of the way through.

    const div = addDiv(t, {

        style: `transition: ${propertyName} 100s -50s linear allow-discrete; ${propertyName}: ${fromValue}`,

});

    getComputedStyle(div)[propertyName];

    div.style[propertyName] = toValue;

    assert_equals(getComputedStyle(div)[propertyName],

        midValue,

        'Transition should be initially 50% complete');

    // Now do the same with transition:all.

    const div2 = addDiv(t, {

      style: `transition: all 100s -50s linear allow-discrete; ${propertyName}: ${fromValue}`,

});

    getComputedStyle(div2)[propertyName];

    div2.style[propertyName] = toValue;

    assert_equals(getComputedStyle(div2)[propertyName],

        midValue,

        'Transition should be initially 50% complete, with transition:all');

});

</script>

</body>

</html>