Skip to content

GitLab

T
tangled
Commit b711bbea authored by xing.xu's avatar xing.xu Committed by Commit bot
Browse files
Options

Support display:flex for 'summary' 

BUG=603928
R=skobes@chromium.org, cbiesinger@chromium.org

Review-Url: https://codereview.chromium.org/2373963002
Cr-Commit-Position: refs/heads/master@{#423008}
parent cc88db2f
Hide whitespace changes
Inline Side-by-side
Showing with 710 additions and 1 deletion
third_party/WebKit/LayoutTests/fast/html/summary-display-flex-expected.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.flex-container {
background: #333;
border: 0px;
display: flex;
margin: 0px;
padding: 0px;
}
.flex-container.flex-direction-row {
flex-direction : row;
}
.flex-container.flex-direction-row-reverse {
flex-direction : row-reverse;
}
.flex-container.flex-direction-column {
flex-direction : column;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.justify-content-center {
justify-content: center;
}
.flex-container.justify-content-space-around {
justify-content: space-around;
}
.flex-container.justify-content-space-between {
justify-content: space-between;
}
.flex-item {
width:50px;
height:50px;
margin:20px;
background: #eee;
line-height: 50px;
text-align: center;
}
</style>
<summary>
<div>these fieldsshouldn't bestacked vertically</div>
</summary>
<h1>flex-direction: row</h1>
<div class="flex-container flex-direction-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>flex-direction: row-reverse</h1>
<div class="flex-container flex-direction-row-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>flex-direction: column</h1>
<div class="flex-container flex-direction-column">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>flex-direction: column-reverse</h1>
<div class="flex-container flex-direction-column-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>justify-content: center</h1>
<div class="flex-container justify-content-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>justify-content: space-around</h1>
<div class="flex-container justify-content-space-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>justify-content: space-between</h1>
<div class="flex-container justify-content-space-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
third_party/WebKit/LayoutTests/fast/html/summary-display-flex.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.flex-container {
background: #333;
border: 0px;
display: flex;
margin: 0px;
padding: 0px;
}
.flex-container.flex-direction-row {
flex-direction : row;
}
.flex-container.flex-direction-row-reverse {
flex-direction : row-reverse;
}
.flex-container.flex-direction-column {
flex-direction : column;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.justify-content-center {
justify-content: center;
}
.flex-container.justify-content-space-around {
justify-content: space-around;
}
.flex-container.justify-content-space-between {
justify-content: space-between;
}
.flex-item {
width:50px;
height:50px;
margin:20px;
background: #eee;
line-height: 50px;
text-align: center;
}
</style>
<summary style="display: flex;">
<div>these fields</div>
<div>shouldn't be</div>
<div>stacked vertically</div>
</summary>
<h1>flex-direction: row</h1>
<summary class="flex-container flex-direction-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>flex-direction: row-reverse</h1>
<summary class="flex-container flex-direction-row-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>flex-direction: column</h1>
<summary class="flex-container flex-direction-column">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>flex-direction: column-reverse</h1>
<summary class="flex-container flex-direction-column-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>justify-content: center</h1>
<summary class="flex-container justify-content-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>justify-content: space-around</h1>
<summary class="flex-container justify-content-space-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>justify-content: space-between</h1>
<summary class="flex-container justify-content-space-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
third_party/WebKit/LayoutTests/fast/html/summary-display-grid-expected.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
grid-template-rows: auto 20px auto;
}
.grid-element {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 2em;
}
.element-a {
grid-column-start: 1;
grid-column-end: ;
grid-row-start: 1;
grid-row-end: 2;
background: #6F9;
}
.element-b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #69F;
}
.element-c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background: #F69;
}
.element-d {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
background: #9F6;
}
.element-e {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #96F;
}
.element-f {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
background: #F96;
}
</style>
<div class="grid-container">
<div class="grid-element element-a">A</div>
<div class="grid-element element-b">B</div>
<div class="grid-element element-c">C</div>
<div class="grid-element element-d">D</div>
<div class="grid-element element-e">E</div>
<div class="grid-element element-f">F</div>
</div>
third_party/WebKit/LayoutTests/fast/html/summary-display-grid.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
grid-template-rows: auto 20px auto;
}
.grid-element {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 2em;
}
.element-a {
grid-column-start: 1;
grid-column-end: ;
grid-row-start: 1;
grid-row-end: 2;
background: #6F9;
}
.element-b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #69F;
}
.element-c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background: #F69;
}
.element-d {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
background: #9F6;
}
.element-e {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #96F;
}
.element-f {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
background: #F96;
}
</style>
<summary class="grid-container">
<div class="grid-element element-a">A</div>
<div class="grid-element element-b">B</div>
<div class="grid-element element-c">C</div>
<div class="grid-element element-d">D</div>
<div class="grid-element element-e">E</div>
<div class="grid-element element-f">F</div>
</summary>
third_party/WebKit/LayoutTests/fast/html/summary-display-inline-flex-expected.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.flex-container {
background: #333;
border: 0px;
display: inline-flex;
margin: 0px;
padding: 0px;
}
.flex-container.flex-direction-row {
flex-direction : row;
}
.flex-container.flex-direction-row-reverse {
flex-direction : row-reverse;
}
.flex-container.flex-direction-column {
flex-direction : column;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.justify-content-center {
justify-content: center;
}
.flex-container.justify-content-space-around {
justify-content: space-around;
}
.flex-container.justify-content-space-between {
justify-content: space-between;
}
.flex-item {
width:50px;
height:50px;
margin:20px;
background: #eee;
line-height: 50px;
text-align: center;
}
</style>
<summary>
<div>these fieldsshouldn't bestacked vertically</div>
</summary>
<h1>flex-direction: row</h1>
<div class="flex-container flex-direction-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>flex-direction: row-reverse</h1>
<div class="flex-container flex-direction-row-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>flex-direction: column</h1>
<div class="flex-container flex-direction-column">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>flex-direction: column-reverse</h1>
<div class="flex-container flex-direction-column-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>justify-content: center</h1>
<div class="flex-container justify-content-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>justify-content: space-around</h1>
<div class="flex-container justify-content-space-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<h1>justify-content: space-between</h1>
<div class="flex-container justify-content-space-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
third_party/WebKit/LayoutTests/fast/html/summary-display-inline-flex.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.flex-container {
background: #333;
border: 0px;
display: inline-flex;
margin: 0px;
padding: 0px;
}
.flex-container.flex-direction-row {
flex-direction : row;
}
.flex-container.flex-direction-row-reverse {
flex-direction : row-reverse;
}
.flex-container.flex-direction-column {
flex-direction : column;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.flex-direction-column-reverse {
flex-direction : column-reverse;
}
.flex-container.justify-content-center {
justify-content: center;
}
.flex-container.justify-content-space-around {
justify-content: space-around;
}
.flex-container.justify-content-space-between {
justify-content: space-between;
}
.flex-item {
width:50px;
height:50px;
margin:20px;
background: #eee;
line-height: 50px;
text-align: center;
}
</style>
<summary style="display: inline-flex;">
<div>these fields</div>
<div>shouldn't be</div>
<div>stacked vertically</div>
</summary>
<h1>flex-direction: row</h1>
<summary class="flex-container flex-direction-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>flex-direction: row-reverse</h1>
<summary class="flex-container flex-direction-row-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>flex-direction: column</h1>
<summary class="flex-container flex-direction-column">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>flex-direction: column-reverse</h1>
<summary class="flex-container flex-direction-column-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>justify-content: center</h1>
<summary class="flex-container justify-content-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>justify-content: space-around</h1>
<summary class="flex-container justify-content-space-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
<h1>justify-content: space-between</h1>
<summary class="flex-container justify-content-space-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</summary>
third_party/WebKit/LayoutTests/fast/html/summary-display-inline-grid-expected.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.grid-container {
display: inline-grid;
grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
grid-template-rows: auto 20px auto;
}
.grid-element {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 2em;
}
.element-a {
grid-column-start: 1;
grid-column-end: ;
grid-row-start: 1;
grid-row-end: 2;
background: #6F9;
}
.element-b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #69F;
}
.element-c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background: #F69;
}
.element-d {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
background: #9F6;
}
.element-e {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #96F;
}
.element-f {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
background: #F96;
}
</style>
<div class="grid-container">
<div class="grid-element element-a">A</div>
<div class="grid-element element-b">B</div>
<div class="grid-element element-c">C</div>
<div class="grid-element element-d">D</div>
<div class="grid-element element-e">E</div>
<div class="grid-element element-f">F</div>
</div>
third_party/WebKit/LayoutTests/fast/html/summary-display-inline-grid.html 0 → 100644
View file @ b711bbea
<!DOCTYPE html>
<style>
.grid-container {
display: inline-grid;
grid-template-columns: 200px 10px 0.3fr 10px 0.7fr;
grid-template-rows: auto 20px auto;
}
.grid-element {
background-color: #444;
color: #fff;
padding: 20px;
font-size: 2em;
}
.element-a {
grid-column-start: 1;
grid-column-end: ;
grid-row-start: 1;
grid-row-end: 2;
background: #6F9;
}
.element-b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background: #69F;
}
.element-c {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 2;
background: #F69;
}
.element-d {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
background: #9F6;
}
.element-e {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
background: #96F;
}
.element-f {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 4;
background: #F96;
}
</style>
<summary class="grid-container">
<div class="grid-element element-a">A</div>
<div class="grid-element element-b">B</div>
<div class="grid-element element-c">C</div>
<div class="grid-element element-d">D</div>
<div class="grid-element element-e">E</div>
<div class="grid-element element-f">F</div>
</summary>
third_party/WebKit/Source/core/html/HTMLSummaryElement.cpp
View file @ b711bbea
......@@ -44,7 +44,12 @@ HTMLSummaryElement* HTMLSummaryElement::create(Document& document) {
HTMLSummaryElement::HTMLSummaryElement(Document& document)
: HTMLElement(summaryTag, document) {}
LayoutObject* HTMLSummaryElement::createLayoutObject(const ComputedStyle&) {
LayoutObject* HTMLSummaryElement::createLayoutObject(
const ComputedStyle& style) {
EDisplay display = style.display();
if (display == EDisplay::Flex || display == EDisplay::InlineFlex ||
display == EDisplay::Grid || display == EDisplay::InlineGrid)
return LayoutObject::createObject(this, style);
return new LayoutBlockFlow(this);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment