Consider adding a warning when multiple elements in the DOM have the same id

UNCONFIRMED
Unassigned

Status

()

Core
DOM
UNCONFIRMED
7 years ago
7 years ago

People

(Reporter: John Wilander, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10_5_8) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

1. HTML with three <canvas id="canvasId">, i.e. having the same id => no error in console
2. (Using jQuery) canvas = $("#canvasId")[0]; context = canvas.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); => three red rectangles drawn in first canvas.

HTML spec says element ids have to be unique. Expected an error. Perhaps <canvas> is an exception but that would be odd.

I tested this in Chrome 11 too and no warning or error there either. Also, my IDE WebStorm doesn't warn. Maybe I'm totally mistaken about this. In such case – sorry guys! :)

Reproducible: Always

Steps to Reproduce:
1. HTML with three <canvas id="canvasId">, i.e. having the same id => no error in console
2. (Using jQuery) canvas = $("#canvasId")[0]; context = canvas.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); => three red rectangles drawn in first canvas.
3.

Actual Results:  
No warnings or errors in Firebug console or elsewhere. With three canvas elements having same id a subsequent draw will end up three times in the first canvas.

Expected Results:  
An error or warning since HTML element ids have to be unique.
> no error in console

The console doesn't report any HTML validation errors.  Which is a good thing, since otherwise there would be hundreds of reports on every single page on the web, pretty much...

> HTML spec says element ids have to be unique. 

That's an authoring requirement, not a UA requirement.  UAs are required to handle multiple elements with the same ID in specific ways (e.g. getElementById must return the first one in tree order, querySelectorAll("#foo") will return all the elements with id="foo", etc).

The jQuery behavior sounds like a jQuery-specific issue in particular; it's apparently doing something really bizarre with the way it handles operations on its wrappers around DOM objects.  You may want to report that to the jQuery folks.

We could consider adding a warning for duplicate IDs, but it's so common on the web (in some cases temporarily, as the new element is added before the old one is removed, but _we_ have no way to tell the future!) that I'm not sure it's worth it; it would just add overwhelming noise to the console...
Component: Canvas: 2D → DOM
QA Contact: canvas.2d → general
Summary: Multiple canvas elements with same id allowed, drawing affected → Consider adding a warning when multiple elements in the DOM have the same id
Maybe this could be part of DevTools?
OS: Mac OS X → All
Hardware: x86 → All
Version: unspecified → Trunk
You need to log in before you can comment on or make changes to this bug.