Index: third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-006.html |
diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-006.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-006.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5ae2f2cd36d4097e9d86a322e0bcd04b66d84de2 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/abspos/positioned-grid-items-006.html |
@@ -0,0 +1,58 @@ |
+<!DOCTYPE html> |
+<meta charset="utf-8"> |
+<title>CSS Grid Layout Test: Positioned grid items</title> |
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> |
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> |
+<link rel="match" href="positioned-grid-items-006-ref.html"> |
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto')."> |
+<style> |
+#grid { |
+ display: grid; |
+ grid: 150px 100px / 200px 300px; |
+ margin: 1px 2px 3px 4px; |
+ padding: 20px 15px 10px 5px; |
+ border-width: 9px 3px 12px 6px; |
+ border-style: solid; |
+ width: 550px; |
+ height: 400px; |
+ position: relative; |
+} |
+ |
+#grid > div { |
+ position: absolute; |
+ bottom: 0; |
+} |
+ |
+#firstItem { |
+ background: magenta; |
+ grid-column: 1 / 2; |
+ grid-row: 1 / 2; |
+} |
+ |
+#secondItem { |
+ background: cyan; |
+ grid-column: 2 / 3; |
+ grid-row: 1 / 2; |
+} |
+ |
+#thirdItem { |
+ background: yellow; |
+ grid-column: 1 / 2; |
+ grid-row: 2 / 3; |
+} |
+ |
+#fourthItem { |
+ background: lime; |
+ grid-column: 2 / 3; |
+ grid-row: 2 / 3; |
+} |
+</style> |
+ |
+<p>The test passes if it has the same output than the reference.</p> |
+ |
+<div id="grid"> |
+ <div id="firstItem">First item</div> |
+ <div id="secondItem">Second item</div> |
+ <div id="thirdItem">Third item</div> |
+ <div id="fourthItem">Fourth item</div> |
+</div> |