| <!DOCTYPE HTML> |
| <style> |
| .box { |
| width: 100px; |
| height: 100px; |
| } |
| .parent { |
| transform-style: preserve-3d; |
| transform: rotateY(45deg) |
| } |
| .child { |
| transform: rotateY(45deg); |
| background: lightblue |
| } |
| </style> |
| |
| <p>Test that an element with mix-blend-mode other than normal forces the used value of transform-style to flat, but not the computed value..</p> |
| |
| <div class="parent box"> |
| <div id="transform-style-preserve-3d" class="box child"></div> |
| </div> |
| |
| <div class="parent box" style="transform-style: flat"> |
| <div id="transform-style-flat" class="box child"></div> |
| </div> |
| |
| <div class="parent box" style="overflow: hidden; transform-style: flat"> |
| <div id="overflow-hidden-with-transform-style-flat" class="box child"></div> |
| </div> |
| |
| <div class="parent box" style="overflow: hidden;"> |
| <div id="overflow-hidden-with-transform-style-preserve-3d" class="box child"></div> |
| </div> |
| |
| <script src="../resources/js-test.js"></script> |
| <script> |
| function parentNodeTransformStyle(id) { |
| return getComputedStyle(document.getElementById(id).parentNode).transformStyle; |
| } |
| |
| function getBoundingClientWidth(id) { |
| return document.getElementById(id).getBoundingClientRect().width; |
| } |
| |
| shouldBeEqualToString("parentNodeTransformStyle('transform-style-preserve-3d')", "preserve-3d"); |
| shouldBeEqualToString("parentNodeTransformStyle('transform-style-flat')", "flat"); |
| shouldBeEqualToString("parentNodeTransformStyle('overflow-hidden-with-transform-style-preserve-3d')", "preserve-3d"); |
| shouldBeEqualToString("parentNodeTransformStyle('overflow-hidden-with-transform-style-flat')", "flat"); |
| |
| shouldNotBe("getBoundingClientWidth('transform-style-preserve-3d')", "getBoundingClientWidth('transform-style-flat')"); |
| shouldBe("getBoundingClientWidth('overflow-hidden-with-transform-style-flat')", "getBoundingClientWidth('transform-style-flat')"); |
| shouldBe("getBoundingClientWidth('overflow-hidden-with-transform-style-preserve-3d')", "getBoundingClientWidth('transform-style-flat')"); |
| </script> |
