third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-opaque-background.html - Issue 2259493004: Fix Compositing of Opaque Scrolling Layers and Add Tests

Side by Side Diff: third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-opaque-background.html

Issue 2259493004: Fix Compositing of Opaque Scrolling Layers and Add Tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: New tests. Created 4 years, 3 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

« no previous file with comments | « third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-background-transparent-to-opaque-expected.txt ('k') | third_party/WebKit/LayoutTests/compositing/overflow/overflow-scroll-with-opaque-background-will-change.html » ('j') | third_party/WebKit/Source/core/paint/PaintLayer.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

1 <script>	4 <script>

2 if (window.testRunner)	5 if (window.testRunner)

3 window.testRunner.dumpAsText();	6 testRunner.dumpAsText();

	7

	8 if (window.internals)

	9 internals.runtimeFlags.compositeOpaqueScrollersEnabled = true;

4	10

5 function hasOpaqueCompositedScrollingContentsLayer(layer) {	11 function hasOpaqueCompositedScrollingContentsLayer(layer) {

6 if (layer.name == "Scrolling Contents Layer")	12 if (layer.name == "Scrolling Contents Layer")

7 return layer.contentsOpaque;	13 return layer.contentsOpaque;

8 if (layer.children) {	14 if (layer.children) {

9 for (var i = 0; i < layer.children.length; i++) {	15 for (var i = 0; i < layer.children.length; i++) {

10 if (hasOpaqueCompositedScrollingContentsLayer(layer.children[i]))	16 if (hasOpaqueCompositedScrollingContentsLayer(layer.children[i]))

11 return true;	17 return true;

12 }	18 }

13 }	19 }

14 return false;	20 return false;

15 }	21 }

16	22

17 onload = function() {	23 onload = function() {

18 if (!window.testRunner \|\| !window.internals)	24 if (!window.testRunner \|\| !window.internals)

19 return;	25 return;

20	26

21 var result = "";	27 var result = "";

22 result += "Should have opaque composited scrolling contents layer: ";	28 result += "Should have opaque composited scrolling contents layer: ";

23 if (hasOpaqueCompositedScrollingContentsLayer(JSON.parse(window.internals.la yerTreeAsText(document))))	29 if (hasOpaqueCompositedScrollingContentsLayer(JSON.parse(window.internals.la yerTreeAsText(document))))

24 result += "Pass.\n";	30 result += "Pass.\n";

25 else	31 else

26 result += "Fail.\n";	32 result += "Fail.\n";

27 window.testRunner.setCustomTextOutput(result);	33 testRunner.setCustomTextOutput(result);

28 }	34 }

29 </script>	35 </script>

30 <style>	36 <style>

31 #scroller {	37 #scroller {

32 background: white local content-box;	38 background: white local content-box;

33 border: 10px solid rgba(0, 255, 0, 0.5);	39 border: 10px solid rgba(0, 255, 0, 0.5);

34 overflow: scroll;	40 overflow: scroll;

35 width: 200px;	41 width: 200px;

36 height: 200px;	42 height: 200px;

37 will-change: transform;

38 }	43 }

39 .spacer {	44 .spacer {

40 height: 300px;	45 height: 300px;

41 }	46 }

42 </style>	47 </style>

	48 </head>

	49 <body>

43 <!-- The scroller's Scrolling Contents Layer should be opaque due to the opaque	50 <!-- The scroller's Scrolling Contents Layer should be opaque due to the opaque

44 color background. Even though the background has a content-box clip there	51 color background. Even though the background has a content-box clip there

45 is no gap because the scroller has no padding. This means that we will be	52 is no gap because the scroller has no padding. This means that we will be

46 able to draw text with subpixel anti-aliasing.	53 able to draw text with subpixel anti-aliasing.

47 -->	54 -->

48 <div id="scroller"><div class="spacer"></div></div>	55 <div id="scroller"><div class="spacer"></div></div>

	56 </body></html>

OLD	NEW