Diff
Modified: trunk/LayoutTests/ChangeLog (238838 => 238839)
--- trunk/LayoutTests/ChangeLog 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/LayoutTests/ChangeLog 2018-12-04 04:03:13 UTC (rev 238839)
@@ -1,3 +1,16 @@
+2018-12-03 Justin Michaud <[email protected]>
+
+ CSS Painting API should scale display list when drawing
+ https://bugs.webkit.org/show_bug.cgi?id=192217
+
+ Reviewed by Simon Fraser.
+
+ * fast/css-custom-paint/properties-expected.html:
+ * fast/css-custom-paint/registerPaintBindings-expected.html:
+ * fast/css-custom-paint/simple-hidpi-expected.html: Added.
+ * fast/css-custom-paint/simple-hidpi.html: Added.
+ * fast/css-custom-paint/worklet-expected.html:
+
2018-12-03 Myles C. Maxfield <[email protected]>
Thick overlines and line-throughs grow in the wrong direction
Modified: trunk/LayoutTests/fast/css-custom-paint/properties-expected.html (238838 => 238839)
--- trunk/LayoutTests/fast/css-custom-paint/properties-expected.html 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/LayoutTests/fast/css-custom-paint/properties-expected.html 2018-12-04 04:03:13 UTC (rev 238839)
@@ -6,14 +6,18 @@
}
</style>
-<canvas id="paint" width="150px" height="150px" ></canvas>
-<canvas id="paint2" width="150px" height="150px" ></canvas>
+<canvas id="paint" style="width: 150px; height: 150px;" ></canvas>
+<canvas id="paint2" style="width: 150px; height: 150px;" ></canvas>
<script id="code">
for (canvasID of ['paint', 'paint2']) {
- var canvas = document.getElementById(canvasID);
- var ctx = canvas.getContext('2d');
+ const canvas = document.getElementById(canvasID);
+ canvas.width = 150 * window.devicePixelRatio;
+ canvas.height = 150 * window.devicePixelRatio;
+ const ctx = canvas.getContext('2d');
+ ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Modified: trunk/LayoutTests/fast/css-custom-paint/registerPaintBindings-expected.html (238838 => 238839)
--- trunk/LayoutTests/fast/css-custom-paint/registerPaintBindings-expected.html 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/LayoutTests/fast/css-custom-paint/registerPaintBindings-expected.html 2018-12-04 04:03:13 UTC (rev 238839)
@@ -1,11 +1,15 @@
<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSPaintingAPIEnabled=true ] -->
-<canvas id="paint" width="150px" height="150px" ></canvas>
+<canvas id="paint" style="width: 150px; height: 150px;" ></canvas>
<script id="code">
-var canvas = document.getElementById('paint');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('paint');
+canvas.width = 150 * window.devicePixelRatio;
+canvas.height = 150 * window.devicePixelRatio;
+const ctx = canvas.getContext('2d');
+ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Added: trunk/LayoutTests/fast/css-custom-paint/simple-hidpi-expected.html (0 => 238839)
--- trunk/LayoutTests/fast/css-custom-paint/simple-hidpi-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-custom-paint/simple-hidpi-expected.html 2018-12-04 04:03:13 UTC (rev 238839)
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<script>
+ function startTest() {
+ if (window.testRunner) {
+ testRunner.waitUntilDone();
+ testRunner.setBackingScaleFactor(2, finishTest);
+ }
+ }
+
+ function finishTest() {
+ const canvas = document.getElementById('paint');
+ canvas.width = 150 * window.devicePixelRatio;
+ canvas.height = 150 * window.devicePixelRatio;
+
+ const ctx = canvas.getContext('2d');
+ ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
+ for (var i = 0; i < 6; i++){
+ for (var j = 0; j < 6; j++){
+ ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+ Math.floor(255 - 42.5 * j) + ',0)';
+ ctx.fillRect(j * 25, i * 25, 25, 25);
+ }
+ }
+ setTimeout(function() { testRunner.notifyDone(); }, 0);
+ }
+</script>
+<body _onload_="startTest();">
+<canvas id="paint" style="width: 150px; height: 150px;" width=150 height=150 ></canvas>
+
+</body>
Added: trunk/LayoutTests/fast/css-custom-paint/simple-hidpi.html (0 => 238839)
--- trunk/LayoutTests/fast/css-custom-paint/simple-hidpi.html (rev 0)
+++ trunk/LayoutTests/fast/css-custom-paint/simple-hidpi.html 2018-12-04 04:03:13 UTC (rev 238839)
@@ -0,0 +1,47 @@
+<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSPaintingAPIEnabled=true ] -->
+<script src=""
+<script>
+ function startTest() {
+ if (window.testRunner) {
+ testRunner.waitUntilDone();
+ testRunner.setBackingScaleFactor(2, finishTest);
+ }
+ }
+
+ function finishTest() {
+ setTimeout(function() { testRunner.notifyDone(); }, 0);
+ }
+</script>
+<body _onload_="startTest();">
+<meta name="author" title="Justin Michaud" href=""
+<meta name="assert" content="test hidpi scaling">
+<link rel="help" content="https://drafts.css-houdini.org/css-paint-api-1/">
+
+<style>
+ #paint {
+ background-image: paint(my-paint);
+ width: 150px;
+ height: 150px;
+ }
+</style>
+
+<div id="paint"></div>
+
+<script id="code" type="text/worklet">
+registerPaint('my-paint', class {
+ paint(ctx, geom, properties) {
+ for (var i = 0; i < 6; i++){
+ for (var j = 0; j < 6; j++){
+ ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
+ Math.floor(255 - 42.5 * j) + ',0)';
+ ctx.fillRect(j * 25, i * 25, 25, 25);
+ }
+ }
+ }
+});
+</script>
+
+<script>
+importWorklet(CSS.paintWorklet, document.getElementById('code').textContent);
+</script>
+</body>
Modified: trunk/LayoutTests/fast/css-custom-paint/worklet-expected.html (238838 => 238839)
--- trunk/LayoutTests/fast/css-custom-paint/worklet-expected.html 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/LayoutTests/fast/css-custom-paint/worklet-expected.html 2018-12-04 04:03:13 UTC (rev 238839)
@@ -1,11 +1,15 @@
<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSPaintingAPIEnabled=true ] -->
-<canvas id="paint" width="150px" height="150px" ></canvas>
+<canvas id="paint" style="width: 150px; height: 150px;" ></canvas>
<script id="code">
-var canvas = document.getElementById('paint');
-var ctx = canvas.getContext('2d');
+const canvas = document.getElementById('paint');
+canvas.width = 150 * window.devicePixelRatio;
+canvas.height = 150 * window.devicePixelRatio;
+const ctx = canvas.getContext('2d');
+ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Modified: trunk/Source/WebCore/ChangeLog (238838 => 238839)
--- trunk/Source/WebCore/ChangeLog 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/Source/WebCore/ChangeLog 2018-12-04 04:03:13 UTC (rev 238839)
@@ -1,3 +1,18 @@
+2018-12-03 Justin Michaud <[email protected]>
+
+ CSS Painting API should scale display list when drawing
+ https://bugs.webkit.org/show_bug.cgi?id=192217
+
+ Reviewed by Simon Fraser.
+
+ When we replay the display list, fix the scaling. The separate buffer is needed to make sure that globalCompositeOperation functions correctly.
+
+ * html/CustomPaintCanvas.cpp:
+ (WebCore::CustomPaintCanvas::replayDisplayList const):
+ * html/CustomPaintCanvas.h:
+ * platform/graphics/CustomPaintImage.cpp:
+ (WebCore::CustomPaintImage::doCustomPaint):
+
2018-12-03 Myles C. Maxfield <[email protected]>
Thick overlines and line-throughs grow in the wrong direction
Modified: trunk/Source/WebCore/html/CustomPaintCanvas.cpp (238838 => 238839)
--- trunk/Source/WebCore/html/CustomPaintCanvas.cpp 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/Source/WebCore/html/CustomPaintCanvas.cpp 2018-12-04 04:03:13 UTC (rev 238839)
@@ -93,6 +93,28 @@
return { RefPtr<PaintRenderingContext2D> { &downcast<PaintRenderingContext2D>(*m_context) } };
}
+void CustomPaintCanvas::replayDisplayList(GraphicsContext* ctx) const
+{
+ ASSERT(!m_destinationGraphicsContext);
+ if (!width() || !height())
+ return;
+
+ // FIXME: Using an intermediate buffer is not needed if there are no composite operations.
+ auto clipBounds = ctx->clipBounds();
+
+ auto image = ImageBuffer::createCompatibleBuffer(clipBounds.size(), *ctx);
+ if (!image)
+ return;
+
+ m_destinationGraphicsContext = &image->context();
+ m_destinationGraphicsContext->translate(-clipBounds.location());
+ if (m_context)
+ m_context->paintRenderingResultsToCanvas();
+ m_destinationGraphicsContext = nullptr;
+
+ ctx->drawImageBuffer(*image, clipBounds);
+}
+
Image* CustomPaintCanvas::copiedImage() const
{
ASSERT(!m_destinationGraphicsContext);
Modified: trunk/Source/WebCore/html/CustomPaintCanvas.h (238838 => 238839)
--- trunk/Source/WebCore/html/CustomPaintCanvas.h 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/Source/WebCore/html/CustomPaintCanvas.h 2018-12-04 04:03:13 UTC (rev 238839)
@@ -70,6 +70,7 @@
AffineTransform baseTransform() const final { ASSERT(m_destinationGraphicsContext && m_copiedBuffer); return m_copiedBuffer->baseTransform(); }
Image* copiedImage() const final;
+ void replayDisplayList(GraphicsContext*) const;
using RefCounted::ref;
using RefCounted::deref;
Modified: trunk/Source/WebCore/platform/graphics/CustomPaintImage.cpp (238838 => 238839)
--- trunk/Source/WebCore/platform/graphics/CustomPaintImage.cpp 2018-12-04 03:54:49 UTC (rev 238838)
+++ trunk/Source/WebCore/platform/graphics/CustomPaintImage.cpp 2018-12-04 04:03:13 UTC (rev 238839)
@@ -129,12 +129,8 @@
if (result.type() != CallbackResultType::Success)
return ImageDrawResult::DidNothing;
- auto image = canvas->copiedImage();
- if (!image)
- return ImageDrawResult::DidNothing;
+ canvas->replayDisplayList(&destContext);
- destContext.drawImage(*image, FloatPoint());
-
return ImageDrawResult::DidDraw;
}
