Index: third_party/WebKit/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html |
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html b/third_party/WebKit/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..d5683706fe4bfffabe4bf9f51e5d61a1131a2fd7 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/css3/flexbox/percent-height-children-of-alignSelf-stretch-flex-item.html |
@@ -0,0 +1,78 @@ |
+<!DOCTYPE html> |
+<link href="resources/flexbox.css" rel="stylesheet"> |
+<style> |
+.horizontal { |
+ height: 50px; |
+ background-color: purple; |
+ position: relative; |
+} |
+.vertical { |
+ width: 50px; |
+ height: 10px; |
+ background-color: purple; |
+ position: relative; |
+ writing-mode: vertical-rl; |
+} |
+.flex-one { |
+ background-color: red; |
+} |
+</style> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
+<script src="../../resources/check-layout-th.js"></script> |
+<script> |
+function changeHeight() |
+{ |
+ document.getElementById('dynamicHorizontalChild').style.height = "90%"; |
+ document.getElementById('dynamicVerticalChild').style.width = "30%"; |
+ checkLayout('.flexbox'); |
+} |
+</script> |
+<body onload="changeHeight()"> |
+<div class="flexbox horizontal"> |
+ <div data-expected-height="50" class="flex-one"> |
+ <div data-expected-height="35" style="height: 70%; background-color: lime"></div> |
+ </div> |
+</div> |
+<div class="flexbox horizontal"> |
+ <div data-expected-height="50" class="flex-one"> |
+ <div id="dynamicHorizontalChild" data-expected-height="45" style="height: 70%; background-color: lime"></div> |
+ </div> |
+</div> |
+<div class="flexbox horizontal"> |
+ <div data-expected-height="50" class="flex-one" style="padding: 10px; border: 2px solid black"> |
+ <div data-expected-height="18" style="height: 70%; background-color: lime"></div> |
+ </div> |
+</div> |
+<div class="flexbox horizontal"> |
+ <img data-expected-height="25" style="max-height: 50%" src="../images/resources/green-10.png" /> |
+</div> |
+<div class="flexbox horizontal"> |
+ <div data-expected-height="25" class="flex-one" style="max-height:50%"> |
+ <div data-expected-height="13" style="height: 50%; background-color: lime"></div> |
+ </div> |
+</div> |
+<div class="flexbox vertical"> |
+ <div data-expected-width="50" class="flex-one"> |
+ <div data-expected-width="25" style="width: 50%; background-color: lime"></div> |
+ </div> |
+</div> |
+<div class="flexbox vertical"> |
+ <div data-expected-width="50" class="flex-one"> |
+ <div id="dynamicVerticalChild" data-expected-width="15" style="width: 50%; background-color: lime"></div> |
+ </div> |
+</div> |
+<div class="flexbox vertical"> |
+ <div data-expected-width="50" class="flex-one" style="padding: 10px; border: 2px solid black"> |
+ <div data-expected-width="13" style="width: 50%; background-color: lime"></div> |
+ </div> |
+</div> |
+<div class="flexbox vertical"> |
+ <img data-expected-width="25" style="max-width: 50%" src="../images/resources/green-10.png" /> |
+</div> |
+<div class="flexbox vertical"> |
+ <div data-expected-width="25" class="flex-one" style="max-width: 50%"> |
+ <div data-expected-width="13" style="width: 50%; background-color: lime"></div> |
+ </div> |
+</div> |
+</body> |