Skip to content

GitLab

T
tangled
Commit 1e7015a1 authored by morrita@chromium.org's avatar morrita@chromium.org
Browse files
Options

HTML Imports: styles in removed imports should be applied when it comes back 

Styles are un-applied when an import with the style is removed.
The style however should be re-applied when the import is inserted back to the tree.

BUG=381052
R=dglazkov@chromium.org
TEST=import-readd*

Review URL: https://codereview.chromium.org/331763002

git-svn-id: svn://svn.chromium.org/blink/trunk@176117 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 36972d8c
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 0 deletions
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-dup-nested-expected.txt 0 → 100644
View file @ 1e7015a1
This is a testharness.js-based test.
PASS Styles are re-applied in correct ordder after removed imports are re-added in new place
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-dup-nested.html 0 → 100644
View file @ 1e7015a1
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=import id=redImport href="./resources/style-red.html">
<link rel=import id=blueImport href="./resources/style-blue.html">
<link rel=import id=redImportDup href="./resources/style-red-parent.html">
</head>
<body>
<h1 class="target">Should be red</h1>
<h1 class="another-red-target">Should be red</h1>
<script>
var t = async_test('Styles are re-applied in correct ordder after removed imports are re-added in new place');
window.onload = function() {
t.step(function() {
var firstLink = document.querySelector('#redImport')
var dupLink = document.querySelector('#redImportDup');
document.head.removeChild(dupLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(0, 0, 255)', 'Removal reveals shadowed style.');
assert_equals(window.getComputedStyle(document.querySelector('.another-red-target')).color, 'rgb(255, 0, 0)', 'But sheet is still there.');
document.head.removeChild(firstLink);
document.head.appendChild(dupLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)', 'Used-to-be-a-dup sheet is applied now.');
assert_equals(window.getComputedStyle(document.querySelector('.another-red-target')).color, 'rgb(255, 0, 0)', 'That means this should be applied as well.');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-dup-order-expected.txt 0 → 100644
View file @ 1e7015a1
This is a testharness.js-based test.
PASS Styles are re-applied in correct ordder after removed imports are re-added in new place
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-dup-order.html 0 → 100644
View file @ 1e7015a1
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=import id=redImport href="./resources/style-red.html">
<link rel=import id=blueImport href="./resources/style-blue.html">
<link rel=import id=redImportDup href="./resources/style-red.html">
</head>
<body>
<h1 class="target">Should be red</h1>
<h1 class="another-red-target">Should be red</h1>
<script>
var t = async_test('Styles are re-applied in correct ordder after removed imports are re-added in new place');
window.onload = function() {
t.step(function() {
var firstLink = document.querySelector('#redImport')
var dupLink = document.querySelector('#redImportDup');
document.head.removeChild(dupLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(0, 0, 255)', 'Removal reveals shadowed style.');
assert_equals(window.getComputedStyle(document.querySelector('.another-red-target')).color, 'rgb(255, 0, 0)', 'But sheet is still there.');
document.head.removeChild(firstLink);
document.head.appendChild(dupLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)', 'Used-to-be-a-dup sheet is applied now.');
assert_equals(window.getComputedStyle(document.querySelector('.another-red-target')).color, 'rgb(255, 0, 0)', 'That means this should be applied as well.');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-expected.txt 0 → 100644
View file @ 1e7015a1
This is a testharness.js-based test.
PASS Styles are re-applied after removed imports are re-added
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-nested-expected.txt 0 → 100644
View file @ 1e7015a1
This is a testharness.js-based test.
PASS Styles in grandchild are re-applied after removed imports are re-added
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-nested.html 0 → 100644
View file @ 1e7015a1
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=import href="./resources/style-red-parent.html">
</head>
<body>
<h1 class="target">Should be red</h1>
<script>
var t = async_test('Styles in grandchild are re-applied after removed imports are re-added');
window.onload = function() {
t.step(function() {
var importLink = document.querySelector('link');
document.head.removeChild(importLink);
document.head.appendChild(importLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-order-1-expected.txt 0 → 100644
View file @ 1e7015a1
This is a testharness.js-based test.
PASS Styles are re-applied in correct ordder after removed imports are re-added in new place
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-order-1.html 0 → 100644
View file @ 1e7015a1
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=import id=redImport href="./resources/style-red.html">
<link rel=import id=blueImport href="./resources/style-blue.html">
</head>
<body>
<h1 class="target">Should be red</h1>
<script>
var t = async_test('Styles are re-applied in correct ordder after removed imports are re-added in new place');
window.onload = function() {
t.step(function() {
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(0, 0, 255)');
var importLink = document.querySelector('#redImport');
document.head.removeChild(importLink);
document.head.appendChild(importLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-order-2-expected.txt 0 → 100644
View file @ 1e7015a1
This is a testharness.js-based test.
PASS Styles are re-applied in correct ordder after removed imports are re-added in new place
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/fast/html/imports/import-readd-order-2.html 0 → 100644
View file @ 1e7015a1
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=import id=redImport href="./resources/style-red.html">
<link rel=import id=blueImport href="./resources/style-blue.html">
</head>
<body>
<h1 class="target">Should be red</h1>
<script>
var t = async_test('Styles are re-applied in correct ordder after removed imports are re-added in new place');
window.onload = function() {
t.step(function() {
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(0, 0, 255)');
var importLink = document.querySelector('#blueImport');
document.head.removeChild(importLink);
document.head.insertBefore(importLink, document.head.lastElementChild);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>
third_party/WebKit/LayoutTests/fast/html/imports/import-readd.html 0 → 100644
View file @ 1e7015a1
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel=import href="./resources/style-red.html">
</head>
<body>
<h1 class="target">Should be red</h1>
<script>
var t = async_test('Styles are re-applied after removed imports are re-added');
window.onload = function() {
t.step(function() {
var importLink = document.querySelector('link');
document.head.removeChild(importLink);
document.head.appendChild(importLink);
assert_equals(window.getComputedStyle(document.querySelector('.target')).color, 'rgb(255, 0, 0)');
Array.prototype.forEach.call(document.querySelectorAll("h1"), function(e) { e.style.display = "none"; });
t.done();
});
}
</script>
</body>
</html>
third_party/WebKit/LayoutTests/fast/html/imports/resources/style-red.html 0 → 100644
View file @ 1e7015a1
<style>
.target {
color: red;
}
.another-red-target {
color: red;
}
</style>
third_party/WebKit/Source/core/html/HTMLLinkElement.cpp
View file @ 1e7015a1
......@@ -270,6 +270,10 @@ Node::InsertionNotificationRequest HTMLLinkElement::insertedInto(ContainerNode*
document().styleEngine()->addStyleSheetCandidateNode(this, m_createdByParser);
process();
if (m_link)
m_link->ownerInserted();
return InsertionDone;
}
......
third_party/WebKit/Source/core/html/LinkResource.h
View file @ 1e7015a1
......@@ -58,6 +58,7 @@ public:
virtual Type type() const = 0;
virtual void process() = 0;
virtual void ownerRemoved() { }
virtual void ownerInserted() { }
virtual bool hasLoaded() const = 0;
virtual void trace(Visitor*);
......
third_party/WebKit/Source/core/html/imports/HTMLImportChild.cpp
View file @ 1e7015a1
......@@ -65,6 +65,13 @@ HTMLImportChild::~HTMLImportChild()
#endif
}
void HTMLImportChild::ownerInserted()
{
if (!m_loader->isDone())
return;
root()->document()->styleResolverChanged();
}
void HTMLImportChild::didShareLoader()
{
createCustomElementMicrotaskStepIfNeeded();
......
third_party/WebKit/Source/core/html/imports/HTMLImportChild.h
View file @ 1e7015a1
......@@ -58,6 +58,7 @@ public:
HTMLLinkElement* link() const;
const KURL& url() const { return m_url; }
void ownerInserted();
void didShareLoader();
void didStartLoading();
#if !ENABLE(OILPAN)
......
third_party/WebKit/Source/core/html/imports/LinkImport.cpp
View file @ 1e7015a1
......@@ -134,6 +134,12 @@ bool LinkImport::hasLoaded() const
return m_child && m_child->isDone() && !m_child->loader()->hasError();
}
void LinkImport::ownerInserted()
{
if (m_child)
m_child->ownerInserted();
}
void LinkImport::trace(Visitor* visitor)
{
visitor->trace(m_child);
......
third_party/WebKit/Source/core/html/imports/LinkImport.h
View file @ 1e7015a1
......@@ -60,6 +60,7 @@ public:
virtual Type type() const OVERRIDE { return Import; }
virtual bool hasLoaded() const OVERRIDE;
virtual void trace(Visitor*) OVERRIDE;
virtual void ownerInserted() OVERRIDE;
// HTMLImportChildClient
virtual void didFinish() OVERRIDE;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment