| <!DOCTYPE HTML> |
| <link rel="stylesheet" href="resources/blending-style.css"> |
| |
| <style> |
| .parent { |
| 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" style="transform-style: preserve-3d"> |
| <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 difference" style="transform-style: preserve-3d"> |
| <div id="blending-with-transform-style-preserve-3d" class="box child"></div> |
| </div> |
| |
| <div class="parent box difference" style="transform-style: flat"> |
| <div id="blending-with-transform-style-flat" 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('blending-with-transform-style-preserve-3d')", "preserve-3d"); |
| shouldBeEqualToString("parentNodeTransformStyle('blending-with-transform-style-flat')", "flat"); |
| |
| shouldNotBe("getBoundingClientWidth('transform-style-preserve-3d')", "getBoundingClientWidth('transform-style-flat')"); |
| shouldBe("getBoundingClientWidth('transform-style-flat')", "getBoundingClientWidth('blending-with-transform-style-flat')"); |
| shouldBe("getBoundingClientWidth('transform-style-flat')", "getBoundingClientWidth('blending-with-transform-style-preserve-3d')"); |
| </script> |
