Skip to content

Commit

Permalink
For abspos frames, resolve intrinsic BSize keywords to the actual int…
Browse files Browse the repository at this point in the history 
…rinsic BSize, instead of stretching to fill the available space

This patch creates a new behavior for absolute positioned frames such
that if they have intrinsic size keywords (-moz-fit-content, min-content,
max-content) for their BSize and the margins are auto, instead of taking
as much space as possible, use the actual intrinsic BSize as the BSize.

Users can still use `auto` keyword to make it to fill the available
space.

This change is to align with the spec text for these intrinsic sizing
keywords at https://drafts.csswg.org/css-sizing/#valdef-width-min-content,
per the changes resolved on in w3c/csswg-drafts#3973

This patch modifies the centering.html WPT, to expand the test
cases to test the centering functionalities for not only explicitly specified
height and width, but also the default size and width, in this case the
intrinsic sizing keywords.

Differential Revision: https://phabricator.services.mozilla.com/D106497

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1669734
gecko-commit: 8083eaa5d4326cc497a114d819a2644da41a9360
gecko-reviewers: emilio, dholbert
  • Loading branch information
@sefeng211 @moz-wptsync-bot
sefeng211 authored and moz-wptsync-bot committed Mar 16, 2021
1 parent d2fb7f3 commit 765c706
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 40 deletions.
4 changes: 3 additions & 1 deletion html/semantics/interactive-elements/the-dialog-element/centering-iframe.sub.html
View file
Expand Up @@ -16,11 +16,13 @@
padding: 0;
max-width: initial;
max-height: initial;
width: {{GET[dialog-width]}};
height: {{GET[dialog-height]}};
}
</style>

<div id="container">
<dialog style="width: 20px; height: 10px;">X</dialog> <!-- sync width and height with centering.html -->
<dialog>X</dialog>
</div>

<script>
Expand Down
90 changes: 51 additions & 39 deletions html/semantics/interactive-elements/the-dialog-element/centering.html
View file
Expand Up @@ -14,44 +14,56 @@
const dialogWidth = 20;
const dialogHeight = 10;

const widthOffset100 = 100 / 2 - dialogWidth / 2;
const widthOffset40 = 40 / 2 - dialogWidth / 2;

const heightOffset100 = 100 / 2 - dialogHeight / 2;
const heightOffset40 = 40 / 2 - dialogHeight / 2;

testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40, widthOffset100, heightOffset40);
testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100, widthOffset100, heightOffset100);
testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", dialogWidth, dialogHeight, 0, 0);

testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);

testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);

testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100, widthOffset40, heightOffset100);

testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100, widthOffset40, heightOffset100);
testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100, widthOffset40, heightOffset100);

function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight, leftOffset, topOffset) {
async_test(t => {
const iframe = document.createElement("iframe");
iframe.src = `centering-iframe.sub.html?html-writing-mode=${writingMode}&container-writing-mode=${containerWritingMode}&dialog-writing-mode=${dialogWritingMode}`;
iframe.width = iframeWidth;
iframe.height = iframeHeight;
iframe.onload = t.step_func_done(() => {
const dialog = iframe.contentDocument.querySelector("dialog");
const dialogRect = dialog.getBoundingClientRect();

assert_equals(dialogRect.left, leftOffset, 'left');
assert_equals(dialogRect.top, topOffset, 'top');
});
document.body.appendChild(iframe);
}, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
(dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}`);
testDialogCentering("horizontal-tb", "", "", "tall viewport", 40, 100);
testDialogCentering("horizontal-tb", "", "", "wide viewport", 100, 40);
testDialogCentering("horizontal-tb", "", "", "square viewport", 100, 100);
testDialogCentering("horizontal-tb", "", "", "dialog and viewport match", dialogWidth, dialogHeight);

testDialogCentering("vertical-rl", "", "", "tall viewport", 40, 100);
testDialogCentering("vertical-lr", "", "", "tall viewport", 40, 100);

testDialogCentering("vertical-rl", "", "horizontal-tb", "tall viewport", 40, 100);
testDialogCentering("vertical-lr", "", "horizontal-tb", "tall viewport", 40, 100);

testDialogCentering("horizontal-tb", "vertical-rl", "", "tall viewport", 40, 100);
testDialogCentering("vertical-rl", "horizontal-tb", "", "tall viewport", 40, 100);

testDialogCentering("horizontal-tb", "vertical-rl", "horizontal-tb", "tall viewport", 40, 100);
testDialogCentering("vertical-rl", "horizontal-tb", "vertical-rl", "tall viewport", 40, 100);

function testDialogCentering(writingMode, containerWritingMode, dialogWritingMode, label, iframeWidth, iframeHeight) {
const dialogSizesToTest = [["", ""], [dialogWidth.toString()+'px', dialogHeight.toString()+'px']];
for (const dialogSizes of dialogSizesToTest) {
const isDefaultSize = dialogSizes[0] == "";
// This test doesn't make sense if the dialog sizes are default
if (isDefaultSize && label == "dialog and viewport match") {
continue;
}

async_test(t => {
const iframe = document.createElement("iframe");
iframe.src = `centering-iframe.sub.html?html-writing-mode=${writingMode}&container-writing-mode=${containerWritingMode}&dialog-writing-mode=${dialogWritingMode}&dialog-width=${dialogSizes[0]}&dialog-height=${dialogSizes[1]}`;
iframe.width = iframeWidth;
iframe.height = iframeHeight;
iframe.onload = t.step_func_done(() => {
const dialog = iframe.contentDocument.querySelector("dialog");
const dialogRect = dialog.getBoundingClientRect();

const expectedLeftOffset = iframeWidth / 2 - dialogRect.width / 2;
const expectedTopOffset = Math.max(iframeHeight / 2 - dialogRect.height / 2, 0);

if (isDefaultSize) {
assert_approx_equals(dialogRect.left, expectedLeftOffset, 1/60);
assert_approx_equals(dialogRect.top, expectedTopOffset, 1/60);
} else {
assert_equals(dialogRect.left, expectedLeftOffset);
assert_equals(dialogRect.top, expectedTopOffset);
}
});
document.body.appendChild(iframe);
}, writingMode + (containerWritingMode ? ` (container ${containerWritingMode})` : "") +
(dialogWritingMode ? ` (dialog ${dialogWritingMode})` : "") + `: ${label}` + `, default-sizes: ${isDefaultSize}`);

}
}
</script>

0 comments on commit 765c706

Please sign in to comment.