Attachment #479079 for bug #272527

View Details Raw Unified Return to Bug 272527

| Differences between

Lines 4275-4282 template<typename SizeType> LayoutUnit RenderBox::computeOutOfFlowPositionedLogi a/Source/WebCore/rendering/RenderBox.cpp_sec1
- a/Source/WebCore/rendering/RenderBox.cpp -2 / +4 lines
4275	}	4275	}
4276	return 0_lu;	4276	return 0_lu;
4277	} else {	4277	} else {
4278	if (shouldComputeLogicalWidthFromAspectRatio())	4278	if (shouldComputeLogicalWidthFromAspectRatio()) {
4279	return computeLogicalWidthFromAspectRatio();	4279	auto logicalWidth = computeLogicalWidthFromAspectRatio();
		4280	return style().boxSizingForAspectRatio() == BoxSizing::BorderBox ? logicalWidth : logicalWidth - inlineConstraints.bordersPlusPadding();
		4281	}
4280	return fallback();	4282	return fallback();
4281	}	4283	}
4282	},	4284	},




PASS aspect-ratio 1/1 with border on abspos
PASS aspect-ratio 1/1 with padding on abspos
PASS aspect-ratio 1/1 with border and padding on abspos
PASS aspect-ratio 2/1 with border on abspos
FAIL aspect-ratio 1/1 with border-box sizing on abspos assert_equals: Should be a square with box-sizing: border-box expected 100 but got 60
PASS aspect-ratio 1/1 without border on abspos (sanity)




<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.container {
    position: relative;
    width: 800px;
    height: 600px;
}
</style>

<div class="container">
    <!-- border + aspect-ratio 1/1 -->
    <div id="t1" style="position: absolute; height: 100px; aspect-ratio: 1/1; border: 150px solid;"></div>

    <!-- padding + aspect-ratio 1/1 -->
    <div id="t2" style="position: absolute; height: 100px; aspect-ratio: 1/1; padding: 150px;"></div>

    <!-- border + padding + aspect-ratio 1/1 -->
    <div id="t3" style="position: absolute; height: 80px; aspect-ratio: 1/1; border: 50px solid; padding: 30px;"></div>

    <!-- aspect-ratio 2/1 with border -->
    <div id="t4" style="position: absolute; height: 100px; aspect-ratio: 2/1; border: 50px solid;"></div>

    <!-- box-sizing: border-box with border -->
    <div id="t5" style="position: absolute; height: 100px; aspect-ratio: 1/1; border: 20px solid; box-sizing: border-box;"></div>

    <!-- no border (sanity check) -->
    <div id="t6" style="position: absolute; height: 100px; aspect-ratio: 1/1;"></div>
</div>

<script>
function dims(id) {
    var el = document.getElementById(id);
    return { w: el.offsetWidth, h: el.offsetHeight };
}

test(function() {
    var d = dims("t1");
    assert_equals(d.w, d.h, "Should be a square (border 150px, content 100px)");
    assert_equals(d.w, 400, "100 content + 150*2 border = 400");
}, "aspect-ratio 1/1 with border on abspos");

test(function() {
    var d = dims("t2");
    assert_equals(d.w, d.h, "Should be a square (padding 150px, content 100px)");
    assert_equals(d.w, 400, "100 content + 150*2 padding = 400");
}, "aspect-ratio 1/1 with padding on abspos");

test(function() {
    var d = dims("t3");
    assert_equals(d.w, d.h, "Should be a square (border 50px + padding 30px, content 80px)");
    assert_equals(d.w, 240, "80 content + (50+30)*2 = 240");
}, "aspect-ratio 1/1 with border and padding on abspos");

test(function() {
    var d = dims("t4");
    assert_equals(d.h, 200, "100 content + 50*2 border = 200");
    assert_equals(d.w, 300, "200 content + 50*2 border = 300");
}, "aspect-ratio 2/1 with border on abspos");

test(function() {
    var d = dims("t5");
    assert_equals(d.w, d.h, "Should be a square with box-sizing: border-box");
    assert_equals(d.w, 100, "border-box: 100px total");
}, "aspect-ratio 1/1 with border-box sizing on abspos");

