121 lines
3.7 KiB
HTML
121 lines
3.7 KiB
HTML
<!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/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>
|