Skip to content
Permalink
Browse files
Don't allocate device pixel ratio scaled backing stores for layers th…
…at contain only unscaled bitmap content

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

Reviewed by Simon Fraser.

* Source/WebCore/platform/graphics/GraphicsLayer.cpp:
(WebCore::GraphicsLayer::GraphicsLayer):
* Source/WebCore/platform/graphics/GraphicsLayer.h:
(WebCore::GraphicsLayer::setAppliesDeviceScale):
(WebCore::GraphicsLayer::appliesDeviceScale const):
(WebCore::GraphicsLayer::deviceScaleFactor const):
* Source/WebCore/rendering/RenderLayerBacking.cpp:
(WebCore::PaintedContentsInfo::isUnscaledBitmapOnly):
(WebCore::PaintedContentsInfo::contentsTypeDetermination):
(WebCore::RenderLayerBacking::updateConfiguration):
(WebCore::RenderLayerBacking::isUnscaledBitmapOnly const):
* Source/WebCore/rendering/RenderLayerBacking.h:

Adds isUnscaledBitmapOnly to check if a layer contains only a <canvas>/image,
and no other rasterized content, and that the bitmap is drawn unscaled.
If so, uses setAppliesDeviceScale to disable hidpi backing stores for this layer.

* Source/WebCore/platform/graphics/LayerTreeAsTextOptions.h:
* Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::GraphicsLayerCA::dumpAdditionalProperties const):
* Source/WebCore/testing/Internals.cpp:
(WebCore::toLayerTreeAsTextOptions):
* Source/WebCore/testing/Internals.h:
* Source/WebCore/testing/Internals.idl:

Adds new internals.LAYER_TREE_INCLUDES_DEVICE_SCALE flag for layer tree dumping, in order
to test whether a layer has a high dpi backing store or not.

* LayoutTests/compositing/canvas/hidpi-canvas-backing-store-expected.txt: Added.
* LayoutTests/compositing/canvas/hidpi-canvas-backing-store-invalidation-expected.txt: Added.
* LayoutTests/compositing/canvas/hidpi-canvas-backing-store-invalidation.html: Added.
* LayoutTests/compositing/canvas/hidpi-canvas-backing-store.html: Added.

Adds new test for low-dpi backing store for a layer containing only a canvas, and an invalidation
test to check that we go back to hidpi when we add a rasterized outline.

Canonical link: https://commits.webkit.org/251723@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295718 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
mattwoodrow committed Jun 22, 2022
1 parent 9fed47e commit 6af6969bcae4185daab5e0e60510761646fcf7da
Showing 26 changed files with 508 additions and 5 deletions.
@@ -0,0 +1,32 @@
Tests whether a compositing layer containing only canvas uses a standard DPI backing store.

(GraphicsLayer
(anchor 0.00 0.00)
(bounds 1008.00 1095.00)
(device scale 2.00)
(children 1
(GraphicsLayer
(bounds 1008.00 1095.00)
(contentsOpaque 1)
(device scale 2.00)
(children 1
(GraphicsLayer
(position 8.00 50.00)
(bounds 1000.00 1004.00)
(opacity 0.50)
(device scale 2.00)
(children 1
(GraphicsLayer
(anchor 0.00 0.00)
(bounds 1000.00 1000.00)
(drawsContent 1)
(transform [0.50 0.00 0.00 0.00] [0.00 0.50 0.00 0.00] [0.00 0.00 1.00 0.00] [0.00 0.00 0.00 1.00])
(device scale 1.00)
)
)
)
)
)
)
)

@@ -0,0 +1,34 @@
Tests whether we switch back to a hidpi backing store when rasterized content is added to the canvas layer.

(GraphicsLayer
(anchor 0.00 0.00)
(bounds 1008.00 1095.00)
(device scale 2.00)
(children 1
(GraphicsLayer
(bounds 1008.00 1095.00)
(contentsOpaque 1)
(device scale 2.00)
(children 1
(GraphicsLayer
(offsetFromRenderer width=-3 height=-3)
(position 5.00 47.00)
(bounds 1003.00 1007.00)
(opacity 0.50)
(device scale 2.00)
(children 1
(GraphicsLayer
(offsetFromRenderer width=-3 height=-3)
(anchor 0.00 0.00)
(bounds 1006.00 1006.00)
(drawsContent 1)
(transform [0.50 0.00 0.00 0.00] [0.00 0.50 0.00 0.00] [0.00 0.00 1.00 0.00] [0.00 0.00 0.00 1.00])
(device scale 2.00)
)
)
)
)
)
)
)

@@ -0,0 +1,48 @@
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}

function doTest() {
var canvasElement = document.getElementById("canvas");
let dpr = window.devicePixelRatio || 1;

canvas.width *= dpr;
canvas.height *= dpr;

canvas.style.transform = "scale(" + 1/dpr + ", " + 1/dpr + ")";

let ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);

ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 500, 500);

requestAnimationFrame(function() {
canvasElement.style.outline = "black solid 3px";
if (window.testRunner) {
document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_DEVICE_SCALE);
testRunner.notifyDone();
}
});
}

window.addEventListener('load', doTest, false);
</script>
</head>

