contain-paint-012.html (970B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Containment Test: Paint containment fixed positioned descendants</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-paint"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 7 <meta name=assert content="Paint containment doesn't apply to non-atomic inline elements so they don't act as containing block for fixed positioned descendants."> 8 <style> 9 #containing-block { 10 transform: translateX(0); 11 background: red; 12 width: 100px; 13 height: 100px; 14 } 15 16 #contain-paint { 17 contain: paint; 18 } 19 20 #fixed { 21 position: fixed; 22 bottom: 0; 23 right: 0; 24 background: green; 25 width: 100%; 26 height: 100%; 27 } 28 </style> 29 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 30 <div id="containing-block"> 31 <span id="contain-paint"> 32 <div id="fixed"></div> 33 </span> 34 </div>