Implement CSSKeyframeRule.style

This commit is contained in:
Keith Yeung 2016-12-23 11:58:29 -08:00
parent 6d4ccab2b7
commit 18567ce7a8
6 changed files with 79 additions and 13 deletions

View file

@ -2,11 +2,12 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
use dom::bindings::codegen::Bindings::CSSKeyframeRuleBinding;
use dom::bindings::js::Root;
use dom::bindings::reflector::reflect_dom_object;
use dom::bindings::codegen::Bindings::CSSKeyframeRuleBinding::{self, CSSKeyframeRuleMethods};
use dom::bindings::js::{JS, MutNullableJS, Root};
use dom::bindings::reflector::{DomObject, reflect_dom_object};
use dom::bindings::str::DOMString;
use dom::cssrule::{CSSRule, SpecificCSSRule};
use dom::cssstyledeclaration::{CSSModificationAccess, CSSStyleDeclaration, CSSStyleOwner};
use dom::cssstylesheet::CSSStyleSheet;
use dom::window::Window;
use parking_lot::RwLock;
@ -19,6 +20,7 @@ pub struct CSSKeyframeRule {
cssrule: CSSRule,
#[ignore_heap_size_of = "Arc"]
keyframerule: Arc<RwLock<Keyframe>>,
style_decl: MutNullableJS<CSSStyleDeclaration>,
}
impl CSSKeyframeRule {
@ -27,6 +29,7 @@ impl CSSKeyframeRule {
CSSKeyframeRule {
cssrule: CSSRule::new_inherited(parent_stylesheet),
keyframerule: keyframerule,
style_decl: Default::default(),
}
}
@ -39,6 +42,19 @@ impl CSSKeyframeRule {
}
}
impl CSSKeyframeRuleMethods for CSSKeyframeRule {
// https://drafts.csswg.org/css-animations/#dom-csskeyframerule-style
fn Style(&self) -> Root<CSSStyleDeclaration> {
self.style_decl.or_init(|| {
CSSStyleDeclaration::new(self.global().as_window(),
CSSStyleOwner::CSSRule(JS::from_ref(self.global().as_window()),
self.keyframerule.read().block.clone()),
None,
CSSModificationAccess::ReadWrite)
})
}
}
impl SpecificCSSRule for CSSKeyframeRule {
fn ty(&self) -> u16 {
use dom::bindings::codegen::Bindings::CSSRuleBinding::CSSRuleConstants;

View file

@ -34,9 +34,9 @@ pub struct CSSStyleDeclaration {
#[must_root]
pub enum CSSStyleOwner {
Element(JS<Element>),
CSSStyleRule(JS<Window>,
#[ignore_heap_size_of = "Arc"]
Arc<RwLock<PropertyDeclarationBlock>>),
CSSRule(JS<Window>,
#[ignore_heap_size_of = "Arc"]
Arc<RwLock<PropertyDeclarationBlock>>),
}
impl CSSStyleOwner {
@ -49,7 +49,7 @@ impl CSSStyleOwner {
None
}
}
CSSStyleOwner::CSSStyleRule(_, ref pdb) => {
CSSStyleOwner::CSSRule(_, ref pdb) => {
Some(pdb.clone())
}
}
@ -58,7 +58,7 @@ impl CSSStyleOwner {
fn window(&self) -> Root<Window> {
match *self {
CSSStyleOwner::Element(ref el) => window_from_node(&**el),
CSSStyleOwner::CSSStyleRule(ref window, _) => Root::from_ref(&**window),
CSSStyleOwner::CSSRule(ref window, _) => Root::from_ref(&**window),
}
}
@ -72,7 +72,7 @@ impl CSSStyleOwner {
match *self {
CSSStyleOwner::Element(ref el) =>
el.upcast::<Node>().dirty(NodeDamage::NodeStyleDamaged),
CSSStyleOwner::CSSStyleRule(ref window, _) =>
CSSStyleOwner::CSSRule(ref window, _) =>
window.Document().invalidate_stylesheets(),
}
}
@ -126,8 +126,8 @@ impl CSSStyleDeclaration {
fn get_computed_style(&self, property: PropertyId) -> DOMString {
match self.owner {
CSSStyleOwner::CSSStyleRule(..) =>
panic!("get_computed_style called on CSSStyleDeclaration with a CSSStyleRule owner"),
CSSStyleOwner::CSSRule(..) =>
panic!("get_computed_style called on CSSStyleDeclaration with a CSSRule owner"),
CSSStyleOwner::Element(ref el) => {
let node = el.upcast::<Node>();
if !node.is_in_doc() {

View file

@ -58,7 +58,7 @@ impl CSSStyleRuleMethods for CSSStyleRule {
fn Style(&self) -> Root<CSSStyleDeclaration> {
self.style_decl.or_init(|| {
CSSStyleDeclaration::new(self.global().as_window(),
CSSStyleOwner::CSSStyleRule(JS::from_ref(self.global().as_window()),
CSSStyleOwner::CSSRule(JS::from_ref(self.global().as_window()),
self.stylerule.read().block.clone()),
None,
CSSModificationAccess::ReadWrite)

View file

@ -6,5 +6,5 @@
[Exposed=Window]
interface CSSKeyframeRule : CSSRule {
// attribute DOMString keyText;
// readonly attribute CSSStyleDeclaration style;
readonly attribute CSSStyleDeclaration style;
};

View file

@ -45847,6 +45847,12 @@
"deleted_reftests": {},
"items": {
"testharness": {
"cssom/CSSKeyframeRule.html": [
{
"path": "cssom/CSSKeyframeRule.html",
"url": "/cssom/CSSKeyframeRule.html"
}
],
"cssom/overflow-serialization.html": [
{
"path": "cssom/overflow-serialization.html",

View file

@ -0,0 +1,44 @@
<!doctype html>
<meta charset="utf-8">
<title></title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style type="text/css" id="styleElement">
div { animation: 3s slidein; }
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
<script>
var styleSheet = document.getElementById("styleElement").sheet;
var keyframesRule = styleSheet.cssRules[1];
var fromRule = keyframesRule.cssRules[0];
var toRule = keyframesRule.cssRules[1];
test(function() {
assert_equals(keyframesRule.name, "slidein");
assert_equals(typeof fromRule.style, "object");
assert_equals(fromRule.style.marginLeft, "100%");
assert_equals(fromRule.style.width, "300%");
assert_equals(typeof toRule.style, "object");
assert_equals(toRule.style.marginLeft, "0%");
assert_equals(toRule.style.width, "100%");
toRule.style.marginLeft = "-5%";
toRule.style.width = "50%";
assert_equals(fromRule.style.marginLeft, "100%");
assert_equals(fromRule.style.width, "300%");
assert_equals(toRule.style.marginLeft, "-5%");
assert_equals(toRule.style.width, "50%");
}, "CSSKeyframeRule: style property");
</script>