1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
<!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>
|
