<!DOCTYPE html>
<body>
<script src='../../resources/js-test.js'></script>
<script>
description("Test that a gradient can outlive a context. Test passes if it doesn't crash.");
jsTestIsAsync = true;
var gradient;
window.onload = function() {
    let context = document.createElement('canvas').getContext('2d');
    gradient = context.createLinearGradient(0, 0, 100, 100);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(0.25, 'white');
    gradient.addColorStop(0.67, 'white');
    gradient.addColorStop(1, 'aquamarine');
    context.scale(2,2);
    context.beginPath();
    context.rect(0,0,75,75);
    context.clip();
    context.fillStyle = gradient;
    context.fillRect(0,0,30,30);
    context.fillRect(50,50,30,30);
    context.save();
    context.scale(0.5,0.5);
    context.beginPath();
    context.rect(0,0,5,5);
    context.clip();
    requestAnimationFrame(() => forceGCThenModifyGradient());
};

function forceGCThenModifyGradient() {
  count = 0;
  handle = setInterval(() => {
      gc();
      count++;
      if (count > 500) {
        clearInterval(handle);
        modifyGradient();
      }
  }, 10);
}

// Create a new context but use the old gradient.
function modifyGradient() {
    let context = document.createElement('canvas').getContext('2d');
    gradient.addColorStop(0.75, 'aquamarine');
    gradient.addColorStop(0.8, 'white');
    gradient.addColorStop(0.9, 'orange');
    if (window.testRunner)
        finishJSTest("PASS");
}
</script>
</body>
