individual-transform-3.html (1366B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Individual transform: non-invertible matrix</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm"> 7 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-function-lists"> 8 <link rel="help" href="https://github.com/servo/servo/issues/37146"> 9 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 10 <meta name="assert" content="Tests that the element isn't rendered when 11 the current transformation matrix is non-invertible because of `scale`."> 12 13 <style> 14 .wrapper { 15 width: 200px; 16 height: 200px; 17 background: green; 18 } 19 .wrapper > div { 20 width: 200px; 21 height: 20px; 22 background: red; 23 } 24 </style> 25 26 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 27 28 <div class="wrapper"> 29 <div style="scale: 0"></div> 30 <div style="scale: 0 0"></div> 31 <div style="scale: 0 1"></div> 32 <div style="scale: 1 0"></div> 33 <div style="scale: 0 0 0"></div> 34 <div style="scale: 0 0 1"></div> 35 <div style="scale: 0 1 0"></div> 36 <div style="scale: 0 1 1"></div> 37 <div style="scale: 1 0 0"></div> 38 <div style="scale: 1 0 1"></div> 39 <div style="scale: 1 1 0"></div> 40 </div>