transform-matrix-009.html (1246B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test (Transforms): matrix() with zeros in the diagonal</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-matrix"> 6 <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#transform-function-lists"> 7 <link rel="help" href="https://github.com/servo/servo/issues/37146"> 8 <link rel="match" href="../reference/ref-filled-green-200px-square.html"> 9 <meta name="assert" content="Tests that the element is still rendered, 10 even though the current transformation matrix has zeros in the diagonal, 11 as long as the matrix remains invertible."> 12 13 <style> 14 .wrapper { 15 width: 200px; 16 height: 200px; 17 background: red; 18 } 19 .test { 20 width: 200px; 21 height: 200px; 22 background: green; 23 transform: matrix(0,1, 1,0, 0,0); 24 /* 25 The resulting matrix is: 26 ┌ ┐ 27 │ 0 1 0 0 │ 28 │ 1 0 0 0 │ 29 │ 0 0 1 0 │ 30 │ 0 0 0 1 │ 31 └ ┘ 32 It could result from e.g. `scaleX(-1) rotate(90deg)`. 33 */ 34 } 35 </style> 36 37 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 38 39 <div class="wrapper"> 40 <div class="test"></div> 41 </div>