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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout.html

Issue 342943002: Center fixpos <dialog> (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: rm non-anchored-dialog-positioning-expected.txt Created 6 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout-expected.txt » ('j') | LayoutTests/fast/dom/HTMLDialogElement/non-modal-dialog-layout.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout.html
diff --git a/LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout.html b/LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..f914fe69b326df0f0cf4eed4d44253fcd0a3184a
--- /dev/null
+++ b/LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html>
+<head>
esprehn 2014/06/20 01:32:36 We usually leave off the <html>, <head> and <body>
falken 2014/06/20 01:49:54 Done.
+<link href="resources/dialog-layout.css" rel="stylesheet">
+<script src="../../../resources/js-test.js"></script>
+</head>
+<body>
+ <dialog id="dialog">It is my dialog.</dialog>
+ <div id="absolute-div">
+ <div id="relative-div"></div>
+ </div>
+</body>
esprehn 2014/06/20 01:32:36 You have </body> twice in there.
falken 2014/06/20 01:49:54 Oops done.
+<script>
+description('Tests layout of absolutely positioned modal dialogs.');
+
+function checkCentered(dialog) {
+ centeredTop = (window.innerHeight - dialog.offsetHeight) / 2;
+ shouldBe('dialog.getBoundingClientRect().top', 'centeredTop');
+}
+
+function reset() {
+ if (dialog.open)
+ dialog.close();
+ dialog.remove();
+ document.body.appendChild(dialog);
+ window.scroll(0, 500);
+}
+
+dialog = document.querySelector('#dialog');
+absoluteContainer = document.querySelector('#absolute-div');
+relativeContainer = document.querySelector('#relative-div');
+reset();
+
+(function() {
+ debug('<br>showModal() should center in the viewport.');
+
+ dialog.showModal();
+ checkCentered(dialog);
+ reset();
+}());
+
+(function() {
+ debug('<br>The computed top and bottom of a centered dialog should still have position auto.');
+
+ dialog.showModal();
+ shouldBeEqualToString('window.getComputedStyle(dialog).top', 'auto');
+ shouldBeEqualToString('window.getComputedStyle(dialog).bottom', 'auto');
+ reset();
+}());
+
+(function() {
+ debug('<br>Dialog should be recentered if showModal() is called after close().'),
+
+ dialog.showModal();
+ dialog.close();
+ window.scroll(0, 2 * window.scrollY);
+ dialog.showModal();
+ checkCentered(dialog);
+ reset();
+}());
+
+(function() {
+ debug('<br>Dialog should not recenter on relayout.');
+
+ dialog.showModal();
+ expectedTop = dialog.getBoundingClientRect().top;
+ window.scroll(0, window.scrollY * 2);
+ document.body.offsetHeight;
+ window.scroll(0, window.scrollY / 2);
+ shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
+ reset();
+}());
+
+(function() {
+ debug('<br>A tall dialog should be positioned at the top of the viewport.');
+
+ dialog.style.height = '20000px';
+ dialog.showModal();
+ shouldBe('dialog.getBoundingClientRect().top', '0');
+
+ dialog.style.height = 'auto';
+ reset();
+}());
+
+(function() {
+ debug('<br>The dialog should be centered regardless of the presence of a horizontal scrollbar.');
+
+ document.body.style.width = '4000px';
+ dialog.showModal();
+ checkCentered(dialog);
+
+ document.body.style.width = 'auto';
+ reset();
+}());
+
+(function() {
+ debug('<br>Centering should work when dialog is inside positioned containers.');
+
+ dialog.remove();
+ absoluteContainer.appendChild(dialog);
+ dialog.showModal();
+ checkCentered(dialog);
+ dialog.close();
+
+ dialog.remove();
+ relativeContainer.appendChild(dialog);
+ dialog.showModal();
+ checkCentered(dialog);
+
+ reset();
+}());
+
+(function() {
+ debug('<br>A centered dialog\'s position should survive becoming display:none temporarily.');
+
+ dialog.showModal();
+ expectedTop = dialog.getBoundingClientRect().top;
+ relativeContainer.style.display = 'none';
+ relativeContainer.style.display = 'block';
+ shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
+
+ reset();
+}());
+
+(function() {
+ debug('<br>Dialog should lose centering when removed from the document.');
+
+ dialog.showModal();
+ dialog.remove();
+ relativeContainer.appendChild(dialog);
+ shouldBe('dialog.getBoundingClientRect().top', 'relativeContainer.getBoundingClientRect().top');
+
+ reset();
+}());
+
+(function() {
+ debug('<br>Dialog\'s specified position should survive after close() and showModal().');
+
+ dialog.showModal();
+ dialog.style.top = '0px';
+ expectedTop = dialog.getBoundingClientRect().top;
+ dialog.close();
+ dialog.showModal();
+ shouldBe('dialog.getBoundingClientRect().top', 'expectedTop');
+
+ dialog.style.top = 'auto';
+ reset();
+}());
+
+(function() {
+ debug('<br>Dialog should be recentered if showModal() is called after removing \'open\'.');
+
+ dialog.showModal();
+ dialog.removeAttribute('open');
+ window.scroll(0, window.scrollY * 2);
+ dialog.showModal();
+ checkCentered(dialog);
+
+ reset();
+}());
+
+(function() {
+ debug('<br>Dialog should not be centered if showModal() was called when an ancestor had display \'none\'.');
+
+ dialog.remove();
+ absoluteContainer.appendChild(dialog);
+ absoluteContainer.style.display = 'none';
+ dialog.showModal();
+ absoluteContainer.style.display = 'block';
+ // Since dialog's containing block is the ICB, it's statically positioned after <body>.
+ shouldBe('dialog.getBoundingClientRect().top', 'document.body.getBoundingClientRect().bottom');
+ reset();
+}());
+
+(function() {
+ debug('<br>A dialog with specified \'top\' should be positioned as usual');
+ offset = 50;
+ dialog.style.top = offset + 'px';
+ dialog.showModal();
+ shouldBe('dialog.getBoundingClientRect().top + window.scrollY', 'offset');
+ dialog.style.top = 'auto';
+ reset();
+}());
+
+(function() {
+ debug('<br>A dialog with specified \'bottom\' should be positioned as usual');
+ offset = 50;
+ dialog.style.bottom = offset + 'px';
+ dialog.showModal();
+ shouldBe('dialog.getBoundingClientRect().bottom + window.scrollY', 'window.innerHeight - offset');
+ dialog.style.bottom = 'auto';
+ reset();
+}());
+</script>
+</body>
+</html>
« no previous file with comments | « no previous file | LayoutTests/fast/dom/HTMLDialogElement/abspos-dialog-layout-expected.txt » ('j') | LayoutTests/fast/dom/HTMLDialogElement/non-modal-dialog-layout.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698