Skip to content
Permalink
Browse files
[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
  • Loading branch information
anttijk committed Jun 22, 2022
1 parent d305d6f commit 75a0e5ede273cbedea29105ed43e8ee61838abcc
Showing 3 changed files with 44 additions and 0 deletions.
@@ -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>
@@ -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>

@@ -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;
}

0 comments on commit 75a0e5e

Please sign in to comment.