box-sizing-020

auto sizing rules with box-sizing:border-box, intrinsic width and height, h < min-height

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
svg
Assertion
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width and height with the h < min-height constraint violation are properly interpreted when box-sizing is border-box.

Source

 1 <!DOCTYPE html>
 2 <html><head><meta charset="utf-8">
 3 <title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, h &lt; min-height</title>
 4 <link href="http://florian.rivoal.net/" rel="author" title="Florian Rivoal">
 5 <link href="https://drafts.csswg.org/css-ui-3/#box-sizing" rel="help">
 6 <link href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width" rel="help">
 7 <link href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" rel="help">
 8 <link href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" rel="help">
 9 <meta content="svg" name="flags">
10 <link href="reference/box-sizing-020-ref.htm" rel="match">
11 <meta content="Test checks that the CSS2.1 rules for auto width and height
12                              on replaced elements with intrinsic width and height
13 			     with the h < min-height constraint violation
14 			     are properly interpreted when box-sizing is border-box." name="assert">
15 <style>
16 img {
17 	box-sizing: border-box;
18 	width: auto;
19 	height: auto;
20 	background: white;
21 	padding-bottom: 30px;
22 	min-height: 160px;
23 }
24 
25 #ref {
26 	display: inline-block;
27 	margin-bottom: 30px; /*for alignement*/
28 	width: 130px;
29 	height: 130px;
30 	background: green;
31 }
32 
33 </style>
34 </head><body>
35   <p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
36   <div id="ref"></div>
37   <img src="support/w100_h100.svg">
38 
39 </body></html>