unprefixed-gradient-parsing.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="container"></div>
<script>
'use strict';
const container = document.getElementById('container');

function testGradient(css)
{
    const div = document.createElement('div');
    div.setAttribute('style', css);
    container.appendChild(div);

    const result = getComputedStyle(div).backgroundImage;
    container.removeChild(div);
    return result;
}

test(() => {
  assert_equals(testGradient("background-image: linear-gradient(black 0%)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(top)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(to top)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10deg)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10deg black, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(to black, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(to left black, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(to top center, black 0%, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10px 20%, black 0%)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(to left left)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(to left center)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(to left 10deg, black 0%, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(black)"), 'none');

  assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, 25%, 50%, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, 50%)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10deg, 50%, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10deg, 0%, black, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10deg, white, black, 80%)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(10deg, black, , white)"), 'none');

  assert_equals(testGradient("background-image: linear-gradient(black, white)"), 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(black 0, white)"), 'linear-gradient(rgb(0, 0, 0) 0px, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(black 0%, white)"), 'linear-gradient(rgb(0, 0, 0) 0%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(black 0%, white)"), 'linear-gradient(rgb(0, 0, 0) 0%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(black 10px, white 20px)"), 'linear-gradient(rgb(0, 0, 0) 10px, rgb(255, 255, 255) 20px)');
  assert_equals(testGradient("background-image: linear-gradient(to top left, black 0%, white)"), 'linear-gradient(to left top, rgb(0, 0, 0) 0%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(to top, black 0%, white)"), 'linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, white)"), 'linear-gradient(10deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, 25%, white)"), 'linear-gradient(10deg, rgb(0, 0, 0) 0%, 25%, rgb(255, 255, 255))');

  assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, 0%, white)"), 'linear-gradient(10deg, rgb(0, 0, 0) 0%, 0%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, 100%, white)"), 'linear-gradient(10deg, rgb(0, 0, 0) 0%, 100%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(10deg, black 0%, 50%, green 50%, 50%, white)"), 'linear-gradient(10deg, rgb(0, 0, 0) 0%, 50%, rgb(0, 128, 0) 50%, 50%, rgb(255, 255, 255))');

  assert_equals(testGradient("background-image: linear-gradient(black, 10% 20%, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(black 10% 20% 30%, white)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px 300px)"), 'none');
  assert_equals(testGradient("background-image: linear-gradient(black 10% 20%, white)"), 'linear-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: linear-gradient(black, white 100px 200px)"), 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255) 100px, rgb(255, 255, 255) 200px)');
  assert_equals(testGradient("background-image: linear-gradient(black 10% 20%, white 100px 200px)"), 'linear-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, rgb(255, 255, 255) 100px, rgb(255, 255, 255) 200px)');
  assert_equals(testGradient("background-image: linear-gradient(black 10% 20%, 50%, white 100px 200px)"), 'linear-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, 50%, rgb(255, 255, 255) 100px, rgb(255, 255, 255) 200px)');
}, 'linear-gradient');

test(() => {
  assert_equals(testGradient("background-image: repeating-linear-gradient(black, white)"), 'repeating-linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: repeating-linear-gradient(black, 35%, white)"), 'repeating-linear-gradient(rgb(0, 0, 0), 35%, rgb(255, 255, 255))');
}, 'repeating-linear-gradient');

test(() => {
  assert_equals(testGradient("background-image: radial-gradient(white, black)"), 'radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(at bottom right, white, black)"), 'radial-gradient(at right bottom, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(farthest-corner, white, black)"), 'radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(farthest-corner, white, 35%, black)"), 'radial-gradient(rgb(255, 255, 255), 35%, rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(closest-side, white, black)"), 'radial-gradient(closest-side, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(ellipse, white, black)"), 'radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(ellipse farthest-corner, white, black)"), 'radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(ellipse closest-side, white, black)"), 'radial-gradient(closest-side, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(circle, white, black)"), 'radial-gradient(circle, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(circle farthest-corner, white, black)"), 'radial-gradient(circle, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(circle closest-side, white, black)"), 'radial-gradient(circle closest-side, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(circle closest-side at top, white, black)"), 'radial-gradient(circle closest-side at center top, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(circle closest-side at top left, white, black)"), 'radial-gradient(circle closest-side at left top, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(circle closest-side at 10px 20%, white, black)"), 'radial-gradient(circle closest-side at 10px 20%, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(at 10px 20% circle closest-side, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(circle at 10px 20% circle, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(circle 10px closest-side, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(circle 10%, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(circle 10px 10px, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(ellipse 10%, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(ellipse 10px, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(25%, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(white, 25%)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(white, black, 25%)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(25%, white, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(white,, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(ellipse 10px, white, 25%, 75%, black)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(ellipse 10px 20px, white, black)"), 'radial-gradient(10px 20px, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(circle 10px, white, black)"), 'radial-gradient(10px, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(10px 10px at center, white, black)"), 'radial-gradient(10px 10px, rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(10px 10px at center, white, 50%, black)"), 'radial-gradient(10px 10px, rgb(255, 255, 255), 50%, rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(10px 10px at center, white, 0%, black)"), 'radial-gradient(10px 10px, rgb(255, 255, 255), 0%, rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: radial-gradient(10px 10px at center, white, 100%, black)"), 'radial-gradient(10px 10px, rgb(255, 255, 255), 100%, rgb(0, 0, 0))');

  assert_equals(testGradient("background-image: radial-gradient(black, 10% 20%, white)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(black 10% 20% 30%, white)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px 300px)"), 'none');
  assert_equals(testGradient("background-image: radial-gradient(black 10% 20%, white)"), 'radial-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, rgb(255, 255, 255))');
  assert_equals(testGradient("background-image: radial-gradient(black, white 100px 200px)"), 'radial-gradient(rgb(0, 0, 0), rgb(255, 255, 255) 100px, rgb(255, 255, 255) 200px)');
  assert_equals(testGradient("background-image: radial-gradient(black 10% 20%, white 100px 200px)"), 'radial-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, rgb(255, 255, 255) 100px, rgb(255, 255, 255) 200px)');
  assert_equals(testGradient("background-image: radial-gradient(black 10% 20%, 50%, white 100px 200px)"), 'radial-gradient(rgb(0, 0, 0) 10%, rgb(0, 0, 0) 20%, 50%, rgb(255, 255, 255) 100px, rgb(255, 255, 255) 200px)');
}, 'radial-gradient');

test(() => {
  assert_equals(testGradient("background-image: repeating-radial-gradient(white, black)"), 'repeating-radial-gradient(rgb(255, 255, 255), rgb(0, 0, 0))');
  assert_equals(testGradient("background-image: repeating-radial-gradient(white, 81%, black)"), 'repeating-radial-gradient(rgb(255, 255, 255), 81%, rgb(0, 0, 0))');
}, 'repeating-radial-gradient');
</script>

</body>
</html>
chromium/third_party/blink/web_tests/fast/gradients/unprefixed-gradient-parsing.html