test(function() {
    var d = dims("t6");
    assert_equals(d.w, 100, "No border: just 100px content");
    assert_equals(d.h, 100);
}, "aspect-ratio 1/1 without border on abspos (sanity)");
</script>

Return to Bug 272527

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border-expected.txt +8 lines
	1
	2	PASS aspect-ratio 1/1 with border on abspos
	3	PASS aspect-ratio 1/1 with padding on abspos
	4	PASS aspect-ratio 1/1 with border and padding on abspos
	5	PASS aspect-ratio 2/1 with border on abspos
	6	FAIL aspect-ratio 1/1 with border-box sizing on abspos assert_equals: Should be a square with box-sizing: border-box expected 100 but got 60
	7	PASS aspect-ratio 1/1 without border on abspos (sanity)
	8

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio/abspos-aspect-ratio-border.html +73 lines
		1	<!DOCTYPE html>
		2	<script src="/resources/testharness.js"></script>
		3	<script src="/resources/testharnessreport.js"></script>
		4	<style>
		5	.container {
		6	position: relative;
		7	width: 800px;
		8	height: 600px;
		9	}
		10	</style>
		11
		12	<div class="container">
		13	<!-- border + aspect-ratio 1/1 -->
		14	<div id="t1" style="position: absolute; height: 100px; aspect-ratio: 1/1; border: 150px solid;"></div>
		15
		16	<!-- padding + aspect-ratio 1/1 -->
		17	<div id="t2" style="position: absolute; height: 100px; aspect-ratio: 1/1; padding: 150px;"></div>
		18
		19	<!-- border + padding + aspect-ratio 1/1 -->
		20	<div id="t3" style="position: absolute; height: 80px; aspect-ratio: 1/1; border: 50px solid; padding: 30px;"></div>
		21
		22	<!-- aspect-ratio 2/1 with border -->
		23	<div id="t4" style="position: absolute; height: 100px; aspect-ratio: 2/1; border: 50px solid;"></div>
		24
		25	<!-- box-sizing: border-box with border -->
		26	<div id="t5" style="position: absolute; height: 100px; aspect-ratio: 1/1; border: 20px solid; box-sizing: border-box;"></div>
		27
		28	<!-- no border (sanity check) -->
		29	<div id="t6" style="position: absolute; height: 100px; aspect-ratio: 1/1;"></div>
		30	</div>
		31
		32	<script>
		33	function dims(id) {
		34	var el = document.getElementById(id);
		35	return { w: el.offsetWidth, h: el.offsetHeight };
		36	}
		37
		38	test(function() {
		39	var d = dims("t1");
		40	assert_equals(d.w, d.h, "Should be a square (border 150px, content 100px)");
		41	assert_equals(d.w, 400, "100 content + 150*2 border = 400");
		42	}, "aspect-ratio 1/1 with border on abspos");
		43
		44	test(function() {
		45	var d = dims("t2");
		46	assert_equals(d.w, d.h, "Should be a square (padding 150px, content 100px)");
		47	assert_equals(d.w, 400, "100 content + 150*2 padding = 400");
		48	}, "aspect-ratio 1/1 with padding on abspos");
		49
		50	test(function() {
		51	var d = dims("t3");
		52	assert_equals(d.w, d.h, "Should be a square (border 50px + padding 30px, content 80px)");
		53	assert_equals(d.w, 240, "80 content + (50+30)*2 = 240");
		54	}, "aspect-ratio 1/1 with border and padding on abspos");
		55
		56	test(function() {
		57	var d = dims("t4");
		58	assert_equals(d.h, 200, "100 content + 50*2 border = 200");
		59	assert_equals(d.w, 300, "200 content + 50*2 border = 300");
		60	}, "aspect-ratio 2/1 with border on abspos");
		61
		62	test(function() {
		63	var d = dims("t5");
		64	assert_equals(d.w, d.h, "Should be a square with box-sizing: border-box");
65	assert_equals(d.w, 100, "border-box: 100px total");
66	}, "aspect-ratio 1/1 with border-box sizing on abspos");
67
68	test(function() {
69	var d = dims("t6");
70	assert_equals(d.w, 100, "No border: just 100px content");
71	assert_equals(d.h, 100);
72	}, "aspect-ratio 1/1 without border on abspos (sanity)");
73	</script>