Commit c1e6b6bb authored by cmarrin@apple.com's avatar cmarrin@apple.com
Browse files

2011-01-18 Chris Marrin <cmarrin@apple.com>

        Reviewed by Simon Fraser.

        Add LayoutTests for new compositing layer logic
        https://bugs.webkit.org/show_bug.cgi?id=52657

        Add 4 tests checking that the layer tree is properly constructed with nested
        layers. The first test is a simple static test of a layer with a 3D transform
        with a non-layered parent. It is a pixel test and is just looking for a correct
        image. The second test is similar but has a 4 deep hierarchy of <div> element where 
        only the innermost layer has a 3D transform. It is also a pixel test.
        The other 2 tests are the same except that they add and then remove the innermost
        layer's transform. It makes sure the layer tree is correct before and after
        these changes.

        * compositing/geometry/layer-due-to-layer-children-deep-switch-expected.txt: Added.
        * compositing/geometry/layer-due-to-layer-children-deep-switch.html: Added.
        * compositing/geometry/layer-due-to-layer-children-deep.html: Added.
        * compositing/geometry/layer-due-to-layer-children-switch-expected.txt: Added.
        * compositing/geometry/layer-due-to-layer-children-switch.html: Added.
        * compositing/geometry/layer-due-to-layer-children.html: Added.
        * platform/mac/compositing/geometry/layer-due-to-layer-children-deep-expected.checksum: Added.
        * platform/mac/compositing/geometry/layer-due-to-layer-children-deep-expected.png: Added.
        * platform/mac/compositing/geometry/layer-due-to-layer-children-deep-expected.txt: Added.
        * platform/mac/compositing/geometry/layer-due-to-layer-children-expected.checksum: Added.
        * platform/mac/compositing/geometry/layer-due-to-layer-children-expected.png: Added.
        * platform/mac/compositing/geometry/layer-due-to-layer-children-expected.txt: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@76058 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 186f5bb6
2011-01-18 Chris Marrin <cmarrin@apple.com>
Reviewed by Simon Fraser.
Add LayoutTests for new compositing layer logic
https://bugs.webkit.org/show_bug.cgi?id=52657
Add 4 tests checking that the layer tree is properly constructed with nested
layers. The first test is a simple static test of a layer with a 3D transform
with a non-layered parent. It is a pixel test and is just looking for a correct
image. The second test is similar but has a 4 deep hierarchy of <div> element where
only the innermost layer has a 3D transform. It is also a pixel test.
The other 2 tests are the same except that they add and then remove the innermost
layer's transform. It makes sure the layer tree is correct before and after
these changes.
* compositing/geometry/layer-due-to-layer-children-deep-switch-expected.txt: Added.
* compositing/geometry/layer-due-to-layer-children-deep-switch.html: Added.
* compositing/geometry/layer-due-to-layer-children-deep.html: Added.
* compositing/geometry/layer-due-to-layer-children-switch-expected.txt: Added.
* compositing/geometry/layer-due-to-layer-children-switch.html: Added.
* compositing/geometry/layer-due-to-layer-children.html: Added.
* platform/mac/compositing/geometry/layer-due-to-layer-children-deep-expected.checksum: Added.
* platform/mac/compositing/geometry/layer-due-to-layer-children-deep-expected.png: Added.
* platform/mac/compositing/geometry/layer-due-to-layer-children-deep-expected.txt: Added.
* platform/mac/compositing/geometry/layer-due-to-layer-children-expected.checksum: Added.
* platform/mac/compositing/geometry/layer-due-to-layer-children-expected.png: Added.
* platform/mac/compositing/geometry/layer-due-to-layer-children-expected.txt: Added.
2011-01-18 Mihai Parparita <mihaip@chromium.org>
 
