backface-visibility-hidden-003.html (1022B)
1 <!DOCTYPE html> 2 <title>backface visibility: hidden creates containing block and stacking context when participating in a 3D rendering context</title> 3 <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> 4 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 5 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> 6 <link rel="match" href="backface-visibility-hidden-003-ref.html"> 7 8 <p>The test passes if there is a green rectangle and no red.</p> 9 <style> 10 .outer { 11 transform-style: preserve-3d; 12 width: 100px; 13 height: 100px; 14 background-color: red; 15 } 16 17 .inner { 18 backface-visibility: hidden; 19 } 20 21 .positioned { 22 position: absolute; 23 top: -100px; 24 z-index: -1; 25 width: 100px; 26 height: 100px; 27 background-color: green; 28 } 29 30 .sibling { 31 width: 100px; 32 height: 100px; 33 background-color: blue; 34 } 35 36 </style> 37 38 <div class="outer"> 39 <div class="sibling"></div> 40 <div class="inner"> 41 <div class="positioned"></div> 42 </div> 43 </div>