preserve-3d-flat-grouping-properties.html

<!doctype HTML>
<link rel="author" title="Chris Harrelson" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#grouping-property-values">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>
  .testContainer div {
    /* Note: .testContainer is just here to prevent this rule from squishing
       the dynamically-generated human-readable divs that show this test's
       pass/fail results. */
    width: 200px;
    height: 200px;
  }
  .parent {
    transform-style: preserve-3d;
    transform: rotateY(45deg)
  }

  .child {
    transform: rotateY(45deg);
    background: lightblue
  }
</style>

<div class=testContainer>
  <div class=parent>
    <div id=nonflat class=child></div>
  </div>

  <div class=parent style="opacity: 0.5">
    <div id=opacity class=child></div>
  </div>

  <div class=parent style="overflow: hidden">
    <div id=overflowClip class=child></div>
  </div>

  <div class=parent style="filter: invert(0)">
    <div id=filter class=child></div>
  </div>

  <div class=parent style="-webkit-backdrop-filter: invert(0); backdrop-filter: invert(0)">
    <div id=backdropFilter class=child></div>
  </div>

  <div class=parent style="mix-blend-mode: multiply;">
    <div id=mixBlendMode class=child></div>
  </div>

  <div class=parent style="clip: rect(1px, 2px, 3px, 4px); position: absolute">
    <div id=cssClip class=child></div>
  </div>

  <div class=parent style="clip-path: circle(40%)">
    <div id=clipPath class=child></div>
  </div>

  <div class=parent style="isolation: isolate">
    <div id=isolation class=child></div>
  </div>

  <div class=parent style="-webkit-mask:linear-gradient(black,transparent);
                           mask:linear-gradient(black,transparent)">
    <div id=mask class=child></div>
  </div>

  <div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden">
    <div id=absoluteUnderGrouping style="position: absolute">
    </div>
  </div>

  <div id=parentWithoutGrouping style="transform-style: preserve-3d">
    <div id=absoluteNotUnderGrouping style="position: absolute">
    </div>
  </div>
</div>

<script>
  nonflatWidth = nonflat.getBoundingClientRect().width;

  test(function() {
    assert_equals(nonflat.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element not flattened");

  test(function() {
    assert_not_equals(opacity.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to opacity");

  test(function() {
    assert_not_equals(overflowClip.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to overflow clip");

  test(function() {
    assert_not_equals(filter.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to filter");

  test(function() {
    assert_not_equals(backdropFilter.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to backdrop-filter");

  test(function() {
    assert_not_equals(mixBlendMode.getBoundingClientRect().width), nonflatWidth;
  }, "Preserve-3d element flattened due to mix-blend-mode");

  test(function() {
    assert_not_equals(cssClip.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to clip CSS");

  test(function() {
    assert_not_equals(clipPath.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to clip-path");

  test(function() {
    assert_not_equals(isolation.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to isolation");

  test(function() {
    assert_not_equals(mask.getBoundingClientRect().width, nonflatWidth);
  }, "Preserve-3d element flattened due to mask");
</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-transforms/preserve-3d-flat-grouping-properties.html
