box-sizing-011

auto sizing rules with box-sizing:border-box, intrinsic width and height, w > max-width

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 w > max-width 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, w &gt; max-width</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-010-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 w > max-width 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-right: 30px;
22 	max-width: 100px;
23 }
24 
25 #ref {
26 	display:inline-block;
27 	height: 70px;
28 	width: 70px;
29 	background: green;
30 }
31 
32 </style>
33 </head><body>
34   <p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p>
35   <div id="ref"></div>
36   <img src="support/w100_h100.svg">
37 
38 </body></html>