preserve-3d-flat-grouping-properties.html (3811B)
1 <!doctype HTML> 2 <link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#grouping-property-values"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 .testContainer div { 9 /* Note: .testContainer is just here to prevent this rule from squishing 10 the dynamically-generated human-readable divs that show this test's 11 pass/fail results. */ 12 width: 200px; 13 height: 200px; 14 } 15 .parent { 16 transform-style: preserve-3d; 17 transform: rotateY(45deg) 18 } 19 20 .child { 21 transform: rotateY(45deg); 22 background: lightblue 23 } 24 </style> 25 26 <div class=testContainer> 27 <div class=parent> 28 <div id=nonflat class=child></div> 29 </div> 30 31 <div class=parent style="opacity: 0.5"> 32 <div id=opacity class=child></div> 33 </div> 34 35 <div class=parent style="overflow: hidden"> 36 <div id=overflowClip class=child></div> 37 </div> 38 39 <div class=parent style="filter: invert(0)"> 40 <div id=filter class=child></div> 41 </div> 42 43 <div class=parent style="-webkit-backdrop-filter: invert(0); backdrop-filter: invert(0)"> 44 <div id=backdropFilter class=child></div> 45 </div> 46 47 <div class=parent style="mix-blend-mode: multiply;"> 48 <div id=mixBlendMode class=child></div> 49 </div> 50 51 <div class=parent style="clip: rect(1px, 2px, 3px, 4px); position: absolute"> 52 <div id=cssClip class=child></div> 53 </div> 54 55 <div class=parent style="clip-path: circle(40%)"> 56 <div id=clipPath class=child></div> 57 </div> 58 59 <div class=parent style="isolation: isolate"> 60 <div id=isolation class=child></div> 61 </div> 62 63 <div class=parent style="-webkit-mask:linear-gradient(black,transparent); 64 mask:linear-gradient(black,transparent)"> 65 <div id=mask class=child></div> 66 </div> 67 68 <div id=parentWithGrouping style="transform-style: preserve-3d; overflow: hidden"> 69 <div id=absoluteUnderGrouping style="position: absolute"> 70 </div> 71 </div> 72 73 <div id=parentWithoutGrouping style="transform-style: preserve-3d"> 74 <div id=absoluteNotUnderGrouping style="position: absolute"> 75 </div> 76 </div> 77 </div> 78 79 <script> 80 nonflatWidth = nonflat.getBoundingClientRect().width; 81 82 test(function() { 83 assert_equals(nonflat.getBoundingClientRect().width, nonflatWidth); 84 }, "Preserve-3d element not flattened"); 85 86 test(function() { 87 assert_not_equals(opacity.getBoundingClientRect().width, nonflatWidth); 88 }, "Preserve-3d element flattened due to opacity"); 89 90 test(function() { 91 assert_not_equals(overflowClip.getBoundingClientRect().width, nonflatWidth); 92 }, "Preserve-3d element flattened due to overflow clip"); 93 94 test(function() { 95 assert_not_equals(filter.getBoundingClientRect().width, nonflatWidth); 96 }, "Preserve-3d element flattened due to filter"); 97 98 test(function() { 99 assert_not_equals(backdropFilter.getBoundingClientRect().width, nonflatWidth); 100 }, "Preserve-3d element flattened due to backdrop-filter"); 101 102 test(function() { 103 assert_not_equals(mixBlendMode.getBoundingClientRect().width), nonflatWidth; 104 }, "Preserve-3d element flattened due to mix-blend-mode"); 105 106 test(function() { 107 assert_not_equals(cssClip.getBoundingClientRect().width, nonflatWidth); 108 }, "Preserve-3d element flattened due to clip CSS"); 109 110 test(function() { 111 assert_not_equals(clipPath.getBoundingClientRect().width, nonflatWidth); 112 }, "Preserve-3d element flattened due to clip-path"); 113 114 test(function() { 115 assert_not_equals(isolation.getBoundingClientRect().width, nonflatWidth); 116 }, "Preserve-3d element flattened due to isolation"); 117 118 test(function() { 119 assert_not_equals(mask.getBoundingClientRect().width, nonflatWidth); 120 }, "Preserve-3d element flattened due to mask"); 121 </script>