forked from mirrors/gecko-dev
2e68413602
Automatic update from web-platform-tests Fix wrong backface visibility of composited layer under 3d transforms In blink: - Change the condition in PaintPropertyTreeBuilder for inheriting parent backface visibility. Now a transform node inherits parent backface visibility if there is the parent doesn't preserve 3d and the current LayoutObject doesn't have 3d transform properties. This is based on dbaron@'s crrev.com/c/4917284. - Let TransformPaintPropertyNode::DelegatesToParentForBackface() reflect the backface visibility inheritance status, instead of the original State::delegates_to_parent_for_backface flag which is for scroll translation node only. In cc: - draw_property_utils functions related to backface visibility are changed to support TransformNode::delegates_to_parent_for_backface set on multiple levels of transform nodes. The blink changes are behind feature BackfaceVisibilityNewInheritance (enabled by default). When the feature is not enabled, the cc change has no effect because TransformNode::delegates_to_parent_for_backface won't be set on both a parent node and a child node. Bug: 954591 Change-Id: I39e8e46ebd053430368d3e6214a970dfce0c4940 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4935628 Reviewed-by: David Baron <dbaron@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#1211704} -- wpt-commits: ffc4e0e934fe222abc3979440ae1f9b79667c754 wpt-pr: 42536
53 lines
1.5 KiB
HTML
53 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html class=reftest-wait>
|
|
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility">
|
|
<link rel="match" href="backface-visibility-hidden-animated-ref.html">
|
|
<style>
|
|
@keyframes show-backface {
|
|
0% { transform: rotateY(60deg); }
|
|
0.01% { transform: rotateY(180deg); }
|
|
100% { transform: rotateY(180deg); }
|
|
}
|
|
|
|
.flip {
|
|
animation: 10s linear 0s infinite forwards show-backface;
|
|
height: 100px;
|
|
width: 100px;
|
|
transform: rotateY(60deg);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
#back {
|
|
background: lightblue;
|
|
transform: rotateY(180deg);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 200px;
|
|
height: 200px;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
#posabs {
|
|
position: absolute;
|
|
/* This is the only difference from backface-visibility-hidden-animated-001.html. */
|
|
will-change: transform;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: yellow;
|
|
}
|
|
</style>
|
|
<div id="flip">
|
|
<div id="back">
|
|
<i id="posabs">Text</i>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
onload = () => requestAnimationFrame(() => requestAnimationFrame(() => {
|
|
flip.classList.add("flip");
|
|
requestAnimationFrame(() => requestAnimationFrame(() =>
|
|
document.documentElement.classList.remove("reftest-wait")));
|
|
}));
|
|
</script>
|
|
</html>
|