<!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>
