backface-visibility-hidden-005.html (971B)
1 <!DOCTYPE html> 2 <title>backface visibility: hidden creates containing block and stacking context when transformed</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 .background { 11 width: 100px; 12 height: 100px; 13 background-color: green; 14 } 15 16 .flipper { 17 backface-visibility:hidden; 18 transform: rotateY(180deg); 19 width: 100px; 20 top: -100px; 21 margin-top: -100px; 22 } 23 24 .scroll { 25 overflow-y: scroll; 26 width: 100px; 27 height: 100px; 28 } 29 30 .inner { 31 height: 900px; 32 background: red; 33 } 34 35 </style> 36 37 <div class="background"></div> 38 <div class="flipper"> 39 <div class="scroll"> 40 <div class="inner"> 41 </div> 42 </div> 43 </div>