Diff
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (278279 => 278280)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-05-31 15:47:28 UTC (rev 278279)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-05-31 16:18:03 UTC (rev 278280)
@@ -1,3 +1,28 @@
+2021-04-29 Sergio Villar Senin <svil...@igalia.com>
+
+ Enable <summary> to be a flex container
+ https://bugs.webkit.org/show_bug.cgi?id=190065
+
+ Reviewed by Antti Koivisto.
+
+ Imported several WPT tests adding coverage for <summary> as grid/flex.
+
+ * resources/import-expectations.json:
+ * resources/resource-files.json:
+ * web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt: Added.
+ * web-platform-tests/html/rendering/the-details-element/details-blockification.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-flex.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-grid.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/summary-in-ol.html: Added.
+ * web-platform-tests/html/rendering/the-details-element/w3c-import.log:
+
2021-05-28 Rob Buis <rb...@igalia.com>
Webkit doesn't calculate padding-top/-bottom in % correctly when parent has padding
Modified: trunk/LayoutTests/imported/w3c/resources/resource-files.json (278279 => 278280)
--- trunk/LayoutTests/imported/w3c/resources/resource-files.json 2021-05-31 15:47:28 UTC (rev 278279)
+++ trunk/LayoutTests/imported/w3c/resources/resource-files.json 2021-05-31 16:18:03 UTC (rev 278280)
@@ -76,6 +76,8 @@
"csswg-test/WOFF2-UserAgent/Tests/xhtml1/support/available-001a.xht",
"csswg-test/WOFF2-UserAgent/Tests/xhtml1/support/available-001b.xht",
"csswg-test/WOFF2-UserAgent/Tests/xhtml1/testcaseindex.xht",
+ "html/rendering/the-details-element/empty-crash.html",
+ "html/rendering/the-details-element/single-summary.html",
"shadow-dom/declarative/support/declarative-child-frame.html",
"shadow-dom/event-on-pseudo-element-crash.html",
"shadow-dom/imperative-slot-api-crash.html",
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,7 @@
+foo
+bar
+foo
+bar
+
+PASS Summary and content should have display:block computed value
+
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: details children blockification</title>
+<link rel="author" href=""
+<link rel="help" href=""
+<meta name="assert" content="Ensure blockification of <details> children">
+<script src=""
+<script src=""
+
+<div id="example1">
+ <details style="display: grid" open>
+ <summary style="display: inline">foo</summary>
+ <div style="display: inline">bar</span>
+ </details>
+</div>
+
+<div id="example2" style="display: grid">
+ <details style="display: contents" open>
+ <summary style="display: inline">foo</summary>
+ <div style="display: inline">bar</span>
+ </details>
+</div>
+
+<script>
+ function checkDetails(details) {
+ assert_equals(getComputedStyle(details.querySelector('summary')).display, "block");
+ assert_equals(getComputedStyle(details.querySelector('div')).display, "block");
+ }
+ test(() => {
+ checkDetails(document.querySelector('#example1'));
+ checkDetails(document.querySelector('#example2'));
+ assert_equals(getComputedStyle(document.querySelector('#example2>details')).display, "contents");
+ }, "Summary and content should have display:block computed value");
+
+</script>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href=""
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: flex'</title>
+<link rel="author" title="Xing Xu" href=""
+<link rel="match" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks that styling a <summary> with 'display: flex' makes it a flex container.">
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href=""
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: grid'</title>
+<link rel="author" title="Xing Xu" href=""
+<link rel="match" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks that styling a <summary> with 'display: grid' makes it a grid container.">
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href=""
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: inline-flex'</title>
+<link rel="author" title="Xing Xu" href=""
+<link rel="match" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks that styling a <summary> with 'display: inline-flex' makes it a flex container.">
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href=""
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: inline-grid'</title>
+<link rel="author" title="Xing Xu" href=""
+<link rel="match" href=""
+<link rel="help" href=""
+<meta name="assert" content="Checks that styling a <summary> with 'display: inline-grid' makes it a grid container.">
+<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>
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<ol>
+ <details><summary>summary</summary></details>
+ <li value="1">1</li>
+ <li value="2">2 <details><summary>summary</summary></details></li>
+ <li value="3">3</li>
+ <details><summary>summary</summary></details>
+ <li value="4">4</li>
+</ol>
+
+<ol>
+ <summary>summary</summary>
+ <li value="1">1</li>
+ <li value="2">2 <summary>summary</summary></li>
+ <li value="3">3</li>
+ <summary>summary</summary>
+ <li value="4">4</li>
+</ol>
+
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html (0 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html 2021-05-31 16:18:03 UTC (rev 278280)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>Check if SUMMARY has 'counter-increment: list-item 0'</title>
+<link rel="match" href=""
+
+<ol>
+ <details><summary>summary</summary></details>
+ <li>1</li>
+ <li>2 <details><summary>summary</summary></details></li>
+ <li>3</li>
+ <details><summary>summary</summary></details>
+ <li>4</li>
+</ol>
+
+<ol>
+ <summary>summary</summary>
+ <li>1</li>
+ <li>2 <summary>summary</summary></li>
+ <li>3</li>
+ <summary>summary</summary>
+ <li>4</li>
+</ol>
+
Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html
___________________________________________________________________
Added: svn:eol-style
+LF
\ No newline at end of property
Added: svn:mime-type
+text/html
\ No newline at end of property
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/w3c-import.log (278279 => 278280)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/w3c-import.log 2021-05-31 15:47:28 UTC (rev 278279)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/w3c-import.log 2021-05-31 16:18:03 UTC (rev 278280)
@@ -18,6 +18,7 @@
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-after.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-before-expected.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-before.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-display-property-is-ignored-expected.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-display-property-is-ignored.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-page-break-after-1-print-expected.html
@@ -30,7 +31,17 @@
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-page-break-before-2-print.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/empty-crash.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/single-summary.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-list-item-expected.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-list-item.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-text-decoration-expected.html
/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-text-decoration.html
Modified: trunk/Source/WebCore/ChangeLog (278279 => 278280)
--- trunk/Source/WebCore/ChangeLog 2021-05-31 15:47:28 UTC (rev 278279)
+++ trunk/Source/WebCore/ChangeLog 2021-05-31 16:18:03 UTC (rev 278280)
@@ -1,3 +1,20 @@
+2021-04-29 Sergio Villar Senin <svil...@igalia.com>
+
+ Enable <summary> to be a flex container
+ https://bugs.webkit.org/show_bug.cgi?id=190065
+
+ Reviewed by Antti Koivisto.
+
+ Create grid or flex renderers for <summary> elements whenever display: {inline}-{grid|flex}
+ is specified. All vendors but WebKit allowed it so it should be good for interoperability.
+
+ * html/HTMLSummaryElement.cpp:
+ (WebCore::HTMLSummaryElement::createElementRenderer): create the renderer specifying
+ RenderElement::OnlyCreateBlockAndFlexboxRenderers.
+ * rendering/RenderElement.cpp:
+ (WebCore::RenderElement::createFor): do not create a RenderListItem for <summary> if display:list-item
+ is used because they're already list items. Let it fallthrough to RenderBlockFlow creation.
+
2021-05-31 Alan Bujtas <za...@apple.com>
[LFC][TFC] Move ensureTableGrid to TableFormattingState
Modified: trunk/Source/WebCore/html/HTMLSummaryElement.cpp (278279 => 278280)
--- trunk/Source/WebCore/html/HTMLSummaryElement.cpp 2021-05-31 15:47:28 UTC (rev 278279)
+++ trunk/Source/WebCore/html/HTMLSummaryElement.cpp 2021-05-31 16:18:03 UTC (rev 278280)
@@ -65,7 +65,7 @@
RenderPtr<RenderElement> HTMLSummaryElement::createElementRenderer(RenderStyle&& style, const RenderTreePosition&)
{
- return createRenderer<RenderBlockFlow>(*this, WTFMove(style));
+ return RenderElement::createFor(*this, WTFMove(style), RenderElement::OnlyCreateBlockAndFlexboxRenderers);
}
void HTMLSummaryElement::didAddUserAgentShadowRoot(ShadowRoot& root)
Modified: trunk/Source/WebCore/rendering/RenderElement.cpp (278279 => 278280)
--- trunk/Source/WebCore/rendering/RenderElement.cpp 2021-05-31 15:47:28 UTC (rev 278279)
+++ trunk/Source/WebCore/rendering/RenderElement.cpp 2021-05-31 16:18:03 UTC (rev 278280)
@@ -172,7 +172,12 @@
case DisplayType::InlineBlock:
return createRenderer<RenderBlockFlow>(element, WTFMove(style));
case DisplayType::ListItem:
- return createRenderer<RenderListItem>(element, WTFMove(style));
+ // <summary> elements with display:list-item should not be rendered as list items because
+ // they'd end up with two markers before the text (one from summary element and the other as
+ // a list item). Let them fallthrough in that case so they will create a RenderFlexibleBox.
+ if (creationType == CreateAllRenderers)
+ return createRenderer<RenderListItem>(element, WTFMove(style));
+ FALLTHROUGH;
case DisplayType::Flex:
case DisplayType::InlineFlex:
return createRenderer<RenderFlexibleBox>(element, WTFMove(style));
