[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: http://svn.webkit.org/repository/webkit/trunk@295726 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/fast/css/container-query-style-sharing-expected.html b/LayoutTests/fast/css/container-query-style-sharing-expected.html
new file mode 100644
index 0000000..87e2a0d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..61c3d3a
--- /dev/null
+++ 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
index bc7c3c6..33c2826 100644
--- a/Source/WebCore/style/StyleSharingResolver.cpp
+++ b/Source/WebCore/style/StyleSharingResolver.cpp
@@ -261,6 +261,9 @@
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 @@
if (&candidateElement == m_document.fullscreenManager().currentFullscreenElement() || &element == m_document.fullscreenManager().currentFullscreenElement())
return false;
#endif
+
return true;
}
