box-sizing-018

auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w > max-wdith and h > max-height and max-width/w ≤ max-height/h

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 height and ratio with the w > max-width and h > max-height constraint violation and max-width/w ≤ max-height/h 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 height and ratio, w &gt; max-wdith and h &gt; max-height and max-width/w ≤ max-height/h</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 height and ratio
13 			     with the w > max-width and h > max-height constraint violation
14 			     and max-width/w ≤ max-height/h
15 			     are properly interpreted when box-sizing is border-box." name="assert">
16 <style>
17 #ref {
18 	display: inline-block;
19 	width: 70px;
20 	height: 70px;
21 	background: green;
22 }
23 
24 img {
25 	box-sizing: border-box;
26 	width: auto;
27 	height: auto;
28 	background: white;
29 	max-height: 100px;
30 	max-width: 70px;
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/h100_r1-1.svg">
38 
39 </body></html>