display
The display CSS property defines an element's display type.
CSS
JS
object.style.display = "value";
Values
<'display'> = [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
<display-outside> = block | inline | run-in
block
Generates a box that is block-level when placed in flow layout.
inline
Generates a box that is inline-level when placed in flow layout.
run-in
Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.
<display-inside> = flow | flow-root | table | flex | grid | ruby
flow
Lays out its contents using flow layout.
flow-root
Generates a block container box and lays out its contents using flow layout.
table
Generates a principal table wrapper box that establishes a block formatting context and which contains an additionally-generated table grid box that establishes a table formatting context.
flex
Generates a principal flex container box and establishes a flex formatting context.
grid
Generates a principal grid container box and establishes a grid formatting context.
ruby
Generates a ruby container box and establishes a ruby formatting context in addition to integrating its base-level contents into its parent formatting context if it is inline or generating a wrapper box of the appropriate outer display type if it is not inline.
<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item
<display-outside> = block | inline | run-in
block
Generates a box that is block-level when placed in flow layout.
inline
Generates a box that is inline-level when placed in flow layout.
run-in
Generates an run-in box, which is a type of inline-level box with special behavior that attempts to merge it into a subsequent block container.
flow
Lays out its contents using flow layout.
flow-root
Generates a block container box and lays out its contents using flow layout.
list-item
Generates a ::marker pseudo-element with the content specified by its list-style properties together with a principal box of the specified type for its own contents.
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
table-row-group
Behaves as a tbody element.
table-header-group
Behaves as a thead element.
table-footer-group
Behaves as a tfoot element.
table-row
Behaves as a tr element.
table-cell
Behaves as a td element.
table-column-group
Behaves as a colgroup element.
table-column
Behaves as a col element.
table-caption
Behaves as a caption element.
ruby-base
Behaves as a rb element.
ruby-text
Behaves as a rt element.
ruby-base-container
Behaves as a rbc element.
ruby-text-container
Behaves as a rtc element.
<display-box> = contents | none
contents
Does not generate any boxes itself, but its children and pseudo-elements still generate boxes and text runs as normal.
none
Does not generate boxes or text runs.
<display-legacy> = inline-block | inline-table | inline-flex | inline-grid
inline-block
Behaves as inline flow-root.
inline-table
Behaves as inline table.
inline-flex
Behaves as inline flex.
inline-grid
Behaves as inline grid.
Initial
display-box | contents
display-box | none
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: none;
}
</style>
</head>
<body>
<div>
<p>none</p>
<p>none</p>
<p>none</p>
</div>
</body>
</html>
display-inside | flex
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: flex;
}
</style>
</head>
<body>
<div>
<p>flex</p>
<p>flex</p>
<p>flex</p>
</div>
</body>
</html>
display-inside | flow
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: flow;
}
</style>
</head>
<body>
<div>
<p>flow</p>
<p>flow</p>
<p>flow</p>
</div>
</body>
</html>
display-inside | flow-root
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: flow-root;
}
</style>
</head>
<body>
<div>
<p>flow-root</p>
<p>flow-root</p>
<p>flow-root</p>
</div>
</body>
</html>
display-inside | grid
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: grid;
}
</style>
</head>
<body>
<div>
<p>grid</p>
<p>grid</p>
<p>grid</p>
</div>
</body>
</html>
display-inside | ruby
<!doctype html>
<html>
<head>
<style>
.ruby {
background-color: yellow;
display: ruby;
}
.rubyBase {
display: ruby-base;
}
.rubyBaseContainer {
display: ruby-base-container;
}
.rubyText {
display: ruby-text;
}
.rubyTextContainer {
display: ruby-text-container;
}
</style>
</head>
<body>
<div class="ruby">
<div class="rubyBaseContainer">
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
</div>
<div class="rubyTextContainer">
<div class="rubyText">text</div>
<div class="rubyText">text</div>
<div class="rubyText">text</div>
</div>
</div>
</body>
</html>
display-inside | table
<!doctype html>
<html>
<head>
<style>
.table {
background-color: yellow;
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | ruby-base
<!doctype html>
<html>
<head>
<style>
.ruby {
display: ruby;
}
.rubyBase {
background-color: yellow;
display: ruby-base;
}
.rubyBaseContainer {
display: ruby-base-container;
}
.rubyText {
display: ruby-text;
}
.rubyTextContainer {
display: ruby-text-container;
}
</style>
</head>
<body>
<div class="ruby">
<div class="rubyBaseContainer">
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
</div>
<div class="rubyTextContainer">
<div class="rubyText">text</div>
<div class="rubyText">text</div>
<div class="rubyText">text</div>
</div>
</div>
</body>
</html>
display-internal | ruby-base-container
<!doctype html>
<html>
<head>
<style>
.ruby {
display: ruby;
}
.rubyBase {
display: ruby-base;
}
.rubyBaseContainer {
background-color: yellow;
display: ruby-base-container;
}
.rubyText {
display: ruby-text;
}
.rubyTextContainer {
display: ruby-text-container;
}
</style>
</head>
<body>
<div class="ruby">
<div class="rubyBaseContainer">
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
</div>
<div class="rubyTextContainer">
<div class="rubyText">text</div>
<div class="rubyText">text</div>
<div class="rubyText">text</div>
</div>
</div>
</body>
</html>
display-internal | ruby-text
<!doctype html>
<html>
<head>
<style>
.ruby {
display: ruby;
}
.rubyBase {
display: ruby-base;
}
.rubyBaseContainer {
display: ruby-base-container;
}
.rubyText {
background-color: yellow;
display: ruby-text;
}
.rubyTextContainer {
display: ruby-text-container;
}
</style>
</head>
<body>
<div class="ruby">
<div class="rubyBaseContainer">
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
</div>
<div class="rubyTextContainer">
<div class="rubyText">text</div>
<div class="rubyText">text</div>
<div class="rubyText">text</div>
</div>
</div>
</body>
</html>
display-internal | ruby-text-container
<!doctype html>
<html>
<head>
<style>
.ruby {
display: ruby;
}
.rubyBase {
display: ruby-base;
}
.rubyBaseContainer {
display: ruby-base-container;
}
.rubyText {
display: ruby-text;
}
.rubyTextContainer {
background-color: yellow;
display: ruby-text-container;
}
</style>
</head>
<body>
<div class="ruby">
<div class="rubyBaseContainer">
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
</div>
<div class="rubyTextContainer">
<div class="rubyText">text</div>
<div class="rubyText">text</div>
<div class="rubyText">text</div>
</div>
</div>
</body>
</html>
display-internal | table-caption
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
background-color: yellow;
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | table-cell
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
background-color: yellow;
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | table-column
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
background-color: yellow;
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | table-column-group
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
background-color: yellow;
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | table-footer-group
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
background-color: yellow;
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | table-header-group
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
background-color: yellow;
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | table-row
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
background-color: yellow;
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-internal | table-row-group
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
background-color: yellow;
display: table-row-group;
}
</style>
</head>
<body>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-legacy | inline-block
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: inline-block;
}
</style>
</head>
<body>
<div>
<p>inline-block</p>
<p>inline-block</p>
<p>inline-block</p>
</div>
</body>
</html>
display-legacy | inline-flex
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: inline-flex;
}
</style>
</head>
<body>
<div>
<p>inline-flex</p>
<p>inline-flex</p>
<p>inline-flex</p>
</div>
</body>
</html>
display-legacy | inline-grid
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: inline-grid;
}
</style>
</head>
<body>
<div>
<p>inline-grid</p>
<p>inline-grid</p>
<p>inline-grid</p>
</div>
</body>
</html>
display-legacy | inline-table
<!doctype html>
<html>
<head>
<style>
.inlineTable {
background-color: yellow;
display: inline-table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
</head>
<body>
<div class="inlineTable">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
display-listitem | list-item
<!doctype html>
<html>
<head>
<style>
li {
background-color: yellow;
display: list-item;
}
</style>
</head>
<body>
<ul>
<li>list-item</li>
<li>list-item</li>
<li>list-item</li>
</ul>
</body>
</html>
display-outside | block
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: block;
}
</style>
</head>
<body>
<div>
<p>block</p>
<p>block</p>
<p>block</p>
</div>
</body>
</html>
display-outside | inline
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: inline;
}
</style>
</head>
<body>
<div>
<p>inline</p>
<p>inline</p>
<p>inline</p>
</div>
</body>
</html>
display-outside | run-in
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: run-in;
}
</style>
</head>
<body>
<div>
<p>run-in</p>
<p>run-in</p>
<p>run-in</p>
</div>
</body>
</html>
JS | display-box
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
display: contents;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.display = value;
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="contents">
<input onmouseover="mouseover(value)" type="button" value="none">
<div>
<p>display-box</p>
<p>display-box</p>
<p>display-box</p>
</div>
</body>
</html>
JS | display-inside
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.display = value;
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="flex">
<input onmouseover="mouseover(value)" type="button" value="flow">
<input onmouseover="mouseover(value)" type="button" value="flow-root">
<input onmouseover="mouseover(value)" type="button" value="grid">
<div>
<p>display-inside</p>
<p>display-inside</p>
<p>display-inside</p>
</div>
</body>
</html>
JS | display-internal | ruby
<!doctype html>
<html>
<head>
<style>
.ruby {
display: ruby;
}
.rubyBase {
display: ruby-base;
}
.rubyBaseContainer {
display: ruby-base-container;
}
.rubyText {
display: ruby-text;
}
.rubyTextContainer {
display: ruby-text-container;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.backgroundColor = "transparent";
if (elements[i].getAttribute("class") == value) {
elements[i].style.backgroundColor = "yellow";
}
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="initial">
<input onmouseover="mouseover(value)" type="button" value="ruby">
<button onmouseover="mouseover(value)" value="rubyBase">ruby-base</button>
<button onmouseover="mouseover(value)" value="rubyBaseContainer">ruby-base-container</button>
<button onmouseover="mouseover(value)" value="rubyText">ruby-text</button>
<button onmouseover="mouseover(value)" value="rubyTextContainer">ruby-text-container</button><br>
<div class="ruby">
<div class="rubyBaseContainer">
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
<div class="rubyBase">base</div>
</div>
<div class="rubyTextContainer">
<div class="rubyText">text</div>
<div class="rubyText">text</div>
<div class="rubyText">text</div>
</div>
</div>
</body>
</html>
JS | display-internal | table
<!doctype html>
<html>
<head>
<style>
.table {
display: table;
}
.tableCaption {
display: table-caption;
}
.tableCell {
display: table-cell;
}
.tableColumn {
display: table-column;
}
.tableColumnGroup {
display: table-column-group;
}
.tableFooterGroup {
display: table-footer-group;
}
.tableHeaderGroup {
display: table-header-group;
}
.tableRow {
display: table-row;
}
.tableRowGroup {
display: table-row-group;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("div");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.backgroundColor = "transparent";
if (elements[i].getAttribute("class") == value) {
elements[i].style.backgroundColor = "yellow";
}
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="initial">
<input onmouseover="mouseover(value)" type="button" value="table">
<button onmouseover="mouseover(value)" value="tableCaption">table-caption</button>
<button onmouseover="mouseover(value)" value="tableCell">table-cell</button>
<button onmouseover="mouseover(value)" value="tableColumn">table-column</button>
<button onmouseover="mouseover(value)" value="tableColumnGroup">table-column-group</button>
<button onmouseover="mouseover(value)" value="tableFooterGroup">table-footer-group</button>
<button onmouseover="mouseover(value)" value="tableHeaderGroup">table-header-group</button>
<button onmouseover="mouseover(value)" value="tableRow">table-row</button>
<button onmouseover="mouseover(value)" value="tableRowGroup">table-row-group</button>
<div class="table">
<div class="tableCaption">caption</div>
<div class="tableColumnGroup">
<div class="tableColumn"></div>
<div class="tableColumn"></div>
</div>
<div class="tableColumn"></div>
<div class="tableHeaderGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableRowGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
<div class="tableFooterGroup">
<div class="tableRow">
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
<div class="tableCell">cell</div>
</div>
</div>
</div>
</body>
</html>
JS | display-legacy
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.display = value;
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="inline-block">
<input onmouseover="mouseover(value)" type="button" value="inline-flex">
<input onmouseover="mouseover(value)" type="button" value="inline-grid">
<div>
<p>display-legacy</p>
<p>display-legacy</p>
<p>display-legacy</p>
</div>
</body>
</html>
JS | display-listitem
<!doctype html>
<html>
<head>
<style>
li {
background-color: yellow;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("li");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.display = value;
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="list-item">
<ul>
<li>display-listitem</li>
<li>display-listitem</li>
<li>display-listitem</li>
</ul>
</body>
</html>
JS | display-outside
<!doctype html>
<html>
<head>
<style>
div {
background-color: lightgray;
}
p {
background-color: yellow;
}
</style>
<script>
function mouseover(value) {
var elements = document.getElementsByTagName("p");
for (var i = 0; i < elements.length; ++i) {
elements[i].style.display = value;
}
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="block">
<input onmouseover="mouseover(value)" type="button" value="inline">
<input onmouseover="mouseover(value)" type="button" value="run-in">
<div>
<p>display-outside</p>
<p>display-outside</p>
<p>display-outside</p>
</div>
</body>
</html>