Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html |
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline-margins.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html |
similarity index 67% |
copy from third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline-margins.html |
copy to third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html |
index ffbd357284abf9d4b19b206f2fa067db818d2e20..ed801bdb97307e24514d37fc0ee0109152dda591 100644 |
--- a/third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline-margins.html |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html |
@@ -1,36 +1,28 @@ |
<!DOCTYPE html> |
-<html> |
-<head> |
-<link href="resources/flexbox.css" rel="stylesheet"> |
<style> |
-.flexbox, .inline-flexbox { |
- background-color: lightgrey; |
+.flexbox { |
+ display: -webkit-flex; |
+ display: flex; |
} |
- |
-.inline-block { |
- display: inline-block; |
+.inline-flexbox { |
+ display: -webkit-inline-flex; |
+ display: inline-flex; |
} |
- |
-.border { |
- border: 11px solid pink; |
+.flex-one { |
+ -webkit-flex: 1; |
+ flex: 1; |
} |
- |
-.padding { |
- padding: 13px; |
-} |
- |
-.margin { |
- margin: 8px 0; |
-} |
- |
+.inline-block { display: inline-block; } |
+.flexbox, .inline-flexbox { background-color: lightgrey; } |
+.border { border: 11px solid pink; } |
+.padding { padding: 13px; } |
+.margin { margin: 8px 0; } |
.flexbox > div { |
min-width: 0; |
min-height: 0; |
} |
</style> |
-</head> |
-<body> |
- |
+<p>This test ensures that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders.</p> |
<div> |
before text |
<div class="border" style="display: inline-block; background-color: lightgrey"> |
@@ -81,8 +73,8 @@ the grey box. |
<div> |
Should align with the top |
<div class="inline-block border margin padding" style="background-color: pink"> |
- <div class="flexbox border margin padding" style="width: 50px; height: 50px; background-color: pink"> |
- <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin-top: 4px; border-top: 9px solid pink;"></div> |
+ <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink"> |
+ <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div> |
</div> |
</div> |
of the horizontal scrollbar. |
@@ -91,12 +83,9 @@ of the horizontal scrollbar. |
<div> |
Should align 10px above the |
<div class="inline-block" style="background-color: pink"> |
- <div class="flexbox" style="width: 50px; height: 50px; background-color: pink"> |
- <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px"></div> |
+ <div class="flexbox" style="width: 100px; height: 100px; background-color: pink"> |
+ <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div> |
</div> |
</div> |
horizontal scrollbar, if one is visible. |
</div> |
- |
-</body> |
-</html> |