backface-visibility:hidden should create a stacking context and conta…

…ining block.

https://bugs.webkit.org/show_bug.cgi?id=261532
<rdar://114732608>

Reviewed by Simon Fraser.

As of w3c/csswg-drafts#9348, backface-visibility:hidden should create a containing block and stacking context, if the element participates in a 3D rendering context.

This adds a new preference for this change (currently disabled, until other engines are ready to ship the change), and makes the code changes.

It also removes old WPTs that relied on the previous behaviour, and replaces them with new ones testing the new spec.

* LayoutTests/TestExpectations:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-002-expected.html: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative-expected.html.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative.html.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003-expected.html: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative-expected.html.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003-ref.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003.tentative-expected.html: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003.tentative.html: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-004-expected.html: Copied from LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative-expected.html.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.tentative-expected.html: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.tentative.html: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-005-expected.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-002.tentative-expected.html.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.tentative-expected.html: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.tentative.html: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-002-expected.html: Removed.
* LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-002.html: Removed.
* Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml:
* Source/WebCore/rendering/RenderBox.cpp:
(WebCore::RenderBox::updateFromStyle):
(WebCore::RenderBox::computeHasTransformRelatedProperty const):
* Source/WebCore/rendering/RenderBox.h:
* Source/WebCore/rendering/RenderLayer.cpp:
(WebCore::RenderLayer::clippingRootForPainting const):
* Source/WebCore/style/StyleAdjuster.cpp:
(WebCore::Style::Adjuster::adjust const):

Canonical link: https://commits.webkit.org/267980@main

LayoutTests/TestExpectations

@@ -4272,9 +4272,6 @@ webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/3dtransfo
 webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/animation/rotate-transform-equivalent.html [ ImageOnlyFailure Pass ]
 webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/animation/transform-interpolation-perspective.html [ ImageOnlyFailure Timeout ]
 webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/animation/transform-interpolation-skew.html [ ImageOnlyFailure ]
-webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.tentative.html [ ImageOnlyFailure ]
-webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.tentative.html [ ImageOnlyFailure ]
-webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-animated-002.html [ ImageOnlyFailure ]
 webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/change-scale-wide-range.html [ Pass ImageOnlyFailure ]
 webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/huge-length-tiny-scale.html [ ImageOnlyFailure ]
 webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/rotateY-180deg-with-overflow-scroll.html [ ImageOnlyFailure ]

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003-expected.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>backface visibility: hidden</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
+
+<p>The test passes if there is a green rectangle and no red.</p>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div style="background: green"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003-ref.html

@@ -1,21 +1,14 @@
 <!DOCTYPE html>
-<title>backface visibility: hidden applies to pseudo-stacking contexts</title>
-<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
+<title>backface visibility: hidden</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
 
-<p>The test passes if there is a green rectangle and no red</p>
+<p>The test passes if there is a green rectangle and no red.</p>
 <style>
   div {
     width: 100px;
     height: 100px;
   }
-  .target {
-    transform: rotateY(180deg);
-  }
 </style>
-<div class=target style="backface-visibility: hidden">
-</div>
-<div class=target>
-  <div style="background: green"></div>
-</div>
+<div style="background: green"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-003.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>backface visibility: hidden creates containing block and stacking context when participating in a 3D rendering context</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
+<link rel="match" href="backface-visibility-hidden-003-ref.html">
+
+<p>The test passes if there is a green rectangle and no red.</p>
+<style>
+.outer {
+  transform-style: preserve-3d;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+.inner {
+  backface-visibility: hidden;
+}
+
+.positioned {
+  position: absolute;
+  top: -100px;
+  z-index: -1;
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+.sibling {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+
+</style>
+
+<div class="outer">
+  <div class="sibling"></div>
+  <div class="inner">
+    <div class="positioned"></div>
+  </div>
+</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-004-expected.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>backface visibility: hidden</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
+
+<p>The test passes if there is a green rectangle and no red.</p>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div style="background: green"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-004.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>backface visibility: hidden creates containing block and stacking context when participating in a 3D rendering context</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
+<link rel="match" href="backface-visibility-hidden-003-ref.html">
+
+<p>The test passes if there is a green rectangle and no red.</p>
+<style>
+.outer {
+  transform-style: preserve-3d;
+  transform: rotateX(180deg);
+  width: 100px;
+  height: 100px;
+}
+
+.card {
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  backface-visibility: hidden;
+}
+
+.front {
+  background-color: red;
+}
+
+.back {
+  background-color: green;
+  transform: rotateX(180deg);
+}
+
+.inner {
+  position: fixed;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+</style>
+
+<div class="outer">
+  <div class="card back"></div>
+  <div class="card front">
+    <div class="inner"></div>
+  </div>
+</div>

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-005-expected.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>backface visibility: hidden</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
+
+<p>The test passes if there is a green rectangle and no red.</p>
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<div style="background: green"></div>

LayoutTests/imported/w3c/web-platform-tests/css/css-transforms/backface-visibility-hidden-005.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>backface visibility: hidden creates containing block and stacking context when transformed</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
+<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
+<link rel="match" href="backface-visibility-hidden-003-ref.html">
+
+<p>The test passes if there is a green rectangle and no red.</p>
+<style>
+.background {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+
+.flipper {
+  backface-visibility:hidden;
+  transform: rotateY(180deg);
+  width: 100px;
+  top: -100px;
+  margin-top: -100px;
+}
+
+.scroll {
+  overflow-y: scroll;
+  width: 100px;
+  height: 100px;
+}
+
+.inner {
+  height: 900px;
+  background: red;
+}
+
+</style>
+
+<div class="background"></div>
+<div class="flipper">
+  <div class="scroll">
+    <div class="inner">
+    </div>
+  </div>
+</div>