Index: LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html |
diff --git a/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html b/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..1c7326c2087cb5ecb52b4b2ce17c116868b17c22 |
--- /dev/null |
+++ b/LayoutTests/css3/flexbox/inline-flexbox-wrap-vertically-width-calculation.html |
@@ -0,0 +1,91 @@ |
+<!DOCTYPE html> |
+<html> |
+<link href="resources/flexbox.css" rel="stylesheet"> |
+<style> |
+.inline-flexbox { |
+ background-color: #aaa; |
+ position: relative; |
+} |
+ |
+.writing-mode-vertical { |
+ -webkit-writing-mode: vertical-lr; |
tony
2014/07/21 17:50:59
I would use vertical-rl instead. Neither are very
harpreet.sk
2014/07/22 10:10:23
Done.
|
+} |
+.inline-flexbox > * { |
+ flex: none; |
+} |
+.inline-flexbox :nth-child(1) { |
+ background-color: lightblue; |
+} |
+.inline-flexbox :nth-child(2) { |
+ background-color: lightgreen; |
+} |
+.inline-flexbox :nth-child(3) { |
+ background-color: pink; |
+} |
+.inline-flexbox :nth-child(4) { |
+ background-color: yellow; |
+} |
+</style> |
+<script src="../../resources/check-layout.js"></script> |
+<body onload="checkLayout('.inline-flexbox');"> |
+<div class="inline-flexbox column align-content-flex-start wrap" data-expected-width="100"> |
tony
2014/07/21 17:50:59
I think all the flexboxes should have a expected-h
harpreet.sk
2014/07/22 10:10:23
Done.
|
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
tony
2014/07/21 17:50:59
Looks like all the flex items have a width of 100p
harpreet.sk
2014/07/22 10:10:23
Done.
|
+ <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="30"></div> |
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div> |
+</div> |
+ |
+<div class="inline-flexbox column align-content-flex-start wrap" style="height: 35px" data-expected-width="200"> |
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="10"></div> |
+</div> |
+ |
+<div style="width: 300px; height:100px"> |
tony
2014/07/21 17:50:58
What is the height here for?
harpreet.sk
2014/07/22 10:10:23
No use of height so removed.
|
+<div class="inline-flexbox column align-content-flex-start wrap" style="width: 50%" data-expected-width="150"> |
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="30"></div> |
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="40"></div> |
+</div> |
+</div> |
+ |
+<div style="width: 300px; height:100px"> |
tony
2014/07/21 17:50:59
What is the height here for?
harpreet.sk
2014/07/22 10:10:23
No use of height so removed.
|
+<div class="inline-flexbox column align-content-flex-start wrap" style="width: 50%; height: 35px;" data-expected-width="150"> |
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="10"></div> |
+</div> |
+</div> |
+ |
+<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-height="20"> |
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="200" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 20px" data-offset-x="300" data-offset-y="0"></div> |
+</div> |
+ |
+<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-height="40"> |
+ <div style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"></div> |
+ <div style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20"></div> |
+ <div style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="20"></div> |
+</div> |
+ |
+<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" data-expected-height="20"> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"></div> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-offset-x="200" data-offset-y="0"></div> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-offset-x="300" data-offset-y="0"></div> |
+</div> |
+ |
+<div class="inline-flexbox column align-content-flex-start wrap writing-mode-vertical" style="width: 200px" data-expected-height="40"> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-offset-x="0" data-offset-y="0"></div> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-offset-x="100" data-offset-y="0"></div> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 10px" data-offset-x="0" data-offset-y="20"></div> |
+ <div class="writing-mode-vertical" style="width: 100px; height: 20px" data-offset-x="100" data-offset-y="20"></div> |
+</div> |
+</body> |
+</html> |