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..d6e7c7d6a62b2131fb82878f785546a25540d8bc |
| --- /dev/null |
| +++ b/LayoutTests/css3/flexbox/percent-margins-padding.html |
| @@ -0,0 +1,43 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<link href="resources/flexbox.css" rel="stylesheet"> |
| +<style> |
| +.flexbox { |
| + background: green; |
| + position: relative; |
| +} |
| +</style> |
| +<script src="../../resources/js-test.js"></script> |
| +<script src="../../resources/check-layout.js"></script> |
| +<script> |
| +function checkPaddingAndMargin() |
| +{ |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem1"),null).getPropertyValue("padding-top")', '10px'); |
|
tony
2014/07/10 17:10:06
I think it would a bit clearer to put a div inside
harpreet.sk
2014/07/14 08:38:07
Done.
|
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem1"),null).getPropertyValue("padding-bottom")', '10px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem1"),null).getPropertyValue("padding-left")', '78.390625px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem1"),null).getPropertyValue("padding-right")', '78.390625px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem2"),null).getPropertyValue("padding-top")', '8px'); |
|
tony
2014/07/10 17:10:06
How does this get a value of 8px? The percent hei
harpreet.sk
2014/07/14 08:38:06
There was a mistake in previous solution. Correct
|
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem2"),null).getPropertyValue("padding-bottom")', '8px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem2"),null).getPropertyValue("padding-left")', '313.59375px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem2"),null).getPropertyValue("padding-right")', '313.59375px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem3"),null).getPropertyValue("padding-top")', '6px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem3"),null).getPropertyValue("padding-bottom")', '6px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem3"),null).getPropertyValue("padding-left")', '235.1875px'); |
| + shouldBeEqualToString('window.getComputedStyle(document.getElementById("flexItem3"),null).getPropertyValue("padding-right")', '235.1875px'); |
|
tony
2014/07/10 17:10:06
Why no tests for before/after? You make code chan
harpreet.sk
2014/07/14 08:38:06
Done.
|
| + checkLayout('.flexbox'); |
| +} |
| +</script> |
| +<body onload="checkPaddingAndMargin()"> |
| +<div class="flexbox" style="height:100px"> |
| + <div id="flexItem1" data-expected-height="100" style="background:yellow; padding:10%;">Pasta batman</div> |
| +</div> |
| + |
| +<div class="flexbox" style="height:30%"> |
|
tony
2014/07/10 17:10:06
Did you mean to put a percent height here? It doe
harpreet.sk
2014/07/14 08:38:07
Just wanted add the case when containing block has
|
| + <div id="flexItem2" data-expected-height="20" style="padding:40%; background:yellow">Pasta batman</div> |
|
tony
2014/07/10 17:10:06
Is the height based on the font? That seems unrel
harpreet.sk
2014/07/14 08:38:06
Acknowledged.
|
| +</div> |
| + |
| +<div class="flexbox"> |
| + <div id="flexItem3" data-expected-height="20" style="padding:30%; background:yellow">Pasta batman</div> |
| +</div> |
| +</body> |
| +</html> |
