Implement maxWidth for fillText and strokeText, fixing the...

Implement maxWidth for fillText and strokeText, fixing the canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface.html test.
https://bugs.webkit.org/show_bug.cgi?id=61528

Patch by Philip Rogers <pdr@google.com> on 2011-11-15
Reviewed by Stephen White.

Source/WebCore:

Tests: fast/canvas/2d.text.draw.fill.maxWidth.gradient.html
       fast/canvas/2d.text.draw.fill.maxWidth.negative.html
       fast/canvas/2d.text.draw.fill.maxWidth.veryLarge.html
       fast/canvas/2d.text.draw.fill.maxWidth.verySmall.html

* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::drawTextInternal):

LayoutTests:

* fast/canvas/2d.text.draw.fill.maxWidth.gradient-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.gradient.html: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.negative-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.negative.html: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.veryLarge-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.veryLarge.html: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.verySmall-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.verySmall.html: Added.
* platform/chromium/canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface-expected.txt: Removed.
* platform/chromium/test_expectations.txt:
* platform/gtk/Skipped:
* platform/mac-leopard/Skipped:
* platform/mac/canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface-expected.txt:
* platform/qt/Skipped:
* resources/Ahem.ttf: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@100285 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 97dc098c
2011-11-15 Philip Rogers <pdr@google.com>
Implement maxWidth for fillText and strokeText, fixing the canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface.html test.
https://bugs.webkit.org/show_bug.cgi?id=61528
Reviewed by Stephen White.
* fast/canvas/2d.text.draw.fill.maxWidth.gradient-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.gradient.html: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.negative-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.negative.html: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.veryLarge-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.veryLarge.html: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.verySmall-expected.txt: Added.
* fast/canvas/2d.text.draw.fill.maxWidth.verySmall.html: Added.
* platform/chromium/canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface-expected.txt: Removed.
* platform/chromium/test_expectations.txt:
* platform/gtk/Skipped:
* platform/mac-leopard/Skipped:
* platform/mac/canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface-expected.txt:
* platform/qt/Skipped:
* resources/Ahem.ttf: Added.
2011-11-15 Cary Clark <caryclark@google.com>
[chromium-mac] Enable vertical text using Skia
On success, there should only be a green rectangle.
TEST PASSED
<!DOCTYPE html>
<head>
<style>
@font-face {
font-family: Ahem;
src: url('../../resources/Ahem.ttf');
}
</style>
</head>
<body>
<p>On success, there should only be a green rectangle.</p>
<canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<div id="console"></div>
<script>
function drawCanvas(ctx) {
ctx.fillStyle = '#f00';
ctx.fillRect(0,0,100,100);
var gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, '#0f0');
gradient.addColorStop(1, '#0f0');
ctx.fillStyle = gradient;
ctx.fillText("X", 0, 80, 200);
ctx.fillStyle = '#f00';
ctx.fillText("X", 0, 80, -10);
}
function doDeferredTest() {
drawCanvas(ctx);
// Check that the letter rendered appropriately
var renderedCorrectly = true;
// Check that there is only a green rectangle
var imageData = ctx.getImageData(50,50,1,1);
if (imageData.data[0] != 0) renderedCorrectly = false;
if (imageData.data[1] != 255) renderedCorrectly = false;
if (imageData.data[2] != 0) renderedCorrectly = false;
if (imageData.data[3] != 255) renderedCorrectly = false;
if (renderedCorrectly)
document.getElementById("console").innerHTML = "TEST PASSED";
else
document.getElementById("console").innerHTML = "TEST FAILED";
if (window.layoutTestController)
layoutTestController.notifyDone();
}
if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
ctx.font = "100px Ahem";
// Kick off loading of the font
ctx.fillText(" ", 0, 0);
// Wait for the font to load, then run
setTimeout(function() {
doDeferredTest();
}, 50);
</script>
</body>
</html>
On success, there should only be a green rectangle.
TEST PASSED
<!DOCTYPE html>
<head>
<style>
@font-face {
font-family: Ahem;
src: url('../../resources/Ahem.ttf');
}
</style>
</head>
<body>
<p>On success, there should only be a green rectangle.</p>
<canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<div id="console"></div>
<script>
function drawCanvas(ctx) {
ctx.fillStyle = '#0f0';
ctx.fillRect(0,0,100,100);
ctx.fillStyle = '#f00';
ctx.fillText("X", 0, 100, -5);
}
function doDeferredTest() {
drawCanvas(ctx);
// Check that the letter rendered appropriately
var renderedCorrectly = true;
// Check that there is only a green rectangle
var imageData = ctx.getImageData(50,50,1,1);
if (imageData.data[0] != 0) renderedCorrectly = false;
if (imageData.data[1] != 255) renderedCorrectly = false;
if (imageData.data[2] != 0) renderedCorrectly = false;
if (imageData.data[3] != 255) renderedCorrectly = false;
if (renderedCorrectly)
document.getElementById("console").innerHTML = "TEST PASSED";
else
document.getElementById("console").innerHTML = "TEST FAILED";
if (window.layoutTestController)
layoutTestController.notifyDone();
}
if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
ctx.font = "200px Ahem";
// Kick off loading of the font
ctx.fillText(" ", 0, 0);
// Wait for the font to load, then run
setTimeout(function() {
doDeferredTest();
}, 50);
</script>
</body>
</html>
On success, there should only be a green rectangle.
TEST PASSED
<!DOCTYPE html>
<head>
<style>
@font-face {
font-family: Ahem;
src: url('../../resources/Ahem.ttf');
}
</style>
</head>
<body>
<p>On success, there should only be a green rectangle.</p>
<canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<div id="console"></div>
<script>
function drawCanvas(ctx) {
ctx.fillStyle = '#0f0';
ctx.fillRect(0,0,100,100);
ctx.fillStyle = '#f00';
ctx.fillText("X", -100, 100, 200);
}
function doDeferredTest() {
drawCanvas(ctx);
// Check that the letter rendered appropriately
var renderedCorrectly = true;
// Check that there is only a green rectangle
var imageData = ctx.getImageData(50,50,1,1);
if (imageData.data[0] != 0) renderedCorrectly = false;
if (imageData.data[1] != 255) renderedCorrectly = false;
if (imageData.data[2] != 0) renderedCorrectly = false;
if (imageData.data[3] != 255) renderedCorrectly = false;
if (renderedCorrectly)
document.getElementById("console").innerHTML = "TEST PASSED";
else
document.getElementById("console").innerHTML = "TEST FAILED";
if (window.layoutTestController)
layoutTestController.notifyDone();
}
if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
ctx.font = "100px Ahem";
// Kick off loading of the font
ctx.fillText(" ", 0, 0);
// Wait for the font to load, then run
setTimeout(function() {
doDeferredTest();
}, 50);
</script>
</body>
</html>
On success, there should only be a green rectangle.
TEST PASSED
<!DOCTYPE html>
<head>
<style>
@font-face {
font-family: Ahem;
src: url('../../resources/Ahem.ttf');
}
</style>
</head>
<body>
<p>On success, there should only be a green rectangle.</p>
<canvas id="c" class="output" width="100" height="100"><p class="fallback">FAIL (fallback content)</p></canvas>
<div id="console"></div>
<script>
function drawCanvas(ctx) {
ctx.fillStyle = '#0f0';
ctx.fillRect(0,0,100,100);
ctx.fillStyle = '#f00';
ctx.fillText("XX", -10, 100, 10);
}
function doDeferredTest() {
drawCanvas(ctx);
// Check that the letter rendered appropriately
var renderedCorrectly = true;
// Check that there is only a green rectangle
var imageData = ctx.getImageData(50,50,1,1);
if (imageData.data[0] != 0) renderedCorrectly = false;
if (imageData.data[1] != 255) renderedCorrectly = false;
if (imageData.data[2] != 0) renderedCorrectly = false;
if (imageData.data[3] != 255) renderedCorrectly = false;
if (renderedCorrectly)
document.getElementById("console").innerHTML = "TEST PASSED";
else
document.getElementById("console").innerHTML = "TEST FAILED";
if (window.layoutTestController)
layoutTestController.notifyDone();
}
if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}
var canvas = document.getElementById('c');
var ctx = canvas.getContext("2d");
ctx.font = "100px Ahem";
// Kick off loading of the font
ctx.fillText(" ", 0, 0);
// Wait for the font to load, then run
setTimeout(function() {
doDeferredTest();
}, 50);
</script>
</body>
</html>
......@@ -2012,7 +2012,6 @@ BUGWK45991 : canvas/philip/tests/2d.text.draw.baseline.bottom.html = TEXT
BUGWK45991 : canvas/philip/tests/2d.text.draw.baseline.hanging.html = TEXT
BUGWK45991 : canvas/philip/tests/2d.text.draw.baseline.middle.html = TEXT
BUGWK38463 : canvas/philip/tests/2d.text.draw.baseline.top.html = TEXT
BUGWK20867 : canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface.html = TEXT
BUGWK45991 : canvas/philip/tests/2d.text.draw.space.collapse.end.html = TEXT
BUGWK45991 : canvas/philip/tests/2d.text.draw.space.collapse.nonspace.html = TEXT
BUGWK45991 : canvas/philip/tests/2d.text.draw.space.collapse.other.html = TEXT
......
......@@ -1036,7 +1036,6 @@ canvas/philip/tests/2d.text.draw.baseline.hanging.html
canvas/philip/tests/2d.text.draw.baseline.ideographic.html
canvas/philip/tests/2d.text.draw.baseline.middle.html
canvas/philip/tests/2d.text.draw.baseline.top.html
canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface.html
canvas/philip/tests/2d.text.draw.space.collapse.end.html
canvas/philip/tests/2d.text.draw.space.collapse.nonspace.html
canvas/philip/tests/2d.text.draw.space.collapse.other.html
......
......@@ -166,7 +166,6 @@ canvas/philip/tests/2d.text.draw.baseline.hanging.html
canvas/philip/tests/2d.text.draw.baseline.ideographic.html
canvas/philip/tests/2d.text.draw.baseline.middle.html
canvas/philip/tests/2d.text.draw.baseline.top.html
canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface.html
canvas/philip/tests/2d.text.draw.space.collapse.end.html
canvas/philip/tests/2d.text.draw.space.collapse.nonspace.html
canvas/philip/tests/2d.text.draw.space.collapse.other.html
......
Failed assertion: got pixel [255,0,0,255] at (5,5), expected [0,255,0,255] +/- 2
Failed assertion: got pixel [255,0,0,255] at (95,5), expected [0,255,0,255] +/- 2
Failed assertion: got pixel [255,0,0,255] at (25,25), expected [0,255,0,255] +/- 2
Failed assertion: got pixel [255,0,0,255] at (75,25), expected [0,255,0,255] +/- 2
Passed
......@@ -1552,7 +1552,6 @@ canvas/philip/tests/2d.text.draw.baseline.hanging.html
canvas/philip/tests/2d.text.draw.baseline.ideographic.html
canvas/philip/tests/2d.text.draw.baseline.middle.html
canvas/philip/tests/2d.text.draw.baseline.top.html
canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface.html
canvas/philip/tests/2d.text.draw.fontface.notinpage.html
canvas/philip/tests/2d.text.draw.space.collapse.end.html
canvas/philip/tests/2d.text.draw.space.collapse.nonspace.html
......
2011-11-15 Philip Rogers <pdr@google.com>
Implement maxWidth for fillText and strokeText, fixing the canvas/philip/tests/2d.text.draw.fill.maxWidth.fontface.html test.
https://bugs.webkit.org/show_bug.cgi?id=61528
Reviewed by Stephen White.
Tests: fast/canvas/2d.text.draw.fill.maxWidth.gradient.html
fast/canvas/2d.text.draw.fill.maxWidth.negative.html
fast/canvas/2d.text.draw.fill.maxWidth.veryLarge.html
fast/canvas/2d.text.draw.fill.maxWidth.verySmall.html
* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::drawTextInternal):
2011-11-15 Carlos Garcia Campos <cgarcia@igalia.com>
[GTK] Implement download support in WebKit2
......
......@@ -2074,7 +2074,7 @@ PassRefPtr<TextMetrics> CanvasRenderingContext2D::measureText(const String& text
return metrics.release();
}
void CanvasRenderingContext2D::drawTextInternal(const String& text, float x, float y, bool fill, float /*maxWidth*/, bool /*useMaxWidth*/)
void CanvasRenderingContext2D::drawTextInternal(const String& text, float x, float y, bool fill, float maxWidth, bool useMaxWidth)
{
GraphicsContext* c = drawingContext();
if (!c)
......@@ -2083,13 +2083,14 @@ void CanvasRenderingContext2D::drawTextInternal(const String& text, float x, flo
return;
if (!isfinite(x) | !isfinite(y))
return;
if (useMaxWidth && !isfinite(maxWidth))
return;
FontCachePurgePreventer fontCachePurgePreventer;
const Font& font = accessFont();
const FontMetrics& fontMetrics = font.fontMetrics();
// FIXME: Handle maxWidth.
// FIXME: Need to turn off font smoothing.
RenderStyle* computedStyle = canvas()->computedStyle();
......@@ -2121,7 +2122,10 @@ void CanvasRenderingContext2D::drawTextInternal(const String& text, float x, flo
break;
}
float width = font.width(TextRun(text, false, 0, 0, TextRun::AllowTrailingExpansion, direction, override));
float fontWidth = font.width(TextRun(text, false, 0, 0, TextRun::AllowTrailingExpansion, direction, override));
useMaxWidth = (useMaxWidth && maxWidth < fontWidth);
float width = useMaxWidth ? maxWidth : fontWidth;
TextAlign align = state().m_textAlign;
if (align == StartTextAlign)
......@@ -2168,9 +2172,16 @@ void CanvasRenderingContext2D::drawTextInternal(const String& text, float x, flo
}
maskImageContext->setTextDrawingMode(fill ? TextModeFill : TextModeStroke);
maskImageContext->translate(-maskRect.x(), -maskRect.y());
maskImageContext->drawBidiText(font, textRun, location);
if (useMaxWidth) {
maskImageContext->translate(location.x() - maskRect.x(), location.y() - maskRect.y());
// We draw when fontWidth is 0 so compositing operations (eg, a "copy" op) still work.
maskImageContext->scale(FloatSize((fontWidth > 0 ? (width / fontWidth) : 0), 1));
maskImageContext->drawBidiText(font, textRun, FloatPoint(0, 0));
} else {
maskImageContext->translate(-maskRect.x(), -maskRect.y());
maskImageContext->drawBidiText(font, textRun, location);
}
GraphicsContextStateSaver stateSaver(*c);
c->clipToImageBuffer(maskImage.get(), maskRect);
......@@ -2188,7 +2199,15 @@ void CanvasRenderingContext2D::drawTextInternal(const String& text, float x, flo
Font::setCodePath(Font::Complex);
#endif
c->drawBidiText(font, textRun, location);
if (useMaxWidth) {
GraphicsContextStateSaver stateSaver(*c);
c->translate(location.x(), location.y());
// We draw when fontWidth is 0 so compositing operations (eg, a "copy" op) still work.
c->scale(FloatSize((fontWidth > 0 ? (width / fontWidth) : 0), 1));
c->drawBidiText(font, textRun, FloatPoint(0, 0));
stateSaver.restore();
} else
c->drawBidiText(font, textRun, location);
if (fill)
didDraw(textRect);
......
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