HTML canvas strokes with dash and dashOffset

https://bugs.webkit.org/show_bug.cgi?id=63933

Patch by Young Han Lee <joybro201@gmail.com> on 2011-10-04
Reviewed by Simon Fraser.

Add webkitLineDash and webkitLineDashOffset attributes to CanvasRenderingContext2D for JSC.
These attributes can be used to determine the dash-style of stroke in HTML Canvas.

As this kind of attributes are not specified in the HTML Canvas specification yet,
the 'webkit' prefix is added to its names.

Mozilla already implemented these attributes, mozDash and mozDashOffset [1], and this patch
is created by referring to the implementation. This patch is basically using the specified
behavior of stroke-dasharray and stroke-dashoffset in the SVG specification [2], except
that doesn't support units or percentages, just floating point numbers.

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=662038
[2] http://www.w3.org/TR/SVG/painting.html#StrokeProperties

Source/WebCore:

Tests: fast/canvas/canvas-webkitLineDash-invalid.html
       fast/canvas/canvas-webkitLineDash.html

* bindings/js/JSCanvasRenderingContext2DCustom.cpp:
(WebCore::JSCanvasRenderingContext2D::webkitLineDash):
(WebCore::JSCanvasRenderingContext2D::setWebkitLineDash):
* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::State::State):
(WebCore::CanvasRenderingContext2D::webkitLineDash):
(WebCore::CanvasRenderingContext2D::setWebkitLineDash):
(WebCore::CanvasRenderingContext2D::webkitLineDashOffset):
(WebCore::CanvasRenderingContext2D::setWebkitLineDashOffset):
* html/canvas/CanvasRenderingContext2D.h:
* html/canvas/CanvasRenderingContext2D.idl:

LayoutTests:

* fast/canvas/canvas-webkitLineDash-expected.txt: Added.
* fast/canvas/canvas-webkitLineDash-invalid-expected.txt: Added.
* fast/canvas/canvas-webkitLineDash-invalid.html: Added.
* fast/canvas/canvas-webkitLineDash.html: Added.
* fast/canvas/script-tests/canvas-webkitLineDash-invalid.js: Added.
(trySettingLineDash):
(trySettingLineDashOffset):
* fast/canvas/script-tests/canvas-webkitLineDash.js: Added.
* platform/chromium/test_expectations.txt:

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@96626 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 1846639a
2011-10-04 Young Han Lee <joybro201@gmail.com>
HTML canvas strokes with dash and dashOffset
https://bugs.webkit.org/show_bug.cgi?id=63933
Reviewed by Simon Fraser.
Add webkitLineDash and webkitLineDashOffset attributes to CanvasRenderingContext2D for JSC.
These attributes can be used to determine the dash-style of stroke in HTML Canvas.
As this kind of attributes are not specified in the HTML Canvas specification yet,
the 'webkit' prefix is added to its names.
Mozilla already implemented these attributes, mozDash and mozDashOffset [1], and this patch
is created by referring to the implementation. This patch is basically using the specified
behavior of stroke-dasharray and stroke-dashoffset in the SVG specification [2], except
that doesn't support units or percentages, just floating point numbers.
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=662038
[2] http://www.w3.org/TR/SVG/painting.html#StrokeProperties
* fast/canvas/canvas-webkitLineDash-expected.txt: Added.
* fast/canvas/canvas-webkitLineDash-invalid-expected.txt: Added.
* fast/canvas/canvas-webkitLineDash-invalid.html: Added.
* fast/canvas/canvas-webkitLineDash.html: Added.
* fast/canvas/script-tests/canvas-webkitLineDash-invalid.js: Added.
(trySettingLineDash):
(trySettingLineDashOffset):
* fast/canvas/script-tests/canvas-webkitLineDash.js: Added.
* platform/chromium/test_expectations.txt:
2011-10-04 Tim Horton <timothy_horton@apple.com>
Additional unreviewed Lion SVG pixel test rebaselining.
Basic test for webkitLineDash and webkitLineDashOffset
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS ctx.webkitLineDashOffset is 0
PASS lineDash[0] is 15
PASS lineDash[1] is 10
PASS ctx.webkitLineDashOffset is 5
PASS successfullyParsed is true
TEST COMPLETE
Test for invalid input of webkitLineDash and webkitLineDashOffset
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS trySettingLineDash([1, 2, 3]) is [1, 2, 3]
PASS trySettingLineDash([1, -1]) is [1.5, 2.5]
PASS trySettingLineDash([1, Infinity]) is [1.5, 2.5]
PASS trySettingLineDash([1, -Infinity]) is [1.5, 2.5]
PASS trySettingLineDash([1, NaN]) is [1.5, 2.5]
PASS trySettingLineDash([1, 'string']) is [1.5, 2.5]
PASS trySettingLineDashOffset(0.5) is 0.5
PASS trySettingLineDashOffset(-0.5) is -0.5
PASS trySettingLineDashOffset(Infinity) is 1.5
PASS trySettingLineDashOffset(-Infinity) is 1.5
PASS trySettingLineDashOffset(NaN) is 1.5
PASS trySettingLineDashOffset('string') is 1.5
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../js/resources/js-test-style.css">
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/canvas-webkitLineDash-invalid.js"></script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<link rel="stylesheet" href="../js/resources/js-test-style.css">
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script src="script-tests/canvas-webkitLineDash.js"></script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>
description("Test for invalid input of webkitLineDash and webkitLineDashOffset");
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.setAttribute('width', '700');
canvas.setAttribute('height', '700');
var ctx = canvas.getContext('2d');
function trySettingLineDash(value) {
ctx.webkitLineDash = [1.5, 2.5];
ctx.webkitLineDash = value;
return ctx.webkitLineDash;
}
function trySettingLineDashOffset(value) {
ctx.webkitLineDashOffset = 1.5;
ctx.webkitLineDashOffset = value;
return ctx.webkitLineDashOffset;
}
shouldBe("trySettingLineDash([1, 2, 3])", "[1, 2, 3]");
shouldBe("trySettingLineDash([1, -1])", "[1.5, 2.5]");
shouldBe("trySettingLineDash([1, Infinity])", "[1.5, 2.5]");
shouldBe("trySettingLineDash([1, -Infinity])", "[1.5, 2.5]");
shouldBe("trySettingLineDash([1, NaN])", "[1.5, 2.5]");
shouldBe("trySettingLineDash([1, 'string'])", "[1.5, 2.5]");
shouldBe("trySettingLineDashOffset(0.5)", "0.5");
shouldBe("trySettingLineDashOffset(-0.5)", "-0.5");
shouldBe("trySettingLineDashOffset(Infinity)", "1.5");
shouldBe("trySettingLineDashOffset(-Infinity)", "1.5");
shouldBe("trySettingLineDashOffset(NaN)", "1.5");
shouldBe("trySettingLineDashOffset('string')", "1.5");
var successfullyParsed = true;
description("Basic test for webkitLineDash and webkitLineDashOffset");
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.setAttribute('width', '700');
canvas.setAttribute('height', '700');
var ctx = canvas.getContext('2d');
// Verify default values.
shouldBe('ctx.webkitLineDashOffset', '0');
// Set dash-style.
ctx.webkitLineDash = [15, 10];
ctx.webkitLineDashOffset = 5;
ctx.strokeRect (10,10,100,100);
// Verify dash and offset.
var lineDash;
lineDash = ctx.webkitLineDash;
shouldBe('lineDash[0]', '15');
shouldBe('lineDash[1]', '10');
shouldBe('ctx.webkitLineDashOffset', '5');
var successfullyParsed = true;
......@@ -97,6 +97,10 @@ BUGCR10395 SKIP : http/tests/webarchive = PASS FAIL
// fails for other platforms...
BUGCR20404 : editing/execCommand/copy-without-selection.html = TEXT
// This will soon be fixed after implementing webkitLineDash for V8.
BUGWK63933 : fast/canvas/canvas-webkitLineDash.html = FAIL
BUGWK63933 : fast/canvas/canvas-webkitLineDash-invalid.html = FAIL
// -----------------------------------------------------------------
// WONTFIX TESTS
// -----------------------------------------------------------------
......
2011-10-04 Young Han Lee <joybro201@gmail.com>
HTML canvas strokes with dash and dashOffset
https://bugs.webkit.org/show_bug.cgi?id=63933
Reviewed by Simon Fraser.
Add webkitLineDash and webkitLineDashOffset attributes to CanvasRenderingContext2D for JSC.
These attributes can be used to determine the dash-style of stroke in HTML Canvas.
As this kind of attributes are not specified in the HTML Canvas specification yet,
the 'webkit' prefix is added to its names.
Mozilla already implemented these attributes, mozDash and mozDashOffset [1], and this patch
is created by referring to the implementation. This patch is basically using the specified
behavior of stroke-dasharray and stroke-dashoffset in the SVG specification [2], except
that doesn't support units or percentages, just floating point numbers.
[1] https://bugzilla.mozilla.org/show_bug.cgi?id=662038
[2] http://www.w3.org/TR/SVG/painting.html#StrokeProperties
Tests: fast/canvas/canvas-webkitLineDash-invalid.html
fast/canvas/canvas-webkitLineDash.html
* bindings/js/JSCanvasRenderingContext2DCustom.cpp:
(WebCore::JSCanvasRenderingContext2D::webkitLineDash):
(WebCore::JSCanvasRenderingContext2D::setWebkitLineDash):
* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::State::State):
(WebCore::CanvasRenderingContext2D::webkitLineDash):
(WebCore::CanvasRenderingContext2D::setWebkitLineDash):
(WebCore::CanvasRenderingContext2D::webkitLineDashOffset):
(WebCore::CanvasRenderingContext2D::setWebkitLineDashOffset):
* html/canvas/CanvasRenderingContext2D.h:
* html/canvas/CanvasRenderingContext2D.idl:
2011-10-04 Matthew Delaney <mdelaney@apple.com>
Allow canvas backing store to be lazily allocated
......@@ -158,4 +158,35 @@ JSValue JSCanvasRenderingContext2D::putImageData(ExecState* exec)
return jsUndefined();
}
JSValue JSCanvasRenderingContext2D::webkitLineDash(ExecState* exec) const
{
CanvasRenderingContext2D* context = static_cast<CanvasRenderingContext2D*>(impl());
const DashArray* dash = context->webkitLineDash();
MarkedArgumentBuffer list;
DashArray::const_iterator end = dash->end();
for (DashArray::const_iterator it = dash->begin(); it != end; ++it)
list.append(JSValue(*it));
return constructArray(exec, globalObject(), list);
}
void JSCanvasRenderingContext2D::setWebkitLineDash(ExecState* exec, JSValue value)
{
if (!isJSArray(&exec->globalData(), value))
return;
DashArray dash;
JSArray* valueArray = asArray(value);
for (unsigned i = 0; i < valueArray->length(); ++i) {
float elem = valueArray->getIndex(i).toFloat(exec);
if (elem <= 0 || !isfinite(elem))
return;
dash.append(elem);
}
CanvasRenderingContext2D* context = static_cast<CanvasRenderingContext2D*>(impl());
context->setWebkitLineDash(dash);
}
} // namespace WebCore
......@@ -192,6 +192,7 @@ CanvasRenderingContext2D::State::State()
, m_globalAlpha(1)
, m_globalComposite(CompositeSourceOver)
, m_invertibleCTM(true)
, m_lineDashOffset(0)
, m_textAlign(StartTextAlign)
, m_textBaseline(AlphabeticTextBaseline)
, m_unparsedFont(defaultFont)
......@@ -496,6 +497,39 @@ void CanvasRenderingContext2D::setShadowColor(const String& color)
applyShadow();
}
const DashArray* CanvasRenderingContext2D::webkitLineDash() const
{
return &state().m_lineDash;
}
void CanvasRenderingContext2D::setWebkitLineDash(const DashArray& dash)
{
state().m_lineDash = dash;
GraphicsContext* c = drawingContext();
if (!c)
return;
c->setLineDash(state().m_lineDash, state().m_lineDashOffset);
}
float CanvasRenderingContext2D::webkitLineDashOffset() const
{
return state().m_lineDashOffset;
}
void CanvasRenderingContext2D::setWebkitLineDashOffset(float offset)
{
if (!isfinite(offset))
return;
state().m_lineDashOffset = offset;
GraphicsContext* c = drawingContext();
if (!c)
return;
c->setLineDash(state().m_lineDash, state().m_lineDashOffset);
}
float CanvasRenderingContext2D::globalAlpha() const
{
return state().m_globalAlpha;
......
......@@ -29,6 +29,7 @@
#include "AffineTransform.h"
#include "CanvasRenderingContext.h"
#include "Color.h"
#include "DashArray.h"
#include "FloatSize.h"
#include "Font.h"
#include "GraphicsTypes.h"
......@@ -85,6 +86,12 @@ public:
float miterLimit() const;
void setMiterLimit(float);
const DashArray* webkitLineDash() const;
void setWebkitLineDash(const DashArray&);
float webkitLineDashOffset() const;
void setWebkitLineDashOffset(float);
float shadowOffsetX() const;
void setShadowOffsetX(float);
......@@ -242,6 +249,8 @@ private:
CompositeOperator m_globalComposite;
AffineTransform m_transform;
bool m_invertibleCTM;
DashArray m_lineDash;
float m_lineDashOffset;
// Text state.
TextAlign m_textAlign;
......
......@@ -60,6 +60,12 @@ module html {
attribute float shadowBlur;
attribute [ConvertNullToNullString] DOMString shadowColor;
// FIXME: These attributes should also be implemented for V8.
#if !(defined(V8_BINDING) && V8_BINDING)
attribute [Custom] Array webkitLineDash;
attribute float webkitLineDashOffset;
#endif
void clearRect(in float x, in float y, in float width, in float height);
void fillRect(in float x, in float y, in float width, in float height);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment