third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html - Issue 2065233002: Force flattening for elements with non-initial value of opacity

Unified Diff: third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html

Issue 2065233002: Force flattening for elements with non-initial value of opacity (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix assert. (overflow needs to be adjusted prior to querying used transform-style) Created 4 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/compositing/geometry/preserve-3d-switching.html ('k') | third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style-expected.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html

diff --git a/third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html b/third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html

index c31840db99e2caeca7798cb12763ce9addfcf8cb..e0a224298f760d2ac85f36f1d855c9f23d4bac2a 100644

--- a/third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html

+++ b/third_party/WebKit/LayoutTests/compositing/overflow-trumps-transform-style.html

@@ -1,36 +1,46 @@

<!DOCTYPE html>

+<style>

+#root {

+ transform-style: preserve-3d;

-<html>

-<head>

- <style>

- .box {

- height: 100px;

- width: 100px;

- margin: 10px;

- background-color: blue;

- }

- </style>

- <script>

- if (window.testRunner)

- testRunner.dumpAsText();

+#transparent {

+ overflow: hidden;

+ width: 100px;

+ height: 100px;

+ background: red;

+ transform: translate3d(0,0,30px);

+ transform-style: preserve-3d;

- function dumpResults()

- {

- var results = document.getElementById('layers');

- // Check the computed value.

- results.innerText = window.getComputedStyle(document.getElementById('box1')).webkitTransformStyle + '\n';

- results.innerText += window.getComputedStyle(document.getElementById('box2')).webkitTransformStyle + '\n';

- if (window.testRunner)

- results.innerText += window.internals.layerTreeAsText(document);

- }

- window.addEventListener('load', dumpResults, false);

- </script>

-</head>

-<body>

-<div class="box" id="box1" style="transform: translateZ(1px); -webkit-transform-style: preserve-3d"></div>

-<div class="box" id="box2" style="transform: translateZ(1px); -webkit-transform-style: preserve-3d; overflow: hidden"></div>

-<pre id="layers">Layer tree goes here in DRT</pre>

-</body>

-</html>

+#child1 {

+ width: 100px;

+ height: 100px;

+ background: green;

+ transform: translate3d(50px,0,-20px);

+#child2 {

+ width: 80px;

+ height: 80px;

+ background: black;

+ transform: translate3d(35px,-60px,-30px);

+#sibling {

+ width: 100px;

+ height: 100px;

+ background: blue;

+ transform: translate3d(25px,-50px,20px);

+</style>

+<div id="root">

+ <div id="transparent">

+ <div id="child1"></div>

+ <div id="child2"></div>

+ </div>

+ <div id="sibling"></div>

+</div>

+The purpose of this test is to verify that overflow clipping forces the used value of

+transform-style to be flat. The rendered result should be the same as if

+transform-style:preserve-3d was not specified on the clipping element.