Chromium Code Reviews Chromium Code Reviews
Issue 281383006:
Navigation transitions: Added createStyledMarkupForNavigationTransition (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/html/navigation-transition.html |
| diff --git a/LayoutTests/fast/html/navigation-transition.html b/LayoutTests/fast/html/navigation-transition.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..e7bf0cab2c78a1865cf5ce68dd90a7e5ee6c59c7 |
| --- /dev/null |
| +++ b/LayoutTests/fast/html/navigation-transition.html |
| @@ -0,0 +1,95 @@ |
| +<!DOCTYPE html> |
| + |
| +<meta name="transition-elements" content="#transitionElement,#boxTransitionElement;*"> |
| +<script src="../../resources/js-test.js"></script> |
| +<script> |
| + |
| +description('Tests for the HTML markup serializer used for transition elements'); |
| +jsTestIsAsync = true; |
| + |
| +window.onload = function() { |
| + if (window.internals) { |
| + var serializedHTML = internals.serializeNavigationMarkup(document); |
| + var testiframe = document.getElementById('testiframe'); |
| + testiframe.contentDocument.write(serializedHTML); |
| + |
| + sourceElement = document.getElementById('boxTransitionElement'); |
| + destElement = testiframe.contentDocument.getElementById('boxTransitionElement'); |
| + |
| + sourceElementRect = sourceElement.getBoundingClientRect(); |
| + shouldBe('sourceElementRect.top', 'destElement.offsetTop'); |
| + shouldBe('sourceElementRect.left', 'destElement.offsetLeft'); |
| + shouldBe('sourceElementRect.height', 'destElement.offsetHeight'); |
| + shouldBe('sourceElementRect.width', 'destElement.offsetWidth'); |
| + |
| + finishJSTest(); |
| + } |
| +} |
| +</script> |
| + |
| +<style> |
| + |
| +body { |
| + background: white; |
| + margin-height: 0px; |
| + margin-width: 0px; |
| +} |
| + |
| +#wrappingElement { |
| + background: gray; |
| + padding-top: 13px; |
| + padding-bottom: 8px; |
| + padding-right: 20px; |
| + padding-left: 30px; |
|
esprehn
2014/07/17 19:10:43
You can combine all these as padding: 13px 20px 8p
oystein (OOO til 10th of July)
2014/07/17 21:15:06
Done.
|
| + border-style: solid; |
| + border-width: 5px; |
| + width: 400px; |
| + margin-top: 44px; |
| + margin-bottom: 13px; |
| + margin-right: 2px; |
| + margin-left: 30px; |
|
esprehn
2014/07/17 19:10:43
ditto
oystein (OOO til 10th of July)
2014/07/17 21:15:06
Done.
|
| +} |
| + |
| +#transitionElement { |
| + padding-bottom: 0px; |
| +} |
| + |
| +#boxTransitionElement { |
| + background: red; |
| + padding-left: 18px; |
| + padding-top: 8px; |
| + padding-bottom: 50x; |
| + padding-right: 50px; |
| + border-style: solid; |
| + border-width: 30px; |
| + margin-top: 55px; |
| + margin-bottom: 25px; |
| + margin-right: 15px; |
| + margin-left: 135px; |
|
esprehn
2014/07/17 19:10:43
ditto
oystein (OOO til 10th of July)
2014/07/17 21:15:06
Done.
|
| +} |
| + |
| +#blueBox { |
| + padding-top: 25px; |
| + padding-bottom: 50px; |
| + padding-right: 75px; |
| + padding-left: 100px; |
|
esprehn
2014/07/17 19:10:43
ditto
oystein (OOO til 10th of July)
2014/07/17 21:15:05
Done.
|
| +} |
| + |
| +#testiframe { |
| + width: 100%; |
| + height: 600px; |
| + background: gray; |
| + border-width: 0px; |
| +} |
| + |
| +</style> |
| + |
| +<div id="wrappingElement"> |
| + <div id="transitionElement">This text should appear twice.</div> |
| + |
| + <div id="boxTransitionElement"> |
| + <img id="blueBox" src="resources/images/blue.png"> |
| + </div> |
| +</div> |
| + |
| +<iframe id="testiframe"></iframe> |
