LayoutTests/css3/flexbox/aspect-ratios-main-size-calculation.html - Issue 343103003: Flexbox: Allow intrinsic aspect ratios to inform main-size calculation

Side by Side Diff: LayoutTests/css3/flexbox/aspect-ratios-main-size-calculation.html

Issue 343103003: Flexbox: Allow intrinsic aspect ratios to inform main-size calculation (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: WIP Patch Created 6 years, 6 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 <style>

	3 .flexbox {

	4 display: flex;

	5 background-color: #aaa;

	6 position: relative;

	7 }

	8

	9 .flexitem {

	10 background-color:red;

	11 -webkit-aspect-ratio: 1 / 2;
	tony 2014/06/23 16:50:57 We should have a test case where the flex item is We should have a test case where the flex item is an image. I think that's the primary use case (although the aspect-ratio property should also work). harpreet.sk 2014/06/26 14:41:48 I have added the test case where the flex item is Show quoted text On 2014/06/23 16:50:57, tony wrote: > We should have a test case where the flex item is an image. I think that's the > primary use case (although the aspect-ratio property should also work). I have added the test case where the flex item is an image and also test case where we are applying the aspect-ratio to the image using css.
	12 }

	13 </style>

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

	15 <body onload="checkLayout('.flexbox')">

	16 <p>Test for crbug.com/249112: In Flexbox, allow intrinsic aspect ratios to infor m the main-size calculation</p>

	17 <div class="flexbox">

	18 <div class="flexitem" style="height:100px" data-expected-width="50" data-expec ted-height="100"></div>
	tony 2014/06/23 16:50:57 We should also have a test case where the height i We should also have a test case where the height is not set on the flex item to see if the stretched size applies. Here's an example: http://jsfiddle.net/6kJTE/ In the example, the aspect ratio of the image is 2:1 and the image has a flex-basis of 'auto'. There's a definite cross size of 100px for the image[1]. This means that the flex basis size should be 200px during the flex algorithm. In the example, we use 100px incorrectly. Note that Firefox and IE11 both render the same as us. Maybe we should bring this back to the working group and ask if we should instead change the spec. [1] From the spec: "As a special case for handling stretched flex items, if a single-line flex container has a definite cross size, the outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and is considered definite." harpreet.sk 2014/06/26 14:41:48 I have also added this test case in the new patch. Show quoted text On 2014/06/23 16:50:57, tony wrote: > We should also have a test case where the height is not set on the flex item to > see if the stretched size applies. > > Here's an example: > http://jsfiddle.net/6kJTE/ > > In the example, the aspect ratio of the image is 2:1 and the image has a > flex-basis of 'auto'. There's a definite cross size of 100px for the image[1]. > This means that the flex basis size should be 200px during the flex algorithm. > In the example, we use 100px incorrectly. I have also added this test case in the new patch. New patch handle this test case properly. It will show flex basis as 200px and not 100px. Show quoted text > > Note that Firefox and IE11 both render the same as us. Maybe we should bring > this back to the working group and ask if we should instead change the spec. I think firefox and IE both render same as us because currently they are also not using aspect ratio while calculating main-size. Since it is already mention in the spec that [1] From the spec: "As a special case for handling stretched flex items, if a single-line flex container has a definite cross size, the outer cross size of any stretched flex items is the flex container’s inner cross size (clamped to the flex item’s min and max cross size) and <<<< is considered definite. >>>" and also it has been mention in the spec If the flex item has a) an intrinsic aspect ratio, b) a flex basis of 'auto', and c) "a definite cross size" then the flex base size is calculated from its inner cross size and the flex item’s intrinsic aspect ratio From the above 2 things we can conclude that for the single line flex containers we will have definite cross size if container has definite cross size. So while calculating their main size we have to take care of aspect ratio property. Firefox and IE currently also not following this point. May be after we implement they might also add the support for aspect ratio.
	19 </div>

	20 <div class="flexbox" style="height:200px">

	21 <div class="flexitem" style="height:50%" data-expected-width="50" data-expecte d-height="100"></div>

	22 </div>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/css3/flexbox/aspect-ratios-main-size-calculation-expected.txt » ('j') | no next file with comments »