Turn off independent inheritance if children have explicitly inherite…

…d properties. If any of our children have explicit inheritance of a non-inherited property, we cannot mark it as using independently inherited properties only, as some of the explicit properties might inherit (our diffing considers inherited properties only). We used to gate this behind a test of diffs in the non-inherited properties, but that would only consider that difference on this element, not its children (and the problem could propagate fro there to its grandchildren). This seems to have been broken in a refactor in d7e0cc711958dfb3aa39f0f912db1f154617bd98. Fixed: 1325340 Change-Id: If6b790fea727ad68322cde7c4c2a342322283f68 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3650513 Commit-Queue: Steinar H Gunderson <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1005798}
web-platform-tests · May 20, 2022 · e422616 · e422616
1 parent 47a908c
commit e422616
Showing 2 changed files with 47 additions and 0 deletions.
diff --git a/css/css-transitions/inherit-background-color-transition-ref.html b/css/css-transitions/inherit-background-color-transition-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body style="color: black; background-color: white">
+    <div><div>PASS if black on white</div></div>
+  </body>
+</html>
diff --git a/css/css-transitions/inherit-background-color-transition.html b/css/css-transitions/inherit-background-color-transition.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html id="html" class="reftest-wait">
+  <title>Verifies that 'background-color' from a transition inherits explicitly down if requested</title>
+  <link rel="help" href="https://crbug.com/1325340">
+  <link rel="match" href="inherit-background-color-transition-ref.html">
+  <script src="support/helper.js"></script>
+  <style>
+    body { transition: background-color 1s; color: white; background-color: black; }
+    .light { color: black; background-color: white; }
+  </style>
+</head>
+<body id="body">
+  <div style="background-color: inherit">
+    <div style="background-color: inherit" class="hoverdemo">PASS if black on white</div>
+  </div>
+  <script>
+    body.offsetTop;
+
+    async function run() {
+      let transitionEnd = new Promise((resolve) => {
+        body.addEventListener('transitionend', resolve);
+      });
+
+      // Trigger transition:
+      body.classList.toggle('light');
+
+      const transition = body.getAnimations()[0];
+      await transition.ready;
+      await waitForFrame();
+
+      // Expedite transition, but let it finish naturally.
+      transition.currentTime = transition.effect.getTiming().duration - 1;
+      await transitionEnd;
+
+      await waitForFrame();
+    }
+
+    run().then(() => html.classList.toggle('reftest-wait'));
+  </script>
+</body>
+</html>