<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[278280] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/278280">278280</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2021-05-31 09:18:03 -0700 (Mon, 31 May 2021)</dd>
</dl>

<h3>Log Message</h3>
<pre>Enable <summary> to be a flex container
https://bugs.webkit.org/show_bug.cgi?id=190065

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

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:

Source/WebCore:

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.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsimportedw3cChangeLog">trunk/LayoutTests/imported/w3c/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsimportedw3cresourcesresourcefilesjson">trunk/LayoutTests/imported/w3c/resources/resource-files.json</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementw3cimportlog">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/w3c-import.log</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorehtmlHTMLSummaryElementcpp">trunk/Source/WebCore/html/HTMLSummaryElement.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderElementcpp">trunk/Source/WebCore/rendering/RenderElement.cpp</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementdetailsblockificationexpectedtxt">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementdetailsblockificationhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayflexexpectedhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayflexhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplaygridexpectedhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplaygridhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlineflexexpectedhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlineflexhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlinegridexpectedhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlinegridhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummaryinolexpectedhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummaryinolhtml">trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsimportedw3cChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/ChangeLog (278279 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,28 @@
</span><ins>+2021-04-29  Sergio Villar Senin  <svillar@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:
+
</ins><span class="cx"> 2021-05-28  Rob Buis  <rbuis@igalia.com>
</span><span class="cx"> 
</span><span class="cx">         Webkit doesn't calculate padding-top/-bottom in % correctly when parent has padding
</span></span></pre></div>
<a id="trunkLayoutTestsimportedw3cresourcesresourcefilesjson"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/resources/resource-files.json (278279 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -76,6 +76,8 @@
</span><span class="cx">         "csswg-test/WOFF2-UserAgent/Tests/xhtml1/support/available-001a.xht",
</span><span class="cx">         "csswg-test/WOFF2-UserAgent/Tests/xhtml1/support/available-001b.xht",
</span><span class="cx">         "csswg-test/WOFF2-UserAgent/Tests/xhtml1/testcaseindex.xht",
</span><ins>+        "html/rendering/the-details-element/empty-crash.html",
+        "html/rendering/the-details-element/single-summary.html",
</ins><span class="cx">         "shadow-dom/declarative/support/declarative-child-frame.html",
</span><span class="cx">         "shadow-dom/event-on-pseudo-element-crash.html",
</span><span class="cx">         "shadow-dom/imperative-slot-api-crash.html",
</span></span></pre></div>
<a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementdetailsblockificationexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+foo
+bar
+foo
+bar
+
+PASS Summary and content should have display:block computed value
+
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification-expected.txt
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementdetailsblockificationhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: details children blockification</title>
+<link rel="author" href="mailto:masonf@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
+<meta name="assert" content="Ensure blockification of <details> children">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayflexexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,105 @@
</span><ins>+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayflexhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,112 @@
</span><ins>+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: flex'</title>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<link rel="match" href="summary-display-flex-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-flex.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplaygridexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,72 @@
</span><ins>+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplaygridhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: grid'</title>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<link rel="match" href="summary-display-grid-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-grid.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlineflexexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,105 @@
</span><ins>+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlineflexhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,112 @@
</span><ins>+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: inline-flex'</title>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<link rel="match" href="summary-display-inline-flex-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-flex.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlinegridexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,72 @@
</span><ins>+<!DOCTYPE html>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummarydisplayinlinegridhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,77 @@
</span><ins>+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: summary with 'display: inline-grid'</title>
+<link rel="author" title="Xing Xu" href="mailto:xing.xu@intel.com">
+<link rel="match" href="summary-display-inline-grid-ref.html">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
+<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>
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-inline-grid.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummaryinolexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,20 @@
</span><ins>+<!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>
+
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol-expected.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementsummaryinolhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html (0 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,22 @@
</span><ins>+<!DOCTYPE html>
+<title>Check if SUMMARY has 'counter-increment: list-item 0'</title>
+<link rel="match" href="summary-in-ol-ref.html">
+
+<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>
+
</ins><span class="cx">Property changes on: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-in-ol.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+LF
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span><a id="trunkLayoutTestsimportedw3cwebplatformtestshtmlrenderingthedetailselementw3cimportlog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/w3c-import.log (278279 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -18,6 +18,7 @@
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-after.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-before-expected.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-before.html
</span><ins>+/LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-blockification.html
</ins><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-display-property-is-ignored-expected.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-display-property-is-ignored.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-page-break-after-1-print-expected.html
</span><span class="lines">@@ -30,7 +31,17 @@
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/details-page-break-before-2-print.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/empty-crash.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/single-summary.html
</span><ins>+/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
</ins><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-list-item-expected.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-display-list-item.html
</span><ins>+/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
</ins><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-text-decoration-expected.html
</span><span class="cx"> /LayoutTests/imported/w3c/web-platform-tests/html/rendering/the-details-element/summary-text-decoration.html
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (278279 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,20 @@
</span><ins>+2021-04-29  Sergio Villar Senin  <svillar@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.
+
</ins><span class="cx"> 2021-05-31  Alan Bujtas  <zalan@apple.com>
</span><span class="cx"> 
</span><span class="cx">         [LFC][TFC] Move ensureTableGrid to TableFormattingState
</span></span></pre></div>
<a id="trunkSourceWebCorehtmlHTMLSummaryElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/html/HTMLSummaryElement.cpp (278279 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -65,7 +65,7 @@
</span><span class="cx"> 
</span><span class="cx"> RenderPtr<RenderElement> HTMLSummaryElement::createElementRenderer(RenderStyle&& style, const RenderTreePosition&)
</span><span class="cx"> {
</span><del>-    return createRenderer<RenderBlockFlow>(*this, WTFMove(style));
</del><ins>+    return RenderElement::createFor(*this, WTFMove(style), RenderElement::OnlyCreateBlockAndFlexboxRenderers);
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> void HTMLSummaryElement::didAddUserAgentShadowRoot(ShadowRoot& root)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderElementcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderElement.cpp (278279 => 278280)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -172,7 +172,12 @@
</span><span class="cx">     case DisplayType::InlineBlock:
</span><span class="cx">         return createRenderer<RenderBlockFlow>(element, WTFMove(style));
</span><span class="cx">     case DisplayType::ListItem:
</span><del>-        return createRenderer<RenderListItem>(element, WTFMove(style));
</del><ins>+        // <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;
</ins><span class="cx">     case DisplayType::Flex:
</span><span class="cx">     case DisplayType::InlineFlex:
</span><span class="cx">         return createRenderer<RenderFlexibleBox>(element, WTFMove(style));
</span></span></pre>
</div>
</div>

</body>
</html>