LayoutTests/fast/html/navigation-transition.html - Issue 476553002: Navigation transitions: Hide transition elements by setting CSS opacity rather than display.

Side by Side Diff: LayoutTests/fast/html/navigation-transition.html

Issue 476553002: Navigation transitions: Hide transition elements by setting CSS opacity rather than display. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Test fix Created 6 years, 4 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

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2	2

3 <meta name="transition-elements" content="#transitionElement,#boxTransitionEleme nt;*">	3 <meta name="transition-elements" content="#transitionElement,#boxTransitionEleme nt;*">

4 <script src="../../resources/js-test.js"></script>	4 <script src="../../resources/js-test.js"></script>

5 <script>	5 <script>

6	6

7 description('Tests for the HTML markup serializer used for transition elements') ;	7 description('Tests for the HTML markup serializer used for transition elements') ;

8 jsTestIsAsync = true;	8 jsTestIsAsync = true;

9	9

10 window.onload = function() {	10 window.onload = function() {

11 if (window.internals) {	11 if (window.internals) {

12 var serializedHTML = internals.serializeNavigationMarkup(document);	12 var serializedHTML = internals.serializeNavigationMarkup();

13 var testiframe = document.getElementById('testiframe');	13 var testiframe = document.getElementById('testiframe');

14 testiframe.contentDocument.write(serializedHTML);	14 testiframe.contentDocument.write(serializedHTML);

15	15

	16 transitionElement = document.getElementById('transitionElement');

16 sourceElement = document.getElementById('boxTransitionElement');	17 sourceElement = document.getElementById('boxTransitionElement');

17 destElement = testiframe.contentDocument.getElementById('boxTransitionEl ement');	18 destElement = testiframe.contentDocument.getElementById('boxTransitionEl ement');

18	19

19 sourceElementRect = sourceElement.getBoundingClientRect();	20 sourceElementRect = sourceElement.getBoundingClientRect();

	21

	22 bottomElement = document.getElementById('bottomElement');

	23

	24 preHidingBottomElementRect = bottomElement.getBoundingClientRect();

	25 preHidingTransitionElementOpacity = window.getComputedStyle(transitionEl ement).opacity;

	26

	27 internals.hideAllTransitionElements();

	28

	29 postHidingTransitionElementOpacity = window.getComputedStyle(transitionE lement).opacity;

	30 postHidingBottomElementRect = bottomElement.getBoundingClientRect();

	31

20 shouldBe('sourceElementRect.top', 'destElement.offsetTop');	32 shouldBe('sourceElementRect.top', 'destElement.offsetTop');

21 shouldBe('sourceElementRect.left', 'destElement.offsetLeft');	33 shouldBe('sourceElementRect.left', 'destElement.offsetLeft');

22 shouldBe('sourceElementRect.height', 'destElement.offsetHeight');	34 shouldBe('sourceElementRect.height', 'destElement.offsetHeight');

23 shouldBe('sourceElementRect.width', 'destElement.offsetWidth');	35 shouldBe('sourceElementRect.width', 'destElement.offsetWidth');

24	36

	37 shouldBeTrue('preHidingTransitionElementOpacity == 1');

	38 shouldBeTrue('postHidingTransitionElementOpacity == 0');

	39

	40 // Hiding transition elements should not shift any other elements on the page.

	41 shouldBe('preHidingBottomElementRect.top', 'postHidingBottomElementRect. top');

	42 shouldBe('preHidingBottomElementRect.left', 'postHidingBottomElementRect .left');

	43

25 finishJSTest();	44 finishJSTest();

26 }	45 }

27 }	46 }

28 </script>	47 </script>

29	48

30 <style>	49 <style>

31	50

32 body {	51 body {

33 background: white;	52 background: white;

34 margin-height: 0px;	53 margin-height: 0px;

(...skipping 28 matching lines...) Expand all Loading...
63 #testiframe {	82 #testiframe {

64 width: 100%;	83 width: 100%;

65 height: 600px;	84 height: 600px;

66 background: gray;	85 background: gray;

67 border-width: 0px;	86 border-width: 0px;

68 }	87 }

69	88

70 </style>	89 </style>

71	90

72 <div id="wrappingElement">	91 <div id="wrappingElement">

73 <div id="transitionElement">This text should appear twice.</div>	92 <div id="transitionElement">Header</div>

74	93

75 <div id="boxTransitionElement">	94 <div id="boxTransitionElement">

76 <img id="blueBox" src="resources/images/blue.png">	95 <img id="blueBox" src="resources/images/blue.png">

77 </div>	96 </div>

	97

	98 <div id="bottomElement">Footer</div>

78 </div>	99 </div>

79	100

80 <iframe id="testiframe"></iframe>	101 <iframe id="testiframe"></iframe>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/fast/html/navigation-transition-expected.txt » ('j') | no next file with comments »