<body>
<p> Tests whether we switch back to a hidpi backing store when rasterized content is added to the canvas layer.</p>
<div style="opacity:0.5">
<canvas id="canvas" width="500" height="500" style="transform-origin:top left"></canvas>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>

</html>
@@ -0,0 +1,45 @@
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}

function doTest() {
var canvasElement = document.getElementById("canvas");
let dpr = window.devicePixelRatio || 1;

canvas.width *= dpr;
canvas.height *= dpr;

canvas.style.transform = "scale(" + 1/dpr + ", " + 1/dpr + ")";

let ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);

ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 500, 500);

if (window.testRunner) {
document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_DEVICE_SCALE);
testRunner.notifyDone();
}
}

window.addEventListener('load', doTest, false);
</script>
</head>

<body>
<p> Tests whether a compositing layer containing only canvas uses a standard DPI backing store.</p>
<div style="opacity:0.5">
<canvas id="canvas" width="500" height="500" style="transform-origin:top left"></canvas>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>

</html>
@@ -0,0 +1,23 @@
Tests whether a compositing layer containing only an image uses a standard DPI backing store.


(GraphicsLayer
(anchor 0.00 0.00)
(bounds 800.00 600.00)
(device scale 2.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(device scale 2.00)
(children 1
(GraphicsLayer
(position 8.00 50.00)
(bounds 150.00 150.00)
(device scale 2.00)
)
)
)
)
)

@@ -0,0 +1,23 @@
Tests whether a compositing layer containing only an image uses a standard DPI backing store.


(GraphicsLayer
(anchor 0.00 0.00)
(bounds 800.00 600.00)
(device scale 2.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(device scale 2.00)
(children 1
(GraphicsLayer
(position 8.00 50.00)
(bounds 200.00 150.00)
(device scale 2.00)
)
)
)
)
)

@@ -0,0 +1,33 @@
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}

function doTest() {
document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_DEVICE_SCALE);
testRunner.notifyDone();
}

function loadImage() {
let img = document.getElementById('image');
img.onload = doTest;
img.src = "resources/simple_image.png";
}

window.addEventListener('load', loadImage, false);
</script>
</head>

<body>
<p> Tests whether a compositing layer containing only an image uses a standard DPI backing store.</p>
<img id="image" style="transform: translateZ(0px); width: 200px; height: 150px"></img>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>

</html>
@@ -0,0 +1,27 @@
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>

if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}

function doTest() {
document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_DEVICE_SCALE);
testRunner.notifyDone();
}

window.addEventListener('load', doTest, false);
</script>
</head>

<body>
<p> Tests whether a compositing layer containing only an image uses a standard DPI backing store.</p>
<img src="resources/simple_image.png" style="transform: translateZ(0px);"></img>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>

</html>
@@ -0,0 +1,3 @@
Tests whether a compositing layer containing only canvas uses a standard DPI backing store.


@@ -0,0 +1,3 @@
Tests whether we switch back to a hidpi backing store when rasterized content is added to the canvas layer.


@@ -0,0 +1,20 @@
Tests whether a compositing layer containing only an image uses a standard DPI backing store.


(GraphicsLayer
(anchor 0.00 0.00)
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 8.00 50.00)
(bounds 150.00 150.00)
)
)
)
)
)

@@ -0,0 +1,20 @@
Tests whether a compositing layer containing only an image uses a standard DPI backing store.


(GraphicsLayer
(anchor 0.00 0.00)
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(contentsOpaque 1)
(children 1
(GraphicsLayer
(position 8.00 50.00)
(bounds 200.00 150.00)
)
)
)
)
)

@@ -2230,3 +2230,11 @@ http/tests/workers/service/shownotification-allowed-document.html [ Skip ]
http/tests/workers/service/shownotification-allowed.html [ Skip ]
http/tests/workers/service/shownotification-denied.html [ Skip ]
http/tests/workers/service/shownotification-invalid-data.html [ Skip ]

# Tests that fail due to antialiasing differences between scaling layers vs scaling during painting
imported/w3c/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped.html [ ImageOnlyFailure ]
imported/w3c/web-platform-tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap.html [ ImageOnlyFailure ]
@@ -0,0 +1,32 @@
Tests whether a compositing layer containing only canvas uses a standard DPI backing store.

(GraphicsLayer
(anchor 0.00 0.00)
(bounds 1008.00 1097.00)
(device scale 2.00)
(children 1
(GraphicsLayer
(bounds 1008.00 1097.00)
(contentsOpaque 1)
(device scale 2.00)
(children 1
(GraphicsLayer
(position 8.00 52.00)
(bounds 1000.00 1005.00)
(opacity 0.50)
(device scale 2.00)
(children 1
(GraphicsLayer
(anchor 0.00 0.00)
(bounds 1000.00 1000.00)
(drawsContent 1)
(transform [0.50 0.00 0.00 0.00] [0.00 0.50 0.00 0.00] [0.00 0.00 1.00 0.00] [0.00 0.00 0.00 1.00])
(device scale 1.00)
)
)
)
)
)
)
)

0 comments on commit 6af6969

Please sign in to comment.