From fcd9c9634fa1774ae27ee915b6623b4e05ba4314 Mon Sep 17 00:00:00 2001 From: stevennovaryo Date: Fri, 7 Feb 2025 19:49:11 +0000 Subject: [PATCH 1/6] Add WPT tests Signed-off-by: stevennovaryo --- ...ms-relative-positioned-absolute-child.html | 32 +++++++++++++++++++ ...elative-positioned-absolute-child-ref.html | 32 +++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html create mode 100644 css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html b/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html new file mode 100644 index 00000000000000..05a34de3377f1e --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html @@ -0,0 +1,32 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items With Absolute Positioned Child + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
diff --git a/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html b/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html new file mode 100644 index 00000000000000..40bce467b2b451 --- /dev/null +++ b/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html @@ -0,0 +1,32 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items With Absolute Positioned Child + + + + + +
+
+
+
+
+
+
+
+
+
+
+
From 250226cba74eb12654b138aef94b3970f46df9df Mon Sep 17 00:00:00 2001 From: stevennovaryo Date: Fri, 7 Feb 2025 19:49:11 +0000 Subject: [PATCH 2/6] Add WPT tests Signed-off-by: stevennovaryo --- ...ms-relative-positioned-absolute-child.html | 42 ++++++++++++------- ...elative-positioned-absolute-child-ref.html | 30 ++++++------- 2 files changed, 39 insertions(+), 33 deletions(-) diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html b/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html index 05a34de3377f1e..e66acf0f6c7b9d 100644 --- a/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html +++ b/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html @@ -8,25 +8,35 @@ +

Test passes if there is a green square and no red.

-
-
-
-
-
-
-
-
-
-
+
+
+
+
diff --git a/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html b/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html index 40bce467b2b451..79d843efb6abcf 100644 --- a/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html +++ b/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html @@ -6,27 +6,23 @@ +

Test passes if there is a green square and no red.

-
-
-
-
-
-
-
-
-
-
+
From 51b3c64918c5117ec80e2c8060ab4226f4ba6152 Mon Sep 17 00:00:00 2001 From: stevennovaryo Date: Fri, 7 Feb 2025 19:49:11 +0000 Subject: [PATCH 3/6] Fix fixed position descendant Signed-off-by: stevennovaryo --- ...ms-relative-positioned-absolute-child.html | 42 ------- ...-relative-positioned-containing-block.html | 104 ++++++++++++++++++ ...elative-positioned-absolute-child-ref.html | 28 ----- ...ative-positioned-containing-block-ref.html | 64 +++++++++++ 4 files changed, 168 insertions(+), 70 deletions(-) delete mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html delete mode 100644 css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html create mode 100644 css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html b/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html deleted file mode 100644 index e66acf0f6c7b9d..00000000000000 --- a/css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html +++ /dev/null @@ -1,42 +0,0 @@ - - -CSS Grid Layout Test: Relative Positioned Grid Items With Absolute Positioned Child - - - - - - - -

Test passes if there is a green square and no red.

-
-
-
-
-
-
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html new file mode 100644 index 00000000000000..a5354312b7c49a --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html @@ -0,0 +1,104 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute positioned descendant + + + + + + + + +

Test passes if there are several identical green squares and no red area.

+ +

Relative positioned grid item with absolute positioned descendant.

+ +
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+ + +
+
+
+
+
+
+ +

Relative positioned grid item with fixed positioned descendant.

+ +
+
+
+
+
+
+ +
+
+
+ +
+ +
+
+
+
+ +

Relative positioned grid item with absolute and fixed positioned descendant.

+ +
+
+
+
+
+
+
diff --git a/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html b/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html deleted file mode 100644 index 79d843efb6abcf..00000000000000 --- a/css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html +++ /dev/null @@ -1,28 +0,0 @@ - - -CSS Grid Layout Test: Relative Positioned Grid Items With Absolute Positioned Child - - - - - -

Test passes if there is a green square and no red.

-
-
-
diff --git a/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html b/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html new file mode 100644 index 00000000000000..58535d77555f88 --- /dev/null +++ b/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html @@ -0,0 +1,64 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute positioned descendant + + + + + + + +

Test passes if there are several identical green squares and no red area.

+ +

Relative positioned grid item with absolute positioned descendant.

+ +
+
+
+ +
+
+
+ +
+
+
+ +

Relative positioned grid item with fixed positioned descendant.

+ +
+
+
+ +
+
+
+ +

Relative positioned grid item with absolute and fixed positioned descendant.

+ +
+
+
From 7dbdb8881e31fc2ad14f007348e2a029e801288a Mon Sep 17 00:00:00 2001 From: stevennovaryo Date: Fri, 7 Feb 2025 19:49:12 +0000 Subject: [PATCH 4/6] Split up the WPT test Signed-off-by: stevennovaryo --- ...ative-positioned-containing-block-001.html | 48 ++++++++ ...ative-positioned-containing-block-002.html | 52 +++++++++ ...ative-positioned-containing-block-003.html | 48 ++++++++ ...ative-positioned-containing-block-004.html | 48 ++++++++ ...ative-positioned-containing-block-005.html | 52 +++++++++ ...ative-positioned-containing-block-006.html | 54 +++++++++ ...-relative-positioned-containing-block.html | 104 ------------------ ...ative-positioned-containing-block-ref.html | 64 ----------- 8 files changed, 302 insertions(+), 168 deletions(-) create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html create mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html delete mode 100644 css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html delete mode 100644 css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html new file mode 100644 index 00000000000000..41daca3c69a7b6 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html @@ -0,0 +1,48 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html new file mode 100644 index 00000000000000..97e2e48173c2aa --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html @@ -0,0 +1,52 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+ +
+ +
+
+
+
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html new file mode 100644 index 00000000000000..909e726f9d376f --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html @@ -0,0 +1,48 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html new file mode 100644 index 00000000000000..736dbf05fdde7e --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html @@ -0,0 +1,48 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Fixed Positioned Descendant + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html new file mode 100644 index 00000000000000..fa51a8e3fb5faf --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html @@ -0,0 +1,52 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Fixed Positioned Descendant + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+ +
+ +
+
+
+
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html new file mode 100644 index 00000000000000..9115c3d7bafa6e --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html @@ -0,0 +1,54 @@ + + +CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute and Fixed Positioned Descendant + + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+
+
+
+
+
+
diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html deleted file mode 100644 index a5354312b7c49a..00000000000000 --- a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block.html +++ /dev/null @@ -1,104 +0,0 @@ - - -CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute positioned descendant - - - - - - - - -

Test passes if there are several identical green squares and no red area.

- -

Relative positioned grid item with absolute positioned descendant.

- -
-
-
-
-
-
- -
-
-
- -
- -
-
-
-
- - -
-
-
-
-
-
- -

Relative positioned grid item with fixed positioned descendant.

- -
-
-
-
-
-
- -
-
-
- -
- -
-
-
-
- -

Relative positioned grid item with absolute and fixed positioned descendant.

- -
-
-
-
-
-
-
diff --git a/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html b/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html deleted file mode 100644 index 58535d77555f88..00000000000000 --- a/css/css-grid/reference/grid-items-relative-positioned-containing-block-ref.html +++ /dev/null @@ -1,64 +0,0 @@ - - -CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute positioned descendant - - - - - - - -

Test passes if there are several identical green squares and no red area.

- -

Relative positioned grid item with absolute positioned descendant.

- -
-
-
- -
-
-
- -
-
-
- -

Relative positioned grid item with fixed positioned descendant.

- -
-
-
- -
-
-
- -

Relative positioned grid item with absolute and fixed positioned descendant.

- -
-
-
From 739e726fb1dc2aea5ddae9cf6e987a07ee27a379 Mon Sep 17 00:00:00 2001 From: stevennovaryo Date: Fri, 7 Feb 2025 19:49:12 +0000 Subject: [PATCH 5/6] Organize WPT test CSS Signed-off-by: stevennovaryo --- ...ative-positioned-containing-block-001.html | 30 +--------------- ...ative-positioned-containing-block-002.html | 30 +--------------- ...ative-positioned-containing-block-003.html | 30 +--------------- ...ative-positioned-containing-block-004.html | 30 +--------------- ...ative-positioned-containing-block-005.html | 30 +--------------- ...ative-positioned-containing-block-006.html | 35 +------------------ ...s-relative-positioned-containing-block.css | 32 +++++++++++++++++ 7 files changed, 38 insertions(+), 179 deletions(-) create mode 100644 css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html index 41daca3c69a7b6..7683e485c05cae 100644 --- a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html @@ -8,35 +8,7 @@ - +

Test passes if there is a filled green square and no red.

diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html index 97e2e48173c2aa..1e7a754f74da30 100644 --- a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html @@ -8,35 +8,7 @@ - +

Test passes if there is a filled green square and no red.

diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html index 909e726f9d376f..be0305181914e9 100644 --- a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html @@ -8,35 +8,7 @@ - +

Test passes if there is a filled green square and no red.

diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html index 736dbf05fdde7e..61d50a10c10290 100644 --- a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html @@ -8,35 +8,7 @@ - +

Test passes if there is a filled green square and no red.

diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html index fa51a8e3fb5faf..4473cb8d2ba4ea 100644 --- a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html @@ -8,35 +8,7 @@ - +

Test passes if there is a filled green square and no red.

diff --git a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html index 9115c3d7bafa6e..79350eac516f28 100644 --- a/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html @@ -8,40 +8,7 @@ - +

Test passes if there is a filled green square and no red.

diff --git a/css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css b/css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css new file mode 100644 index 00000000000000..669d0b0f68a68d --- /dev/null +++ b/css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css @@ -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; +} From 6699896adacfbb7a6da34b1a7197f031b458808a Mon Sep 17 00:00:00 2001 From: stevennovaryo Date: Fri, 7 Feb 2025 19:49:12 +0000 Subject: [PATCH 6/6] Fix WPT css endline Signed-off-by: stevennovaryo --- ...s-relative-positioned-containing-block.css | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css b/css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css index 669d0b0f68a68d..ccdecf612d65a6 100644 --- a/css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css +++ b/css/css-grid/grid-items/support/grid-items-relative-positioned-containing-block.css @@ -1,32 +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; -} +.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; +}