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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-get-bounding-client-rect.html

Issue 2926493002: Upstream position: sticky tests for script insertion and layout to WPT (Closed)
Patch Set: Created 3 years, 6 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 | « no previous file | third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-offset-top-left.html » ('j') | third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-offset-top-left.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <title>Sticky positioned element should be observable by getBoundingClientRect.< /title> 2 <title>Sticky positioned element should be observable by getBoundingClientRect.< /title>
3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
4 <meta name="assert" content="This test checks that sticky positioned element 4 <meta name="assert" content="This test checks that sticky positioned element
5 should be observable by getBoundingClientRect." /> 5 should be observable by getBoundingClientRect." />
6 6
7 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharness.js"></script>
8 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testharnessreport.js"></script>
9 9
10 <style> 10 <style>
11 body { 11 body {
12 margin: 0; 12 margin: 0;
13 } 13 }
14 14
15 .container { 15 .container {
16 overflow: scroll; 16 overflow: scroll;
17 width: 200px; 17 width: 200px;
18 height: 200px; 18 height: 200px;
19 } 19 }
20 20
21 .spacer { 21 .spacer {
22 width: 2000px;
22 height: 2000px; 23 height: 2000px;
23 } 24 }
24 25
25 .box { 26 .box {
26 width: 100px; 27 width: 100px;
27 height: 100px; 28 height: 100px;
28 background-color: green; 29 background-color: green;
29 top: 50px;
30 } 30 }
31 31
32 .sticky { 32 .sticky {
33 position: sticky; 33 position: sticky;
34 top: 50px;
35 left: 20px;
34 } 36 }
35 </style> 37 </style>
36 38
37 <div id="scroller" class="container"> 39 <div id="scroller1" class="container">
38 <div id="sticky" class="sticky box"></div> 40 <div id="sticky1" class="sticky box"></div>
39 <div class="spacer"></div> 41 <div class="spacer"></div>
40 </div> 42 </div>
41 43
42 <script> 44 <script>
43 test(() => { 45 test(() => {
44 var element = document.getElementById('sticky'); 46 var sticky = document.getElementById('sticky1');
45 assert_equals(element.getBoundingClientRect().top, 50); 47 assert_equals(sticky.getBoundingClientRect().top, 50);
46 document.getElementById('scroller').scrollTop = 100; 48 document.getElementById('scroller1').scrollTop = 100;
47 assert_equals(element.getBoundingClientRect().top, 50); 49 assert_equals(sticky.getBoundingClientRect().top, 50);
48 sticky.style.position = 'relative'; 50 sticky.style.position = 'relative';
49 assert_equals(element.getBoundingClientRect().top, -50); 51 assert_equals(sticky.getBoundingClientRect().top, -50);
50 sticky.style.position = 'sticky'; 52 sticky.style.position = 'sticky';
51 assert_equals(element.getBoundingClientRect().top, 50); 53 assert_equals(sticky.getBoundingClientRect().top, 50);
52 }, 'sticky positioned element should be observable by getBoundingClientRect.'); 54 }, 'sticky positioned element should be observable by getBoundingClientRect.');
53 </script> 55 </script>
54 56
57 <div id="scroller2" class="container">
58 <div id="spacer2" class="spacer"></div>
59 </div>
60
61 <script>
62 test(() => {
63 var scroller = document.getElementById('scroller2');
64 scroller.scrollTop = 100;
65 scroller.scrollLeft = 75;
66
67 var sticky = document.createElement('div');
68 sticky.className = 'sticky box';
69 scroller.insertBefore(sticky, document.getElementById('spacer2'));
flackr 2017/06/07 18:32:56 perhaps even better than giving it an id, document
smcgruer 2017/06/07 20:57:31 Done.
70
71 var sticky_bounds = sticky.getBoundingClientRect();
72 var scroller_bounds = scroller.getBoundingClientRect();
73 assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
74 assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
75 }, 'getBoundingClientRect should be correct for sticky after script insertion');
76 </script>
77
78 <div id="scroller3" class="container">
79 <div id="sticky3" class="sticky box"></div>
80 <div id="spacer3" class="spacer"></div>
yigu 2017/06/06 21:32:01 nits: Unused id name.
smcgruer 2017/06/07 20:57:32 Done.
81 </div>
82
83 <script>
84 test(() => {
85 var scroller = document.getElementById('scroller3');
86 var sticky = document.getElementById('sticky3');
87 scroller.scrollTop = 100;
88 scroller.scrollLeft = 75;
89
90 scroller.append(document.createElement('div'));
flackr 2017/06/07 18:32:56 Wouldn't it be more exciting to append the div bef
smcgruer 2017/06/07 20:57:31 Done.
91
92 var sticky_bounds = sticky.getBoundingClientRect();
93 var scroller_bounds = scroller.getBoundingClientRect();
94 assert_equals(sticky_bounds.top, scroller_bounds.top + 50);
95 assert_equals(sticky_bounds.left, scroller_bounds.left + 20);
96 }, 'getBoundingClientRect should be correct for sticky after script-caused layou t');
97 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-offset-top-left.html » ('j') | third_party/WebKit/LayoutTests/external/wpt/css/css-position-3/position-sticky-offset-top-left.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698