LayoutTests/css3/flexbox/percent-margins-padding.html - Issue 385583005: For flex items, percent paddings should resolve against their respective dimension

Side by Side Diff: LayoutTests/css3/flexbox/percent-margins-padding.html

Issue 385583005: For flex items, percent paddings should resolve against their respective dimension Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <link href="resources/flexbox.css" rel="stylesheet">

	4 <style>

	5 .flexbox {

	6 background: green;

	7 position: relative;

	8 }

	9 </style>

	10 <script src="../../resources/js-test.js"></script>

	11 <script src="../../resources/check-layout.js"></script>

	12 <script>

	13 function checkPaddingAndMargin()

	14 {

	15 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-top")', '10px');
	tony 2014/07/10 17:10:06 I think it would a bit clearer to put a div inside I think it would a bit clearer to put a div inside the flex children and use data-* attributes to check the padding rather than using getComputedStyle. harpreet.sk 2014/07/14 08:38:07 Done. Show quoted text On 2014/07/10 17:10:06, tony wrote: > I think it would a bit clearer to put a div inside the flex children and use > data-* attributes to check the padding rather than using getComputedStyle. Done.
	16 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-bottom")', '10px');

	17 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-left")', '78.390625px');

	18 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-right")', '78.390625px');

	19 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-top")', '8px');
	tony 2014/07/10 17:10:06 How does this get a value of 8px? The percent hei How does this get a value of 8px? The percent height doesn't have a fixed value to resolve against. harpreet.sk 2014/07/14 08:38:06 There was a mistake in previous solution. Correct Show quoted text On 2014/07/10 17:10:06, tony wrote: > How does this get a value of 8px? The percent height doesn't have a fixed value > to resolve against. There was a mistake in previous solution. Correct the mistake with new solution.
	20 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-bottom")', '8px');

	21 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-left")', '313.59375px');

	22 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-right")', '313.59375px');

	23 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-top")', '6px');

	24 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-bottom")', '6px');

	25 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-left")', '235.1875px');

	26 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-right")', '235.1875px');
	tony 2014/07/10 17:10:06 Why no tests for before/after? You make code chan Why no tests for before/after? You make code changes to before/after. harpreet.sk 2014/07/14 08:38:06 Done. Show quoted text On 2014/07/10 17:10:06, tony wrote: > Why no tests for before/after? You make code changes to before/after. Done.
	27 checkLayout('.flexbox');

	28 }

	29 </script>

	30 <body onload="checkPaddingAndMargin()">

	31 <div class="flexbox" style="height:100px">

	32 <div id="flexItem1" data-expected-height="100" style="background:yellow; pad ding:10%;">Pasta batman</div>

	33 </div>

	34

	35 <div class="flexbox" style="height:30%">
	tony 2014/07/10 17:10:06 Did you mean to put a percent height here? It doe Did you mean to put a percent height here? It doesn't do anything does it? harpreet.sk 2014/07/14 08:38:07 Just wanted add the case when containing block has Show quoted text On 2014/07/10 17:10:06, tony wrote: > Did you mean to put a percent height here? It doesn't do anything does it? Just wanted add the case when containing block has height in % which cannot be resolved. In this case then padding top and bottom will be 0.
	36 <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 Is the height based on the font? That seems unreliable across platforms. harpreet.sk 2014/07/14 08:38:06 Acknowledged. Show quoted text On 2014/07/10 17:10:06, tony wrote: > Is the height based on the font? That seems unreliable across platforms. Acknowledged.
	37 </div>

	38

	39 <div class="flexbox">

	40 <div id="flexItem3" data-expected-height="20" style="padding:30%; background :yellow">Pasta batman</div>

	41 </div>

	42 </body>

	43 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/css3/flexbox/percent-margins-padding-expected.txt » ('j') | Source/core/rendering/RenderBoxModelObject.h » ('J')