Reviewed by Ojan Vafai.
......
This content is in the parent
Box should switch between perspective and flat
First dump layer tree:
Second dump layer tree:
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(position 8.00 8.00)
(bounds 342.00 292.00)
(drawsContent 1)
(children 1
(GraphicsLayer
(position 31.00 39.00)
(bounds 250.00 220.00)
(drawsContent 1)
(children 1
(GraphicsLayer
(position 10.00 10.00)
(bounds 200.00 200.00)
(drawsContent 1)
(transform [0.87 0.50 0.00 0.00] [-0.50 0.87 0.00 0.00] [0.00 0.00 1.00 0.00] [0.00 0.00 0.00 1.00])
(children 1
(GraphicsLayer
(position 100.00 0.00)
(bounds 250.00 100.00)
(drawsContent 1)
(transform [0.50 0.00 -0.87 0.00] [0.00 1.00 0.00 0.00] [0.87 0.00 0.50 -0.00] [-30.00 30.00 100.00 0.75])
)
)
)
)
)
)
)
)
)
)
)
Third dump layer tree:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
position: relative;
}
#parent {
position: relative;
width: 300px;
height: 250px;
padding: 20px;
border: 1px solid black;
-webkit-transform: translate(0px, 0px);
}
#child {
position: relative;
left: 10px;
width: 250px;
height: 220px;
background-color: blue;
-webkit-transform: translate(0px, 0px);
}
#grandchild {
position: relative;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background-color: yellow;
-webkit-transform: rotate(30deg);
}
#greatgrandchild {
position: relative;
left: 100px;
width: 250px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}
var text = "";
function showTree(which)
{
setTimeout(function() {
if (window.layoutTestController) {
text += "\n" + which + " dump layer tree:\n";
text += layoutTestController.layerTreeAsText();
document.getElementById('layers').innerText = text;
}
}, 0);
}
function doTest()
{
if (window.layoutTestController)
//document.getElementById('layers').innerText = "";
showTree("First");
//Put child in compositing mode
setTimeout(function() {
document.getElementById("greatgrandchild").style.webkitTransform = "perspective(400) translate3D(-30px, 30px, 100px) rotateY(60deg)";
showTree("Second");
// Take it back out of compositing mode
setTimeout(function() {
document.getElementById("greatgrandchild").style.webkitTransform = "";
showTree("Third");
setTimeout(function() {
layoutTestController.notifyDone();
}, 0);
}, 100);
}, 100);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
<!-- But if the parent has a 2D transform it should get a compositing layer -->
<!-- Here we test that the entire hierarchy gets layers when some elements are transformed and others arent -->
<!-- Should see a box containing a blue box containing a rotated yellow box containing a green box in perspective -->
<div id="parent">
This content is in the parent
<div id="child">
<div id="grandchild">
<div id="greatgrandchild">
Box should switch between perspective and flat
</div>
</div>
</div>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
position: relative;
}
#parent {
position: relative;
width: 300px;
height: 250px;
padding: 20px;
border: 1px solid black;
-webkit-transform: translate(0px, 0px);
}
#child {
position: relative;
left: 10px;
width: 250px;
height: 220px;
background-color: blue;
-webkit-transform: translate(0px, 0px);
}
#grandchild {
position: relative;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background-color: yellow;
-webkit-transform: rotate(30deg);
}
#greatgrandchild {
position: relative;
left: 100px;
width: 250px;
height: 100px;
background-color: green;
-webkit-transform: perspective(400) translate3D(-30px, 30px, 100px) rotateY(60deg);
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.layoutTestController)
layoutTestController.waitUntilDone();
function doTest()
{
if (window.layoutTestController)
layoutTestController.notifyDone();
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
<!-- But if the parent has a 2D transform it should get a compositing layer -->
<!-- Here we test that the entire hierarchy gets layers when some elements are transformed and others arent -->
<!-- Should see a box containing a blue box containing a rotated yellow box containing a green box in perspective -->
<div id="parent">
This content is in the parent
<div id="child">
<div id="grandchild">
<div id="greatgrandchild">
Box should have perspective
</div>
</div>
</div>
</div>
</body>
</html>
This content is in the parent
Box should switch between perspective and flat
First dump layer tree:
Second dump layer tree:
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(bounds 800.00 600.00)
(children 1
(GraphicsLayer
(position 8.00 8.00)
(bounds 242.00 192.00)
(drawsContent 1)
(children 1
(GraphicsLayer
(position 121.00 39.00)
(bounds 250.00 100.00)
(drawsContent 1)
(transform [0.71 0.00 -0.71 0.00] [0.00 1.00 0.00 0.00] [0.71 0.00 0.71 -0.00] [-50.00 10.00 100.00 0.83])
)
)
)
)
)
)
)
Third dump layer tree:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
position: relative;
}
.parent {
position: relative;
width: 200px;
height: 150px;
padding: 20px;
border: 1px solid black;
-webkit-transform: translate(0px, 0px);
}
.child {
position: relative;
left: 100px;
width: 250px;
height: 100px;
background-color: green;
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.layoutTestController) {
layoutTestController.dumpAsText();
layoutTestController.waitUntilDone();
}
var text = "";
function showTree(which)
{
setTimeout(function() {
if (window.layoutTestController) {
text += "\n" + which + " dump layer tree:\n";
text += layoutTestController.layerTreeAsText();
document.getElementById('layers').innerText = text;
}
}, 0);
}
function doTest()
{
if (window.layoutTestController)
//document.getElementById('layers').innerText = "";
showTree("First");
//Put child in compositing mode
setTimeout(function() {
document.getElementById("child").style.webkitTransform = "perspective(600) translate3D(-50px, 10px, 100px) rotateY(45deg)";
showTree("Second");
// Take it back out of compositing mode
setTimeout(function() {
document.getElementById("child").style.webkitTransform = "";
showTree("Third");
setTimeout(function() {
layoutTestController.notifyDone();
}, 0);
}, 100);
}, 100);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
<!-- But if the parent has a 2D transform it should get a compositing layer -->
<!-- Should see a green box in perspective. Layer tree should show nested layers-->
<div id="parent" class="parent">
This content is in the parent
<div id="child" class="child">
Box should switch between perspective and flat
</div>
</div>
<pre id="layers">Layer tree goes here in DRT</pre>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body {
position: relative;
}
.parent {
position: relative;
width: 200px;
height: 150px;
padding: 20px;
border: 1px solid black;
-webkit-transform: translate(0px, 0px);
}
.child {
position: relative;
left: 100px;
width: 250px;
height: 100px;
background-color: green;
-webkit-transform: perspective(600) translate3D(-50px, 10px, 100px) rotateY(45deg);
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.layoutTestController)
layoutTestController.waitUntilDone();
function doTest()
{
if (window.layoutTestController)
layoutTestController.notifyDone();
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<!-- Normally we skip making a compositing layer on a parent, even if its children are composited -->
<!-- But if the parent has a 2D transform it should get a compositing layer -->
<!-- Should see a green box in perspective. Layer tree should show nested layers-->
<div id="parent" class="parent">
This content is in the parent
<div id="child" class="child">
Box should have perspective
</div>
</div>
</body>
</html>
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x308
RenderBlock {HTML} at (0,0) size 800x308
layer at (8,8) size 784x292
RenderBody {BODY} at (8,8) size 784x292
layer at (8,8) size 342x292
RenderBlock (relative positioned) {DIV} at (0,0) size 342x292 [border: (1px solid #000000)]
RenderBlock (anonymous) at (21,21) size 300x18
RenderText {#text} at (0,0) size 174x18
text run at (0,0) width 174: "This content is in the parent"
layer at (39,47) size 250x220
RenderBlock (relative positioned) {DIV} at (21,39) size 250x220 [bgcolor=#0000FF]
layer at (49,57) size 200x200
RenderBlock (relative positioned) {DIV} at (0,0) size 200x200 [bgcolor=#FFFF00]
layer at (149,57) size 250x100
RenderBlock (relative positioned) {DIV} at (0,0) size 250x100 [bgcolor=#008000]
RenderText {#text} at (0,0) size 182x18
text run at (0,0) width 182: "Box should have perspective"
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x208
RenderBlock {HTML} at (0,0) size 800x208
layer at (8,8) size 784x192
RenderBody {BODY} at (8,8) size 784x192
layer at (8,8) size 242x192
RenderBlock (relative positioned) {DIV} at (0,0) size 242x192 [border: (1px solid #000000)]
RenderBlock (anonymous) at (21,21) size 200x18
RenderText {#text} at (0,0) size 174x18
text run at (0,0) width 174: "This content is in the parent"
layer at (129,47) size 250x100
RenderBlock (relative positioned) {DIV} at (21,39) size 250x100 [bgcolor=#008000]
RenderText {#text} at (0,0) size 182x18
text run at (0,0) width 182: "Box should have perspective"
Supports Markdown
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