5 <title>CSS Containment Test: 'contain: size' applies to inline-block
</title>
7 <link rel=
"author" title=
"GĂ©rard Talbot" href=
"http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
8 <link rel=
"help" href=
"https://www.w3.org/TR/css-contain-1/#containment-size">
9 <link rel=
"match" href=
"reference/contain-size-021-ref.html">
11 <meta content=
"This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of images." name=
"assert">
12 <meta name=
"flags" content=
"">
16 contain-size-021: inline-block with 1 image and no in-flow block descendant: width comparison
18 contain-size-022: inline-block with 1 image and no in-flow block descendant: height comparison
20 contain-size-023: inline-block with text and no in-flow block descendant: width comparison
22 contain-size-024: inline-block with text and no in-flow block descendant: height comparison
24 contain-size-025: inline-block and 2 in-flow block descendants made of images: width comparison
26 contain-size-026: inline-block and 2 in-flow block descendants made of images: height comparison
28 contain-size-027: inline-block and 2 in-flow block descendants made of text: width comparison
30 contain-size-028: inline-block and 2 in-flow block descendants made of text: height comparison
37 display: inline-block;
42 background-color: blue;
47 span.block-descendant, img
54 background-color: orange;
60 <p>This test passes if the painted blue area is
<strong>exactly as wide as
</strong> the orange square.
63 <div id=
"blue-test" class=
"inline-block">
64 <span class=
"block-descendant"><img src=
"support/blue50wBy25h.png" alt=
"Image download support must be enabled"></span>
65 <span id=
"last-line-box" class=
"block-descendant"><img src=
"support/blue50wBy25h.png" alt=
"Image download support must be enabled"></span>
69 <div id=
"orange-reference" class=
"inline-block"></div>