| 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>
|
|
|
Chromium Code Reviews
Issue 1742973002:
[css-flexbox] Correctly resolve percentages in children of stretched flex items (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master