[CSS Container Queries] Improper style sharing with container queries

https://bugs.webkit.org/show_bug.cgi?id=241848 Reviewed by Antoine Quint. Elements affected by container queries may get different style even though DOM is perfectly symmetric because containers have different sizes. * LayoutTests/fast/css/container-query-style-sharing-expected.html: Added. * LayoutTests/fast/css/container-query-style-sharing.html: Added. * Source/WebCore/style/StyleSharingResolver.cpp: (WebCore::Style::SharingResolver::canShareStyleWithElement const): Canonical link: https://commits.webkit.org/251731@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295726 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Jun 22, 2022 · 75a0e5ede273cbedea29105ed43e8ee61838abcc · 75a0e5e
1 parent d305d6f
commit 75a0e5ede273cbedea29105ed43e8ee61838abcc
Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/LayoutTests/fast/css/container-query-style-sharing-expected.html b/LayoutTests/fast/css/container-query-style-sharing-expected.html
@@ -0,0 +1,17 @@
+<style>
+body {
+    display: grid;
+    grid-template-columns: 100px 50px;
+}
+div {
+    background-color: blue;
+}
+</style>
+<body>
+<div>
+    <span style="background-color: green">1</span>
+</div>
+<div>
+    <span style="background-color: red">2</span>
+</div>
+</body>
diff --git a/LayoutTests/fast/css/container-query-style-sharing.html b/LayoutTests/fast/css/container-query-style-sharing.html
@@ -0,0 +1,23 @@
+<style>
+body {
+    display: grid;
+    grid-template-columns: 100px 50px;
+}
+div {
+    container-type: inline-size;
+    background-color: blue;
+}
+span { background-color: red }
+@container (width = 100px) {
+    span { background-color: green }
+}
+</style>
+<body>
+<div>
+    <span>1</span>
+</div>
+<div>
+    <span>2</span>
+</div>
+</body>
+
diff --git a/Source/WebCore/style/StyleSharingResolver.cpp b/Source/WebCore/style/StyleSharingResolver.cpp
@@ -261,6 +261,9 @@ bool SharingResolver::canShareStyleWithElement(const Context& context, const Sty
     if (candidateElement.isLink() && context.elementLinkState != style->insideLink())
         return false;
 
+    if (style->containerType() != ContainerType::None)
+        return false;
+
     if (candidateElement.elementData() != element.elementData()) {
         // Attributes that are optimized as "common attribute selectors".
         if (candidateElement.attributeWithoutSynchronization(HTMLNames::readonlyAttr) != element.attributeWithoutSynchronization(HTMLNames::readonlyAttr))
@@ -293,6 +296,7 @@ bool SharingResolver::canShareStyleWithElement(const Context& context, const Sty
     if (&candidateElement == m_document.fullscreenManager().currentFullscreenElement() || &element == m_document.fullscreenManager().currentFullscreenElement())
         return false;
 #endif
+
     return true;
 }