Index: LayoutTests/css3/flexbox/percent-padding.html |
diff --git a/LayoutTests/css3/flexbox/percent-padding.html b/LayoutTests/css3/flexbox/percent-padding.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..24bc189d330431241c10fb50fce1e38429250079 |
--- /dev/null |
+++ b/LayoutTests/css3/flexbox/percent-padding.html |
@@ -0,0 +1,74 @@ |
+<!DOCTYPE html> |
+<html> |
+<link href="resources/flexbox.css" rel="stylesheet"> |
+<style> |
+.flexbox { |
+ background: green; |
+ position: relative; |
+ padding: 10px; |
+ border: 2px solid red; |
+} |
+ |
+.flexbox > div { |
+ background: yellow; |
+} |
+ |
+.verticalWritingMode { |
+ -webkit-writing-mode: vertical-rl; |
+} |
+</style> |
+<script src="../../resources/check-layout.js"></script> |
+<body onload="checkLayout('.flexbox')"> |
+<div class="flexbox" style="height:100px"> |
+ <div data-expected-padding-top="10" data-expected-padding-bottom="10" style="padding:10%"></div> |
+</div> |
+ |
+<div class="flexbox" style="height:30%"> |
+ <div data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:20%"></div> |
+</div> |
+ |
+<div class="flexbox"> |
+ <div data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:30%"></div> |
+</div> |
+ |
+<div style="height:200px;"> |
+ <div class="flexbox" style="height:30%"> |
+ <div data-expected-padding-top="12" data-expected-padding-bottom="12" style="padding:20%"></div> |
+ </div> |
+</div> |
+ |
+<div style="height:200px"> |
+ <div style="height:40%"> |
+ <div class="flexbox" style="height:30%"> |
+ <div data-expected-padding-top="12" data-expected-padding-bottom="12" style="padding:50%"></div> |
+ </div> |
+ </div> |
+</div> |
+ |
+<div class="flexbox" style="height:min-content"> |
+ <div data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:10%"></div> |
+</div> |
+ |
+<div class="flexbox" style="height:max-content"> |
+ <div data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:10%"></div> |
+</div> |
+ |
+<div class="flexbox" style="height:fit-content"> |
+ <div data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:10%"></div> |
+</div> |
+ |
+<div class="flexbox" style="min-height:100px; max-height:100px"> |
+ <div data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:10%"></div> |
+</div> |
+ |
+<div class="flexbox verticalWritingMode" style="width:200px;" > |
+ <div data-expected-padding-top="40" data-expected-padding-bottom="40" style="padding: 20%"></div> |
+</div> |
+ |
+<div style="width:500px;"> |
+<div class="flexbox verticalWritingMode" style="width:20%;"> |
+ <div data-expected-padding-top="20" data-expected-padding-bottom="20" style="padding: 20%"></div> |
+</div> |
+</div> |
+</body> |
+</html> |