conic-gradient-parsing.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../css-parser/resources/property-parsing-test.js"></script>

<body>
<div id="container"></div>
<script>
  'use strict';
  const container = document.getElementById('container');

  function assert_computed_style(property, value, expectedValue) {
    if (expectedValue === undefined)
      expectedValue = value;

    test(function() {
      const div = document.createElement('div');
      div.setAttribute("style", property + ": " + value);
      container.appendChild(div);
      const computedStyleValue = getComputedStyle(div)[property];
      div.remove();
      assert_equals(computedStyleValue, expectedValue);
    }, "Computed style after parsing style='" + property + ": " + value + "'");
  }

  const tests = [
    { style: "conic-gradient(black)"                                       , computed: "none" },
    { style: "conic-gradient(black 0%)"                                    , computed: "none" },
    { style: "conic-gradient(black 0%, 25%)"                               , computed: "none" },
    { style: "conic-gradient(black 0px, white)"                            , computed: "none" },
    { style: "conic-gradient(black, , white)"                              , computed: "none" },
    { style: "conic-gradient(0%, black, white)"                            , computed: "none" },
    { style: "conic-gradient(center, black, white)"                        , computed: "none" },
    { style: "conic-gradient(top left, black, white)"                      , computed: "none" },
    { style: "conic-gradient(at bottom bottom, black, white)"              , computed: "none" },
    { style: "conic-gradient(at left left, black, white)"                  , computed: "none" },
    { style: "conic-gradient(from 0deg at left 10% top, black, white)"     , computed: "none" },
    { style: "conic-gradient(at top left black, white)"                    , computed: "none" },
    { style: "conic-gradient(black 0%, 10%, 10%, green .5turn, 50%, white)", computed: "none" },
    { style: "conic-gradient(from 0 black, white)"                         , computed: "none" },
    { style: "conic-gradient(from 0 at top left black, white)"             , computed: "none" },
    { style: "conic-gradient(from 0, at top left, black, white)"           , computed: "none" },
    { style: "conic-gradient(at top left from 0, black, white)"            , computed: "none" },
    { style: "conic-gradient(black 10% 20% 30%, white)"                    , computed: "none" },
    { style: "conic-gradient(black, 30% 50%, white)"                       , computed: "none" },
    { style: "conic-gradient(black, white calc(360deg / 10 + 50%)"         , computed: "none" },

    { style: "conic-gradient(black, white)"           , computed: "conic-gradient(rgb(0, 0, 0), rgb(255, 255, 255))" },
    { style: "conic-gradient(black 0, white)"         , computed: "conic-gradient(rgb(0, 0, 0) 0deg, rgb(255, 255, 255))" },
    { style: "conic-gradient(black 0%, white)"        , computed: "conic-gradient(rgb(0, 0, 0) 0%, rgb(255, 255, 255))" },
    { style: "conic-gradient(black 0deg, white)"      , computed: "conic-gradient(rgb(0, 0, 0) 0deg, rgb(255, 255, 255))" },
    { style: "conic-gradient(black 0grad, white)"     , computed: "conic-gradient(rgb(0, 0, 0) 0grad, rgb(255, 255, 255))" },
    { style: "conic-gradient(black 0rad, white)"      , computed: "conic-gradient(rgb(0, 0, 0) 0rad, rgb(255, 255, 255))" },
    { style: "conic-gradient(black 0turn, white)"     , computed: "conic-gradient(rgb(0, 0, 0) 0turn, rgb(255, 255, 255))" },
    { style: "conic-gradient(black, white 50%)"       , computed: "conic-gradient(rgb(0, 0, 0), rgb(255, 255, 255) 50%)" },
    { style: "conic-gradient(black 10%, white 50%)"   , computed: "conic-gradient(rgb(0, 0, 0) 10%, rgb(255, 255, 255) 50%)" },
    { style: "conic-gradient(black 10%, white 180deg)", computed: "conic-gradient(rgb(0, 0, 0) 10%, rgb(255, 255, 255) 180deg)" },

    { style: "conic-gradient(black 10% 20%, white)"                          , computed: "conic-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, rgb(255, 255, 255))" },
    { style: "conic-gradient(black, white 270deg 360deg)"                    , computed: "conic-gradient(rgb(0, 0, 0), rgb(255, 255, 255) 270deg, rgb(255, 255, 255) 360deg)" },
    { style: "conic-gradient(black 10% 20%, white 270deg 360deg)"            , computed: "conic-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, rgb(255, 255, 255) 270deg, rgb(255, 255, 255) 360deg)" },
    { style: "conic-gradient(blue 10%, blue 20%, white)"                     , computed: "conic-gradient(rgb(0, 0, 255) 10%, rgb(0, 0, 255) 20%, rgb(255, 255, 255))" },
    { style: "conic-gradient(blue 10%, blue 20%, blue 30%, white)"           , computed: "conic-gradient(rgb(0, 0, 255) 10%, rgb(0, 0, 255) 20%, rgb(0, 0, 255) 30%, rgb(255, 255, 255))" },
    { style: "conic-gradient(blue 10%, blue 20%, blue 30%, blue 40%, white)" , computed: "conic-gradient(rgb(0, 0, 255) 10%, rgb(0, 0, 255) 20%, rgb(0, 0, 255) 30%, rgb(0, 0, 255) 40%, rgb(255, 255, 255))" },
    { style: "conic-gradient(blue 10%, blue 20%, white 270deg, white 360deg)", computed: "conic-gradient(rgb(0, 0, 255) 10%, rgb(0, 0, 255) 20%, rgb(255, 255, 255) 270deg, rgb(255, 255, 255) 360deg)" },
    { style: "conic-gradient(blue 10%, blue 20% 30%, white)"                 , computed: "conic-gradient(rgb(0, 0, 255) 10%, rgb(0, 0, 255) 20%, rgb(0, 0, 255) 30%, rgb(255, 255, 255))" },
    { style: "conic-gradient(blue, blue, blue, white)"                       , computed: "conic-gradient(rgb(0, 0, 255), rgb(0, 0, 255), rgb(0, 0, 255), rgb(255, 255, 255))" },

    { style: "conic-gradient(at top left, black, white)"     , computed: "conic-gradient(at left top, rgb(0, 0, 0), rgb(255, 255, 255))" },
    { style: "conic-gradient(at bottom right, black, white)" , computed: "conic-gradient(at right bottom, rgb(0, 0, 0), rgb(255, 255, 255))" },
    { style: "conic-gradient(at center, black, white)"       , computed: "conic-gradient(rgb(0, 0, 0), rgb(255, 255, 255))" },
    { style: "conic-gradient(at center center, black, white)", computed: "conic-gradient(rgb(0, 0, 0), rgb(255, 255, 255))" },

    { style: "conic-gradient(from 0, black, white)"              , computed: "conic-gradient(from 0deg, rgb(0, 0, 0), rgb(255, 255, 255))" },
    { style: "conic-gradient(from 10deg, black, white)"          , computed: "conic-gradient(from 10deg, rgb(0, 0, 0), rgb(255, 255, 255))" },
    { style: "conic-gradient(from 10deg at center, black, white)", computed: "conic-gradient(from 10deg, rgb(0, 0, 0), rgb(255, 255, 255))" },

    { style: "conic-gradient(black 0%, 10%, green .5turn, 50%, white)", computed: "conic-gradient(rgb(0, 0, 0) 0%, 10%, rgb(0, 128, 0) 0.5turn, 50%, rgb(255, 255, 255))" },
    { style: "conic-gradient(black 0deg, 0%, green .5turn, 50%, white 1turn)", computed: "conic-gradient(rgb(0, 0, 0) 0deg, 0%, rgb(0, 128, 0) 0.5turn, 50%, rgb(255, 255, 255) 1turn)" },

    // Examples from https://drafts.csswg.org/css-images-4/#conic-gradient-examples
    { style: "conic-gradient(#f06, gold)"                     , computed: "conic-gradient(rgb(255, 0, 102), rgb(255, 215, 0))" },
    { style: "conic-gradient(at 50% 50%, #f06, gold)"         , computed: "conic-gradient(at 50% 50%, rgb(255, 0, 102), rgb(255, 215, 0))" },
    { style: "conic-gradient(from 0deg, #f06, gold)"          , computed: "conic-gradient(from 0deg, rgb(255, 0, 102), rgb(255, 215, 0))" },
    { style: "conic-gradient(from 0deg at center, #f06, gold)", computed: "conic-gradient(from 0deg, rgb(255, 0, 102), rgb(255, 215, 0))" },
    { style: "conic-gradient(#f06 0%, gold 100%)"             , computed: "conic-gradient(rgb(255, 0, 102) 0%, rgb(255, 215, 0) 100%)" },
    { style: "conic-gradient(#f06 0deg, gold 1turn)"          , computed: "conic-gradient(rgb(255, 0, 102) 0deg, rgb(255, 215, 0) 1turn)" },

    { style: "conic-gradient(white -50%, black 150%)"      , computed: "conic-gradient(rgb(255, 255, 255) -50%, rgb(0, 0, 0) 150%)" },
    { style: "conic-gradient(white -180deg, black 540deg)" , computed: "conic-gradient(rgb(255, 255, 255) -180deg, rgb(0, 0, 0) 540deg)" },
    { style: "conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%))", computed: "conic-gradient(rgb(191, 191, 191), rgb(64, 64, 64))" },

    { style: "conic-gradient(from 45deg, white, black, white)"                            , computed: "conic-gradient(from 45deg, rgb(255, 255, 255), rgb(0, 0, 0), rgb(255, 255, 255))" },
    { style: "conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%))", computed: "conic-gradient(rgb(223, 223, 223), rgb(255, 255, 255) 45deg, rgb(0, 0, 0) 225deg, rgb(223, 223, 223))" },

    { style: "conic-gradient(white 45deg, black 225deg, white 405deg)"   , computed: "conic-gradient(rgb(255, 255, 255) 45deg, rgb(0, 0, 0) 225deg, rgb(255, 255, 255) 405deg)" },
    { style: "conic-gradient(red, yellow, lime, aqua, blue, magenta, red", computed: "conic-gradient(rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0))" },
    { style: "conic-gradient(gold, #f06 20deg)"                          , computed: "conic-gradient(rgb(255, 215, 0), rgb(255, 0, 102) 20deg)" },
    { style: "conic-gradient(gold calc(100% / 2), #f06 calc(360deg * 4 / 5))"                    , computed: "conic-gradient(rgb(255, 215, 0) calc(50%), rgb(255, 0, 102) calc(288deg))" },
  ];

  test(function() {
    tests.forEach(function(test) {
      assert_computed_style('background-image', test.style, test.computed);
    });
  }, "conic-gradient parsing");

  test(function() {
    tests.forEach(function(test) {
      assert_computed_style('background-image', 'repeating-' + test.style,
        test.computed == 'none' ? test.computed : 'repeating-' + test.computed);
    });
  }, "repeating-conic-gradient parsing");
</script>
</body>
chromium/third_party/blink/web_tests/fast/gradients/conic-gradient-parsing.html
