124 lines
8.9 KiB
JSON
124 lines
8.9 KiB
JSON
{
|
|
"abs-fill": [
|
|
{"name": "blue fill", "color": "#0000ff", "width": 400, "height": 100},
|
|
{"name": "teal fill", "color": "#008080", "width": 400, "height": 100},
|
|
{"name": "purple fill", "color": "#800080", "width": 400, "height": 100}
|
|
],
|
|
"absolute-containing-block": [
|
|
{"name": "nearest positioned ancestor", "color": "#087f5b", "x": 85, "y": 75, "width": 80, "height": 60},
|
|
{"name": "end insets use padding box", "color": "#1971c2", "x": 350, "y": 200, "width": 70, "height": 50},
|
|
{"name": "percent insets use padding box", "color": "#f08c00", "x": 260, "y": 160, "width": 30, "height": 30},
|
|
{"name": "fixed viewport containing block", "color": "#a61e4d", "x": 520, "y": 40, "width": 90, "height": 55}
|
|
],
|
|
"block-auto-margins": [
|
|
{"name": "two auto margins center a fixed-width block", "color": "#087f5b", "x": 300, "y": 20, "width": 300, "height": 40},
|
|
{"name": "two auto margins center a max-width block", "color": "#1971c2", "x": 200, "y": 100, "width": 500, "height": 40},
|
|
{"name": "start auto margin absorbs free space", "color": "#e8590c", "x": 650, "y": 180, "width": 200, "height": 40},
|
|
{"name": "end auto margin absorbs free space", "color": "#7048e8", "x": 50, "y": 260, "width": 200, "height": 40},
|
|
{"name": "auto width leaves auto margins at zero", "color": "#c2255c", "x": 0, "y": 340, "width": 900, "height": 40}
|
|
],
|
|
"box-sizing": [
|
|
{"name": "content-box fixed", "color": "#22aa55", "width": 220, "height": 90},
|
|
{"name": "border-box fixed", "color": "#228866", "width": 190, "height": 60},
|
|
{"name": "content-box percent", "color": "#668822", "width": 220, "height": 70},
|
|
{"name": "border-box percent", "color": "#668822", "width": 190, "height": 40},
|
|
{"name": "inherited reset border-box", "color": "#aa3377", "width": 190, "height": 60}
|
|
],
|
|
"carousel-clip": [
|
|
{"name": "visible translated slide", "color": "#33aa33", "width": 300, "height": 100},
|
|
{"name": "visible control slide", "color": "#ee3333", "width": 300, "height": 100}
|
|
],
|
|
"cascade-priority": [
|
|
{"name": "important winners", "color": "#008000", "width": 320, "height": 36, "count": 6}
|
|
],
|
|
"clear-float": [
|
|
{"name": "float", "color": "#88bbdd", "width": 120, "height": 80},
|
|
{"name": "cleared block", "color": "#ffcc66", "width": 500, "height": 40}
|
|
],
|
|
"contextual-css-math": [
|
|
{"name": "min width uses actual viewport", "color": "#087f5b", "x": 0, "y": 0, "width": 225, "height": 40},
|
|
{"name": "min margin uses actual viewport", "color": "#1971c2", "x": 225, "y": 60, "width": 100, "height": 40},
|
|
{"name": "clamp width uses actual viewport", "color": "#e8590c", "x": 0, "y": 120, "width": 270, "height": 40},
|
|
{"name": "calc combines viewport and root font units", "color": "#7048e8", "x": 122, "y": 180, "width": 100, "height": 40},
|
|
{"name": "max padding uses actual viewport", "color": "#c2255c", "x": 60, "y": 240, "width": 20, "height": 40}
|
|
],
|
|
"flex-whitespace-items": [
|
|
{"name": "direct flex sidebar starts at container edge", "color": "#1971c2", "x": 0, "y": 0, "width": 225, "height": 180},
|
|
{"name": "direct flex body keeps its intended inset", "color": "#2b8a3e", "x": 225, "y": 0, "width": 675, "height": 200},
|
|
{"name": "display contents flex sidebar starts at container edge", "color": "#7048e8", "x": 0, "y": 260, "width": 150, "height": 140},
|
|
{"name": "display contents flex body keeps its intended inset", "color": "#c2255c", "x": 150, "y": 260, "width": 450, "height": 160}
|
|
],
|
|
"font-shorthand": [
|
|
{"name": "custom property font shorthand sets em geometry", "color": "#1971c2", "x": 0, "y": 0, "width": 200, "height": 80},
|
|
{"name": "later font shorthand replaces prior longhands", "color": "#e8590c", "x": 0, "y": 80, "width": 200, "height": 40}
|
|
],
|
|
"float-flow-bands": [
|
|
{"name": "right float occupies its band", "color": "#1971c2", "x": 650, "y": 0, "width": 250, "height": 400},
|
|
{"name": "float-avoiding intro uses available band", "color": "#087f5b", "x": 0, "y": 0, "width": 650, "height": 100},
|
|
{"name": "heading remains beside float", "color": "#e8590c", "x": 0, "y": 100, "width": 650, "height": 50},
|
|
{"name": "first inline atomic box shares one line", "color": "#c2255c", "x": 0, "y": 150, "width": 60, "height": 30},
|
|
{"name": "second inline atomic box shares one line", "color": "#7048e8", "x": 60, "y": 150, "width": 90, "height": 30},
|
|
{"name": "hidden duplicate consumes no flow height", "color": "#f08c00", "x": 0, "y": 180, "width": 650, "height": 50},
|
|
{"name": "later block remains in float band", "color": "#1098ad", "x": 0, "y": 230, "width": 650, "height": 70},
|
|
{"name": "clear moves below float bottom", "color": "#a61e4d", "x": 0, "y": 400, "width": 900, "height": 50}
|
|
],
|
|
"grid-auto-repeat": [
|
|
{"name": "auto-fill creates all fitting tracks", "color": "#087f5b", "width": 210, "height": 60, "count": 4},
|
|
{"name": "auto-fit collapses empty tracks", "color": "#1971c2", "width": 287, "height": 60, "count": 3}
|
|
],
|
|
"grid-shorthand": [
|
|
{"name": "grid shorthand creates explicit columns", "color": "#087f5b", "width": 287, "height": 60, "count": 3},
|
|
{"name": "custom property grid shorthand creates explicit columns", "color": "#1971c2", "width": 287, "height": 60, "count": 3}
|
|
],
|
|
"mixed-content-block": [
|
|
{"name": "full-width block child", "color": "#ccddff", "width": 400}
|
|
],
|
|
"modern-hydration-contracts": [
|
|
{"name": "modern hydration contracts", "color": "#16803c", "width": 360, "height": 90}
|
|
],
|
|
"modern-containing-block-triggers": [
|
|
{"name": "filter containing block", "color": "#087f5b", "x": 95, "y": 75, "width": 20, "height": 20},
|
|
{"name": "perspective containing block", "color": "#1971c2", "x": 215, "y": 75, "width": 20, "height": 20},
|
|
{"name": "contain layout containing block", "color": "#e8590c", "x": 335, "y": 75, "width": 20, "height": 20},
|
|
{"name": "container-type negative control", "color": "#7048e8", "x": 775, "y": 175, "width": 20, "height": 20},
|
|
{"name": "will-change containing block", "color": "#c2255c", "x": 575, "y": 75, "width": 20, "height": 20},
|
|
{"name": "content-visibility containing block", "color": "#2b8a3e", "x": 695, "y": 75, "width": 20, "height": 20},
|
|
{"name": "filter fixed containing block", "color": "#f08c00", "x": 25, "y": 25, "width": 10, "height": 10},
|
|
{"name": "contain fixed containing block", "color": "#1098ad", "x": 265, "y": 25, "width": 10, "height": 10}
|
|
],
|
|
"modern-streams": [
|
|
{"name": "streamed hydration contracts", "color": "#186aa5", "width": 360, "height": 90}
|
|
],
|
|
"opposing-header-floats": [
|
|
{"name": "inline wrapper exposes left float to header BFC", "color": "#1971c2", "x": 0, "y": 0, "width": 200, "height": 100},
|
|
{"name": "opposing float shares the same band", "color": "#e8590c", "x": 600, "y": 60, "width": 300, "height": 40},
|
|
{"name": "cleared navigation follows the float band", "color": "#087f5b", "x": 0, "y": 100, "width": 900, "height": 50}
|
|
],
|
|
"relative-box-edges": [
|
|
{"name": "vh margin resolves against viewport height", "color": "#087f5b", "x": 0, "y": 150, "width": 100, "height": 40},
|
|
{"name": "vw margin resolves against viewport width", "color": "#1971c2", "x": 90, "y": 200, "width": 100, "height": 40},
|
|
{"name": "em padding resolves against element font size", "color": "#c2255c", "x": 40, "y": 280, "width": 20, "height": 40},
|
|
{"name": "rem padding resolves against root font size", "color": "#2b8a3e", "x": 36, "y": 360, "width": 20, "height": 40},
|
|
{"name": "vmin margin resolves against smaller viewport axis", "color": "#f08c00", "x": 90, "y": 440, "width": 100, "height": 40},
|
|
{"name": "vmax margin resolves against larger viewport axis", "color": "#1098ad", "x": 100, "y": 520, "width": 100, "height": 40}
|
|
],
|
|
"replaced-grid-order": [
|
|
{"name": "order-modified description occupies the first grid cell", "color": "#e8590c", "x": 0, "y": 0, "width": 300, "height": 200},
|
|
{"name": "media wrapper shares the first row", "color": "#1971c2", "x": 300, "y": 0, "width": 300, "height": 300},
|
|
{"name": "percentage image uses the wrapper content box", "color": "#c2255c", "x": 320, "y": 20, "width": 260, "height": 260}
|
|
],
|
|
"tables": [
|
|
{"name": "content-box fixed cell column", "color": "#ffcc99", "width": 208}
|
|
],
|
|
"transform-containing-block": [
|
|
{"name": "absolute captured by transform", "color": "#087f5b", "x": 205, "y": 160, "width": 70, "height": 55},
|
|
{"name": "fixed captured by transform", "color": "#1971c2", "x": 335, "y": 235, "width": 80, "height": 50},
|
|
{"name": "unsupported identity transform still establishes containing block", "color": "#7048e8", "x": 550, "y": 280, "width": 20, "height": 20},
|
|
{"name": "positioned ancestor does not capture fixed", "color": "#a61e4d", "x": 700, "y": 40, "width": 90, "height": 60}
|
|
],
|
|
"z-index": [
|
|
{"name": "positive layer", "color": "#008000", "width": 200, "height": 100},
|
|
{"name": "negative layer", "color": "#ffa500", "width": 260, "height": 110}
|
|
]
|
|
}
|