Skip to content

GitLab

T
tangled
Commit 49c0f7c7 authored by Xianzhu Wang's avatar Xianzhu Wang Committed by Commit Bot
Browse files
Options

Simplify compositing layout test references 

Previously some compositing layout tests used references which contained
styles and elements which were not enough different from the test. This
increased chances that the same bug affects both the test and the
reference and the test still passes.

This CL removes unnecessary styles and elements from references to make
them more different from the tests.

Change-Id: I7c452c27f44fb34460217697ce1dd9bf98456d48
Reviewed-on: https://chromium-review.googlesource.com/726542
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#510243}
parent 033501e5
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 725 deletions
third_party/WebKit/LayoutTests/compositing/anchor-point-should-not-affect-perspective-expected.html
View file @ 49c0f7c7
<!DOCTYPE HTML>
<style>
.transformableContainer {
position: absolute;
-webkit-perspective-origin: 50% 50%;
-webkit-perspective: 100;
}
.transformable {
-webkit-transform-origin: 0em 0em 0em;
-webkit-transform-style: preserve-3d;
}
.transformed {
transform: translate3d(100px, 100px, -25px);
}
.resetTransformOrigin {
-webkit-transform-origin: 50% 50% !important;
}
</style>
<div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;">
<div class="transformable transformed">
<div class="content" style="width: 200px; height: 200px; background-color: red;"></div>
</div>
</div>
<div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;">
<div class="transformable transformed">
<div class="content" style="width: 200px; height: 200px; background-color: green;"></div>
</div>
</div>
<div style="position: relative; top: 120px; left: 120px; width: 160px; height: 160px; background-color: green;"></div>
third_party/WebKit/LayoutTests/compositing/anchor-point-should-not-affect-perspective-overflow-hidden-expected.html
View file @ 49c0f7c7
<!DOCTYPE HTML>
<style>
.transformableContainer {
position: absolute;
-webkit-perspective-origin: 50% 50%;
-webkit-perspective: 100;
}
.transformable {
-webkit-transform-origin: 0em 0em 0em;
-webkit-transform-style: preserve-3d;
}
.transformed {
transform: translate3d(100px, 100px, -25px);
}
.resetTransformOrigin {
-webkit-transform-origin: 50% 50% !important;
}
</style>
<div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;">
<div class="transformable transformed">
<div class="content" style="width: 200px; height: 200px; background-color: red;"></div>
</div>
</div>
<div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;">
<div class="transformable transformed">
<div class="content" style="width: 200px; height: 200px; background-color: green;"></div>
</div>
</div>
<div style="position: relative; top: 120px; left: 120px; width: 160px; height: 160px; background-color: green;"></div>
third_party/WebKit/LayoutTests/compositing/animation/hidden-animated-layer-should-not-have-scrollbars-expected.html
View file @ 49c0f7c7
<!DOCTYPE HTML>
<style>
#scroller {
width: 100px;
height: 100px;
overflow: scroll;
visibility: hidden;
}
#scrolled {
width: 10px;
height: 10px;
position: relative;
background: blue;
visibility: hidden;
top: 300px;
}
</style>
<div id="scroller">
<div id="scrolled"></div>
</div>
<!-- nothing -->
third_party/WebKit/LayoutTests/compositing/background-color/background-color-alpha-expected.html
View file @ 49c0f7c7
......@@ -4,18 +4,12 @@
.green {
width: 100px;
height: 100px;
background-color: rgba(0, 128, 0, 128);
display: block;
background-color: rgba(0, 128, 0, 0.5);
}
.blue {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 128, 128);
display: block;
}
.composited {
transform: translateZ(0);
background-color: rgba(0, 0, 128, 0.5);
}
</style>
</head>
......@@ -25,4 +19,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-alpha-with-opacity-expected.html
View file @ 49c0f7c7
......@@ -4,22 +4,18 @@
.green {
width: 100px;
height: 100px;
background-color: rgba(0, 128, 0, 128);
background-color: rgba(0, 128, 0, 0.5);
opacity: 0.5;
display: block;
}
.blue {
width: 100px;
height: 100px;
background-color: rgba(0, 0, 128, 128);
background-color: rgba(0, 0, 128, 0.5);
opacity: 0.5;
display: block;
transform: translate(50px, 50px);
}
.composited {
-webkit-transform-style: preserve-3d;
}
</style>
</head>
<body>
......@@ -28,4 +24,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-alpha-with-opacity.html
View file @ 49c0f7c7
......@@ -4,14 +4,14 @@
.green {
width: 100px;
height: 100px;
background-color: rgba(0, 128, 0, 128);
background-color: rgba(0, 128, 0, 0.5);
opacity: 0.5;
display: block;
}
.blue {
width: 100px;
height: 100px;
background-color: rgba(0, 0, 128, 128);
background-color: rgba(0, 0, 128, 0.5);
opacity: 0.5;
display: block;
transform: translate(50px, 50px);
......@@ -28,4 +28,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-alpha.html
View file @ 49c0f7c7
......@@ -4,13 +4,13 @@
.green {
width: 100px;
height: 100px;
background-color: rgba(0, 128, 0, 128);
background-color: rgba(0, 128, 0, 0.5);
display: block;
}
.blue {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 128, 128);
background-color: rgba(0, 0, 128, 0.5);
display: block;
}
......@@ -25,4 +25,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-change-to-text-expected.html
View file @ 49c0f7c7
<!DOCTYPE>
<html>
<head>
<style type="text/css" media="screen">
<style>
#background {
width: 200px;
height: 200px;
display: block;
background-color: red;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
display: block;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
......
third_party/WebKit/LayoutTests/compositing/background-color/background-color-change-to-transparent-expected.html
View file @ 49c0f7c7
......@@ -5,18 +5,12 @@
#background {
width: 200px;
height: 200px;
display: block;
background-color: transparent;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
display: block;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
......
third_party/WebKit/LayoutTests/compositing/background-color/background-color-container-expected.html
View file @ 49c0f7c7
......@@ -5,17 +5,11 @@
width: 100px;
height: 100px;
background-color: green;
display: block;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
display: block;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
......@@ -25,4 +19,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-content-clip-expected.html
View file @ 49c0f7c7
......@@ -5,19 +5,13 @@
width: 100px;
height: 100px;
background-color: green;
display: block;
padding: 10px;
padding: 10px;
-webkit-background-clip: content;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
display: block;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
......@@ -27,4 +21,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-content-clip.html
View file @ 49c0f7c7
......@@ -6,7 +6,7 @@
height: 100px;
background-color: green;
display: block;
padding: 10px;
padding: 10px;
-webkit-background-clip: content;
}
.blue {
......@@ -27,4 +27,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-drawn-over-child-expected.html
View file @ 49c0f7c7
......@@ -5,12 +5,10 @@
#backgournd_color_container {
background-color: green;
position: absolute;
transform: translateZ(0);
}
#nested_container {
width: 200px;
height: 200px;
position: relative;
}
#issue {
width: 100px;
......@@ -25,7 +23,6 @@
height: 100px;
position: absolute;
background-color: blue;
transform: translateZ(0);
}
</style>
</head>
......
third_party/WebKit/LayoutTests/compositing/background-color/background-color-padding-change-expected.html
View file @ 49c0f7c7
<!DOCTYPE>
<html>
<head>
<style type="text/css" media="screen">
<style>
#background {
position: relative;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
display: block;
background-color: green;
-webkit-background-clip: content;
}
#content {
width: 100px;
height: 100px;
display: block;
background-color: blue;
}
.composited {
transform: translateZ(0);
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsTextWithPixelResults();
}
function doTest()
{
var bg = document.getElementById("background");
window.setTimeout(function() {
// Change the layer to become background only.
bg.style.padding = "50px";
if (window.testRunner) {
window.setTimeout(function() {
testRunner.notifyDone();
}, 0);
}
}, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<!-- When the test is done, there should only be a green square on the page -->
......
third_party/WebKit/LayoutTests/compositing/background-color/background-color-padding-clip-expected.html
View file @ 49c0f7c7
......@@ -5,19 +5,13 @@
width: 100px;
height: 100px;
background-color: green;
display: block;
padding: 10px;
padding: 10px;
-webkit-background-clip: padding;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
display: block;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
......@@ -27,4 +21,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-padding-clip.html
View file @ 49c0f7c7
......@@ -27,4 +27,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-simple-expected.html
View file @ 49c0f7c7
......@@ -5,15 +5,10 @@
width: 100px;
height: 100px;
background-color: green;
display: block;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
<body>
<div class="green"></div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-text-change-expected.html
View file @ 49c0f7c7
<!DOCTYPE>
<html>
<head>
<style type="text/css" media="screen">
<style>
#background {
width: 200px;
height: 200px;
display: block;
background-color: green;
}
.composited {
transform: translateZ(0);
}
</style>
<script type="text/javascript" charset="utf-8">
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsTextWithPixelResults();
}
function doTest()
{
var bg = document.getElementById("background");
window.setTimeout(function() {
// Change the layer to become background only.
bg.innerHTML = "";
if (window.testRunner) {
window.setTimeout(function() {
testRunner.notifyDone();
}, 0);
}
}, 0);
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<!-- When the test is done, there should only be a green square on the page -->
......
third_party/WebKit/LayoutTests/compositing/background-color/background-color-text-clip-expected.html
View file @ 49c0f7c7
......@@ -5,19 +5,13 @@
width: 100px;
height: 100px;
background-color: green;
display: block;
padding: 10px;
padding: 10px;
-webkit-background-clip: text;
}
.blue {
width: 50px;
height: 50px;
background-color: blue;
display: block;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
......@@ -27,4 +21,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/background-color/background-color-text-clip.html
View file @ 49c0f7c7
......@@ -6,7 +6,7 @@
height: 100px;
background-color: green;
display: block;
padding: 10px;
padding: 10px;
-webkit-background-clip: text;
}
.blue {
......@@ -27,4 +27,4 @@
</div>
</div>
</body>
</html>
\ No newline at end of file
</html>
third_party/WebKit/LayoutTests/compositing/child-transform-layer-rounding-expected.html
View file @ 49c0f7c7
......@@ -23,8 +23,8 @@
height:64px;
left:51px;
top:121px;
border-style:solid;border-width:1px;
transform:translateZ(0);
border-style:solid;
border-width:1px;
}
#container {
......
third_party/WebKit/LayoutTests/compositing/child-transform-layer-rounding.html
View file @ 49c0f7c7
......@@ -27,7 +27,8 @@
height:64px;
left:51px;
top:121px;
border-style:solid;border-width:1px;
border-style:solid;
border-width:1px;
transform:translateZ(0);
}
......
third_party/WebKit/LayoutTests/compositing/child-transform-layer-with-child-clipping-layer-expected.html
View file @ 49c0f7c7
......@@ -10,7 +10,6 @@
.cover {
background: green;
height: 500px;
transform: translateZ(0);
}
</style>
<div class="perspective">
......
third_party/WebKit/LayoutTests/compositing/child-transform-with-anchor-point-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<html>
<head>
<style>
body {
overflow: hidden;
}
#perspective {
-webkit-perspective: 1000px;
position: absolute;
width: 600px;
left: -600px;
}
#transformed {
transform: rotateY(90deg);
-webkit-transform-origin: right;
background: green;
height: 800px;
}
#container {
position: relative;
overflow: hidden;
width: 800px;
height: 600px;
}
</style>
</style>
</head>
<body>
<!-- The green rectangle should be visible. -->
<div id="container">
<div id="perspective">
<div id="transformed"></div>
</div>
</div>
</body>
</html>
<div style="position: absolute; width: 450px; height: 592px; background: green"></div>
third_party/WebKit/LayoutTests/compositing/content-changed-chicken-egg-expected.html
View file @ 49c0f7c7
......@@ -12,17 +12,9 @@
canvas {
background-color: gray;
border: 1px solid black;
transform: translateZ(0);
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsTextWithPixelResults();
if (window.internals) {
window.internals.runtimeFlags.accelerated2dCanvasEnabled = true;
}
function doTest() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
......
third_party/WebKit/LayoutTests/compositing/fixed-background-composited-html-expected.html
View file @ 49c0f7c7
......@@ -3,9 +3,6 @@
<html>
<head>
<style>
html {
transform: translateZ(0);
}
body {
height: 2000px;
background-image: url('resources/simple_image.png');
......
third_party/WebKit/LayoutTests/compositing/fixed-background-negative-z-index-fixed-expected.html
View file @ 49c0f7c7
......@@ -7,12 +7,10 @@
height: 2000px;
background-image: url('resources/simple_image.png');
background-size: 200px 200px;
background-attachment: fixed;
overflow: hidden; /* hide scrollbar */
}
.fixed {
position: fixed;
z-index: -1;
position: absolute;
top: 50px;
left: 50px;
width: 200px;
......@@ -23,7 +21,7 @@
</head>
<body>
<div class="fixed box"></div>
<div class="fixed"></div>
</body>
</html>
third_party/WebKit/LayoutTests/compositing/fixed-position-container-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<style>
#clip {
position: absolute;
overflow: hidden;
#transform {
background-color: blue;
width: 300px;
height: 300px;
position: absolute;
}
#transform {
transform: scale(2, 2);
background-color: blue;
#fixed {
position: absolute;
width: 200px;
height: 200px;
}
#fixed {
position: fixed;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id='clip'>
<div id='transform'>
<div id='fixed'></div>
</div>
<div id='transform'>
<div id='fixed'></div>
</div>
third_party/WebKit/LayoutTests/compositing/geometry/require-own-backing-recalc-order-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<style>
#clipping-repaint-container {
transform: translateZ(0);
overflow: hidden;
position: absolute;
left: 49px;
......@@ -12,7 +11,6 @@
}
#non-repaint-container-compositing-layer {
-webkit-perspective: 1px;
position: absolute;
left: 49px;
top: 49px;
......@@ -31,17 +29,15 @@
}
#compositing-child1 {
transform: translateZ(-1px);
position: absolute;
left: 48px;
top: 48px;
width: 48px;
height: 48px;
border: blue 2px solid;
left: 61px;
top: 61px;
width: 24px;
height: 24px;
border: blue 1px solid;
}
#compositing-child2 {
transform: translateZ(0);
position: absolute;
left: 49px;
top: 49px;
......
third_party/WebKit/LayoutTests/compositing/layer-creation/backing-requirement-changes-expected.html
View file @ 49c0f7c7
......@@ -7,13 +7,11 @@
left: 0px;
height: 300px;
width: 300px;
z-index: 1;
overflow: auto;
background-color: green;
}
#inner {
transform: translateZ(0);
background-color: blue;
}
......@@ -21,7 +19,6 @@
width: 500px;
height: 500px;
background-color: yellow;
transform: translateZ(0);
}
</style>
</head>
......
third_party/WebKit/LayoutTests/compositing/layer-creation/incremental-destruction-expected.html
View file @ 49c0f7c7
......@@ -5,6 +5,6 @@
}
</style>
<div id="target" style="width: 500px; height: 500px; background-color: blue;"></div>
<div style="width: 300px; height: 300px; position: absolute; left: 20px; top: 400px; background-color: purple; z-index:1000">
<div style="width:100px; height:100px; position:relative; left:10px; top:10px; transform:translateZ(0); background-color:yellow"></div>
<div style="width: 300px; height: 300px; position: absolute; left: 20px; top: 400px; background-color: purple">
<div style="width:100px; height:100px; position:relative; left:10px; top:10px; background-color:yellow"></div>
</div>
third_party/WebKit/LayoutTests/compositing/low-dpi-non-stacking-context-scrolled-content-expected.html
View file @ 49c0f7c7
<script src="../resources/run-after-layout-and-paint.js"></script>
<style>
#parent {
height: 300px;
......@@ -20,14 +19,5 @@
<div id="target"class="child"></div>
</div>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
// The target element should be displayed as red, not gray.
runAfterLayoutAndPaint(function() {
target.scrollIntoView(true);
runAfterLayoutAndPaint(function() {
testRunner.notifyDone();
});
});
</script>
\ No newline at end of file
</script>
third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<style>
#root {
transform-style: preserve-3d;
}
#transparent {
overflow: hidden;
width: 100px;
height: 100px;
background: red;
transform: translate3d(0,0,30px);
}
#child1 {
width: 100px;
height: 100px;
background: green;
transform: translate3d(50px,0,-20px);
transform: translate(50px,0);
}
#child2 {
width: 80px;
height: 80px;
background: black;
transform: translate3d(35px,-60px,-30px);
transform: translate(35px,-60px);
}
#sibling {
width: 100px;
height: 100px;
background: blue;
transform: translate3d(25px,-50px,20px);
transform: translate(25px,-50px);
position: relative;
z-index: -1;
}
</style>
<div id="root">
......
third_party/WebKit/LayoutTests/compositing/overflow/composited-scroller-can-be-normal-flow-expected.html
View file @ 49c0f7c7
......@@ -14,9 +14,8 @@
.fixed {
width: 100px;
height: 30px;
position: fixed;
position: absolute;
background: blue;
backface-visibility: hidden;
}
</style>
<script>
......
third_party/WebKit/LayoutTests/compositing/overflow/composited-sticky-element-enclosing-layers-expected.html
View file @ 49c0f7c7
......@@ -4,11 +4,6 @@ onload = function() {
}
</script>
<style>
.composited {
/* Triggers promotion without creating stacking context. */
backface-visibility: hidden;
}
#scroller {
overflow: scroll;
height: 200px;
......@@ -27,8 +22,8 @@ onload = function() {
background: green;
}
</style>
<div id="scroller" class="composited">
<div class="composited container">
<div class="composited relative"></div>
<div id="scroller">
<div class="container">
<div class="relative"></div>
</div>
</div>
third_party/WebKit/LayoutTests/compositing/overflow/composited-sticky-element-enclosing-layers-stacking-context-expected.html
View file @ 49c0f7c7
......@@ -4,11 +4,6 @@ onload = function() {
}
</script>
<style>
.composited {
/* Triggers promotion and creates a stacking context */
will-change: transform;
}
#scroller {
overflow: scroll;
height: 200px;
......@@ -27,8 +22,8 @@ onload = function() {
background: green;
}
</style>
<div id="scroller" class="composited">
<div class="composited container">
<div class="composited relative"></div>
<div id="scroller">
<div class="container">
<div class="relative"></div>
</div>
</div>
third_party/WebKit/LayoutTests/compositing/overflow/composited-sticky-element-expected.html
View file @ 49c0f7c7
......@@ -4,11 +4,6 @@ onload = function() {
}
</script>
<style>
.composited {
/* Triggers promotion without creating stacking context. */
backface-visibility: hidden;
}
#scroller {
background: white;
height: 200px;
......@@ -25,7 +20,7 @@ onload = function() {
height: 2000px;
}
</style>
<div id="scroller" class="composited">
<div class="composited sticky"></div>
<div id="scroller">
<div class="sticky"></div>
<div class="spacer"></div>
</div>
third_party/WebKit/LayoutTests/compositing/overflow/composited-sticky-element-in-composited-ancestor-with-content-offset-expected.html
View file @ 49c0f7c7
......@@ -3,7 +3,6 @@
.container {
width: 300px;
height: 300px;
will-change: transform;
outline: 200px solid grey;
}
......@@ -18,14 +17,10 @@
height: 200px;
top: 0;
}
.composited {
backface-visibility: hidden;
}
</style>
<div class="container">
<div class="composited scroller">
<div class="composited sticky"></div>
<div class="scroller">
<div class="sticky"></div>
</div>
</div>
third_party/WebKit/LayoutTests/compositing/overflow/composited-sticky-element-stacking-context-expected.html
View file @ 49c0f7c7
......@@ -4,11 +4,6 @@ onload = function() {
}
</script>
<style>
.composited {
/* Triggers promotion and creates a stacking context */
will-change: transform;
}
#scroller {
background: white;
height: 200px;
......@@ -25,7 +20,7 @@ onload = function() {
height: 2000px;
}
</style>
<div id="scroller" class="composited">
<div class="composited sticky"></div>
<div id="scroller">
<div class="sticky"></div>
<div class="spacer"></div>
</div>
third_party/WebKit/LayoutTests/compositing/overflow/mixed-composited-nested-sticky-expected.html
View file @ 49c0f7c7
......@@ -34,20 +34,9 @@ body {
</style>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function finishTest() {
onload = function() {
window.scrollTo(0, 200);
if (window.testRunner)
testRunner.notifyDone();
}
window.addEventListener('load', function() {
requestAnimationFrame(function() {
requestAnimationFrame(finishTest);
});
});
</script>
<div class="container">
......
third_party/WebKit/LayoutTests/compositing/overflow/mixed-composited-nested-sticky-overflow-scroller-expected.html
View file @ 49c0f7c7
......@@ -40,20 +40,9 @@ body {
</style>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
function finishTest() {
onload = function() {
document.querySelector('.scroller').scrollTop = 200;
if (window.testRunner)
testRunner.notifyDone();
}
window.addEventListener('load', function() {
requestAnimationFrame(function() {
requestAnimationFrame(finishTest);
});
});
</script>
<div class="scroller">
......
third_party/WebKit/LayoutTests/compositing/overflow/non-reparented-overlay-scrollbars-expected.html
View file @ 49c0f7c7
......@@ -4,13 +4,11 @@
overflow: scroll;
width: 300px;
height: 300px;
position: relative;
z-index: 0;
top: 10px;
}
#fixed {
position: fixed;
position: absolute;
background: blue;
left: 90px;
width: 10px;
......@@ -18,7 +16,6 @@
}
#scrolled {
position: relative;
background: green;
width: 80px;
height: 500px;
......
third_party/WebKit/LayoutTests/compositing/overflow/non-reparented-overlay-scrollbars.html
View file @ 49c0f7c7
......@@ -4,13 +4,11 @@
overflow: scroll;
width: 300px;
height: 300px;
position: relative;
z-index: 0;
top: 10px;
margin-top: 2px;
}
#fixed {
position: fixed;
position: absolute;
background: blue;
left: 90px;
width: 10px;
......@@ -18,17 +16,14 @@
}
#scrolled {
position: relative;
background: green;
width: 80px;
height: 500px;
}
</style>
<script>
if (window.internals) {
if (window.internals)
window.internals.settings.setOverlayScrollbarsEnabled(true);
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
</script>
<div id='scroller'>
<div id='fixed'></div>
......
third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-background-fractional-offset-expected.html
View file @ 49c0f7c7
......@@ -2,10 +2,8 @@
<style>
.layout-container {
width: 210px;
position: relative;
}
.position-container {
position: relative;
width: 202px;
margin-left: auto;
margin-right: auto;
......@@ -16,7 +14,6 @@
width: 50%;
height: 100px;
overflow: scroll;
position: absolute;
}
.spacer {
......
third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-content-fractional-offset-expected.html
View file @ 49c0f7c7
......@@ -2,10 +2,8 @@
<style>
.layout-container {
width: 210px;
position: relative;
}
.position-container {
position: relative;
width: 202px;
margin-left: auto;
margin-right: auto;
......@@ -15,7 +13,6 @@
width: 50%;
height: 100px;
overflow: scroll;
position: absolute;
}
.spacer {
......
third_party/WebKit/LayoutTests/compositing/overflow/reparented-unclipped-overlay-scrollbars-with-offset-from-renderer-expected.html
View file @ 49c0f7c7
......@@ -4,12 +4,11 @@
overflow: scroll;
width: 300px;
height: 300px;
position: relative;
top: 10px;
margin-top: 18px;
}
#fixed {
position: fixed;
position: absolute;
background: blue;
left: 90px;
width: 10px;
......@@ -17,7 +16,6 @@
}
#scrolled {
position: relative;
background: green;
width: 80px;
height: 500px;
......
third_party/WebKit/LayoutTests/compositing/overflow/respect-clip-for-non-composited-scrollers-when-prefering-compositing-over-lcd-text-expected.html
View file @ 49c0f7c7
......@@ -18,7 +18,6 @@
#composited {
width: 10px;
height: 10px;
will-change: transform;
background: green;
border: 2px solid orange;
}
......
third_party/WebKit/LayoutTests/compositing/overflow/scroll-children-do-not-paint-comp-scroll-phase-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<script>
if (window.internals)
internals.settings.setPreferCompositingToLCDTextEnabled(true);
</script>
<div style="overflow: auto; height: 100px;">
<div style="height: 1000px">
<span style="position: relative; z-index: 0">
<span style="position: relative; z-index: 1">Should be visible</span>
</span>
<span>Should be visible</span>
</div>
</div>
third_party/WebKit/LayoutTests/compositing/overflow/transform-should-update-absolute-clip-rects-expected.html
View file @ 49c0f7c7
......@@ -3,37 +3,23 @@
#slidein {
width: 200px;
height: 200px;
transform: translate3d(200px, 0, 0);
transform: translate(200px, 0);
}
#header {
position: relative;
height: 50px;
z-index: 1;
background-color: green;
}
#section {
position: absolute;
overflow: hidden;
top: 0;
width: 200px;
}
#content {
width: 200px;
height: 200px;
transform: translateZ(0);
background-color: blue;
}
</style>
<div id="slidein">
<div id="header">This div should stay in front.</div>
<div id="section">
<div id="content">
This div should stay behind the header div.
</div>
<div id="header">This div should stay in front.</div>
</div>
</div>
third_party/WebKit/LayoutTests/compositing/reorder-z-with-style-expected.html
View file @ 49c0f7c7
......@@ -4,16 +4,14 @@
height: 300px;
width: 300px;
background-color: green;
transform: translateZ(0);
}
#parent {
position: absolute;
left: 400px;
left: 408px;
width: 300px;
height: 300px;
background-color: green;
transform: translateZ(0);
}
</style>
<body>
......
third_party/WebKit/LayoutTests/compositing/squashing/invalidate-new-backing-of-second-unsquashed-layer-expected.html
View file @ 49c0f7c7
<!doctype HTML>
<div style="height: 16px; position: relative; width: 16px; z-index: 0;">
<div style="transform: scale(3); height: 16px; position: relative; width: 16px; z-index: -1; animation: animate .7s infinite">
</div>
<div id="target" style="position: absolute; transition: transform ease .01s; transform: scale(0); width: 18px; height: 16px"></div>
<div style="height: 16px; position: relative; width: 16px">
<div style="transform: scale(3); height: 16px; position: relative; width: 16px">
</div>
</div>
<div id="squashtarget" style="display: inline-block; height: 16px; position: relative; width: 16px; z-index: 0; margin-top: 20px">
<div style=" transform: scale(3); height: 16px; position: relative; width: 16px; z-index: -1"></div>
<div id="squashtarget" style="display: inline-block; height: 16px; position: relative; width: 16px; margin-top: 20px">
<div style=" transform: scale(3); height: 16px; position: relative; width: 16px"></div>
</div>
<div id="squash1" style="display: inline-block; position: relative; width: 16px; z-index: 0; margin-left: 15px">
<div style="transform: scale(3); position: relative; width: 16px; z-index: -1">
</div>
<div id="squash1" style="display: inline-block; position: relative; width: 16px; margin-left: 15px">
<div style="transform: scale(3); position: relative; width: 16px">
</div>
</div>
<div id="squash2" style="overflow: hidden; position: relative;margin-top: 30px; border">
I should not disappear!
......
third_party/WebKit/LayoutTests/compositing/squashing/invalidate-new-backing-of-second-unsquashed-layer.html
View file @ 49c0f7c7
......@@ -25,7 +25,7 @@
</div>
<div id="squash1" style="display: inline-block; position: relative; width: 16px; z-index: 0; margin-left: 15px">
<div style="transform: scale(3); position: relative; width: 16px; z-index: -1">
</div>
</div>
</div>
<div id="squash2" style="overflow: hidden; position: relative;margin-top: 30px; border">
I should not disappear!
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-above-fixed-subpixel-1-expected.html
View file @ 49c0f7c7
......@@ -2,10 +2,6 @@
<html>
<head>
<style>
.composited {
transform: translateZ(0);
}
.background {
position: fixed;
background-color: lightgray;
......@@ -25,14 +21,12 @@
.overlapping {
position: relative;
z-index: 1;
width: 200px;
height: 100.5px;
}
.nonsubpixel {
position: relative;
z-index: 1;
width: 200px;
height: 100px;
}
......@@ -62,7 +56,7 @@ body {
a render layer whose position is non-integral.</p>
</div>
<div class="composited background"> </div>
<div class="background"> </div>
<div id="paragraph-a" class="nonsubpixel cyan"></div>
<div id="paragraph-b" class="overlapping lime"></div>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-above-fixed-subpixel-2-expected.html
View file @ 49c0f7c7
......@@ -2,10 +2,6 @@
<html>
<head>
<style>
.composited {
transform: translateZ(0);
}
.background {
position: fixed;
background-color: lightgray;
......@@ -25,14 +21,12 @@
.overlapping {
position: relative;
z-index: 1;
width: 200px;
height: 100.5px;
}
.nonsubpixel {
position: relative;
z-index: 1;
width: 200px;
height: 100px;
}
......@@ -44,10 +38,6 @@
width: 300px;
}
#testResults {
display: none;
}
body {
margin: 0px;
}
......@@ -63,7 +53,7 @@ body {
render layers at both integral and non-integral positions.</p>
</div>
<div class="composited background"> </div>
<div class="background"> </div>
<div id="paragraph-a" class="overlapping cyan"></div>
<div id="paragraph-b" class="overlapping lime"></div>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-canvas-expected.html
View file @ 49c0f7c7
......@@ -13,7 +13,6 @@ canvas {
height: 100px;
background: green;
position: absolute;
transform: translateZ(0);
}
#overlap {
width: 10px;
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-clipped-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<head>
<style>
.composited {
transform: translatez(0);
}
.box {
width: 100px;
height: 100px;
......@@ -12,7 +8,6 @@
.behind {
position: absolute;
z-index: 1;
top: 100px;
left: 100px;
background-color: blue;
......@@ -20,7 +15,6 @@
.middle {
position: absolute;
z-index: 1;
top: 180px;
left: 180px;
background-color: lime;
......@@ -28,7 +22,6 @@
.middle2 {
position: absolute;
z-index: 1;
top: 260px;
left: 260px;
background-color: magenta;
......@@ -36,7 +29,6 @@
.top {
position: absolute;
z-index: 1;
top: 340px;
left: 340px;
background-color: cyan;
......@@ -58,7 +50,7 @@ div:hover {
</head>
<body>
<div class="clipper">
<div class="composited box behind"></div>
<div class="box behind"></div>
<div class="box middle"></div>
<div class="box middle2"></div>
<div class="box top"></div>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-composited-input-expected.html
View file @ 49c0f7c7
......@@ -8,12 +8,10 @@
.i1 {
top: 100px;
will-change: transform;
}
.i2 {
top: 170px;
will-change: transform;
}
</style>
<div style=" position: relative; width: 400px; height: 400px; overflow: hidden;">
......@@ -21,10 +19,3 @@
<input type="text" class="i1" value="test test test test test test test test"/>
<input type="text" class="i2"/>
</div>
<script>
onload = function () {
if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
};
</script>
third_party/WebKit/LayoutTests/compositing/squashing/squash-onto-nephew-subpixel-1-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<head>
<style>
.composited {
transform: translatez(0);
}
.box {
width: 100px;
height: 100px;
......@@ -12,7 +8,6 @@ transform: translatez(0);
.behind {
position: absolute;
z-index: 1;
top: 100px;
left: 100px;
background-color: blue;
......@@ -20,7 +15,6 @@ transform: translatez(0);
.middle {
position: absolute;
z-index: 1;
top: 15px;
left: 15px;
background-color: lime;
......@@ -28,7 +22,6 @@ transform: translatez(0);
.middle2 {
position: absolute;
z-index: 1;
top: 130.5px;
left: 60px;
background-color: magenta;
......@@ -36,7 +29,6 @@ transform: translatez(0);
.top {
position: absolute;
z-index: 1;
top: 70.5px;
left: 120px;
background-color: cyan;
......@@ -44,7 +36,6 @@ transform: translatez(0);
.container {
position: absolute;
z-index: 1;
top: 25.5px;
left: 25px;
width: 300px;
......@@ -60,7 +51,7 @@ div:hover {
</head>
<body>
<div class="container">
<div class="composited box behind"></div>
<div class="box behind"></div>
<div class="box middle"></div>
</div>
<div class="box middle2"></div>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-onto-nephew-subpixel-2-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<head>
<style>
.composited {
transform: translatez(0);
}
.box {
width: 100px;
height: 100.5px;
......@@ -12,7 +8,6 @@ transform: translatez(0);
.behind {
position: absolute;
z-index: 1;
top: 100px;
left: 100px;
background-color: blue;
......@@ -20,7 +15,6 @@ transform: translatez(0);
.middle {
position: absolute;
z-index: 1;
top: 15px;
left: 15px;
background-color: lime;
......@@ -28,7 +22,6 @@ transform: translatez(0);
.middle2 {
position: absolute;
z-index: 1;
top: 130.5px;
left: 60px;
background-color: magenta;
......@@ -36,7 +29,6 @@ transform: translatez(0);
.top {
position: absolute;
z-index: 1;
top: 70.5px;
left: 120px;
background-color: cyan;
......@@ -44,7 +36,6 @@ transform: translatez(0);
.container {
position: absolute;
z-index: 1;
top: 25.5px;
left: 25px;
width: 300px;
......@@ -60,7 +51,7 @@ div:hover {
</head>
<body>
<div class="container">
<div class="composited box behind"></div>
<div class="box behind"></div>
<div class="box middle"></div>
</div>
<div class="box middle2"></div>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-onto-nephew-subpixel-3-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<head>
<style>
.composited {
transform: translatez(0);
}
.box {
width: 100px;
height: 100px;
......@@ -12,7 +8,6 @@ transform: translatez(0);
.behind {
position: absolute;
z-index: 1;
top: 100.5px;
left: 100px;
background-color: blue;
......@@ -20,7 +15,6 @@ transform: translatez(0);
.middle {
position: absolute;
z-index: 1;
top: 15.5px;
left: 15px;
background-color: lime;
......@@ -28,7 +22,6 @@ transform: translatez(0);
.middle2 {
position: absolute;
z-index: 1;
top: 130.5px;
left: 60px;
background-color: magenta;
......@@ -36,7 +29,6 @@ transform: translatez(0);
.top {
position: absolute;
z-index: 1;
top: 70.5px;
left: 120px;
background-color: cyan;
......@@ -44,7 +36,6 @@ transform: translatez(0);
.container {
position: absolute;
z-index: 1;
top: 25px;
left: 25px;
width: 300px;
......@@ -60,7 +51,7 @@ div:hover {
</head>
<body>
<div class="container">
<div class="composited box behind"></div>
<div class="box behind"></div>
<div class="box middle"></div>
</div>
<div class="box middle2"></div>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-with-ancestor-blending-expected.html
View file @ 49c0f7c7
......@@ -8,7 +8,6 @@
#composited-overlap-child {
background-image: url(resources/blue.png);
will-change: transform;
}
</style>
<script src="resources/squash-with-ancestor-property.js"></script>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-with-ancestor-filter-expected.html
View file @ 49c0f7c7
......@@ -5,9 +5,6 @@
#ancestor {
-webkit-filter: hue-rotate(50deg);
}
#composited-overlap-child {
will-change: transform;
}
</style>
<script src="resources/squash-with-ancestor-property.js"></script>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-with-ancestor-mask-expected.html
View file @ 49c0f7c7
......@@ -5,9 +5,6 @@
#ancestor {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));
}
#composited-overlap-child {
will-change: transform;
}
</style>
<script src="resources/squash-with-ancestor-property.js"></script>
<script>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-with-ancestor-opacity-expected.html
View file @ 49c0f7c7
......@@ -5,9 +5,6 @@
#ancestor {
opacity: 0.8;
}
#composited-overlap-child {
will-change: transform;
}
</style>
<script src="resources/squash-with-ancestor-property.js"></script>
......
third_party/WebKit/LayoutTests/compositing/squashing/squash-with-ancestor-reflection-expected.html
View file @ 49c0f7c7
......@@ -5,10 +5,6 @@
#ancestor {
-webkit-box-reflect: below;
}
#composited-overlap-child {
will-change: transform;
}
</style>
<script src="resources/squash-with-ancestor-property.js"></script>
<script>
......
third_party/WebKit/LayoutTests/compositing/squashing/squashed-clip-parent-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<style>
#squashed {
position:fixed;
position:absolute;
left: 0;
top: 0;
right: 0;
......
third_party/WebKit/LayoutTests/compositing/squashing/squashing-does-not-stop-transform-propagation-expected.html
View file @ 49c0f7c7
......@@ -23,9 +23,6 @@ body {
background: blue;
left: 100px;
top: 100px;
/* This causes fg to be separately composited, removing the need for the
squashing containment layer. Should have no visible effect. */
will-change: transform;
}
#bg {
......@@ -41,10 +38,6 @@ body {
background: white;
}
</style>
<script>
if (window.internals)
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
</script>
<div id="container">
<div class="scrolled" id="bg"></div>
<div class="scrolled" id="fg"></div>
......
third_party/WebKit/LayoutTests/compositing/squashing/squashing-inside-perspective-with-reparented-scrolling-expected.html
View file @ 49c0f7c7
......@@ -13,7 +13,7 @@
}
#fixed {
position: fixed;
position: absolute;
background: blue;
left: 90px;
width: 10px;
......@@ -21,22 +21,16 @@
}
#scrolled {
position: relative;
background: green;
width: 80px;
height: 500px;
}
</style>
<div style="z-index: 1; position: absolute"></div>
<div style="z-index: 0; perspective: 1000px; position: absolute;">
<div id='scroller'>
<div id='fixed'></div>
<div id='scrolled'></div>
</div>
<div id='scroller'>
<div id='fixed'></div>
<div id='scrolled'></div>
</div>
<script>
if (window.internals) {
if (window.internals)
window.internals.settings.setOverlayScrollbarsEnabled(true);
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
</script>
third_party/WebKit/LayoutTests/compositing/squashing/squashing-into-ancestor-painted-layer-expected.html
View file @ 49c0f7c7
<!DOCTYPE HTML>
<style>
body {
transform: translateZ(0);
}
#overlapper {
width: 400px;
height: 400px;
left: 200px;
left: 208px;
background: gray;
position: absolute;
transform: translateZ(0);
}
#container {
-webkit-perspective: 1400px;
position: absolute;
width: 180px;
height: 180px;
......@@ -26,7 +21,6 @@ body {
left: 200px;
background: green;
position: absolute;
transform: translateZ(10px);
visibility: hidden;
}
......
third_party/WebKit/LayoutTests/compositing/squashing/transform-squashed-owner-expected.html
View file @ 49c0f7c7
......@@ -2,10 +2,6 @@
<html>
<head>
<style>
.set {
position: absolute;
top: 8px;
}
.box {
height: 100px;
width: 100px;
......@@ -18,16 +14,14 @@
position: absolute;
left: 16px;
}
.composited {
transform: translateZ(0px);
}
.rotated { rotate(10deg);
.rotated {
transform: rotate(10deg);
}
</style>
</head>
<body>
<!-- This div will be the "owner" of the squashing layer -->
<div class="composited rotated box"></div>
<div class="rotated box"></div>
<div id="target" class="squashed" style="top: 4px"></div>
<div class="squashed" style="top: 54px"></div>
</body>
......
third_party/WebKit/LayoutTests/compositing/squashing/transform-squashed-owner.html
View file @ 49c0f7c7
......@@ -19,7 +19,7 @@
left: 16px;
}
.rotated {
rotate(10deg);
transform: rotate(10deg);
}
</style>
</head>
......
third_party/WebKit/LayoutTests/compositing/squashing/universal-accelerated-overflow-scrolling-expected.html
View file @ 49c0f7c7
......@@ -16,9 +16,8 @@
}
.fixed {
position: fixed;
position: absolute;
background: blue;
z-index: 1;
left: 80px;
top: 80px;
}
......@@ -29,10 +28,6 @@
}
</style>
<script>
if (window.internals) {
window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
function doTest() {
var container = document.getElementById("container");
container.scrollTop = container.scrollHeight;
......@@ -43,7 +38,6 @@
</head>
<body>
<div id="container">
<div class="fixed card"></div>
<div class="scrolled card"></div>
<div class="scrolled card"></div>
<div class="scrolled card"></div>
......@@ -56,6 +50,7 @@
<div class="scrolled card"></div>
<div class="scrolled card"></div>
<div class="scrolled card"></div>
<div class="fixed card"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/compositing/squashing/visibility-composited-squashing-expected.html
View file @ 49c0f7c7
......@@ -18,9 +18,6 @@
position: absolute;
left: 16px;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
......@@ -29,14 +26,12 @@
<body>
<div class="set">
<div class="box"></div>
<div class="squashed hidden" style="top: 4px"></div>
<div id="target1" class="squashed visible" style="top: 54px"></div>
</div>
<div class="set" style="top: 116px">
<div class="box"></div>
<div id="target2" class="squashed visible" style="top: 4px"></div>
<div class="squashed hidden" style="top: 54px"></div>
</div>
</body>
</html>
third_party/WebKit/LayoutTests/compositing/transitions/transform-on-large-layer-expected.html
View file @ 49c0f7c7
......@@ -4,18 +4,9 @@
<title>Animating transform on large tiled layer.</title>
<style type="text/css">
#box {
display: block;
width: 1000px;
height: 2000px;
background-color: green;
transform: translate3d(0, -1000px, 0);
}
#sandbox {
height: 1000px;
width: 1000px;
background-color: red;
overflow: hidden;
background-color: green;
}
</style>
<script type="text/javascript">
......@@ -38,8 +29,6 @@
<div id=description>
The test passes if the box below turns green.
</div>
<div id=sandbox>
<div id="box"><font style="opacity:0">ABC</font></div>
</div>
<div id="box"><font style="opacity:0">ABC</font></div>
</body>
</html>
third_party/WebKit/LayoutTests/compositing/video/video-controls-layer-creation-squashing-expected.html
View file @ 49c0f7c7
......@@ -3,14 +3,12 @@
<head>
<style>
div {
transform:translateZ(0);
position: absolute;
top: 100px;
left: 0px;
width: 300px;
height: 300px;
background-color: green;
z-index: 2;
}
video {
position: absolute;
......@@ -18,7 +16,6 @@
left: 0px;
width: 272px;
height: 153px;
z-index: 3;
}
</style>
</head>
......@@ -38,12 +35,11 @@ function endTest() {
}
</script>
<body onload="runTest()">
<!-- this div is beneath the video in a stacking context and should through the video into compositing due to overlap -->
<div></div>
<!-- video controls should appear in their own layer -->
<video controls>
</video>
<!-- this div is beneath the video in a stacking context and should through the video into compositing due to overlap -->
<div></div>
</body>
</html>
third_party/WebKit/LayoutTests/compositing/webgl/webgl-with-accelerated-background-color-expected.html
View file @ 49c0f7c7
......@@ -2,34 +2,22 @@
<html>
<head>
<style>
#background {
width: 200px;
height: 200px;
display: block;
}
#canvas {
width: 200px;
height: 200px;
background-color: red;
display: block;
}
.blue {
width: 50px;
height: 50px;
background-color: rgba(0, 0, 255, 0.5);
display: block;
top: -50px;
position: relative;
}
.composited {
transform: translateZ(0);
}
</style>
</head>
<body>
<div id="background">
<div id="canvas" class="composited"></div>
<div class="blue composited"></div>
</div>
<div id="canvas"></div>
<div class="blue"></div>
</body>
</html>
third_party/WebKit/LayoutTests/compositing/will-change/neutral-keyframe-not-decomposed-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<style>
#target {
border-left: solid;
border-top: solid;
transform: rotate(180deg);
border-right: solid;
border-bottom: solid;
width: 100px;
height: 100px;
margin: 50px;
......
third_party/WebKit/LayoutTests/compositing/will-change/will-change-preserve-backface-visibility-expected.html
View file @ 49c0f7c7
......@@ -2,58 +2,18 @@
<html>
<head>
<style>
.list {
height: 200px;
position: relative;
overflow: auto;
}
.will-change {
will-change: transform;
backface-visibility: hidden;
}
.flip-container, .front, .back {
-webkit-perspective: 1000;
.back {
will-change: transform;
width: 320px;
height: 427px;
}
.front, .back {
backface-visibility: hidden;
transition: 0.0s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(180deg);
}
.back {
background: lightblue;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="flip-container">
<div class="front">
<div class="list">
<div style="height: 82px; left: 0px; position: absolute; top: 0px; width: 100%;"></div>
<div style="height: 82px; left: 0px; position: absolute; top: 164px; width: 100%;"></div>
</div>
</div>
<div class="back">
</div>
</div>
<div class="back"></div>
<p>This test verifies that "will-change" preserves the backface-visibility for
scrollbar.</p>
</body>
......
third_party/WebKit/LayoutTests/paint/invalidation/compositing/background-attachment-local-equivalent-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<style>
#container {
overflow: hidden;
will-change: transform;
width: 400px;
height: 400px;
background-attachment: local;
background-color: blue;
}
#child {
height: 500px;
}
</style>
<div id="container">
<div id="child"></div>
</div>
<script src="../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
child.style.height = '2000px';
container.scrollTop = 2000;
}
onload = runRepaintAndPixelTest;
</script>
<div id="container"></div>
third_party/WebKit/LayoutTests/paint/invalidation/compositing/clipped-layer-size-change-expected.html
View file @ 49c0f7c7
......@@ -9,11 +9,11 @@
overflow: hidden;
border: 1px solid black;
}
.scroll-content {
height: 600px;
}
.inner {
position: relative;
width: 150px;
......@@ -23,11 +23,10 @@
box-sizing: border-box;
border: 40px solid black;
}
.composited {
height: 50px;
width: 100px;
transform: translateZ(0);
}
</style>
</head>
......
third_party/WebKit/LayoutTests/paint/invalidation/compositing/clipped-layer-size-change.html
View file @ 49c0f7c7
......@@ -9,11 +9,11 @@
overflow: hidden;
border: 1px solid black;
}
.scroll-content {
height: 600px;
}
.inner {
position: relative;
width: 150px;
......@@ -23,7 +23,7 @@
box-sizing: border-box;
border: 40px solid black;
}
.composited {
height: 150px;
width: 100px;
......
third_party/WebKit/LayoutTests/paint/invalidation/compositing/compositing-reason-removed-expected.html
View file @ 49c0f7c7
......@@ -4,7 +4,6 @@
background-color: blue;
width: 30px;
height: 30px;
position: relative;
}
</style>
<div id="square"></div>
third_party/WebKit/LayoutTests/paint/invalidation/compositing/iframe-clip-removed-expected.html
View file @ 49c0f7c7
......@@ -4,29 +4,14 @@
width: 400px;
height: 500px;
background-color: blue;
position: relative;
}
#scroller {
height: 200px;
width: 300px;
position: absolute;
overflow: scroll;
}
#clip {
position: absolute;
}
</style>
<script>
if (window.testRunner && window.internals) {
internals.settings.setPreferCompositingToLCDTextEnabled(true);
}
</script>
<div id="scroller">
<div id="clip">
<iframe id="subframe"></iframe>
</div>
<iframe id="subframe"></iframe>
</div>
third_party/WebKit/LayoutTests/paint/invalidation/compositing/repaint-via-layout-offset-expected.html
View file @ 49c0f7c7
<!DOCTYPE html>
<style>
#container {
position: absolute;
z-index: 0;
left: 50px;
top: 50px;
}
.child {
position: absolute;
width: 40px;
height: 40px;
background-color: red;
}
.embiggen {
width: 50px;
height: 50px;
background-color: green;
}
</style>
<div style="width:200px; height:200px; background-color: lightblue"></div>
<div id="container">
<span class="child"></span>
<span class="child embiggen"></span>
</div>
<div style="position: absolute; top: 50px; left: 50px; width: 50px; height: 50px; background-color: green"></div>
third_party/WebKit/LayoutTests/paint/invalidation/compositing/squashing-inside-preserve-3d-element-expected.html
View file @ 49c0f7c7
<!doctype html>
<div style="transform-style: preserve-3d">
<div style="width: 100px; height: 100px; background:lightgray; transform: translateZ(0)"></div>
<div id="target" style="position: absolute; top: 20px; left: 20px; height: 100px; width: 100px; background:red"></div>
</div>
<div style="width: 100px; height: 100px; background:lightgray"></div>
<div style="position: absolute; top: 28px; left: 28px; height: 100px; width: 100px; background:red"></div>
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