[css-typed-om] Update CSSURLImageValue tests to follow WPT standards.

This patch:
- Moves CSSURLImageValue tests to a subfolder containing all the other
  CSSStylevalue subclasses.
- Adds the appropriate meta and link tags.
- Clean up the test code a bit.
- Remove redundant unit tests

Note: Following the WPT guidelines, our test structure closely follows
the spec structure. Therefore, serialization and normalization of
URL image values will be done in a separate file as it is a separate
section in the spec.

Spec: https://drafts.css-houdini.org/css-typed-om-1/#imagevalue-objects
WPT Guidelines: http://web-platform-tests.org/writing-tests/general-guidelines.html

There's one failing test where we are not throwing an error when the
URL is invalid. Also, we should be resetting attributes back to null
if there was an error loading the resource.

Bug: 774887
Change-Id: Ieb1df73e538d6343fc8e8d05569981349aa90118
Reviewed-on: https://chromium-review.googlesource.com/759704Reviewed-by: meade_UTC10 <meade@chromium.org>
Commit-Queue: Darren Shen <shend@chromium.org>
Cr-Commit-Position: refs/heads/master@{#515413}

third_party/WebKit/LayoutTests/typedcssom/cssURLImageValue.html

@@ -2,9 +2,6 @@
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 
-<div id="testImage1"></div>
-<div id="testImage2"></div>
-<div id="testImage3"></div>
 <div id="testImage4"></div>
 
 <script>
@@ -17,14 +14,6 @@ var supportedCSSProperties = [
   "shape-outside"
 ];
 
-// Temporary helper function since CSSURLImageValue doesn't support relative
-// URLs yet. This can be removed once it does.
-function url() {
-  var c = document.location.href.split('/');
-  c[c.length - 1] = 'resources/1x1-green.png';
-  return c.join('/');
-}
-
 function base64Url() {
   return "data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=";
 }
@@ -39,83 +28,6 @@ function assertLoadedDotImageValue(
   assert_equals(image.intrinsicRatio, expectedRatio);
 }
 
-test(function() {
-  var image = new CSSURLImageValue(url());
-  assert_equals(image.state, "unloaded");
-}, "State is unloaded after construction.");
-
-{
-  var test1 = async_test("URL image changes state when loaded");
-  var url1 = url();
-
-  var imageValue1 = new CSSURLImageValue(url1);
-
-  // Set it on an element so it can be loaded.
-  testImage1.styleMap.set(supportedCSSProperties[0], imageValue1);
-
-  // add an Image object to know if the image has been loaded
-  var image1 = new Image();
-  image1.src = url1;
-
-  assert_equals(imageValue1.state, "unloaded");
-
-  image1.addEventListener("load", function() {
-    assert_equals(imageValue1.url, url1);
-    assert_equals(imageValue1.state, "loaded");
-    assert_equals(imageValue1.intrinsicWidth, 1);
-    assert_equals(imageValue1.intrinsicHeight, 1);
-    assert_equals(imageValue1.intrinsicRatio, 1);
-    test1.done();
-  });
-}
-
-{
-  var test2 = async_test("Base-64 image changes state when loaded");
-  var url2 = base64Url();
-
-  var imageValue2 = new CSSURLImageValue(url2);
-  // Set it on an element so it can be loaded.
-  testImage2.styleMap.set(supportedCSSProperties[0], imageValue2);
-
-  // add an Image object to know if the image has been loaded
-  var image2 = new Image();
-  image2.src = url2;
-
-  assert_equals(imageValue2.state, "unloaded");
-
-  image2.addEventListener("load", function() {
-    assert_equals(imageValue2.url, url2);
-    assert_equals(imageValue2.state, "loaded");
-    assert_equals(imageValue2.intrinsicWidth, 1);
-    assert_equals(imageValue2.intrinsicHeight, 1);
-    assert_equals(imageValue2.intrinsicRatio, 1);
-    test2.done();
-  });
-}
-
-{
-  var test3 = async_test("Invalid Image will have error state after loading");
-  var url3 = document.location.href;
-  var imageValue3 = new CSSURLImageValue(url3);
-
-  testImage3.styleMap.set("background-image", imageValue3);
-
-  // add an Image object to know image's status
-  var image3 = new Image();
-  image3.src = url3;
-
-  assert_equals(imageValue3.state, "unloaded");
-
-  image3.onerror = function() {
-    assert_equals(imageValue3.url, url3);
-    assert_equals(imageValue3.state, "error");
-    assert_equals(imageValue3.intrinsicWidth, 0);
-    assert_equals(imageValue3.intrinsicHeight, 0);
-    assert_equals(imageValue3.intrinsicRatio, null);
-    test3.done();
-  };
-}
-
 for (let property of supportedCSSProperties) {
   test(function() {
     testImage4.style[property] = 'url(' + base64Url() + ')';

third_party/WebKit/LayoutTests/typedcssom/stylevalue-subclasses/cssUrlImageValue-expected.txt

+This is a testharness.js-based test.
+FAIL Constructing a CSSURLImageValue with an invalid URL throws a TypeError assert_throws: function "() => new CSSURLImageValue('not url')" did not throw
+PASS Constructing a CSSURLImageValue with a valid URL puts it in an unloaded state
+PASS CSSURLImageValue.url is readonly
+PASS Loading a CSSURLImageValue from a URL sets its state to loaded
+PASS Loading a CSSURLImageValue from a base64 URL sets its state to loaded
+FAIL Loading a CSSURLImageValue from a URL to an invalid image sets its state to error assert_equals: expected (object) null but got (number) 0
+Harness: the test ran to completion.
+

third_party/WebKit/LayoutTests/typedcssom/stylevalue-subclasses/cssUrlImageValue.html

+<!doctype html>
+<meta charset="utf-8">
+<title>CSSURLImageValue tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#imagevalue-objects">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<div id="testImage3"></div>
+<script>
+'use strict';
+
+function loadImageResource(imageValue) {
+  // Set a CSSURLImageValue on an element so it can be loaded.
+  let target = newDivWithStyle('');
+  document.body.append(target);
+  target.styleMap.set('background-image', imageValue);
+
+  // add a new Image element to know if the image resource has been loaded
+  let image = new Image();
+  image.src = imageValue.url;
+  return image;
+}
+
+// TODO(crbug.com/783031): Temporary helper function since CSSURLImageValue doesn't
+// support relative URLs yet. This can be removed once it does.
+function url() {
+  var c = document.location.href.split('/');
+  c[c.length - 1] = '../resources/1x1-green.png';
+  return c.join('/');
+}
+
+const gTestUrl = url();
+const gBase64TestUrl = 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=';
+const gBadTestUrl = document.location.href;
+
+test(() => {
+  assert_throws(new TypeError(), () => new CSSURLImageValue('not url'));
+}, 'Constructing a CSSURLImageValue with an invalid URL throws a TypeError');
+
+test(() => {
+  const result = new CSSURLImageValue(gTestUrl);
+  assert_equals(result.url, gTestUrl);
+  assert_equals(result.intrinsicWidth, null);
+  assert_equals(result.intrinsicHeight, null);
+  assert_equals(result.intrinsicRatio, null);
+  assert_equals(result.state, 'unloaded');
+}, 'Constructing a CSSURLImageValue with a valid URL puts it in an unloaded state');
+
+test(() => {
+  let result = new CSSURLImageValue(gTestUrl);
+  assert_throws(new TypeError(), () => result.url = gBase64TestUrl);
+}, 'CSSURLImageValue.url is readonly');
+
+async_test(t => {
+  const result = new CSSURLImageValue(gTestUrl);
+  let image = loadImageResource(result);
+
+  image.addEventListener('load', t.step_func_done(() => {
+    assert_equals(result.url, gTestUrl);
+    assert_equals(result.state, 'loaded');
+    assert_equals(result.intrinsicWidth, 1);
+    assert_equals(result.intrinsicHeight, 1);
+    assert_equals(result.intrinsicRatio, 1);
+  }));
+}, 'Loading a CSSURLImageValue from a URL sets its state to loaded');
+
+async_test(t => {
+  const result = new CSSURLImageValue(gBase64TestUrl);
+  let image = loadImageResource(result);
+
+  image.addEventListener('load', t.step_func_done(() => {
+    assert_equals(result.url, gBase64TestUrl);
+    assert_equals(result.state, 'loaded');
+    assert_equals(result.intrinsicWidth, 1);
+    assert_equals(result.intrinsicHeight, 1);
+    assert_equals(result.intrinsicRatio, 1);
+  }));
+}, 'Loading a CSSURLImageValue from a base64 URL sets its state to loaded');
+
+async_test(t => {
+  const result = new CSSURLImageValue(gBadTestUrl);
+  let image = loadImageResource(result);
+
+  image.addEventListener('error', t.step_func_done(() => {
+      assert_equals(result.url, gBadTestUrl);
+      assert_equals(result.state, 'error');
+      assert_equals(result.intrinsicWidth, null);
+      assert_equals(result.intrinsicHeight, null);
+      assert_equals(result.intrinsicRatio, null);
+  }));
+}, 'Loading a CSSURLImageValue from a URL to an invalid image sets its state to error');
+
+</script>

third_party/WebKit/Source/core/BUILD.gn

@@ -1387,7 +1387,6 @@ jumbo_source_set("unit_tests") {
     "css/StyleSheetContentsTest.cpp",
     "css/cssom/CSSResourceValueTest.cpp",
     "css/cssom/CSSStyleImageValueTest.cpp",
-    "css/cssom/CSSURLImageValueTest.cpp",
     "css/cssom/CSSUnitValueTest.cpp",
     "css/cssom/CSSUnparsedValueTest.cpp",
     "css/cssom/CSSVariableReferenceValueTest.cpp",

third_party/WebKit/Source/core/css/cssom/CSSStyleValue.cpp

@@ -32,6 +32,8 @@ CSSStyleValueVector ParseCSSStyleValue(const String& property_name,
     return CSSStyleValueVector();
   }
 
+  // TODO(crbug.com/783031): This should probably use an existing parser context
+  // (e.g. from execution context) to parse relative URLs correctly.
   const CSSValue* css_value =
       CSSParser::ParseSingleValue(property_id, value, StrictCSSParserContext());
   if (!css_value) {

third_party/WebKit/Source/core/css/cssom/CSSURLImageValue.h

@@ -15,6 +15,8 @@ class CORE_EXPORT CSSURLImageValue final : public CSSStyleImageValue {
 
  public:
   static CSSURLImageValue* Create(const AtomicString& url) {
+    // TODO(crbug.com/783031): This should probably obtain base url information
+    // (e.g. from execution context) to parse relative URLs correctly.
     return new CSSURLImageValue(CSSImageValue::Create(url));
   }
   static CSSURLImageValue* Create(const CSSImageValue* image_value) {

third_party/WebKit/Source/core/css/cssom/CSSURLImageValueTest.cpp

-// Copyright 2016 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-#include "core/css/cssom/CSSURLImageValue.h"
-
-#include "testing/gtest/include/gtest/gtest.h"
-
-namespace blink {
-
-namespace {
-
-void CheckNullURLImageValue(CSSURLImageValue* url_image_value) {
-  EXPECT_EQ(url_image_value->state(), "unloaded");
-  bool is_null;
-  EXPECT_EQ(url_image_value->intrinsicWidth(is_null), 0);
-  EXPECT_EQ(url_image_value->intrinsicHeight(is_null), 0);
-  EXPECT_EQ(url_image_value->intrinsicRatio(is_null), 0);
-  EXPECT_TRUE(is_null);
-}
-
-}  // namespace
-
-TEST(CSSURLImageValueTest, CreateURLImageValueFromURL) {
-  CheckNullURLImageValue(CSSURLImageValue::Create("http://localhost"));
-}
-
-TEST(CSSURLImageValueTest, CreateURLImageValueFromImageValue) {
-  CheckNullURLImageValue(
-      CSSURLImageValue::Create(CSSImageValue::Create("http://localhost")));
-}
-
-}  // namespace blink