opacity-forces-flatten.html | Explore in Territory

<!DOCTYPE html>
<style>
#root {
    transform-style: preserve-3d;
}

#transparent {
    opacity: 0.5;
    width: 100px;
    height: 100px;
    background: red;
    transform: translate3d(0,0,30px);
    transform-style: preserve-3d;
}

#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 non-initial value of opacity 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 transparent element.

chromium/third_party/blink/web_tests/transforms/opacity-forces-flatten.html