Chromium Code Reviews Chromium Code Reviews
Issue 385583005:
For flex items, percent paddings should resolve against their respective dimension
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/css3/flexbox/percent-margins-padding.html |
| diff --git a/LayoutTests/css3/flexbox/percent-margins-padding.html b/LayoutTests/css3/flexbox/percent-margins-padding.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..427cfb2c270df4927f77e4b6f77a026d02bfe6ea |
| --- /dev/null |
| +++ b/LayoutTests/css3/flexbox/percent-margins-padding.html |
| @@ -0,0 +1,54 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<link href="resources/flexbox.css" rel="stylesheet"> |
| +<style> |
| +.flexbox { |
| + background: green; |
| + position: relative; |
| +} |
| +</style> |
| +<script src="../../resources/check-layout.js"></script> |
| +<body onload="checkLayout('.flexbox')"> |
| +<div class="flexbox" style="height:100px; padding: 10px; border:2px solid red;"> |
|
leviw_travelin_and_unemployed
2014/07/15 20:08:29
Nit: please promote the repeated inline styles to
harpreet.sk
2014/07/16 15:43:01
Done.
|
| + <div id="flexItem1" data-expected-padding-top="10" data-expected-padding-bottom="10" style="background:yellow; padding:10%;">Pasta batman</div> |
| +</div> |
| + |
| +<div class="flexbox" style="height:30%; padding: 10px; border:2px solid red;"> |
| + <div id="flexItem2" data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:20%; background:yellow">Pasta batman</div> |
| +</div> |
| + |
| +<div class="flexbox" style="padding: 10px; border:2px solid red;"> |
| + <div id="flexItem3" data-expected-padding-top="0" data-expected-padding-bottom="0" style="padding:30%; background:yellow">Pasta batman</div> |
| +</div> |
| + |
| +<div style="height:200px; padding: 10px; border:2px solid red;"> |
| +<div class="flexbox" style="height:30%"> |
| + <div id="flexItem2" data-expected-padding-top="12" data-expected-padding-bottom="12" style="padding:20%; background:yellow">Pasta batman</div> |
| +</div> |
| +</div> |
| + |
| +<div style="height:200px; padding: 10px; border:2px solid red;"> |
| +<div style="height:40%"> |
| +<div class="flexbox" style="height:30%"> |
| + <div id="flexItem2" data-expected-padding-top="12" data-expected-padding-bottom="12" style="padding:50%; background:yellow">Pasta batman</div> |
| +</div> |
| +</div> |
| +</div> |
| + |
| +<div class="flexbox" style="height:min-content; padding: 10px; border:2px solid red;"> |
| + <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bottom="0" style="background:yellow; padding:10%;">Pasta batman</div> |
| +</div> |
| + |
| +<div class="flexbox" style="height:max-content; padding: 10px; border:2px solid red;"> |
| + <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bottom="0" style="background:yellow; padding:10%;">Pasta batman</div> |
| +</div> |
| + |
| +<div class="flexbox" style="height:fit-content; padding: 10px; border:2px solid red;"> |
| + <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bottom="0" style="background:yellow; padding:10%;">Pasta batman</div> |
| +</div> |
| + |
| +<div class="flexbox" style="min-height:100px; max-height:100px; padding: 10px; border:2px solid red;"> |
| + <div id="flexItem1" data-expected-padding-top="0" data-expected-padding-bottom="0" style="background:yellow; padding:10%;">Pasta batman</div> |
| +</div> |
| +</body> |
| +</html> |
