testing/web-platform/tests/css/css-values/calc-linear-radial-conic-gradient-001.html
author Duncan McIntosh <dmcintosh@mozilla.com>
Wed, 09 Jul 2025 19:42:02 +0000 (4 hours ago)
changeset 795924 9ccc6a2267cbf69c621fec973bd28573c2a45a1f
parent 683655 d447d22cc1cbf776692b3d43c32298effdf63ffa
permissions -rw-r--r--
Bug 1966586 - Reuse other browser windows when opening _blank links in Taskbar Tabs windows. r=nrishel This doesn't affect other tab additions, nor does it stop the tab bar from appearing altogether. The idea is that _if_ another tab is somehow made, the user should see it; but we should not create new tabs if we can avoid it. This also adds tests for opening URIs in popups and taskbar tabs to make it less likely that this breaks in future. Differential Revision: https://phabricator.services.mozilla.com/D253726
<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Values and Units Test: computed value of 'background-image: [ linear | radial | conic ]-gradient()' with calc() function</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-values-3/#calc-computed-value">

  <meta name="flags" content="">
  <meta content="This test verifies how calc() functions inside 6 linear-gradient(), 1 radial-gradient() and 1 conic-gradient() are computed for 'background-image'." name="assert">

  <!--

  Blink (Chromium) Bug report 947377: [css-values-3] Values inside <image>s are not computed correctly / reflected correctly from getComputedStyle
  https://bugs.chromium.org/p/chromium/issues/detail?id=947377

  WebKit (Safari) Bug report 196389: [css-values-3] Computed value of calc() expression in linear-gradient function incorrect
  https://bugs.webkit.org/show_bug.cgi?id=196389

  -->

  <style>
  div#target
    {
      background-image: linear-gradient(yellow, red);
      height: 100px;
    }
  </style>

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

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

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

  <script>
  function startTesting()
  {

  var targetElement = document.getElementById("target");

    function verifyComputedStyle(property_name, specified_value, expected_value)
    {

    test(function()
      {

      targetElement.style.setProperty(property_name, "initial");

      /*
      The purpose of setting to the initial is to act as a fallback
      value in case the calc() function in the specified value
      fails or in case it generates an invalid value. Since we
      are running 6 consecutive tests on the same element,
      then it is necessary to 'reset' its property to the
      initial value.
      */

      targetElement.style.setProperty(property_name, specified_value);

      assert_equals(getComputedStyle(targetElement)[property_name], expected_value);

      }, `testing ${property_name}: ${specified_value}`);
    }

 /* verifyComputedStyle(property_name, specified_value, expected_value) */

    /* LINEAR */

    verifyComputedStyle(
    "background-image",
    "linear-gradient(rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
    "linear-gradient(rgb(0, 128, 0) 0%, rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(90deg), rgb(0, 128, 0) calc(0%), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0) 0%, rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(0.1turn + 0.15turn), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(150grad - 50grad), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");

    verifyComputedStyle(
    "background-image",
    "linear-gradient(calc(200grad - 90deg), rgb(0, 128, 0), rgb(0, 0, 255))",
    "linear-gradient(90deg, rgb(0, 128, 0), rgb(0, 0, 255))");


    /* RADIAL */

    verifyComputedStyle(
    "background-image",
    "radial-gradient(rgb(0, 128, 0) calc(10% + 20%), rgb(0, 0, 255) calc(30% + 40%))",
    "radial-gradient(rgb(0, 128, 0) 30%, rgb(0, 0, 255) 70%)");


    /* CONIC */

    verifyComputedStyle(
    "background-image",
    "conic-gradient(rgb(0, 128, 0) calc(50% + 10%), rgb(0, 0, 255) calc(60% + 20%))",
    "conic-gradient(rgb(0, 128, 0) 60%, rgb(0, 0, 255) 80%)");

 /* verifyComputedStyle(property_name, specified_value, expected_value) */

  }

  startTesting();

  </script>