[css-typed-om] Rejig CSSResourceValue hierarchy.

We implement the new CSSImageValue, which is an opaque object with no constructor. We also had to change the testsuite.js a bit to test it. Bug: 545318 Change-Id: I0ae719c5380e01ff9423e0ff0684afe547de1bb0
web-platform-tests · Feb 23, 2018 · 20a6d28 · 20a6d28
1 parent 99ea9dc
commit 20a6d28
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 231 deletions.
diff --git a/css/css-typed-om/resources/testhelper.js b/css/css-typed-om/resources/testhelper.js
@@ -66,12 +66,6 @@ function assert_style_value_equals(a, b) {
     case 'CSSMatrixComponent':
       assert_matrix_approx_equals(a.matrix, b.matrix, 1e-6);
       break;
-    case 'CSSURLImageValue':
-      assert_equals(a.instrinsicWidth, b.instrinsicWidth);
-      assert_equals(a.instrinsicHeight, b.instrinsicHeight);
-      assert_equals(a.instrinsicRatio, b.instrinsicRatio);
-      assert_equals(a.url, b.url);
-      break;
     default:
       assert_equals(a, b);
       break;

diff --git a/css/css-typed-om/stylevalue-normalization/normalize-image.html b/css/css-typed-om/stylevalue-normalization/normalize-image.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSImageValue normalization tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#resourcevalue-normalization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<body>
+<script>
+'use strict';
+
+const gTestUrl = '/media/1x1-green.png';
+const gBadTestUrl = document.location.href;
+
+test(t => {
+  const result = CSSStyleValue.parse('background-image', 'url("' + gTestUrl + '")');
+  assert_class_string(result, 'CSSImageValue');
+}, 'Normalizing a valid <url> returns a CSSImageValue');
+
+test(t => {
+  const result = CSSStyleValue.parse('background-image', 'url("' + gBadTestUrl + '")');
+  assert_class_string(result, 'CSSImageValue');
+}, 'Normalizing a bad <url> returns a CSSImageValue');
+
+test(t => {
+  const result = CSSStyleValue.parse('background-image', 'linear-gradient(red, orange)');
+  assert_equals(result.constructor.name, 'CSSImageValue');
+}, 'Normalizing a <gradient> returns a CSSImageValue');
+
+</script>
diff --git a/css/css-typed-om/stylevalue-normalization/normalize-resource.tentative.html b/css/css-typed-om/stylevalue-normalization/normalize-resource.tentative.html
diff --git a/css/css-typed-om/stylevalue-serialization/cssImageValue.html b/css/css-typed-om/stylevalue-serialization/cssImageValue.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSURLImageValue serialization tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#urlimagevalue-serialization">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<body>
+<div id="log"></div>
+<div id="testUrl" style="background-image: url('/media/1x1-green.png')"></div>
+<script>
+'use strict';
+
+test(() => {
+  const result = document.getElementById('testUrl').attributeStyleMap.get('background-image');
+  assert_equals(result.toString(), 'url("/media/1x1-green.png")');
+}, 'CSSUrlImageValue serializes correctly');
+
+</script>
diff --git a/css/css-typed-om/stylevalue-serialization/cssUrlImageValue.tentative.html b/css/css-typed-om/stylevalue-serialization/cssUrlImageValue.tentative.html
diff --git a/css/css-typed-om/stylevalue-subclasses/cssUrlImageValue-interface.html b/css/css-typed-om/stylevalue-subclasses/cssUrlImageValue-interface.html
diff --git a/css/css-typed-om/stylevalue-subclasses/cssUrlImageValue-invalid.html b/css/css-typed-om/stylevalue-subclasses/cssUrlImageValue-invalid.html
diff --git a/css/css-typed-om/stylevalue-subclasses/cssUrlImageValue.html b/css/css-typed-om/stylevalue-subclasses/cssUrlImageValue.html
diff --git a/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js b/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
@@ -145,22 +145,6 @@ const gTestSyntaxExamples = {
       }
     ],
   },
-  '<image>': {
-    description: 'an image',
-    examples: [
-      {
-        description: "a PNG image",
-        input: new CSSURLImageValue('/media/1x1.png'),
-        defaultComputed: (_, result) => {
-          // URLs compute to absolute URLs
-          assert_true(result instanceof CSSURLImageValue,
-            'Computed value should be a CSSURLImageValue');
-          assert_true(result.url.endsWith('/media/1x1.png'),
-            'Computed value should be an absolute URL');
-        }
-      }
-    ],
-  },
   '<transform>': {
     description: 'a transform',
     examples: [
@@ -218,6 +202,24 @@ function testPropertyValid(propertyName, examples, specified, computed, descript
   }, `Can set '${propertyName}' to ${description}`);
 }
 
+// We have to special case CSSImageValue as they cannot be created with a
+// constructor and are completely opaque.
+function testIsImageValidForProperty(propertyName) {
+  test(t => {
+    let element1 = createDivWithStyle(t, `${propertyName}: url("/media/1x1-green.png")`);
+    let element2 = createDivWithStyle(t);
+
+    const result = element1.attributeStyleMap.get(propertyName);
+    assert_not_equals(result, null, 'Image value must not be null');
+    assert_class_string(result, 'CSSImageValue',
+      'Image value must be a CSSImageValue');
+
+    element2.attributeStyleMap.set(propertyName, result);
+    assert_equals(element2.style[propertyName], element1.style[propertyName],
+      'Image value can be set on different element');
+  }, `Can set '${propertyName}' to an image`);
+}
+
 // Test that styleMap.set throws for invalid values
 function testPropertyInvalid(propertyName, examples, description) {
   test(t => {
@@ -289,6 +291,12 @@ function runPropertyTests(propertyName, testCases) {
     'CSS-wide keywords');
 
   for (const testCase of testCases) {
+    // <image> is a special case
+    if (testCase.syntax === '<image>') {
+      testIsImageValidForProperty(propertyName);
+      continue;
+    }
+
     // Retrieve test examples for this test case's syntax. If the syntax
     // looks like a keyword, then create an example on the fly.
     const syntaxExamples = testCase.syntax.match(/^[a-z\-]+$/) ?

diff --git a/interfaces/css-typed-om.idl b/interfaces/css-typed-om.idl
@@ -308,23 +308,6 @@ interface CSSPositionValue : CSSStyleValue {
     attribute CSSNumericValue y;
 };
 
-enum CSSResourceState {"unloaded", "loading", "loaded", "error"};
-
-[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
-interface CSSResourceValue : CSSStyleValue {
-    readonly attribute CSSResourceState state;
-};
-
-
 [Exposed=(Window, Worker, PaintWorklet, LayoutWorklet)]
-interface CSSImageValue : CSSResourceValue {
-    readonly attribute double? intrinsicWidth;
-    readonly attribute double? intrinsicHeight;
-    readonly attribute double? intrinsicRatio;
-};
-
-[Exposed=(Window, Worker, PaintWorklet, LayoutWorklet),
- Constructor(USVString url)]
-interface CSSURLImageValue : CSSImageValue {
-    readonly attribute USVString url;
+interface CSSImageValue : CSSStyleValue {
 };