Skip to content

Commit

Permalink
Add css image-set gradient images parsing tests
Browse files Browse the repository at this point in the history 
Current parsing tests cover only <linear-gradient()> and
<radial-gradient()>.

Based on the image-set spec, all gradient image values are supported,
and they should also be tested.

This change adds image-set gradient images parsing tests for
  * <repeating-linear-gradient()>
  * <repeating-radial-gradient()>
  * <conic-gradient()>
  * <repeating-conic-gradient()>

Spec definitions:
[1]
"The syntax for image-set() is:
<image-set()> = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ]
                     [ <resolution> || type(<string>) ]"

[2]
"<image> = <url> | <image()> | <image-set()> | <cross-fade()> |
<element()> | <gradient>"

[3]
"<gradient> = [
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()> |
  <conic-gradient()>  | <repeating-conic-gradient()> ]"

[1] https://w3c.github.io/csswg-drafts/css-images-4/#image-set-notation
[2] https://w3c.github.io/csswg-drafts/css-images-4/#image-values
[3] https://w3c.github.io/csswg-drafts/css-images-4/#typedef-gradient

R=pdr

Bug: 1400902
Change-Id: Ie1460a5c93c1184ae9d5537e0e24ee2b47d68135
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4247618
Commit-Queue: Traian Captan <[email protected]>
Reviewed-by: Philip Rogers <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1104785}
  • Loading branch information
@tcaptan-cr @chromium-wpt-export-bot
tcaptan-cr authored and chromium-wpt-export-bot committed Feb 14, 2023
1 parent 191f594 commit 467366a
Showing 1 changed file with 46 additions and 5 deletions.
51 changes: 46 additions & 5 deletions css/css-images/image-set/image-set-parsing.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<title>Image set parsing</title>
<link rel="author" title="Noam Rosenthal" href="mailto:[email protected]">
<link rel="author" title="Traian Captan" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-images-4/#image-set-notation">
<meta name="assert" content="General image-set parsing follows CSS Images 4 rules.">
<script src="/resources/testharness.js"></script>
Expand Down Expand Up @@ -95,18 +96,59 @@
);
}

function test_gradient_images_parsing() {
test_valid_value_variants(
'background-image',
"image-set(linear-gradient(black, white) 1x)"
);
test_valid_value_variants(
'background-image',
"image-set(repeating-linear-gradient(red, blue 25%) 1x)"
);
test_valid_value_variants(
'background-image',
"image-set(radial-gradient(black, white) 1x)"
);
test_valid_value_variants(
'background-image',
"image-set(repeating-radial-gradient(red, blue 25%) 1x)"
);
test_valid_value_variants(
'background-image',
"image-set(conic-gradient(black, white) 1x)"
);
test_valid_value_variants(
'background-image',
"image-set(repeating-conic-gradient(red, blue 25%) 1x)"
);
test_valid_value_variants(
'content',
'image-set(linear-gradient(black, white) 1x, url("example.png") 4x)'
);
test_valid_value_variants(
'content',
'image-set(url("example.png") 192dpi, linear-gradient(black, white) 1x)'
);

test_invalid_value_variants(
'cursor',
"image-set(linear-gradient(black, white) 1x)"
);
test_invalid_value_variants(
'background-image',
"image-set(linear-gradient(red) 1x)"
);
}

function test_image_set_parsing() {
test_valid_value_variants('background-image', "image-set(url(example.png) 1x)", 'image-set(url("example.png") 1x)');
test_valid_value_variants('background-image', "image-set('example.jpg' 1x)", 'image-set(url("example.jpg") 1x)');
test_valid_value_variants('background-image', "image-set(url(example.png) 1x, 'example.png' 2x)", 'image-set(url("example.png") 1x, url("example.png") 2x)');
test_valid_value_variants('background-image', "image-set(url(example.png) 1dpcm, 'example.png' 2x)", 'image-set(url("example.png") 1dpcm, url("example.png") 2x)');
test_valid_value_variants('background-image', "image-set('example.jpeg' 222dpi, url(example.png) 3.5x)", 'image-set(url("example.jpeg") 222dpi, url("example.png") 3.5x)');
test_valid_value_variants('background-image', "image-set(linear-gradient(black, white) 1x)");
test_valid_value_variants('background-image', 'image-set(url("example.png") 1x type("image/png"))');
test_valid_value_variants('background-image', "image-set(url(example.png) type('image/png'))", 'image-set(url("example.png") 1x type("image/png"))');
test_valid_value_variants('background-image', "image-set(url(example.png) type('image/png') 1x)", 'image-set(url("example.png") 1x type("image/png"))');
test_valid_value_variants('content', "image-set(linear-gradient(black, white) 1x, 'example.png' 4x)", 'image-set(linear-gradient(black, white) 1x, url("example.png") 4x)');
test_valid_value_variants('content', 'image-set(url("example.png") 192dpi, linear-gradient(black, white) 1x)');

test_invalid_value_variants('background-image', "image-set(none, url(example.png) 1x)");
test_invalid_value_variants('background-image', "image-set()");
Expand All @@ -117,14 +159,13 @@
test_invalid_value_variants('background-image', "image-set(url(example.png) type('image/png') type('image/png'))");
test_invalid_value_variants('background-image', "image-set(url(example.png) 1xtype('image/png'))");
test_invalid_value_variants('background-image', "image-set(type('image/png') url(example.png) 1x)");
test_invalid_value_variants('cursor', "image-set(linear-gradient(black, white) 1x)");

test_invalid_value_variants('background-image', "image-set(url(example.png) 1x url(example.jpeg))");
test_invalid_value_variants('background-image', "image-set(url(example.png) 1x 2x)");
test_invalid_value_variants('background-image', "image-set(image-set(url(example.png)) 2x)");

test_default_resolution_parsing();
test_resolution_units_parsing();
test_gradient_images_parsing();
}

test_image_set_parsing();
Expand Down

0 comments on commit 467366a

Please sign in to comment.