Auto merge of #12669 - splav:inline_pseudo_elements_layout#12367, r=notriddle

Inline pseudo elements layout#12367

<!-- Please describe your changes on the following line: -->
This PR fixes ignored paddings and margins for inline pseudo elements.

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #12367 (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/12669)
<!-- Reviewable:end -->

components/layout/construct.rs

@@ -714,7 +714,11 @@ impl<'a, ConcreteThreadSafeLayoutNode: ThreadSafeLayoutNode>
         }
 
         let mut style = (*style).clone();
-        properties::modify_style_for_text(&mut style);
+        match node.get_pseudo_element_type() {
+            PseudoElementType::Before(_) |
+            PseudoElementType::After(_) => {}
+            _ => properties::modify_style_for_text(&mut style)
+        }
 
         let selected_style = node.selected_style(self.style_context());
 
@@ -950,7 +954,11 @@ impl<'a, ConcreteThreadSafeLayoutNode: ThreadSafeLayoutNode>
         // Modify the style as necessary. (See the comment in
         // `properties::modify_style_for_replaced_content()`.)
         let mut style = node.style(self.style_context()).clone();
-        properties::modify_style_for_replaced_content(&mut style);
+        match node.get_pseudo_element_type() {
+            PseudoElementType::Before(_) |
+            PseudoElementType::After(_) => {}
+            _ => properties::modify_style_for_replaced_content(&mut style)
+        }
 
         // If this is generated content, then we need to initialize the accumulator with the
         // fragment corresponding to that content. Otherwise, just initialize with the ordinary

components/layout/inline.rs

@@ -358,6 +358,10 @@ impl LineBreaker {
             let need_to_merge = match (&mut result.specific, &candidate.specific) {
                 (&mut SpecificFragmentInfo::ScannedText(ref mut result_info),
                  &SpecificFragmentInfo::ScannedText(ref candidate_info)) => {
+                    result.margin.inline_end == Au(0) &&
+                    candidate.margin.inline_start == Au(0) &&
+                    result.border_padding.inline_end == Au(0) &&
+                    candidate.border_padding.inline_start == Au(0) &&
                     result_info.selected() == candidate_info.selected() &&
                     arc_ptr_eq(&result_info.run, &candidate_info.run) &&
                         inline_contexts_are_equal(&result.inline_context,

tests/wpt/metadata-css/css-transitions-1_dev/html/pseudo-elements-001.htm.ini

@@ -5,10 +5,3 @@
 
   [transition padding-left on :after / values]
     expected: FAIL
-
-  [transition padding-left on :before, changing content / values]
-    expected: FAIL
-
-  [transition padding-left on :after, changing content / values]
-    expected: FAIL
-

tests/wpt/metadata-css/css21_dev/html4/pseudo-elements-001.htm.ini

@@ -5,10 +5,3 @@
 
   [transition padding-left on :after / values]
     expected: FAIL
-
-  [transition padding-left on :before, changing content / values]
-    expected: FAIL
-
-  [transition padding-left on :after, changing content / values]
-    expected: FAIL
-

tests/wpt/mozilla/meta/MANIFEST.json

@@ -4432,6 +4432,30 @@
             "url": "/_mozilla/css/pseudo_element_restyle_no_rules.html"
           }
         ],
+        "css/pseudo_element_spacing_margin.html": [
+          {
+            "path": "css/pseudo_element_spacing_margin.html",
+            "references": [
+              [
+                "/_mozilla/css/pseudo_element_spacing_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/pseudo_element_spacing_margin.html"
+          }
+        ],
+        "css/pseudo_element_spacing_padding.html": [
+          {
+            "path": "css/pseudo_element_spacing_padding.html",
+            "references": [
+              [
+                "/_mozilla/css/pseudo_element_spacing_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/pseudo_element_spacing_padding.html"
+          }
+        ],
         "css/pseudo_inherit.html": [
           {
             "path": "css/pseudo_inherit.html",
@@ -13610,6 +13634,30 @@
           "url": "/_mozilla/css/pseudo_element_restyle_no_rules.html"
         }
       ],
+      "css/pseudo_element_spacing_margin.html": [
+        {
+          "path": "css/pseudo_element_spacing_margin.html",
+          "references": [
+            [
+              "/_mozilla/css/pseudo_element_spacing_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/pseudo_element_spacing_margin.html"
+        }
+      ],
+      "css/pseudo_element_spacing_padding.html": [
+        {
+          "path": "css/pseudo_element_spacing_padding.html",
+          "references": [
+            [
+              "/_mozilla/css/pseudo_element_spacing_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/pseudo_element_spacing_padding.html"
+        }
+      ],
       "css/pseudo_inherit.html": [
         {
           "path": "css/pseudo_inherit.html",

tests/wpt/mozilla/tests/css/pseudo_element_spacing_margin.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel='match' href='pseudo_element_spacing_ref.html'>
+<style type="text/css">
+  span:before {
+    content:"a";
+    margin-right:5em;
+  }
+  span:after {
+    content:"c";
+    margin-left:5em;
+  }
+  #first {
+    margin-left:4em;
+    margin-right:4em;
+  }
+  #second:before {
+    margin-left:4em;
+  }
+  #second:after {
+    margin-right:4em;
+  }
+</style>
+</head>
+
+<body>
+    |<span id=first>b</span>|<br>
+    |<span id=second>b</span>|
+</body>
+</html>

tests/wpt/mozilla/tests/css/pseudo_element_spacing_padding.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel='match' href='pseudo_element_spacing_ref.html'>
+<style type="text/css">
+  span:before {
+    content:"a";
+    padding-right:5em;
+  }
+  span:after {
+    content:"c";
+    padding-left:5em;
+  }
+  #first {
+    padding-left:4em;
+    padding-right:4em;
+  }
+  #second:before {
+    padding-left:4em;
+  }
+  #second:after {
+    padding-right:4em;
+  }
+</style>
+</head>
+
+<body>
+    |<span id=first>b</span>|<br>
+    |<span id=second>b</span>|
+</body>
+</html>

tests/wpt/mozilla/tests/css/pseudo_element_spacing_ref.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head><style type="text/css">
+  #first {
+    margin-left:4em;
+  }
+  #last {
+    margin-right:4em;
+  }
+  #central {
+    margin-left:5em;
+    margin-right:5em;
+  }
+</style></head>
+<body>
+    |<span id=first>a</span><span id=central>b</span><span id="last">c</span>|<br>
+    |<span id=first>a</span><span id=central>b</span><span id="last">c</span>|
+</body>
+</html>