Auto merge of #12361 - stshine:blockify-flex-item, r=pcwalton

Blockify elements in a flex container

<!-- Please describe your changes on the following line: -->
The is one of my pull requests that implement basic flexible box layout.
As the spec stated in https://drafts.csswg.org/css-flexbox/#flex-items ,
A inline-level child of a flex container should be converted to its block equivalent, according to CSS2.1 § 9.7.

---
<!-- 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
- [ ] These changes fix #__ (github issue number if applicable).

<!-- Either: -->
- [ ] There are tests for these changes OR
- [X] These changes do not require tests because flexbox is not actually implemented yet.

<!-- 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/12361)
<!-- Reviewable:end -->

components/style/properties/properties.mako.rs

@@ -1890,7 +1890,9 @@ pub fn cascade<C: ComputedValues>(
         longhands::position::SpecifiedValue::absolute |
         longhands::position::SpecifiedValue::fixed);
     let floated = style.get_box().clone_float() != longhands::float::SpecifiedValue::none;
-    if positioned || floated || is_root_element {
+    let is_flex_item =
+        context.inherited_style.get_box().clone_display() == computed_values::display::T::flex;
+    if positioned || floated || is_root_element || is_flex_item {
         use computed_values::display::T;
 
         let specified_display = style.get_box().clone_display();
@@ -1911,7 +1913,7 @@ pub fn cascade<C: ComputedValues>(
             let box_ = style.mutate_box();
             box_.set_display(computed_display);
             % if product == "servo":
-                box_.set__servo_display_for_hypothetical_box(if is_root_element {
+                box_.set__servo_display_for_hypothetical_box(if is_root_element || is_flex_item {
                     computed_display
                 } else {
                     specified_display