| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 | |
| 3 <meta name="transition-elements" content="#transitionElement,#boxTransitionEleme
nt;*"> | |
| 4 <script src="../../resources/js-test.js"></script> | |
| 5 <script> | |
| 6 | |
| 7 description('Tests for the HTML markup serializer used for transition elements a
nd transition element names and rects'); | |
| 8 jsTestIsAsync = true; | |
| 9 | |
| 10 window.onload = function() { | |
| 11 if (window.internals) { | |
| 12 var serializedHTML = internals.serializeNavigationMarkup(); | |
| 13 var testiframe = document.getElementById('testiframe'); | |
| 14 testiframe.contentDocument.write(serializedHTML); | |
| 15 testiframe.contentDocument.close(); | |
| 16 | |
| 17 transitionElement = document.getElementById('transitionElement'); | |
| 18 sourceElement = document.getElementById('boxTransitionElement'); | |
| 19 destElement = testiframe.contentDocument.getElementById('boxTransitionEl
ement'); | |
| 20 | |
| 21 sourceElementRect = sourceElement.getBoundingClientRect(); | |
| 22 | |
| 23 bottomElement = document.getElementById('bottomElement'); | |
| 24 | |
| 25 preHidingBottomElementRect = bottomElement.getBoundingClientRect(); | |
| 26 preHidingTransitionElementOpacity = window.getComputedStyle(transitionEl
ement).opacity; | |
| 27 | |
| 28 internals.hideAllTransitionElements(); | |
| 29 | |
| 30 postHidingTransitionElementOpacity = window.getComputedStyle(transitionE
lement).opacity; | |
| 31 postHidingBottomElementRect = bottomElement.getBoundingClientRect(); | |
| 32 | |
| 33 shouldBe('sourceElementRect.top', 'destElement.offsetTop'); | |
| 34 shouldBe('sourceElementRect.left', 'destElement.offsetLeft'); | |
| 35 shouldBe('sourceElementRect.height', 'destElement.offsetHeight'); | |
| 36 shouldBe('sourceElementRect.width', 'destElement.offsetWidth'); | |
| 37 | |
| 38 shouldBeTrue('preHidingTransitionElementOpacity == 1'); | |
| 39 shouldBeTrue('postHidingTransitionElementOpacity == 0'); | |
| 40 | |
| 41 // Hiding transition elements should not shift any other elements on the
page. | |
| 42 shouldBe('preHidingBottomElementRect.top', 'postHidingBottomElementRect.
top'); | |
| 43 shouldBe('preHidingBottomElementRect.left', 'postHidingBottomElementRect
.left'); | |
| 44 | |
| 45 transitionElementIds = internals.getTransitionElementIds(); | |
| 46 shouldBeEqualToString('transitionElementIds[0]', 'transitionElement'); | |
| 47 shouldBeEqualToString('transitionElementIds[1]', 'boxTransitionElement')
; | |
| 48 | |
| 49 transitionElementRects = internals.getTransitionElementRects(); | |
| 50 transitionElementBounds = internals.boundsInViewportSpace(transitionElem
ent); | |
| 51 boxTransitionElementBounds = internals.boundsInViewportSpace(sourceEleme
nt); | |
| 52 shouldBeTrue('transitionElementRects[0].left == transitionElementBounds.
left'); | |
| 53 shouldBeTrue('transitionElementRects[0].top == transitionElementBounds.t
op'); | |
| 54 shouldBeTrue('transitionElementRects[0].width == transitionElementBounds
.width'); | |
| 55 shouldBeTrue('transitionElementRects[0].height == transitionElementBound
s.height'); | |
| 56 shouldBeTrue('transitionElementRects[1].left == boxTransitionElementBoun
ds.left'); | |
| 57 shouldBeTrue('transitionElementRects[1].top == boxTransitionElementBound
s.top'); | |
| 58 shouldBeTrue('transitionElementRects[1].width == boxTransitionElementBou
nds.width'); | |
| 59 shouldBeTrue('transitionElementRects[1].height == boxTransitionElementBo
unds.height'); | |
| 60 | |
| 61 internals.showAllTransitionElements(); | |
| 62 postShowingTransitionElementOpacity = window.getComputedStyle(transition
Element).opacity; | |
| 63 shouldBeTrue('postShowingTransitionElementOpacity == 1'); | |
| 64 | |
| 65 finishJSTest(); | |
| 66 } | |
| 67 } | |
| 68 </script> | |
| 69 | |
| 70 <style> | |
| 71 | |
| 72 body { | |
| 73 background: white; | |
| 74 margin-height: 0px; | |
| 75 margin-width: 0px; | |
| 76 } | |
| 77 | |
| 78 #wrappingElement { | |
| 79 background: gray; | |
| 80 padding: 13px 20px 8px 30px; | |
| 81 border-style: solid; | |
| 82 border-width: 5px; | |
| 83 width: 400px; | |
| 84 margin: 44px 2px 13px 30px; | |
| 85 } | |
| 86 | |
| 87 #transitionElement { | |
| 88 padding-bottom: 0px; | |
| 89 } | |
| 90 | |
| 91 #boxTransitionElement { | |
| 92 background: red; | |
| 93 padding: 8px 50px 50px 18px; | |
| 94 border-style: solid; | |
| 95 border-width: 30px; | |
| 96 margin: 55px 15px 25px 135px; | |
| 97 } | |
| 98 | |
| 99 #blueBox { | |
| 100 padding: 25px 75px 50px 100px; | |
| 101 } | |
| 102 | |
| 103 #testiframe { | |
| 104 width: 100%; | |
| 105 height: 600px; | |
| 106 background: gray; | |
| 107 border-width: 0px; | |
| 108 } | |
| 109 | |
| 110 </style> | |
| 111 | |
| 112 <div id="wrappingElement"> | |
| 113 <div id="transitionElement">Header</div> | |
| 114 | |
| 115 <div id="boxTransitionElement"> | |
| 116 <img id="blueBox" src="resources/images/blue.png"> | |
| 117 </div> | |
| 118 | |
| 119 <div id="bottomElement">Footer</div> | |
| 120 </div> | |
| 121 | |
| 122 <iframe id="testiframe"></iframe> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1140153006:
Remove Navigation Transitions from Blink. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk