Chapter 3 - Box Model addition - 3.1 Changing the Box Model: the box-sizing property
Go to the relevant page of the specification.
- box-sizing-001
-
box-sizing:border-box and CSS2.1 10.3.3
When box-sizing is border-box, the content width, rather than the computed value of the width property, is considered when checking whether a block is larger than its containing block. - box-sizing-003
-
box-sizing:border-box and CSS2.1 10.3.7
When box-sizing is border-box, the content width, rather than the computed value of the width property, should be used in the the constraint that determines the used values of sizing and positioning properties of absolutely positioned elements. - box-sizing-005
-
box-sizing:border-box and CSS2.1 10.6.4
When box-sizing is border-box, the content height, rather than the computed value of the height property, should be used in the the constraint that determines the used values of sizing and positioning properties of absolutely positioned elements. - box-sizing-007 (svg)
-
box-sizing:border-box and auto sizing of intrinsicly sized replaced elements.
Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with either both intrisic dimentions or an intrinsic ratio, to check that they work correctly in terms of the content width height. - box-sizing-008 (svg)
-
box-sizing:border-box and auto sizing of replaced elements with intrinisic width only.
Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with intrisic width and no intrinsic ratio, to check that they work correctly in terms of the content width height. - box-sizing-009 (svg)
-
box-sizing:border-box and auto sizing of replaced elements with intrinisic height only.
Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with intrisic height and no intrinsic ratio, to check that they work correctly in terms of the content width height. - box-sizing-010 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width and height, h > max-height
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width and height with the h > max-height constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-011 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width and height, w > max-width
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. - box-sizing-012 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width, h > max-height
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width with the h > max-height constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-013 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic height, w > max-width
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic height with the w > max-width constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-014 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width and ratio, h > max-height
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width and ratio with the h > max-height constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-015 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w > max-width
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 constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-016 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic ratio, h > max-height
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic ratio with the h > max-height constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-017 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic ratio, w > max-width
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic ratio with the w > max-width constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-018 (svg)
-
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
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. - box-sizing-019 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width and ratio, w > max-wdith and h > max-height and max-width/w > max-height/h
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width 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. - box-sizing-020 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width and height, h < min-height
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. - box-sizing-021 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width and height, w < win-width
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width and height with the w < min-width constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-022 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width, w < min-width
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width with the w < min-width constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-023 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic height, h < min-height
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic height with the h < min-height constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-024 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic width and ratio, h < mi:-height
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic width and ratio with the h < min-height constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-025 (svg)
-
auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w < min-width
Test checks that the CSS2.1 rules for auto width and height on replaced elements with intrinsic height and ratio with the w < min-width constraint violation are properly interpreted when box-sizing is border-box. - box-sizing-026
-
box-sizing:border-box floors to 0
Floor width and height computation to 0 as they cannot be negative. - box-sizing-027 (script)
-
box-sizing:border-box resolved values
- box-sizing-border-box-001
-
Box Sizing - Border-Box with specified width
box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge. - box-sizing-border-box-002
-
Box Sizing - Border-Box with specified width
box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge. - box-sizing-border-box-003
-
Box Sizing - Border-Box with specified width/height
box-sizing: border-box should make the element's (percentage) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge. - box-sizing-border-box-004
-
Box Sizing - Border-Box with min/max width/height
box-sizing: border-box should make the element's (length) width be the distance from the left border edge to the right border edge and the height be the distance from the top border edge to the bottom border edge. - box-sizing-content-box-001
-
Box Sizing - Content-Box with specified width/height
box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge. - box-sizing-content-box-002
-
Box Sizing - Content-Box with specified width/height
box-sizing: content-box should make the element's (calc) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge. - box-sizing-content-box-003
-
Box Sizing - Content-Box with min/max width/height
box-sizing: content-box should make the element's (percentage) width be the distance from the left content edge to the right content edge and the height be the distance from the top content edge to the bottom content edge. - box-sizing-replaced-001 (image)
-
Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing
All images should be sized at 75px x 75px, with 5px of padding around each. - box-sizing-replaced-002 (image)
-
Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing
All images should be sized at 75px x 75px, with 5px of padding and 5px of blue border around each. - box-sizing-replaced-003 (image)
-
Min/Max Height and Width Constraints on Replaced Elements with Box-Sizing
All images should be sized at 75px x 75px.