<!doctype HTML>
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#grouping-property-values">
<script src="../../resources/js-test-pre.js"></script>

<style>
  div {
    width: 200px;
    height: 200px;
  }
  .parent {
    transform-style: preserve-3d;
    transform: rotateY(45deg)
  }

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

<div class=parent>
  <div id=nonflat class=child></div>
</div>
<div class=parent style="-webkit-mask-box-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) 75 75 75 75 / auto / calc(100px) 0;">
  <div id="webkit-mask-box-image" class=child></div>
</div>

<div class=parent style="-webkit-mask-box-image-source: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);">
  <div id="webkit-mask-box-image-source" class=child></div>
</div>

<script>
  var nonflatWidth = nonflat.getBoundingClientRect().width;
  shouldBe("nonflat.getBoundingClientRect().width", "nonflatWidth");
  shouldNotBe("document.getElementById('webkit-mask-box-image').getBoundingClientRect().width", "nonflatWidth");
  shouldNotBe("document.getElementById('webkit-mask-box-image-source').getBoundingClientRect().width", "nonflatWidth");
</script>

<script src="../../resources/js-test-post.js"></script>

