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..7683e485c05cae --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html @@ -0,0 +1,20 @@ + + +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..1e7a754f74da30 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html @@ -0,0 +1,24 @@ + + +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..be0305181914e9 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html @@ -0,0 +1,20 @@ + + +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..61d50a10c10290 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html @@ -0,0 +1,20 @@ + + +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..4473cb8d2ba4ea --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html @@ -0,0 +1,24 @@ + + +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..79350eac516f28 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html @@ -0,0 +1,21 @@ + + +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/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..ccdecf612d65a6 --- /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; +}