| [email protected] | 7f9345e | 2011-06-11 00:22:29 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <html> | ||||
| 3 | <head> | ||||
| 4 | <style type="text/css" media="screen"> | ||||
| 5 | .box { | ||||
| 6 | position: relative; | ||||
| 7 | width: 100px; | ||||
| 8 | height: 100px; | ||||
| 9 | background-color: blue; | ||||
| 10 | margin: 20px; | ||||
| 11 | box-shadow: 0 0 3px black; /* make the compositing layers a little bigger */ | ||||
| 12 | } | ||||
| 13 | |||||
| 14 | .container { | ||||
| 15 | display: inline-block; | ||||
| 16 | } | ||||
| [email protected] | de1fc4a | 2014-07-05 01:09:30 | [diff] [blame] | 17 | |
| 18 | .translateZ { | ||||
| 19 | transform: translateZ(0); | ||||
| 20 | } | ||||
| 21 | |||||
| 22 | .rotate15 { | ||||
| 23 | transform: rotate3d(0, 0, 1, 15deg); | ||||
| 24 | } | ||||
| 25 | |||||
| 26 | .rotate45 { | ||||
| 27 | transform: rotate3d(0, 0, 1, 45deg); | ||||
| 28 | } | ||||
| [email protected] | 7f9345e | 2011-06-11 00:22:29 | [diff] [blame] | 29 | </style> |
| 30 | <script type="text/javascript" charset="utf-8"> | ||||
| [email protected] | b71a8c4 | 2012-06-11 18:29:22 | [diff] [blame] | 31 | if (window.testRunner) |
| 32 | testRunner.dumpAsText(); | ||||
| [email protected] | 7f9345e | 2011-06-11 00:22:29 | [diff] [blame] | 33 | |
| 34 | function doTest() | ||||
| 35 | { | ||||
| [email protected] | b71a8c4 | 2012-06-11 18:29:22 | [diff] [blame] | 36 | if (window.testRunner) { |
| Xianzhu Wang | af4fa41 | 2018-05-14 21:26:52 | [diff] [blame^] | 37 | document.getElementById('results').innerText = internals.layerTreeAsText(document); |
| [email protected] | b71a8c4 | 2012-06-11 18:29:22 | [diff] [blame] | 38 | testRunner.notifyDone(); |
| [email protected] | 7f9345e | 2011-06-11 00:22:29 | [diff] [blame] | 39 | } |
| 40 | } | ||||
| 41 | |||||
| 42 | window.addEventListener('load', doTest, false); | ||||
| 43 | </script> | ||||
| 44 | </head> | ||||
| 45 | <body> | ||||
| 46 | <div class="container"> | ||||
| [email protected] | de1fc4a | 2014-07-05 01:09:30 | [diff] [blame] | 47 | <div class="box translateZ"></div> |
| [email protected] | 7f9345e | 2011-06-11 00:22:29 | [diff] [blame] | 48 | <!-- The second box should not be composited. --> |
| 49 | <div class="box"></div> | ||||
| 50 | </div> | ||||
| 51 | |||||
| 52 | <div class="container"> | ||||
| [email protected] | de1fc4a | 2014-07-05 01:09:30 | [diff] [blame] | 53 | <div class="composited box rotate15"></div> |
| [email protected] | 7f9345e | 2011-06-11 00:22:29 | [diff] [blame] | 54 | <!-- The second box should not be composited. --> |
| 55 | <div class="box"></div> | ||||
| 56 | </div> | ||||
| 57 | |||||
| 58 | <div class="container"> | ||||
| [email protected] | de1fc4a | 2014-07-05 01:09:30 | [diff] [blame] | 59 | <div class="composited box rotate45"></div> |
| [email protected] | 7f9345e | 2011-06-11 00:22:29 | [diff] [blame] | 60 | <!-- The second box should be composited. --> |
| 61 | <div class="box"></div> | ||||
| 62 | </div> | ||||
| 63 | |||||
| 64 | <pre id="results">Layer tree goes here in DRT.</pre> | ||||
| 65 | </body> | ||||
| 66 | </html> | ||||