forked from mirrors/gecko-dev
6fc5612bb5
Automatic update from web-platform-tests Set 3D sorting context on transform tree nodes regardless of type. This sets the 3D sorting context on transform tree nodes regardless of the type of transform tree node. It might still be set for only some of the transform tree nodes generated by an element because of the relative positions of those transform tree nodes (in particular, whether they're ancestors or descendants of the transform tree node generated for the element's transform). This fixes the rendering in some cases where a trivial 3D transform was being decomposited, leaving the leafmost transform tree node associated with an element's border box context being a type of transform tree node that didn't have the 3D sorting context set, which would in turn associate that lack of 3D sorting context with the cc::Layer and the quads it generates. This is one of the changes described in more detail in https://docs.google.com/document/d/1Up6NwhX0lWhASPCa0gADbV3kvEFGezbDxotAgKzfSUQ/edit Fixed: 1189428 Change-Id: I22361ba743e554f861bda30a301c9307c494aa2c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2852070 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/master@{#877325} -- wpt-commits: cffbf73fa32478b98657ac988af5b9f03e695392 wpt-pr: 28707
39 lines
664 B
HTML
39 lines
664 B
HTML
<!DOCTYPE HTML>
|
|
<title>CSS Test Reference (Transforms): position:sticky on an element in a preserve-3d scene</title>
|
|
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
|
<link rel="author" title="Google" href="http://www.google.com/">
|
|
|
|
<style>
|
|
|
|
div, img {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
#outer {
|
|
transform-style: preserve-3d;
|
|
perspective: 300px;
|
|
}
|
|
|
|
#middle {
|
|
transform-style: preserve-3d;
|
|
position: relative;
|
|
background: aqua;
|
|
}
|
|
|
|
#inner2 {
|
|
background: olive;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: rotateX(30deg);
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="outer">
|
|
<div id="middle">
|
|
<div id="inner2">
|
|
</div>
|
|
</div>
|
|
</div>
|