-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CSSRegions]Add support for background-color in region styling
https://bugs.webkit.org/show_bug.cgi?id=71488 Reviewed by David Hyatt. Source/WebCore: Tests: fast/regions/region-style-block-background-color.html fast/regions/region-style-block-background-color2.html fast/regions/region-style-image-background-color.html fast/regions/region-style-inline-background-color.html * WebCore.exp.in: * css/CSSStyleSelector.cpp: (WebCore::RuleData::regionStyleRule): (WebCore::CSSStyleSelector::CSSStyleSelector): (WebCore::CSSStyleSelector::addMatchedDeclaration): (WebCore::CSSStyleSelector::matchRules): (WebCore::CSSStyleSelector::matchAllRules): (WebCore::CSSStyleSelector::initForRegionStyling): (WebCore::CSSStyleSelector::styleForElement): (WebCore::CSSStyleSelector::pseudoStyleForElement): (WebCore::RuleData::RuleData): (WebCore::RuleSet::RuleSet): (WebCore::RuleSet::addToRuleSet): (WebCore::CSSStyleSelector::applyDeclarations): (WebCore::isValidRegionStyleProperty): (WebCore::CSSStyleSelector::applyProperty): * css/CSSStyleSelector.h: (WebCore::CSSStyleSelector::setRegionForStyling): (WebCore::CSSStyleSelector::regionForStyling): (WebCore::CSSStyleSelector::applyPropertyToRegionStyle): * rendering/RenderFlowThread.cpp: (WebCore::RenderFlowThread::clearRenderRegionRangeMap): (WebCore::RenderFlowThread::~RenderFlowThread): (WebCore::RenderFlowThread::layout): (WebCore::RenderFlowThread::clearRenderObjectCustomStyle): (WebCore::RenderFlowThread::setRegionRangeForBox): * rendering/RenderFlowThread.h: * rendering/RenderLayer.cpp: (WebCore::CurrentRenderRegionMaintainer::CurrentRenderRegionMaintainer): (WebCore::CurrentRenderRegionMaintainer::~CurrentRenderRegionMaintainer): (WebCore::RenderLayer::paint): (WebCore::RenderLayer::hitTest): * rendering/RenderObject.cpp: (WebCore::RenderObject::style): * rendering/RenderObject.h: (WebCore::RenderObject::canHaveRegionStyle): * rendering/RenderObjectChildList.cpp: (WebCore::RenderObjectChildList::removeChildNode): * rendering/RenderRegion.cpp: (WebCore::RenderRegion::layout): (WebCore::RenderRegion::renderObjectRegionStyle): (WebCore::RenderRegion::computeStyleInRegion): (WebCore::RenderRegion::clearObjectStyleInRegion): * rendering/RenderRegion.h: * rendering/RenderView.cpp: (WebCore::RenderView::RenderView): * rendering/RenderView.h: (WebCore::RenderView::currentRenderRegion): (WebCore::RenderView::setCurrentRenderRegion): LayoutTests: * fast/regions/region-style-block-background-color.html: Added. * fast/regions/region-style-block-background-color2.html: Added. * fast/regions/region-style-image-background-color.html: Added. * fast/regions/region-style-inline-background-color.html: Added. * fast/regions/resources/transparent.png: Added. * platform/mac-snowleopard/fast/regions/region-style-block-background-color-expected.png: Added. * platform/mac-snowleopard/fast/regions/region-style-block-background-color-expected.txt: Added. * platform/mac-snowleopard/fast/regions/region-style-block-background-color2-expected.png: Added. * platform/mac-snowleopard/fast/regions/region-style-block-background-color2-expected.txt: Added. * platform/mac-snowleopard/fast/regions/region-style-image-background-color-expected.png: Added. * platform/mac-snowleopard/fast/regions/region-style-image-background-color-expected.txt: Added. * platform/mac-snowleopard/fast/regions/region-style-inline-background-color-expected.png: Added. * platform/mac-snowleopard/fast/regions/region-style-inline-background-color-expected.txt: Added. Canonical link: https://commits.webkit.org/90666@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@102234 268f45cc-cd09-0410-ab3c-d52691b4dbfc
- Loading branch information
Showing
28 changed files
with
906 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 100 additions & 0 deletions
100
LayoutTests/fast/regions/region-style-block-background-color.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <!-- | ||
| Test for https://bugs.webkit.org/show_bug.cgi?id=71488 (Add support for background-color in region styling). | ||
| Test setting the background-color property using region styling fox boxes. | ||
| You should not see any red background below. | ||
| --> | ||
| <head> | ||
| <style> | ||
| p { background-color: red; } | ||
| .regionBox { width: 280px; height: 50px; } | ||
| .regionBox1 { width: 280px; height: 30px; } | ||
|
|
||
| #article1 { -webkit-flow-into: flow1; } | ||
| #region1 { -webkit-flow-from: flow1; } | ||
| @-webkit-region #region1 { p { background-color: green; } } | ||
|
|
||
| #article2 { -webkit-flow-into: flow2; } | ||
| #region21, #region22 { -webkit-flow-from: flow2; } | ||
| @-webkit-region #region21 { p { background-color: green; } } | ||
| @-webkit-region #region22 { p { background-color: lime; } } | ||
|
|
||
| #article3 { -webkit-flow-into: flow3; } | ||
| #region31, #region32 { -webkit-flow-from: flow3; } | ||
| @-webkit-region #region31 { p { background-color: green; } } | ||
| @-webkit-region #region32 { p { background-color: lime; } } | ||
|
|
||
| #article41 { -webkit-flow-into: flow41; } | ||
| #region41 { -webkit-flow-from: flow41; } | ||
| #article42 { -webkit-flow-into: flow42; } | ||
| #region42 { -webkit-flow-from: flow42; } | ||
| @-webkit-region #region41 { p { background-color: green; } } | ||
| @-webkit-region #region42 { p { background-color: lime; } } | ||
|
|
||
| #article5 { -webkit-flow-into: flow5; } | ||
| #region5 { -webkit-flow-from: flow5; } | ||
| @-webkit-region #region5 { p { background-color: green; } } | ||
|
|
||
| #article6 { -webkit-flow-into: flow6; } | ||
| #region6 { -webkit-flow-from: flow6; } | ||
| @-webkit-region #region6 { p { background-color: transparent; } } | ||
|
|
||
| #article7 { -webkit-flow-into: flow7; } | ||
| #region71 { -webkit-flow-from: flow7; } | ||
| #region72 { -webkit-flow-from: flow7; } | ||
| #p7 { background-color: green; } | ||
| @-webkit-region #region71 { p { background-color: transparent; } } | ||
| </style> | ||
| </head> | ||
| <body class="body"> | ||
| <!-- Style a single paragraph in a single region --> | ||
| <div id="article1"> | ||
| <p>Green background text styled in region1.</p> | ||
| </div> | ||
| <div id="region1" class="regionBox1"></div> | ||
| <!-- Style separate paragraphs in different regions --> | ||
| <div id="article2"> | ||
| <p>Green background text styled in region21.</p> | ||
| <p>Lime background text styled in region22.</p> | ||
| </div> | ||
| <div id="region21" class="regionBox"></div> | ||
| <div id="region22" class="regionBox1"></div> | ||
| <!-- Style a single paragraph in different regions --> | ||
| <div id="article3"> | ||
| <p>Green background text styled in region31. Lime background text styled in region32. Lime background text styled in region32. Green background text styled in region31.</p> | ||
| </div> | ||
| <div id="region31" class="regionBox"></div> | ||
| <div id="region32" class="regionBox"></div> | ||
| <div id="region31" class="regionBox1"></div> | ||
| <!-- Style paragraphs in alternate regions --> | ||
| <div id="article41"> | ||
| <p>Green background text styled in region 41.</p> | ||
| <p>Green background text styled in region 41.</p> | ||
| </div> | ||
| <div id="article42"> | ||
| <p>Lime background text styled in region 42.</p> | ||
| <p>Lime background text styled in region 42.</p> | ||
| </div> | ||
| <div id="region41" class="regionBox"></div> | ||
| <div id="region42" class="regionBox"></div> | ||
| <div id="region41" class="regionBox1"></div> | ||
| <div id="region42" class="regionBox1"></div> | ||
| <!-- Style paragraph in region, text also styled. --> | ||
| <div id="article5"> | ||
| <p><i><b>Green background, styled text in region5.</b></i></p> | ||
| </div> | ||
| <div id="region5" class="regionBox1"></div> | ||
| <!-- Style paragraph in region, transparent background. --> | ||
| <div id="article6"> | ||
| <p>Transparent background text in region6.</b></i></p> | ||
| </div> | ||
| <div id="region6" class="regionBox1"></div> | ||
| <!-- Style paragraph in two regions, first region resets background, second region should have background --> | ||
| <div id="article7"> | ||
| <p id="p7">Transparent background text in region71. Green background text in region 72.</p> | ||
| </div> | ||
| <div id="region71" class="regionBox"></div> | ||
| <div id="region72" class="regionBox1"></div> | ||
| </body> | ||
| </html> |
179 changes: 179 additions & 0 deletions
179
LayoutTests/fast/regions/region-style-block-background-color2.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <!-- | ||
| Test for https://bugs.webkit.org/show_bug.cgi?id=71488 (Add support for background-color in region styling). | ||
| Test setting the background-color property using region styling for boxes. | ||
| You should not see any red background below. | ||
| --> | ||
| <head> | ||
| <style> | ||
| p { background-color: red; } | ||
| .regionBox { width: 280px; height: 50px; } | ||
| .regionBox1 { width: 280px; height: 30px; } | ||
| .regionBox2 { width: 280px; height: 100px; } | ||
|
|
||
| #article1 { -webkit-flow-into: flow1; } | ||
| .region1 { -webkit-flow-from: flow1; } | ||
| @-webkit-region #region1 { p { background-color: green; } } | ||
|
|
||
| .article2 { -webkit-flow-into: flow2; } | ||
| .region2 { -webkit-flow-from: flow2; } | ||
| #p2 { background-color: lime; width: 280px; } | ||
| @-webkit-region .region2 { p { background-color: green; } } | ||
|
|
||
| #article3 { -webkit-flow-into: flow3; } | ||
| #region31, #region32 { -webkit-flow-from: flow3; } | ||
| @-webkit-region #region31 { p { background-color: green; } } | ||
| @-webkit-region #region32 { p { background-color: lime; } } | ||
|
|
||
| #article4 { -webkit-flow-into: flow4; } | ||
| #region41, #region42 { -webkit-flow-from: flow4; } | ||
| @-webkit-region #region41 { p { background-color: green; } } | ||
| @-webkit-region #region42 { p { background-color: lime; } } | ||
|
|
||
| #article5 { -webkit-flow-into: flow5; } | ||
| #region51, #region52 { -webkit-flow-from: flow5; } | ||
| @-webkit-region #region51 { p { background-color: green; } } | ||
| @-webkit-region #region52 { p { background-color: lime; } } | ||
|
|
||
| #article6 { -webkit-flow-into: flow6; } | ||
| #region61, #region62 { -webkit-flow-from: flow6; } | ||
| @-webkit-region #region61 { p { background-color: green; } } | ||
| @-webkit-region #region62 { p { background-color: lime; } } | ||
|
|
||
| #article7 { -webkit-flow-into: flow7; } | ||
| #region71, #region72 { -webkit-flow-from: flow7; } | ||
| @-webkit-region #region71 { p { background-color: green; } } | ||
| @-webkit-region #region72 { p { background-color: lime; } } | ||
| </style> | ||
| </head> | ||
| <body onload="runTests()"> | ||
| <!-- Style paragraph in a new region --> | ||
| <div id="article1"> | ||
| <p>Green background text styled in region1.</p> | ||
| </div> | ||
| <div id="region1" class="regionBox1"></div> | ||
| <!-- Paragraph styled in region, flow removed --> | ||
| <div class="article2"> | ||
| <p id="p2">Lime background text styled out region2.</p> | ||
| </div> | ||
| <div class="region2 regionBox"></div> | ||
| <!-- Paragraphs styled in different regions. | ||
| The first para is removed and appended to the flow. | ||
| Both paragraphs will be styled again in the opposite regions.--> | ||
| <div id="article3"> | ||
| <p id="p3">Lime background text styled in region32.</p> | ||
| <p>Green background text styled in region31.</p> | ||
| </div> | ||
| <div id="region31" class="regionBox"></div> | ||
| <div id="region32" class="regionBox1"></div> | ||
| <!-- Paragraph styled in first region. A new paragrash is inserted before in the flow, | ||
| pushing the first paragrash in the second region.--> | ||
| <div id="article4"> | ||
| <p id="p4">Lime background text styled in region42.</p> | ||
| </div> | ||
| <div id="region41" class="regionBox"></div> | ||
| <div id="region42" class="regionBox1"></div> | ||
| <!-- Two paragraphs styled in different regions. After the first region height increases, | ||
| both paragraphs are placed and styled in the first region.--> | ||
| <div id="article5"> | ||
| <p>Green background text styled in region51.</p> | ||
| <p>Green background text styled in region51.</p> | ||
| </div> | ||
| <div id="region51" class="regionBox"></div> | ||
| <div id="region52" class="regionBox1"></div> | ||
| <!-- Two paragraphs styled in the first region. After the first region height decreases, | ||
| the first paragraph is styled in the first region while the second paragraph is styled | ||
| in the second region. | ||
| --> | ||
| <div id="article6"> | ||
| <p>Green background text styled in region61.</p> | ||
| <p>Lime background text styled in region62.</p> | ||
| </div> | ||
| <div id="region61" class="regionBox2"></div> | ||
| <div id="region62" class="regionBox1"></div> | ||
| <!-- Two paragraphs styled in the first region. The height of first region is | ||
| decreased/increased and in the end, the second paragraph ends up in the second region.--> | ||
| <div id="article7"> | ||
| <p>Green background text styled in region71.</p> | ||
| <p>Lime background text styled in region72.</p> | ||
| </div> | ||
| <div id="region71" class="regionBox2"></div> | ||
| <div id="region72" class="regionBox1"></div> | ||
| <script> | ||
| if (window.layoutTestController) | ||
| window.layoutTestController.waitUntilDone(); | ||
|
|
||
| function testFlow1() | ||
| { | ||
| var region1 = document.getElementById("region1"); | ||
| region1.className = "region1 regionBox"; | ||
| } | ||
|
|
||
| function testFlow2() | ||
| { | ||
| var article2 = document.getElementsByClassName("article2")[0]; | ||
| article2.className = ""; | ||
| var region2 = document.getElementsByClassName("region2 regionBox")[0]; | ||
| region2.className = ""; | ||
| } | ||
|
|
||
| function testFlow3() | ||
| { | ||
| var p = document.getElementById("p3"); | ||
| var parent = p.parentNode; | ||
| parent.removeChild(p); | ||
| parent.appendChild(p); | ||
| } | ||
|
|
||
| function testFlow4() | ||
| { | ||
| var p = document.getElementById("p4"); | ||
| var p1 = document.createElement("p"); | ||
| var content = document.createTextNode("Green background text styled in region41."); | ||
| p1.appendChild(content); | ||
| p.parentNode.insertBefore(p1, p); | ||
| } | ||
|
|
||
| function testFlow5() | ||
| { | ||
| document.getElementById("region51").style.height = "100px"; | ||
| document.getElementById("region52").style.height = "10px"; | ||
| } | ||
|
|
||
| function testFlow6() | ||
| { | ||
| document.getElementById("region61").style.height = "50px"; | ||
| } | ||
|
|
||
| function testFlow71() | ||
| { | ||
| document.getElementById("region71").style.height = "50px"; | ||
| } | ||
|
|
||
| function testFlow72() | ||
| { | ||
| document.getElementById("region71").style.height = "100px"; | ||
| } | ||
|
|
||
| function testFlow73() | ||
| { | ||
| document.getElementById("region71").style.height = "50px"; | ||
| if (window.layoutTestController) | ||
| window.layoutTestController.notifyDone(); | ||
| } | ||
|
|
||
| function runTests() { | ||
| testFlow1(); | ||
| testFlow2(); | ||
| testFlow3(); | ||
| testFlow4(); | ||
| testFlow5(); | ||
| testFlow6(); | ||
| testFlow71(); | ||
| setTimeout(testFlow72, 100); | ||
| setTimeout(testFlow73, 200); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
27 changes: 27 additions & 0 deletions
27
LayoutTests/fast/regions/region-style-image-background-color.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <!-- | ||
| Test for https://bugs.webkit.org/show_bug.cgi?id=71488 (Add support for background-color in region styling). | ||
| Setting the background color is enabled for block elements only. | ||
| You should not see any red background below. | ||
| --> | ||
| <head> | ||
| <style> | ||
| p { background-color: red; } | ||
| img { background-color: green} | ||
| .regionBox2 { width: 280px; height: 100px; } | ||
|
|
||
| #article { -webkit-flow-into: flow; } | ||
| #region { -webkit-flow-from: flow; } | ||
| @-webkit-region #region { p { background-color: green; } } | ||
| @-webkit-region #region { img { background-color: red; } } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="article"> | ||
| <p>Green background text styled in region.</p> | ||
| <img src="resources/transparent.png"></img> | ||
| </div> | ||
| <div id="region" class="regionBox2"></div> | ||
| </body> | ||
| </html> |
38 changes: 38 additions & 0 deletions
38
LayoutTests/fast/regions/region-style-inline-background-color.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <!-- | ||
| Test for https://bugs.webkit.org/show_bug.cgi?id=71488 (Add support for background-color in region styling). | ||
| Setting the background color is not enabled for inline elements. | ||
| You should not see any red background below. | ||
| --> | ||
| <head> | ||
| <style> | ||
| .regionBox { width: 280px; height: 50px; } | ||
|
|
||
| #article1 { -webkit-flow-into: flow1; } | ||
| #region1 { -webkit-flow-from: flow1; } | ||
| #span1 { background-color: green; } | ||
| @-webkit-region #region { span { background-color: red; } } | ||
|
|
||
| #article2 { -webkit-flow-into: flow2; } | ||
| #region2 { -webkit-flow-from: flow2; } | ||
| #span2 { display: block; background-color: green; } | ||
| @-webkit-region #region2 { span { background-color: red; } } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="article1"> | ||
| <span id="span1">Green background span not styled in region.</span> | ||
| </div> | ||
| <div id="region1" class="regionBox"></div> | ||
|
|
||
| <div id="article2"> | ||
| <span id="span2">Green background span not styled in region.</span> | ||
| </div> | ||
| <div id="region2" class="regionBox"></div> | ||
| <script> | ||
| document.getElementById("span2").style.display = "inline"; | ||
| </script> | ||
| </body> | ||
| </html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+54.7 KB
...m/mac-snowleopard/fast/regions/region-style-block-background-color-expected.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.