Skip to content

[css-transforms-2] Should transform-style: flat be forced by other properties when they don't apply or have a different used value? #14054

Description

@Loirooriol

https://drafts.csswg.org/css-transforms-2/#grouping-property-values

The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore force the element to have a used style of flat for preserve-3d.

Does this refer to the computed or the used value?

For example, overflow doesn't apply to table-rows (so it could be said it behaves as visible), but they are transformable.

Testcase
<!DOCTYPE html>
<style>
section {
  float: left;
}
.wrapper {
  margin: 30px 15px;
}
.test {
  background: #623e3f;
  width: max-content;
}
.test::before {
  content: "lorem ipsum";
  display: block;
  transform: rotate3d(1, 1, 1, 45deg);
  background-color: #ffba08;
}
</style>
<section>
  <div class="wrapper">
    <div class="test" style="display: block; transform-style: preserve-3d; overflow: visible"></div>
  </div>
  <div class="wrapper">
    <div class="test" style="display: block; transform-style: preserve-3d; overflow: hidden"></div>
  </div>
  <div class="wrapper">
    <div class="test" style="display: block; transform-style: flat; overflow: visible"></div>
  </div>
  <div class="wrapper">
    <div class="test" style="display: block; transform-style: flat; overflow: hidden"></div>
  </div>
</section>
<section>
  <div class="wrapper">
    <div class="test" style="display: table-row; transform-style: preserve-3d; overflow: visible"></div>
  </div>
  <div class="wrapper">
    <div class="test" style="display: table-row; transform-style: preserve-3d; overflow: hidden"></div>
  </div>
  <div class="wrapper">
    <div class="test" style="display: table-row; transform-style: flat; overflow: visible"></div>
  </div>
  <div class="wrapper">
    <div class="test" style="display: table-row; transform-style: flat; overflow: hidden"></div>
  </div>
</section>
Gecko Blink WebKit Servo
Image Image Image Image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions