LayoutTests/compositing/overflow/out-of-flow-pos-descendants-should-affect-all-ancestors.html - Issue 244193002: Enable universal accelerated overflow scroll

Side by Side Diff: LayoutTests/compositing/overflow/out-of-flow-pos-descendants-should-affect-all-ancestors.html

Issue 244193002: Enable universal accelerated overflow scroll (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 6 years, 8 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 | Annotate | Revision Log

« LayoutTests/TestExpectations ('K') | « LayoutTests/compositing/overflow/invisible-descendants-should-not-affect-opt-in-expected.txt ('k') | LayoutTests/compositing/overflow/resources/automatically-opt-into-composited-scrolling.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2 <html>

3 <head>

4 <style>

5 div {

6 height: 500px;

7 width: 500px;

8 padding: 3px;

9 border-style: solid;

10 border-color: black;

11 border-width: 1px;

12 overflow: scroll;

13 }

14

15 .filler {

16 position: relative;

17 top: 1000px;

18 }

19

20 button {

21 display: none;

22 }

23 </style>

24 <script>

25 // This test ensures that when an element's style changes in such a

26 // way that it remains out-of-flow positioned, but its containing

27 // block changes, we correctly update elements' has-unclipped-

28 // descendant property. Since no layers will opt out due to stacking

29 // issues, we can judge whether we're setting this state correctly

30 // by which layers opt-in.

31 if (window.internals) {

32 window.internals.settings.setAcceleratedCompositingForOverflowSc rollEnabled(true);

33 window.internals.settings.setCompositorDrivenAcceleratedScrollin gEnabled(false);

34 }

35

36 if (window.testRunner)

37 window.testRunner.dumpAsText();

38

39 function doTest()

40 {

41 if (!window.internals) {

42 document.getElementById('toggle1').style.display = 'block';

43 document.getElementById('toggle2').style.display = 'block';

44 document.body.offsetTop;

45 return;

46 }

47

48 var result = window.internals.layerTreeAsText(document);

49 var oofp1 = document.getElementById('oofp1');

50 var oofp2 = document.getElementById('oofp2');

51

52 oofp1.style.position = 'fixed';

53 document.body.offsetTop;

54 result += window.internals.layerTreeAsText(document);

55

56 oofp2.style.position = 'fixed';

57 document.body.offsetTop;

58 result += window.internals.layerTreeAsText(document);

59

60 oofp1.style.position = 'absolute';

61 document.body.offsetTop;

62 result += window.internals.layerTreeAsText(document);

63

64 oofp2.style.position = 'absolute';

65 document.body.offsetTop;

66 result += window.internals.layerTreeAsText(document);

67

68 document.getElementById('console').innerHTML = result;

69 }

70

71 window.addEventListener('load', doTest, false);

72 </script>

73 </head>

74 <body>

75 <div>

76 <div style="width: 450px; height: 450px">

77 <div style="width: 400px; height: 400px">

78 <div style="width: 350px; height: 350px">

79 <div style="position: relative; width: 300px; height: 15 0px">

80 <div id="oofp1" style="position: absolute; backgroun d-color: red; height: 50px; width: 50px; left: 50px; overflow: hidden">

81 </div>

82 <div class="filler"></div>

83 </div>

84 <div style="position: relative; width: 300px; height: 15 0px">

85 <div style="width: 250px; height: 100px">

86 <div id="oofp2" style="position: absolute; backg round-color: red; height: 50px; width: 50px; left: 50px; overflow: hidden"></div >

87 <div class="filler"></div>

88 </div>

89 <div class="filler"></div>

90 </div>

91 <div class="filler"></div>

92 </div>

93 <div class="filler"></div>

94 </div>

95 <div class="filler"></div>

96 </div>

97 <div class="filler"></div>

98 </div>

99 <pre id='console'>This test requires window.internals</pre>

100

101 <button id='toggle1' onClick="document.getElementById('oofp1').style.pos ition = document.getElementById('oofp1').style.position === 'fixed' ? 'absolute' : 'fixed'">toggle 1</button>

102 <button id='toggle2' onClick="document.getElementById('oofp2').style.pos ition = document.getElementById('oofp2').style.position === 'fixed' ? 'absolute' : 'fixed'">toggle 2</button>

103 </body>

104 </html>

OLD	NEW