Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 10:55:34 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Add support for flex items with position: relative (#33151)

Browse source 
Signed-off-by: Martin Robinson <mrobinson@igalia.com>
This commit is contained in:
Martin Robinson 2024-08-23 11:11:22 -07:00 • committed by GitHub
parent b9f02cf773
commit 2db9032e72
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 207 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tests/wpt/meta/MANIFEST.json vendored
View file

@ -167867,6 +167867,19 @@
{}
]
],
"flex-item-position-relative-001.html": [
"7e6907e0e8d4801776d581474a29d5f5b5743b53",
[
null,
[
[
"/css/css-flexbox/flex-item-position-relative-001-ref.html",
"=="
]
],
{}
]
],
"flex-item-transferred-sizes-padding-border-sizing.html": [
"fc1a163e01ee1eaca8186619aee3e8d0e25c3155",
[
@ -400930,6 +400943,10 @@
"2b0f294c3441f1cf25a6678b9ce0748258582ea1",
[]
],
"flex-item-position-relative-001-ref.html": [
"01e078d983d1319199a9356e2da54278009a7418",
[]
],
"flex-lines": {
"multi-line-wrap-reverse-column-reverse-ref.html": [
"38366a62f7e6b7df30b2da814cf178ebba5a83fa",

16
tests/wpt/tests/css/css-flexbox/flex-item-position-relative-001-ref.html vendored Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<title>Flex items and `position: relative`</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-position/#position-property">
<meta name="assert"
content="Flex items can be positioned with `position: relative` and establish containing blocks for absolutely-positioned descendants." />
<style>
body {
margin: 0;
}
</style>
<div style="position: absolute; background: green; width: 50px; height: 50px; left: 50px; top: 50px"></div>
<div style="position: absolute; background: green; width: 50px; height:50px; left: 100px; top: 100px"></div>

42
tests/wpt/tests/css/css-flexbox/flex-item-position-relative-001.html vendored Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<title>Flex items and `position: relative`</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-position/#position-property">
<meta name="assert"
content="Flex items can be positioned with `position: relative` and establish containing blocks for absolutely-positioned descendants." />
<link rel="match" href="flex-item-position-relative-001-ref.html">
<style>
body {
margin: 0;
}
#flex {
display: flex;
width: 100px;
height: 100px;
}
#flex > div {
width: 50px;
height: 50px;
background: green;
position: relative;
top: 50px;
left: 50px;
}
#flex > div > div {
width: 50px;
height: 50px;
background: green;
position: absolute;
left: 100%;
top: 100%;
}
</style>
<div style="position: absolute; background: red; width: 50px; height: 50px; left: 50px; top: 50px"></div>
<div style="position: absolute; background: red; width: 50px; height:50px; left: 100px; top: 100px"></div>
<div id="flex">
<div><div style="background: green"></div></div>
</div>