popcodeorg / popcodeorg/popcode
validation on canvas element incorrectly flags 'width' attribute as an error
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 191
- 派生
- 143
- 平均合并
- 4 天 11 小时
- 30 天内合并 PR
- 5
描述
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:
- Open this popcode link: https://popcode.org/?gist=1791db30a9fa1cbcc39e0ec181388634
- In the html panel, set the
<canvas>element's width attribute to, say, 400. Observe the validation error. - Observe the somewhat-pixellated turtle stamp render (due to the css width being set w/o html width).
- Observe the rendered length of a
forward(30)segment. Cut thatforwarddown 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.
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
使用链接的 Popcode gist 重现验证错误,重点关注带有 width 属性的 canvas 元素,以及建议使用 CSS width 的 validator 消息。跟踪发出此消息的 validator 入口点,并比较其对 width 和 height 的处理。完成标准是有效的 canvas width 能够被接受,并且该建议不再与 canvas 的尺寸设置行为相矛盾。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- html, javascript
- 领域
- frontend, testing-qa, web-dev
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100