598618 - addColorStop("1.0","rgba( 0, 0, 0, 0"); is an error, its not caught

Status: RESOLVED INVALID

(Core :: Graphics: Canvas2D, defect)

Description

[Gary Johnson]

User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b6) Gecko/20100101 Firefox/4.0b6
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b6) Gecko/20100101 Firefox/4.0b6

This works,  gradient.addColorStop("1.0","rgba(  0,   0,  0,  0");
it should not
 gradient.addColorStop("1.0","rgba(  0,   0,  0,  0)");
function drawRG1()
{
  if(!myDoCanvas) return;
  //width="640" height="442"

  if(!ctx) return;

  // createRadialGradient(x0, y0, fRadius0, x1, y1, fRadius1)

  gradient = ctx.createRadialGradient(75,75,0,75,75,75);
  ctx.fillStyle = getColors1(gradient);
  ctx.fillRect(0,0,640,442);
}

function getColors1(gradient)
{
  gradient.addColorStop("0","purple");
  gradient.addColorStop(".50","black");
  gradient.addColorStop(".70","rgba(158,  81, 65, .41)");
  gradient.addColorStop(".85","rgba(240, 139, 76, .65)");
  gradient.addColorStop("1.0","rgba(  0,   0,  0,  0");
  return(gradient);
}



Reproducible: Always

Steps to Reproduce:
1. load the sample
2. see it work
3. check error console, no error
Actual Results:  
it works

Expected Results:  
it should show an error

Comment 1

[Gary Johnson]

Attachment: TestCase 598618

Comment 2

[Robert Longson [:longsonr]]

Why not? 
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvasgradient-addcolorstop
doesn't seem indicate that this is an error.

Comment 3

[Gary Johnson]

See 
The addColorStop(offset, color)  method on the CanvasGradient interface adds a new stop to a gradient. If the offset is less than 0, greater than 1, infinite, or NaN, then an INDEX_SIZE_ERR exception must be raised. If the color cannot be parsed as a CSS color, then a SYNTAX_ERR exception must be raised.

This code
    var mycanvas = (document.getElementById("c1"); // needs )); at the end

throws
Error: missing ) in parenthetical

See
If the value is a string but is not a valid color, or is neither a string, a CanvasGradient, nor a CanvasPattern, then it must be ignored, and the attribute must retain its previous value.

?

Comment 4

[Boris Zbarsky [:bzbarsky]]

Yep.  Missing closing parentheses do not cause things to not be parsed as CSS; they're inferred by EOF.  Simple testcase:

  data:text/html,<span style="color: rgb(0, 255, 0">Lime</span>

Invalid as far as I can see, but I'll raise the issue in whatwg.

Comment 5

[Boris Zbarsky [:bzbarsky]]

http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-September/028702.html if anyone is interested.

Comment 6

[Gary Johnson]

if this is not going to throw an error

gradient.addColorStop("1.0","rgba(0,0,0,0");

and this does

  ctx.fillStyle=""rgba(84,125,83,1)"; 

Error: missing ; before statement
Source Code:

and web developers see it in a javascript block, but in the first case its really a CSS token with an implied EOL, so that explains it.  In the second case, I am guessing its malformed Javascript, so that explains why it gets an error, I vote that if this kind of coding is in a javascript block, that the rules of well formed javascript take precedence

Comment 7

[Boris Zbarsky [:bzbarsky]]

> In the second case, I am guessing its malformed Javascript

Correct.  In fact it doesn't even parse as JavaScript, so never _runs_.

> the rules of well formed javascript take precedence

More precisely, since it never even runs what's going on with CSS, DOM, etc simply doesn't matter.