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

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: Rebase 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:

OLD	NEW
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 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, scroller.querySelector('.spacer'));

	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 class="spacer"></div>

	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 var div = document.createElement('div');

	91 div.style.height = '65px';

	92 scroller.insertBefore(div, sticky);

	93

	94 var sticky_bounds = sticky.getBoundingClientRect();

	95 var scroller_bounds = scroller.getBoundingClientRect();

	96 assert_equals(sticky_bounds.top, scroller_bounds.top + 50);

	97 assert_equals(sticky_bounds.left, scroller_bounds.left + 20);

	98 }, 'getBoundingClientRect should be correct for sticky after script-caused layou t');

	99 </script>

OLD	NEW

« 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') | no next file with comments »