mirror of
https://github.com/servo/servo.git
synced 2025-09-16 18:08:23 +01:00
layout: Fix relative positioned grid item (#35014)
* layout grid item collected child Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Add WPT tests Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Add WPT tests Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Add WPT tests Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Fix fixed position descendant Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Run fmt Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Apply code quality suggestion Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Split up the WPT test Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Organize WPT test CSS Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> * Fix WPT css endline Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> --------- Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
This commit is contained in:
Steven Novaryo
GitHub
parent
1e490abf2d
commit
9c769efb06
9 changed files with 289 additions and 25 deletions
82
tests/wpt/meta/MANIFEST.json
vendored
82
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -189310,6 +189310,84 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"grid-items-relative-positioned-containing-block-001.html": [
|
||||
"7683e485c05caea40361416bc533dc95fbfcd837",
|
||||
[
|
||||
"css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html",
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"grid-items-relative-positioned-containing-block-002.html": [
|
||||
"1e7a754f74da30e327feb06e05527012d1a3917d",
|
||||
[
|
||||
"css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html",
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"grid-items-relative-positioned-containing-block-003.html": [
|
||||
"be0305181914e9b872d0ef1bdc801f974c5918f7",
|
||||
[
|
||||
"css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html",
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"grid-items-relative-positioned-containing-block-004.html": [
|
||||
"61d50a10c10290b55a7439d6b59528f01accc4bf",
|
||||
[
|
||||
"css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html",
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"grid-items-relative-positioned-containing-block-005.html": [
|
||||
"4473cb8d2ba4ea847669cde34ce10e27e6bfb001",
|
||||
[
|
||||
"css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html",
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"grid-items-relative-positioned-containing-block-006.html": [
|
||||
"79350eac516f2850545a6446f570c6c7778a4e3b",
|
||||
[
|
||||
"css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html",
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"grid-items-sizing-alignment-001.html": [
|
||||
"033d292ce61026251ada1812d195412e5d0f5672",
|
||||
[
|
||||
|
|
@ -425295,6 +425373,10 @@
|
|||
"50x50-green.png": [
|
||||
"f709bf09e5ae6bf48911b69691b0acb5c6f2760e",
|
||||
[]
|
||||
],
|
||||
"grid-items-relative-positioned-containing-block.css": [
|
||||
"ccdecf612d65a6de843046a3a81b4a5488c3b4f3",
|
||||
[]
|
||||
]
|
||||
},
|
||||
"whitespace-in-grid-item-001-ref.html": [
|
||||
|
|
|
|||
20
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html
vendored
Normal file
20
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant</title>
|
||||
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/34535">
|
||||
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Ensures that relative positioned grid item established as an absolute containing block correctly.">
|
||||
<link rel="stylesheet" href="support/grid-items-relative-positioned-containing-block.css">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="container">
|
||||
<div class="box-abspos red"></div>
|
||||
</div>
|
||||
<div class="box1 green"></div>
|
||||
</div>
|
||||
24
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html
vendored
Normal file
24
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant</title>
|
||||
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/34535">
|
||||
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Ensures that relative positioned grid item established as an absolute containing block correctly.">
|
||||
<link rel="stylesheet" href="support/grid-items-relative-positioned-containing-block.css">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="container">
|
||||
<div>
|
||||
<span>
|
||||
<div class="box-abspos red"></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box1 green"></div>
|
||||
</div>
|
||||
20
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html
vendored
Normal file
20
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant</title>
|
||||
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/34535">
|
||||
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Ensures that relative positioned grid item established as an absolute containing block correctly.">
|
||||
<link rel="stylesheet" href="support/grid-items-relative-positioned-containing-block.css">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="box1 red"></div>
|
||||
<div class="container">
|
||||
<div class="box-abspos green"></div>
|
||||
</div>
|
||||
</div>
|
||||
20
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html
vendored
Normal file
20
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Fixed Positioned Descendant</title>
|
||||
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/34535">
|
||||
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Ensures that relative positioned grid item established as a absolute containing block correctly.">
|
||||
<link rel="stylesheet" href="support/grid-items-relative-positioned-containing-block.css">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="container">
|
||||
<div class="box-fixpos red"></div>
|
||||
</div>
|
||||
<div class="box1 green"></div>
|
||||
</div>
|
||||
24
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html
vendored
Normal file
24
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Fixed Positioned Descendant</title>
|
||||
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/34535">
|
||||
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Ensures that relative positioned grid item established as a absolute containing block correctly.">
|
||||
<link rel="stylesheet" href="support/grid-items-relative-positioned-containing-block.css">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="container">
|
||||
<div>
|
||||
<span>
|
||||
<div class="box-fixpos red"></div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box1 green"></div>
|
||||
</div>
|
||||
21
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html
vendored
Normal file
21
tests/wpt/tests/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute and Fixed Positioned Descendant</title>
|
||||
<link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
|
||||
<link rel="help" href="https://github.com/servo/servo/issues/34535">
|
||||
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="Ensures that relative positioned grid item established as a absolute containing block correctly.">
|
||||
<link rel="stylesheet" href="support/grid-items-relative-positioned-containing-block.css">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="container">
|
||||
<div class="box-fixpos red"></div>
|
||||
<div class="box-abspos red"></div>
|
||||
</div>
|
||||
<div class="box1 green"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: 100px;
|
||||
grid-template-rows: 100px;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
.box1 {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
grid-area: 1 / 1;
|
||||
}
|
||||
.box-abspos {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box-fixpos {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.red {
|
||||
background: red;
|
||||
}
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue