Don't clear non-layout-object style for PseudoElements.

They are only used for storing an extra ComputedStyle for
display:contents pseudo elements as the ComputedStyle for rendering uses
a display:inline with only properties inherited for the parent element.

Bug: 854563
Change-Id: I4dd3d99b0dee0b538645d005b36347b469799244
Reviewed-on: https://chromium-review.googlesource.com/1107802Reviewed-by: Anders Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569204}

third_party/WebKit/LayoutTests/external/wpt/css/cssom/getComputedStyle-pseudo-expected.txt

@@ -6,6 +6,7 @@ PASS Resolution of pseudo-element styles in display: none elements
 PASS Item-based blockification of pseudo-elements
 FAIL Item-based blockification of nonexistent pseudo-elements assert_equals: Pseudo-styles of display: flex elements should get blockified expected "block" but got "inline"
 PASS display: contents on pseudo-elements
+PASS Dynamically change to display: contents on pseudo-elements
 FAIL Unknown pseudo-elements throw assert_throws: getComputedStyle with an unknown pseudo-element throws function "() => getComputedStyle(div, "totallynotapseudo")" did not throw
 Harness: the test ran to completion.
 

third_party/WebKit/LayoutTests/external/wpt/css/cssom/getComputedStyle-pseudo.html

@@ -44,6 +44,16 @@
   content: "foo";
   position: absolute;
 }
+#contents-pseudos-dynamic::before,
+#contents-pseudos-dynamic::after {
+  display: block;
+  content: "foo";
+  position: absolute;
+}
+#contents-pseudos-dynamic.contents::before,
+#contents-pseudos-dynamic.contents::after {
+  display: contents;
+}
 </style>
 <div id="test">
   <div id="contents"></div>
@@ -51,6 +61,7 @@
   <div id="flex"></div>
   <div id="flex-no-pseudo"></div>
   <div id="contents-pseudos"></div>
+  <div id="contents-pseudos-dynamic"></div>
 </div>
 <script>
 test(function() {
@@ -109,6 +120,22 @@ test(function() {
                   "display: contents in " + pseudo + " should reflect other non-inherited properties in CSSOM");
   });
 }, "display: contents on pseudo-elements");
+test(function() {
+  var contentsPseudosDynamic = document.getElementById('contents-pseudos-dynamic');
+  [":before", ":after"].forEach(function(pseudo) {
+    assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).display, "block",
+                  "Check that display for " + pseudo + " is block before change");
+  });
+  contentsPseudosDynamic.className = "contents";
+  [":before", ":after"].forEach(function(pseudo) {
+    assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).display, "contents",
+                  "display: contents in " + pseudo + " should get reflected on CSSOM");
+    assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).width, "auto",
+                  pseudo + " with display: contents should have no box");
+    assert_equals(getComputedStyle(contentsPseudosDynamic, pseudo).position, "absolute",
+                  "display: contents in " + pseudo + " should reflect other non-inherited properties in CSSOM");
+  });
+}, "Dynamically change to display: contents on pseudo-elements");
 test(function() {
   var div = document.getElementById('test');
   assert_throws(new TypeError(), () => getComputedStyle(div, "totallynotapseudo"),

third_party/blink/renderer/core/dom/element.cc

@@ -1946,9 +1946,15 @@ void Element::RemovedFrom(ContainerNode* insertion_point) {
 void Element::AttachLayoutTree(AttachContext& context) {
   DCHECK(GetDocument().InStyleRecalc());
 
-  // We've already been through detach when doing an attach, but we might
-  // need to clear any state that's been added since then.
-  if (HasRareData() && NeedsAttach()) {
+  if (HasRareData() && NeedsAttach() && !IsPseudoElement()) {
+    // We have already been through detach when doing an attach, but we may have
+    // done a getComputedStyle() in between storing the ComputedStyle on rare
+    // data if the detach was a LazyReattachIfAttached().
+    //
+    // We do not clear it for pseudo elements because we store the original
+    // style in rare data for display:contents when the ComputedStyle used for
+    // the LayoutObject is an inline only inheriting properties from the element
+    // parent.
     ElementRareData* data = GetElementRareData();
     data->ClearComputedStyle();
   }