| [email protected] | 7b245b3 | 2010-06-16 19:16:17 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | |||||
| 3 | <html> | ||||
| 4 | <head> | ||||
| 5 | <style type="text/css" media="screen"> | ||||
| 6 | |||||
| 7 | .box { | ||||
| 8 | position: absolute; | ||||
| 9 | width: 100px; | ||||
| 10 | height: 100px; | ||||
| 11 | top: 20px; | ||||
| 12 | left: 20px; | ||||
| 13 | background-color: gray; | ||||
| 14 | clip: rect(-5px, 105px, 105px, -5px); | ||||
| 15 | } | ||||
| 16 | |||||
| 17 | .inner { | ||||
| 18 | position: relative; | ||||
| 19 | width: 120px; | ||||
| 20 | height: 120px; | ||||
| 21 | top: -10px; | ||||
| 22 | left: -10px; | ||||
| 23 | background-color: rgba(0, 0, 0, 0.2); | ||||
| 24 | } | ||||
| 25 | |||||
| 26 | .composited { | ||||
| [email protected] | 8448b5ae | 2014-10-18 08:49:38 | [diff] [blame] | 27 | transform: translateZ(1px); |
| [email protected] | 7b245b3 | 2010-06-16 19:16:17 | [diff] [blame] | 28 | } |
| 29 | |||||
| 30 | p { | ||||
| 31 | margin-top: 140px; | ||||
| 32 | } | ||||
| 33 | </style> | ||||
| 34 | <script type="text/javascript" charset="utf-8"> | ||||
| [email protected] | b71a8c4 | 2012-06-11 18:29:22 | [diff] [blame] | 35 | if (window.testRunner) { |
| 36 | testRunner.dumpAsText(); | ||||
| 37 | testRunner.waitUntilDone(); | ||||
| [email protected] | 7b245b3 | 2010-06-16 19:16:17 | [diff] [blame] | 38 | } |
| 39 | |||||
| 40 | function doTest() { | ||||
| [email protected] | b71a8c4 | 2012-06-11 18:29:22 | [diff] [blame] | 41 | if (window.testRunner) { |
| Xianzhu Wang | af4fa41 | 2018-05-14 21:26:52 | [diff] [blame^] | 42 | document.getElementById('layers').innerText = internals.layerTreeAsText(document); |
| [email protected] | b71a8c4 | 2012-06-11 18:29:22 | [diff] [blame] | 43 | testRunner.notifyDone(); |
| [email protected] | 42b020a7 | 2010-07-09 05:10:54 | [diff] [blame] | 44 | } |
| [email protected] | 7b245b3 | 2010-06-16 19:16:17 | [diff] [blame] | 45 | } |
| 46 | window.addEventListener('load', doTest, false); | ||||
| 47 | </script> | ||||
| 48 | </head> | ||||
| 49 | <body> | ||||
| 50 | |||||
| 51 | <div class="composited box"> | ||||
| 52 | <div class="inner"> | ||||
| 53 | </div> | ||||
| 54 | </div> | ||||
| 55 | |||||
| 56 | <div class="box" style="left: 220px;"> | ||||
| 57 | <div class="composited inner"> | ||||
| 58 | </div> | ||||
| 59 | </div> | ||||
| 60 | |||||
| 61 | <p>Test CSS clip with composited layers. Left and right sides should look the same.</p> | ||||
| 62 | <pre id="layers"> | ||||
| 63 | In DRT, layer tree goes here. | ||||
| 64 | </pre> | ||||
| 65 | </body> | ||||
| 66 | </html> | ||||