haikuwebkit/ManualTests/win/milliondollar.html

138 lines
6.1 KiB
HTML
Raw Permalink Normal View History

Content of 3D tests appears at the bottom right corner sometimes. <rdar://problem/7556244> <https://bugs.webkit.org/show_bug.cgi?id=36027> Reviewed by Simon Fraser. WebCore: There were two problems to solve here: - the incorrect anchoring of the rootChildLayer that was causing the composited content to be positioned incorrectly - the failure to paint the non composited content into the backing store when animating composited content. The first problem has been solved by leaving the original anchor point for the rootChildLayer and splitting the tasks of clipping and scrolling using two separate layers. The second problem has been solved leveraging the knowledge that WebView has of the dirty region of the backing store to pass this information to the layer renderer. This allows the renderer to force a paint into the backing store before moving to the compositing. Tests: compositing/geometry/horizontal-scroll-composited.html compositing/geometry/vertical-scroll-composited.html * manual-tests/win/horizontal-scroll-composited.html: Removed. This is now a layout test. * manual-tests/win/milliondollar.html: Added. * platform/graphics/win/WKCACFLayerRenderer.cpp: (WebCore::WKCACFLayerRenderer::WKCACFLayerRenderer): Added initialization of dirty flag. (WebCore::WKCACFLayerRenderer::setScrollFrame): (WebCore::WKCACFLayerRenderer::updateScrollFrame): Updated to resize and position the clip and scroll layers. (WebCore::WKCACFLayerRenderer::setRootChildLayer): (WebCore::WKCACFLayerRenderer::createRenderer): Added new layer hierarchy. (WebCore::WKCACFLayerRenderer::destroyRenderer): Remove clip layer on destroy. (WebCore::WKCACFLayerRenderer::resize): (WebCore::WKCACFLayerRenderer::paint): Forcing paint massage to trigger paint into the backing store. * platform/graphics/win/WKCACFLayerRenderer.h: (WebCore::WKCACFLayerRenderer::setBackingStoreDirty): Added. WebKit/win: See detailed comments in WebCore/ChangeLog. * WebView.cpp: (WebView::deleteBackingStore): Reset the dirty flag when deleting the backing store. (WebView::addToDirtyRegion): Set the dirty flag when adding dirty rectangles to the backing store dirty region. (WebView::updateBackingStore): Reset the dirty flag after painting into the backing store. (WebView::setAcceleratedCompositing): Removed unnecessary call to updateRootLayerContents. (WebView::updateRootLayerContents): Changed the way we pass parameters to setScrollFrame. We are passing width and height of the view content together with the offset for the scrolling. It was confusing to pass it all as a rectangle, when it is not a rectangle. LayoutTests: * compositing/geometry/horizontal-scroll-composited.html: Added. * compositing/geometry/vertical-scroll-composited.html: Added. * compositing/resources/apple.jpg: Added. * platform/mac/compositing/geometry/horizontal-scroll-composited-expected.checksum: Added. * platform/mac/compositing/geometry/horizontal-scroll-composited-expected.png: Added. * platform/mac/compositing/geometry/horizontal-scroll-composited-expected.txt: Added. * platform/mac/compositing/geometry/vertical-scroll-composited-expected.checksum: Added. * platform/mac/compositing/geometry/vertical-scroll-composited-expected.png: Added. * platform/mac/compositing/geometry/vertical-scroll-composited-expected.txt: Added. Canonical link: https://commits.webkit.org/47236@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@55941 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2010-03-12 23:11:42 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Million dollar test</title>
<style type="text/css" media="screen">
body {
padding: 0px; margin: 0px; font-size: 12px; font-family:"Lucida Grande", Verdana, Arial, sans-serif;
background:#303030;
}
.ie {text-align: left; width:1000px;position:relative;visibility:hidden;z-index:1;}
.grid {height: 1000px; width:1000px; position:relative;z-index:153;xoverflow:hidden;}
.row {background:url(100grid_inv.png) #000;height: 100px; text-align: left; position:relative;width:1000px;z-index:10;}
#lq {width:1000px;position:relative;z-index:0;text-align:left;}
.bz {-webkit-perspective: 1500;-webkit-perspective-origin: 50% 325px;}
.fc {-webkit-transform-style: preserve-3d;-webkit-transform: rotateY(0deg) ;opacity: 1.0;}
@-webkit-keyframes spin_3d {
0% { -webkit-transform: rotateY(0) rotateZ(0); }
33% { -webkit-transform: rotateY(-20deg) rotateZ(-20deg); }
65% { -webkit-transform: rotateY(20deg) rotateZ(20deg); }
100% { -webkit-transform: rotateY(0deg) rotateZ(0deg); }
}
.plane > a {display:block;height:100%;width:100%;}
.plane {
position: absolute;
opacity:0.5;
background-repeat:no-repeat;
-webkit-transition: -webkit-transform 0.3s, opacity 0s;-webkit-backface-visibility: visible;}
</style>
<script type="text/javascript">
function loadBlocks() {
document.getElementById("ie").style.visibility = "visible";
document.getElementById("ie").className = document.getElementById("ie").className + " bz";
document.getElementById("grid").className = document.getElementById("grid").className + " fc";
document.getElementById("lq").style.display = "none";
var cubes;
cubify(200,0,250,50);
cubify(800,500,900,600);
cubify(250,350,300,400);
cubify(600,600,650,650);
cubify(850,0,900,50);
cubify(650,450,700,500);
cubify(100,500,250,650);
cubify(400,600,500,700);
cubify(700,600,800,700);
cubify(350,0,500,150);
cubify(450,200,500,250);
cubify(550,250,600,300);
cubify(0,400,100,450);
cubify(600,150,650,200);
cubify(600,700,650,750);
cubify(150,850,450,950);
cubify(200,100,300,200);
cubify(750,200,950,400);
cubify(250,700,350,800);
cubify(600,800,700,900);
cubify(100,300,150,350);
cubify(0,300,50,350);
cubify(850,650,950,700);
cubify(900,100,950,150);
cubify(200,400,250,450);
cubify(200,250,250,300);
cubify(300,600,350,650);
cubify(50,200,100,250);
cubify(100,100,150,150);
cubify(0,0,5,5);
cubify(470,430,475,435);
cubify(520,480,525,485);
cubify(570,380,575,385);
cubify(550,0,600,50);
cubify(650,0,700,50);
cubify(425,390,455,400);
cubify(435,400,445,430);
cubify(525,425,530,430);
cubify(450,500,465,515);
cubify(650,100,750,200);
cubify(0,0,50,50);
cubify(700,750,900,800);
cubify(495,390,510,405);
cubify(495,445,500,450);
cubify(560,450,565,455);
cubify(460,460,465,465);
cubify(525,370,530,375);
cubify(490,420,495,425);
cubify(520,440,525,445);
cubify(510,420,515,425);
cubify(495,465,500,470);
cubify(475,405,480,410);
cubify(545,400,550,405);
cubify(485,370,490,375);
cubify(430,365,435,370);
document.getElementById("grid").innerHTML = cubes + document.getElementById("grid").innerHTML;
function cubify(x1, y1, x2, y2)
{
var width, height,dw;
width = x2 - x1;
height = y2 - y1;
if (width < height) {
dw = width;
} else {
dw = height;
}
cubes += addBlock(x1,y1,width,height,dw);
}
function addBlock(x1,y1,xf,qp,dw)
{
return "<div class='a_cube'><div class='plane one' style='background-color: red;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(90deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane two' style='background-color: blue;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(90deg) rotateX(180deg) rotateZ(-90deg) translateX(0px) translateY(-"+(dw/2)+"px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane three' style='background-color: green;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateX(-90deg) translateX(0px) translateZ("+(dw/2)+"px) translateY(-"+(dw/2)+"px);position:absolute;'></div><div class='plane four' style='background-color: yellow;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(90deg) rotateX(90deg) rotateZ(-90deg) translateY(-"+(dw/2)+"px) translateX(0px) translateZ("+(dw/2)+"px) translateY(0px);position:absolute;'></div><div class='plane five' style='background-color: gray;height:"+dw+"px;width:"+dw+"px;top:"+y1+"px;left:"+x1+"px;-webkit-transform:rotateY(0deg) translateX(0px) translateZ("+(dw)+"px) translateY(0px);position:absolute;'></div></div>";
}
document.getElementById("grid").style.webkitAnimation = "spin_3d 36s infinite linear";
};
</script>
</head>
<body onload="loadBlocks()">
<center>
<div id="lq">
<div style="top: 252px; left: 203px; width: 196px; height: 196px; position: relative;
z-index: 0; text-align: left; border: 0px solid #999; padding: 0px; background: #333;
-moz-border-radius: 0px; -webkit-border-radius: 0px; text-align: center;">
$1 a pixel
</div>
</div>
<div class="ie" id="ie">
<div class="grid" id="grid">
<div class="row" id="row0"></div><div class="row" id="row1"></div><div class="row" id="row2"></div><div class="row" id="row3"></div><div class="row" id="row4"></div><div class="row" id="row5"></div><div class="row" id="row6"></div><div class="row" id="row7"></div><div class="row" id="row8"></div><div class="row" id="row9"></div>
</div>
</div>
</center>
</body>
</html>