mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 13:48:23 +02:00
85565aa29e
Automatic update from web-platform-tests [FlexNG] Fix static position for abspos flex items Absolutely positioned flex items were getting placed wrong when the containing block was legacy. This patch stores the relevant edges in legacy and makes NG pick them up on the other side. The above only works for abspos items controlled by NG. Legacy abspos flex items with a legacy containing block, e.g. position-absolute-009.html in this CL, still don't work. Bug: 845235, 1066859 Change-Id: I3d6beb0bfe80292181b81d2e42bf79bf73ddc834 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2146133 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/master@{#760290} -- wpt-commits: 838f1813d0ad18b9fefb836936af6bfc2c8051c1 wpt-pr: 22863
117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>CSS Test: Absolutely positioned children of flexboxes</title>
|
|
<link rel="author" title="Google Inc." href="http://www.google.com/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
|
|
<meta name="flags" content="">
|
|
<meta name="assert" content="Checks that we correctly position abspos children in a number of writing modes and alignments when containing block is grid.">
|
|
<style>
|
|
|
|
.abspos {
|
|
height: 50px;
|
|
width: 50px;
|
|
background: lightblue;
|
|
position: absolute;
|
|
flex: none;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
position: relative;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.flexbox {
|
|
display: flex;
|
|
background-color: #aaa;
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
.horizontal-tb {
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
.vertical-rl {
|
|
writing-mode: vertical-rl;
|
|
}
|
|
.vertical-lr {
|
|
writing-mode: vertical-lr;
|
|
}
|
|
|
|
.rtl {
|
|
direction: rtl;
|
|
}
|
|
.ltr {
|
|
direction: ltr;
|
|
}
|
|
|
|
.align-items-flex-start {
|
|
align-items: flex-start;
|
|
}
|
|
.align-items-flex-end {
|
|
align-items: flex-end;
|
|
}
|
|
.justify-content-flex-start {
|
|
justify-content: flex-start;
|
|
}
|
|
.justify-content-flex-end {
|
|
justify-content: flex-end;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<body onload="checkLayout('.flexbox')">
|
|
<div id=log></div>
|
|
<script>
|
|
|
|
var writingModes = ['horizontal-tb', 'vertical-rl', 'vertical-lr'];
|
|
var directions = ['ltr', 'rtl'];
|
|
var justifyContents = ['flex-start', 'flex-end'];
|
|
var alignItems = ['flex-start', 'flex-end'];
|
|
var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
|
|
|
|
// These were harvested from Firefox 76.0b4.
|
|
var x = [0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50];
|
|
|
|
var y = [0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 50, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0, 0, 0, 50, 50, 50, 50, 0, 0];
|
|
|
|
var test_number = 1;
|
|
|
|
writingModes.forEach(function(flexWritingMode) {
|
|
flexDirections.forEach(function(flexDirection) {
|
|
directions.forEach(function(direction) {
|
|
justifyContents.forEach(function(justifyContent) {
|
|
alignItems.forEach(function(alignment) {
|
|
var flexboxClassName = flexWritingMode + ' ' + direction + ' ' + flexDirection + ' justify-content-' + justifyContent + ' align-items-' + alignment;
|
|
var title = document.createElement('div');
|
|
title.className = 'title';
|
|
title.innerHTML = flexboxClassName + " .flexbox " + (test_number++);
|
|
document.body.appendChild(title);
|
|
|
|
var flexbox = document.createElement('div');
|
|
flexbox.className = 'flexbox ' + flexboxClassName;
|
|
|
|
var child = document.createElement('div');
|
|
child.setAttribute('class', 'abspos');
|
|
child.setAttribute("data-offset-x", x.shift());
|
|
child.setAttribute("data-offset-y", y.shift());
|
|
flexbox.appendChild(child);
|
|
|
|
var relpos = document.createElement('div');
|
|
relpos.className = 'grid';
|
|
relpos.appendChild(flexbox);
|
|
|
|
document.body.appendChild(relpos);
|
|
})
|
|
})
|
|
})
|
|
})
|
|
})
|
|
|
|
</script>
|
|
|
|
</body>
|