mirror of
https://github.com/servo/servo.git
synced 2025-08-05 05:30:08 +01:00
Initial support for custom properties in CSSStyleDeclaration
This commit is contained in:
Simon Sapin
parent
d56ea10770
commit
feaf6f4c3f
9 changed files with 471 additions and 27 deletions
|
|
@ -979,7 +979,7 @@ impl LayoutTask {
|
|||
// FIXME: implement used value computation for line-height
|
||||
property => {
|
||||
rw_data.resolved_style_response =
|
||||
style.computed_value_to_string(property.as_slice());
|
||||
style.computed_value_to_string(property.as_slice()).ok();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -650,7 +650,7 @@ impl Element {
|
|||
if let &mut Some(ref mut declarations) = &mut *inline_declarations {
|
||||
let index = declarations.normal
|
||||
.iter()
|
||||
.position(|decl| decl.name() == property);
|
||||
.position(|decl| decl.matches(property));
|
||||
if let Some(index) = index {
|
||||
Arc::make_mut(&mut declarations.normal).remove(index);
|
||||
return;
|
||||
|
|
@ -658,7 +658,7 @@ impl Element {
|
|||
|
||||
let index = declarations.important
|
||||
.iter()
|
||||
.position(|decl| decl.name() == property);
|
||||
.position(|decl| decl.matches(property));
|
||||
if let Some(index) = index {
|
||||
Arc::make_mut(&mut declarations.important).remove(index);
|
||||
return;
|
||||
|
|
@ -715,7 +715,8 @@ impl Element {
|
|||
let to = Arc::make_mut(to);
|
||||
let mut new_from = Vec::new();
|
||||
for declaration in from.drain(..) {
|
||||
if properties.contains(&declaration.name()) {
|
||||
let name = declaration.name();
|
||||
if properties.iter().any(|p| name == **p) {
|
||||
to.push(declaration)
|
||||
} else {
|
||||
new_from.push(declaration)
|
||||
|
|
|
|||
|
|
@ -2,10 +2,11 @@
|
|||
* 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 cssparser::{Parser, Token, SourcePosition, Delimiter, TokenSerializationType};
|
||||
use cssparser::{Parser, Token, SourcePosition, Delimiter, TokenSerializationType, ToCss};
|
||||
use properties::DeclaredValue;
|
||||
use std::ascii::AsciiExt;
|
||||
use std::collections::{HashMap, HashSet};
|
||||
use std::fmt;
|
||||
use std::sync::Arc;
|
||||
use string_cache::Atom;
|
||||
use util::mem::HeapSizeOf;
|
||||
|
|
@ -14,9 +15,9 @@ use util::mem::HeapSizeOf;
|
|||
pub type Name = Atom;
|
||||
|
||||
// https://drafts.csswg.org/css-variables/#typedef-custom-property-name
|
||||
pub fn parse_name(s: &str) -> Result<Name, ()> {
|
||||
pub fn parse_name(s: &str) -> Result<&str, ()> {
|
||||
if s.starts_with("--") {
|
||||
Ok(Atom::from_slice(&s[2..]))
|
||||
Ok(&s[2..])
|
||||
} else {
|
||||
Err(())
|
||||
}
|
||||
|
|
@ -47,6 +48,18 @@ pub struct ComputedValue {
|
|||
last_token_type: TokenSerializationType,
|
||||
}
|
||||
|
||||
impl ToCss for SpecifiedValue {
|
||||
fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
|
||||
dest.write_str(&self.css)
|
||||
}
|
||||
}
|
||||
|
||||
impl ToCss for ComputedValue {
|
||||
fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
|
||||
dest.write_str(&self.css)
|
||||
}
|
||||
}
|
||||
|
||||
pub type ComputedValuesMap = HashMap<Name, ComputedValue>;
|
||||
|
||||
impl ComputedValue {
|
||||
|
|
@ -157,7 +170,7 @@ fn parse_var_function<'i, 't>(input: &mut Parser<'i, 't>, references: &mut Optio
|
|||
try!(parse_declaration_value(input, references));
|
||||
}
|
||||
if let Some(ref mut refs) = *references {
|
||||
refs.insert(name);
|
||||
refs.insert(Atom::from_slice(name));
|
||||
}
|
||||
Ok(())
|
||||
}
|
||||
|
|
@ -381,7 +394,7 @@ fn substitute_block<F>(input: &mut Parser,
|
|||
try!(input.parse_nested_block(|input| {
|
||||
// parse_var_function() ensures neither .unwrap() will fail.
|
||||
let name = input.expect_ident().unwrap();
|
||||
let name = parse_name(&name).unwrap();
|
||||
let name = Atom::from_slice(parse_name(&name).unwrap());
|
||||
|
||||
if let Ok(last) = substitute_one(&name, partial_computed_value) {
|
||||
last_token_type = last;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
// This file is a Mako template: http://www.makotemplates.org/
|
||||
|
||||
use std::ascii::AsciiExt;
|
||||
use std::borrow::ToOwned;
|
||||
use std::collections::HashSet;
|
||||
use std::default::Default;
|
||||
use std::fmt;
|
||||
|
|
@ -23,6 +22,7 @@ use util::logical_geometry::{LogicalMargin, PhysicalSide, WritingMode};
|
|||
use euclid::SideOffsets2D;
|
||||
use euclid::size::Size2D;
|
||||
use fnv::FnvHasher;
|
||||
use string_cache::Atom;
|
||||
|
||||
use computed_values;
|
||||
use parser::{ParserContext, log_css_error};
|
||||
|
|
@ -5815,17 +5815,17 @@ pub enum DeclaredValue<T> {
|
|||
// depending on whether the property is inherited.
|
||||
}
|
||||
|
||||
impl<T: ToCss> DeclaredValue<T> {
|
||||
pub fn specified_value(&self) -> String {
|
||||
impl<T: ToCss> ToCss for DeclaredValue<T> {
|
||||
fn to_css<W>(&self, dest: &mut W) -> fmt::Result where W: fmt::Write {
|
||||
match *self {
|
||||
DeclaredValue::Value(ref inner) => inner.to_css_string(),
|
||||
DeclaredValue::Value(ref inner) => inner.to_css(dest),
|
||||
DeclaredValue::WithVariables { ref css, from_shorthand: Shorthand::None, .. } => {
|
||||
css.clone()
|
||||
dest.write_str(css)
|
||||
}
|
||||
// https://drafts.csswg.org/css-variables/#variables-in-shorthands
|
||||
DeclaredValue::WithVariables { .. } => String::new(),
|
||||
DeclaredValue::Initial => "initial".to_owned(),
|
||||
DeclaredValue::Inherit => "inherit".to_owned(),
|
||||
DeclaredValue::WithVariables { .. } => Ok(()),
|
||||
DeclaredValue::Initial => dest.write_str("initial"),
|
||||
DeclaredValue::Inherit => dest.write_str("inherit"),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5847,15 +5847,52 @@ pub enum PropertyDeclarationParseResult {
|
|||
ValidOrIgnoredDeclaration,
|
||||
}
|
||||
|
||||
#[derive(Eq, PartialEq, Clone)]
|
||||
pub enum PropertyDeclarationName {
|
||||
Longhand(&'static str),
|
||||
Custom(::custom_properties::Name),
|
||||
Internal
|
||||
}
|
||||
|
||||
impl PartialEq<str> for PropertyDeclarationName {
|
||||
fn eq(&self, other: &str) -> bool {
|
||||
match *self {
|
||||
PropertyDeclarationName::Longhand(n) => n == other,
|
||||
PropertyDeclarationName::Custom(ref n) => {
|
||||
::custom_properties::parse_name(other) == Ok(&**n)
|
||||
}
|
||||
PropertyDeclarationName::Internal => false,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl fmt::Display for PropertyDeclarationName {
|
||||
fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
|
||||
match *self {
|
||||
PropertyDeclarationName::Longhand(n) => f.write_str(n),
|
||||
PropertyDeclarationName::Custom(ref n) => {
|
||||
try!(f.write_str("--"));
|
||||
f.write_str(n)
|
||||
}
|
||||
PropertyDeclarationName::Internal => Ok(()),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl PropertyDeclaration {
|
||||
pub fn name(&self) -> &'static str {
|
||||
pub fn name(&self) -> PropertyDeclarationName {
|
||||
match *self {
|
||||
% for property in LONGHANDS:
|
||||
% if property.derived_from is None:
|
||||
PropertyDeclaration::${property.camel_case}(..) => "${property.name}",
|
||||
PropertyDeclaration::${property.camel_case}(..) => {
|
||||
PropertyDeclarationName::Longhand("${property.name}")
|
||||
}
|
||||
% endif
|
||||
% endfor
|
||||
_ => "",
|
||||
PropertyDeclaration::Custom(ref name, _) => {
|
||||
PropertyDeclarationName::Custom(name.clone())
|
||||
}
|
||||
_ => PropertyDeclarationName::Internal,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -5864,10 +5901,11 @@ impl PropertyDeclaration {
|
|||
% for property in LONGHANDS:
|
||||
% if property.derived_from is None:
|
||||
PropertyDeclaration::${property.camel_case}(ref value) =>
|
||||
value.specified_value(),
|
||||
value.to_css_string(),
|
||||
% endif
|
||||
% endfor
|
||||
ref decl => panic!("unsupported property declaration: {:?}", decl.name()),
|
||||
PropertyDeclaration::Custom(_, ref value) => value.to_css_string(),
|
||||
ref decl => panic!("unsupported property declaration: {}", decl.name()),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -5880,6 +5918,9 @@ impl PropertyDeclaration {
|
|||
}
|
||||
% endif
|
||||
% endfor
|
||||
PropertyDeclaration::Custom(ref declaration_name, _) => {
|
||||
::custom_properties::parse_name(name) == Ok(&**declaration_name)
|
||||
}
|
||||
_ => false,
|
||||
}
|
||||
}
|
||||
|
|
@ -5896,7 +5937,7 @@ impl PropertyDeclaration {
|
|||
Err(()) => return PropertyDeclarationParseResult::InvalidValue,
|
||||
}
|
||||
};
|
||||
result_list.push(PropertyDeclaration::Custom(name, value));
|
||||
result_list.push(PropertyDeclaration::Custom(Atom::from_slice(name), value));
|
||||
return PropertyDeclarationParseResult::ValidOrIgnoredDeclaration;
|
||||
}
|
||||
match_ignore_ascii_case! { name,
|
||||
|
|
@ -6154,14 +6195,19 @@ impl ComputedValues {
|
|||
}
|
||||
% endfor
|
||||
|
||||
pub fn computed_value_to_string(&self, name: &str) -> Option<String> {
|
||||
pub fn computed_value_to_string(&self, name: &str) -> Result<String, ()> {
|
||||
match name {
|
||||
% for style_struct in STYLE_STRUCTS:
|
||||
% for longhand in style_struct.longhands:
|
||||
"${longhand.name}" => Some(self.${style_struct.ident}.${longhand.ident}.to_css_string()),
|
||||
"${longhand.name}" => Ok(self.${style_struct.ident}.${longhand.ident}.to_css_string()),
|
||||
% endfor
|
||||
% endfor
|
||||
_ => None
|
||||
_ => {
|
||||
let name = try!(::custom_properties::parse_name(name));
|
||||
let map = try!(self.custom_properties.as_ref().ok_or(()));
|
||||
let value = try!(map.get(&Atom::from_slice(name)).ok_or(()));
|
||||
Ok(value.to_css_string())
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6777,7 +6823,7 @@ pub fn is_supported_property(property: &str) -> bool {
|
|||
"${property.name}" => true,
|
||||
% endfor
|
||||
"${LONGHANDS[-1].name}" => true
|
||||
_ => false
|
||||
_ => property.starts_with("--")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -287,6 +287,18 @@
|
|||
"url": "/_mozilla/css/test_variable_legal_values.html"
|
||||
}
|
||||
],
|
||||
"css/test_variable_serialization_computed.html": [
|
||||
{
|
||||
"path": "css/test_variable_serialization_computed.html",
|
||||
"url": "/_mozilla/css/test_variable_serialization_computed.html"
|
||||
}
|
||||
],
|
||||
"css/test_variable_serialization_specified.html": [
|
||||
{
|
||||
"path": "css/test_variable_serialization_specified.html",
|
||||
"url": "/_mozilla/css/test_variable_serialization_specified.html"
|
||||
}
|
||||
],
|
||||
"mozilla/DOMParser.html": [
|
||||
{
|
||||
"path": "mozilla/DOMParser.html",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
[test_variable_serialization_computed.html]
|
||||
type: testharness
|
||||
[subtest #20 with `--a: var(--b)var(--c); --b:orange; --c:red;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #21 with `--a: var(--b)var(--c,red); --b:orange;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #22 with `--a: var(--b,orange)var(--c); --c:red;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #23 with `counter-reset: var(--a)red; --a:orange;`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #24 with `--a: var(--b)var(--c); --c:[c\]; --b:('ab`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #25 with `--a: '`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #26 with `--a: '\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #27 with `--a: \\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #28 with `--a: "`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #29 with `--a: "\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #30 with `--a: /* abc `]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #31 with `--a: /* abc *`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #32 with `--a: url(http://example.org/`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #33 with `--a: url(http://example.org/\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #34 with `--a: url('http://example.org/`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #35 with `--a: url('http://example.org/\\`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #36 with `--a: url("http://example.org/`]
|
||||
expected: FAIL
|
||||
|
||||
[subtest #37 with `--a: url("http://example.org/\\`]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
[test_variable_serialization_specified.html]
|
||||
type: testharness
|
||||
[`var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) ` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var( --a ) ` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, )` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a,/**/a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`1px var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) 1px` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`something 3px url(whereever) calc(var(--a) + 1px)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a)var(--b)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, var(--b, var(--c, black)))` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) <!--` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`--> var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`{ [ var(--a) \] }` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`[;\] var(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a,(;))` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`VAR(--a)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--0)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--\\30)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--\\d800)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--\\ffffff)` is unchanged by specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a` becomes `var(--a)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a , ` becomes `var(--a , )` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, ` becomes `var(--a, )` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, var(--b` becomes `var(--a, var(--b))` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a /* unclosed comment` becomes `var(--a /* unclosed comment*/)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a /* unclosed comment *` becomes `var(--a /* unclosed comment */)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`[{(((var(--a` becomes `[{(((var(--a))))}\]` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, "unclosed string` becomes `var(--a, "unclosed string")` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a, 'unclosed string` becomes `var(--a, 'unclosed string')` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) "unclosed string\\` becomes `var(--a) "unclosed string"` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) 'unclosed string\\` becomes `var(--a) 'unclosed string'` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) \\` becomes `var(--a) \\<5C>` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url(unclosedurl` becomes `var(--a) url(unclosedurl)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url('unclosedurl` becomes `var(--a) url('unclosedurl')` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url("unclosedurl` becomes `var(--a) url("unclosedurl")` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url(unclosedurl\\` becomes `var(--a) url(unclosedurl\\<5C>)` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url('unclosedurl\\` becomes `var(--a) url('unclosedurl')` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
[`var(--a) url("unclosedurl\\` becomes `var(--a) url("unclosedurl")` in specified value serialization]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Test serialization of computed CSS variable values</title>
|
||||
<!--
|
||||
|
||||
Adapted from https://dxr.mozilla.org/mozilla-central/source/layout/style/test/test_variable_serialization_computed.html
|
||||
|
||||
NOTE: CSS does not define the exact serialization of whitespace and comments
|
||||
(see https://drafts.csswg.org/css-syntax/#serialization)
|
||||
so an implementation could fail this test but still be conforming.
|
||||
|
||||
-->
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Each entry is an entire declaration followed by the property to check and
|
||||
// its expected computed value.
|
||||
var values = [
|
||||
["", "--z", "an-inherited-value"],
|
||||
["--a: ", "--a", " "],
|
||||
["--a: initial", "--a", ""],
|
||||
["--z: initial", "--z", ""],
|
||||
["--a: inherit", "--a", ""],
|
||||
["--z: inherit", "--z", "an-inherited-value"],
|
||||
["--a: unset", "--a", ""],
|
||||
["--z: unset", "--z", "an-inherited-value"],
|
||||
["--a: 1px", "--a", " 1px"],
|
||||
["--a: var(--a)", "--a", ""],
|
||||
["--a: var(--b)", "--a", ""],
|
||||
["--a: var(--b); --b: 1px", "--a", " 1px"],
|
||||
["--a: var(--b, 1px)", "--a", " 1px"],
|
||||
["--a: var(--a, 1px)", "--a", ""],
|
||||
["--a: something 3px url(whereever) calc(var(--a) + 1px)", "--a", ""],
|
||||
["--a: something 3px url(whereever) calc(var(--b,1em) + 1px)", "--a", " something 3px url(whereever) calc(1em + 1px)"],
|
||||
["--a: var(--b, var(--c, var(--d, Black)))", "--a", " Black"],
|
||||
["--a: a var(--b) c; --b:b", "--a", " a b c"],
|
||||
["--a: a var(--b,b var(--c) d) e; --c:c", "--a", " a b c d e"],
|
||||
["--a: var(--b)red; --b:orange;", "--a", " orange/**/red"],
|
||||
["--a: var(--b)var(--c); --b:orange; --c:red;", "--a", " orange/**/red"],
|
||||
["--a: var(--b)var(--c,red); --b:orange;", "--a", " orange/**/red"],
|
||||
["--a: var(--b,orange)var(--c); --c:red;", "--a", " orange/**/red"],
|
||||
["counter-reset: var(--a)red; --a:orange;", "counter-reset", "orange 0 red 0"],
|
||||
["--a: var(--b)var(--c); --c:[c]; --b:('ab", "--a", " ('ab')[c]"],
|
||||
["--a: '", "--a", " ''"],
|
||||
["--a: '\\", "--a", " ''"],
|
||||
["--a: \\", "--a", " \\\ufffd"],
|
||||
["--a: \"", "--a", " \"\""],
|
||||
["--a: \"\\", "--a", " \"\""],
|
||||
["--a: /* abc ", "--a", " /* abc */"],
|
||||
["--a: /* abc *", "--a", " /* abc */"],
|
||||
["--a: url(http://example.org/", "--a", " url(http://example.org/)"],
|
||||
["--a: url(http://example.org/\\", "--a", " url(http://example.org/\\\ufffd)"],
|
||||
["--a: url('http://example.org/", "--a", " url('http://example.org/')"],
|
||||
["--a: url('http://example.org/\\", "--a", " url('http://example.org/')"],
|
||||
["--a: url(\"http://example.org/", "--a", " url(\"http://example.org/\")"],
|
||||
["--a: url(\"http://example.org/\\", "--a", " url(\"http://example.org/\")"]
|
||||
];
|
||||
|
||||
var div = document.querySelector("div");
|
||||
var span = document.querySelector("span");
|
||||
|
||||
div.setAttribute("style", "--z:an-inherited-value");
|
||||
|
||||
values.forEach(function(entry, i) {
|
||||
var declaration = entry[0];
|
||||
var property = entry[1];
|
||||
var expected = entry[2];
|
||||
test(function() {
|
||||
span.setAttribute("style", declaration);
|
||||
var cs = getComputedStyle(span, "");
|
||||
assert_equals(cs.getPropertyValue(property), expected);
|
||||
}, "subtest #" + i + " with `" + declaration + "`");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Test serialization of specified CSS variable values</title>
|
||||
<!--
|
||||
|
||||
Adapted from https://dxr.mozilla.org/mozilla-central/source/layout/style/test/test_variable_serialization_specified.html
|
||||
|
||||
NOTE: CSS does not define the exact serialization of whitespace and comments
|
||||
(see https://drafts.csswg.org/css-syntax/#serialization)
|
||||
so an implementation could fail this test but still be conforming.
|
||||
|
||||
-->
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id=div1></div>
|
||||
|
||||
<script>
|
||||
// Values that should be serialized back to the same string.
|
||||
var values_with_unchanged_specified_value_serialization = [
|
||||
"var(--a)",
|
||||
"var(--a)",
|
||||
"var(--a) ",
|
||||
"var( --a ) ",
|
||||
"var(--a, )",
|
||||
"var(--a,/**/a)",
|
||||
"1px var(--a)",
|
||||
"var(--a) 1px",
|
||||
"something 3px url(whereever) calc(var(--a) + 1px)",
|
||||
"var(--a)",
|
||||
"var(--a)var(--b)",
|
||||
"var(--a, var(--b, var(--c, black)))",
|
||||
"var(--a) <!--",
|
||||
"--> var(--a)",
|
||||
"{ [ var(--a) ] }",
|
||||
"[;] var(--a)",
|
||||
"var(--a,(;))",
|
||||
"VAR(--a)",
|
||||
"var(--0)",
|
||||
"var(--\\30)",
|
||||
"var(--\\d800)",
|
||||
"var(--\\ffffff)",
|
||||
];
|
||||
|
||||
// Values that serialize differently, due to additional implied closing
|
||||
// characters at EOF.
|
||||
var values_with_changed_specified_value_serialization = [
|
||||
["var(--a", "var(--a)"],
|
||||
["var(--a , ", "var(--a , )"],
|
||||
["var(--a, ", "var(--a, )"],
|
||||
["var(--a, var(--b", "var(--a, var(--b))"],
|
||||
["var(--a /* unclosed comment", "var(--a /* unclosed comment*/)"],
|
||||
["var(--a /* unclosed comment *", "var(--a /* unclosed comment */)"],
|
||||
["[{(((var(--a", "[{(((var(--a))))}]"],
|
||||
["var(--a, \"unclosed string", "var(--a, \"unclosed string\")"],
|
||||
["var(--a, 'unclosed string", "var(--a, 'unclosed string')"],
|
||||
["var(--a) \"unclosed string\\", "var(--a) \"unclosed string\""],
|
||||
["var(--a) 'unclosed string\\", "var(--a) 'unclosed string'"],
|
||||
["var(--a) \\", "var(--a) \\\ufffd"],
|
||||
["var(--a) url(unclosedurl", "var(--a) url(unclosedurl)"],
|
||||
["var(--a) url('unclosedurl", "var(--a) url('unclosedurl')"],
|
||||
["var(--a) url(\"unclosedurl", "var(--a) url(\"unclosedurl\")"],
|
||||
["var(--a) url(unclosedurl\\", "var(--a) url(unclosedurl\\\ufffd)"],
|
||||
["var(--a) url('unclosedurl\\", "var(--a) url('unclosedurl')"],
|
||||
["var(--a) url(\"unclosedurl\\", "var(--a) url(\"unclosedurl\")"],
|
||||
];
|
||||
|
||||
var div1 = document.getElementById("div1");
|
||||
|
||||
function test_specified_value_serialization(value, expected) {
|
||||
// Test setting value on a custom property with setProperty.
|
||||
div1.style.setProperty("--test", value, "");
|
||||
assert_equals(div1.style.getPropertyValue("--test"), expected,
|
||||
"value with identical serialization set on custom property with setProperty");
|
||||
|
||||
// Test setting value on a custom property via style sheet parsing.
|
||||
div1.setAttribute("style", "--test:" + value);
|
||||
assert_equals(div1.style.getPropertyValue("--test"), expected,
|
||||
"value with identical serialization set on custom property via parsing");
|
||||
|
||||
// Test setting value on a non-custom longhand property with setProperty.
|
||||
div1.style.setProperty("color", value, "");
|
||||
assert_equals(div1.style.getPropertyValue("color"), expected,
|
||||
"value with identical serialization set on non-custom longhand property with setProperty");
|
||||
|
||||
// Test setting value on a non-custom longhand property via style sheet parsing.
|
||||
div1.setAttribute("style", "color:" + value);
|
||||
assert_equals(div1.style.getPropertyValue("color"), expected,
|
||||
"value with identical serialization set on non-custom longhand property via parsing");
|
||||
|
||||
// Test setting value on a non-custom shorthand property with setProperty.
|
||||
div1.style.setProperty("margin", value, "");
|
||||
assert_equals(div1.style.getPropertyValue("margin"), expected,
|
||||
"value with identical serialization set on non-custom shorthand property with setProperty");
|
||||
|
||||
// Test setting value on a non-custom shorthand property via style sheet parsing.
|
||||
div1.setAttribute("style", "margin:" + value);
|
||||
assert_equals(div1.style.getPropertyValue("margin"), expected,
|
||||
"value with identical serialization set on non-custom shorthand property via parsing");
|
||||
|
||||
// Clean up.
|
||||
div1.style.removeProperty("--test");
|
||||
div1.style.removeProperty("color");
|
||||
div1.style.removeProperty("margin");
|
||||
}
|
||||
|
||||
/*
|
||||
function test(f) { f() }
|
||||
function assert_equals(a, b, m) { if (a == b) { console.log("`"+a+"`", "`"+b+"`", m) } }
|
||||
*/
|
||||
|
||||
values_with_unchanged_specified_value_serialization.forEach(function(value) {
|
||||
test(function() { test_specified_value_serialization(value, value) },
|
||||
"`" + value + "` is unchanged by specified value serialization");
|
||||
});
|
||||
|
||||
values_with_changed_specified_value_serialization.forEach(function(pair) {
|
||||
test(function() { test_specified_value_serialization(pair[0], pair[1]) },
|
||||
"`" + pair[0] + "` becomes `" + pair[1] + "` in specified value serialization");
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue