Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(429)

Side by Side Diff: third_party/WebKit/LayoutTests/compositing/overflow/accelerated-scrolling-with-clip-path-text.html

Issue 2078343005: Fix positioning of CSS reference clips in composited layers. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Add virtual expectation Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 .clip-path { 5 .clip-path {
6 -webkit-clip-path: url('#clipping'); 6 -webkit-clip-path: url('#clipping');
7 clip-path: url('#clipping');
7 overflow: scroll; 8 overflow: scroll;
8 } 9 }
9 10
10 .outer { 11 .outer {
11 height: 400px; 12 height: 400px;
12 width: 400px; 13 width: 400px;
13 background-color: blue; 14 background-color: blue;
14 } 15 }
15 16
16 .inner { 17 .inner {
(...skipping 14 matching lines...) Expand all
31 } 32 }
32 </style> 33 </style>
33 34
34 <script> 35 <script>
35 if (window.internals) 36 if (window.internals)
36 window.internals.settings.setPreferCompositingToLCDTextEnabled(true); 37 window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
37 </script> 38 </script>
38 </head> 39 </head>
39 40
40 <body> 41 <body>
41 This tests that reference clip-path is applied with composited scrolling. If the content and 42 <!-- Do not remove the text. Having the div at some vertical offset verifies tha t we correctly offset the clip -->
42 scrollbars are properly clipped, this test passes. 43 This tests that reference clip-path with text is correctly applied with composit ed scrolling.
43 44
44 <svg width="0", height="0"> 45 <svg width="0", height="0">
45 <defs> 46 <defs>
46 <clipPath id="clipping"> 47 <clipPath id="clipping">
47 <polygon points="61 237,9 313,115 386,621 356,280 339,505 187,414 61,164 143 ,84 42,2 189"></polygon> 48 <text x="100" y="120" style="font-size:60px;font-weight:bold;">CLIP</text>
48 </clipPath> 49 </clipPath>
49 </defs> 50 </defs>
50 </svg> 51 </svg>
51 52
52 <div class="clip-path outer" id="outer"> 53 <div class="clip-path outer" id="outer">
53 <div class="spacer"></div> 54 <div class="spacer"></div>
54 <div class="inner"> 55 <div class="inner">
55 <div class="spacer bottom"></div> 56 <div class="spacer bottom"></div>
56 </div> 57 </div>
57 <div class="spacer"></div> 58 <div class="spacer"></div>
58 </div> 59 </div>
59 </body> 60 </body>
60 </html> 61 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698