popcodeorg / popcodeorg/popcode

validation on canvas element incorrectly flags 'width' attribute as an error

Offen
#671 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug
Vorherrschende Sprache
JavaScript
Sterne
191
Forks
143
Ø Merge
4 T. 11 Std.
Gemergte PRs (30 T.)
5

Beschreibung

I'm trying to use a <canvas> element (for a Tiny Turtle exercise) and set its width to something larger than the default of 300px. Naively I tried a css rule:

canvas {
  width: 100%;
  min-height: 400px;
}

But with <canvas>, a css-specified width actually scales the content. This makes the turtle head and line segments appear quite large and even pixellated and does not actually give any more room to draw.

MDN recommends instead that you set the width and height directly on the element. Trying this triggered a popcode validation error on width:

9
Don't use the "width" attribute. Instead, use the CSS width property

Impact: mostly a little annoying. You can't set the real width of the canvas, so there will be unused space at the right margin -- and quite noticeable with a bigger screen. Complicated turtle drawings may not fit well into 300x150 px (although for some reason the height attribute is allowed through validation, so the canvas can be made taller).

Also, the validator-recommended fix isn't a real fix, which is minor in and of itself but we'd like users to be able to rely on its recommendations.

Steps to reproduce:

  1. Open this popcode link: https://popcode.org/?gist=1791db30a9fa1cbcc39e0ec181388634
  2. In the html panel, set the <canvas> element's width attribute to, say, 400. Observe the validation error.
  3. Observe the somewhat-pixellated turtle stamp render (due to the css width being set w/o html width).
  4. Observe the rendered length of a forward(30) segment. Cut that forward down to 10 units to allow more drawing room. Observe that the stamp now overwhelms the line segment.

On a page without validation, eg jsbin, setting the width attr has the desired result of setting the canvas's coordinate system width (which can then optionally be scaled with css).

Tested on macos 10.11 with Safari 10.0.3 and Chrome 56.0.2924.87.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Reproduziere den Validierungsfehler mithilfe des verlinkten Popcode-Gists und konzentriere dich auf ein canvas-Element mit einem width-Attribut sowie auf die Validator-Meldung, die CSS width empfiehlt. Verfolge den Einstiegspunkt des Validators, der diese Meldung ausgibt, und vergleiche seine Behandlung von width mit height. Die Aufgabe ist abgeschlossen, wenn eine gültige canvas-Breite akzeptiert wird und die Empfehlung nicht mehr dem Verhalten der canvas-Größenfestlegung widerspricht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
html, javascript
Bereich
frontend, testing-qa, web-dev
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.