-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Following w3c/csswg-drafts#2305, the canonical serialization for box-shadow was changed from inset? && <length>{2,4} && <color>? to <color>? && <length>{2,4} && inset?. Convert an existing box-shadow text into a testharness.js test in order to test serialization as well.
- Loading branch information
Showing
3 changed files
with
118 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <!DOCTYPE html> | ||
| <title>CSS Test: Box Shadow Syntax: Reordering Components</title> | ||
| <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> | ||
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"/> | ||
| <meta name="assert" content="Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent." /> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="resources/parsing-testcommon.js"></script> | ||
| <script> | ||
| // color only | ||
| test_valid_value("box-shadow", "4px 4px green", "green 4px 4px"); | ||
| test_valid_value("box-shadow", "green -4px 4px", "green -4px 4px"); | ||
| test_valid_value("box-shadow", "-4px 4px 0 green", "green -4px 4px 0px"); | ||
| test_valid_value("box-shadow", "green -4px 4px 0", "green -4px 4px 0px"); | ||
| test_valid_value("box-shadow", "-4px 4px 0 0 green", "green -4px 4px 0px 0px"); | ||
| test_valid_value("box-shadow", "green -4px 4px 0 0", "green -4px 4px 0px 0px"); | ||
|
|
||
| // inset only | ||
| test_valid_value("box-shadow", "4px -4px inset", "4px -4px inset"); | ||
| test_valid_value("box-shadow", "inset 4px -4px", "4px -4px inset"); | ||
| test_valid_value("box-shadow", "4px -4px 0 inset", "4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "inset 4px -4px 0", "4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "4px -4px 0 0 inset", "4px -4px 0px 0px inset"); | ||
| test_valid_value("box-shadow", "inset 4px -4px 0 0", "4px -4px 0px 0px inset"); | ||
|
|
||
| // color and inset | ||
| test_valid_value("box-shadow", "4px -4px green inset", "green 4px -4px inset"); | ||
| test_valid_value("box-shadow", "4px -4px inset green", "green 4px -4px inset"); | ||
| test_valid_value("box-shadow", "inset green 4px -4px", "green 4px -4px inset"); | ||
| test_valid_value("box-shadow", "green inset 4px -4px", "green 4px -4px inset"); | ||
| test_valid_value("box-shadow", "green 4px -4px inset", "green 4px -4px inset"); | ||
| test_valid_value("box-shadow", "inset 4px -4px green", "green 4px -4px inset"); | ||
| test_valid_value("box-shadow", "inset green 4px -4px 0", "green 4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "green inset 4px -4px 0", "green 4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "4px -4px 0 green inset", "green 4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "4px -4px 0 inset green", "green 4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "green 4px -4px 0 inset", "green 4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "inset 4px -4px 0 green", "green 4px -4px 0px inset"); | ||
| test_valid_value("box-shadow", "inset green 4px -4px 0 0", "green 4px -4px 0px 0px inset"); | ||
| test_valid_value("box-shadow", "green inset 4px -4px 0 0", "green 4px -4px 0px 0px inset"); | ||
| test_valid_value("box-shadow", "4px -4px 0 0 green inset", "green 4px -4px 0px 0px inset"); | ||
| test_valid_value("box-shadow", "4px -4px 0 0 inset green", "green 4px -4px 0px 0px inset"); | ||
| test_valid_value("box-shadow", "green 4px -4px 0 0 inset", "green 4px -4px 0px 0px inset"); | ||
| test_valid_value("box-shadow", "inset 4px -4px 0 0 green", "green 4px -4px 0px 0px inset"); | ||
|
|
||
| test_invalid_value("box-shadow", "red"); | ||
| test_invalid_value("box-shadow", "4px red"); | ||
| test_invalid_value("box-shadow", "red 4px"); | ||
| test_invalid_value("box-shadow", "-4px red 4px"); | ||
| test_invalid_value("box-shadow", "red -4px 4px red"); | ||
| test_invalid_value("box-shadow", "-4px 4px red 0"); | ||
| test_invalid_value("box-shadow", "-4px 4px 0 red 0"); | ||
| test_invalid_value("box-shadow", "inset"); | ||
| test_invalid_value("box-shadow", "inset 4px"); | ||
| test_invalid_value("box-shadow", "4px inset"); | ||
| test_invalid_value("box-shadow", "4px inset -4px"); | ||
| test_invalid_value("box-shadow", "inset 4px -4px inset"); | ||
| test_invalid_value("box-shadow", "4px -4px inset 0"); | ||
| test_invalid_value("box-shadow", "4px -4px 0 inset 0"); | ||
| test_invalid_value("box-shadow", "red inset"); | ||
| test_invalid_value("box-shadow", "inset red"); | ||
| test_invalid_value("box-shadow", "4px red inset"); | ||
| test_invalid_value("box-shadow", "red inset 4px"); | ||
| test_invalid_value("box-shadow", "4px inset red"); | ||
| test_invalid_value("box-shadow", "inset red 4px"); | ||
| test_invalid_value("box-shadow", "4px red inset -4px"); | ||
| test_invalid_value("box-shadow", "4px inset red -4px"); | ||
| test_invalid_value("box-shadow", "inset 4px red -4px"); | ||
| test_invalid_value("box-shadow", "4px red 4px inset"); | ||
| test_invalid_value("box-shadow", "red 4px inset -4px"); | ||
| test_invalid_value("box-shadow", "4px inset -4px red"); | ||
| test_invalid_value("box-shadow", "4px -4px red inset 0"); | ||
| test_invalid_value("box-shadow", "4px -4px inset red 0"); | ||
| test_invalid_value("box-shadow", "inset 4px -4px red 0"); | ||
| test_invalid_value("box-shadow", "4px -4px red 0 inset"); | ||
| test_invalid_value("box-shadow", "red 4px -4px inset 0"); | ||
| test_invalid_value("box-shadow", "4px -4px inset 0 red"); | ||
| </script> | ||
| </html> |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| 'use strict'; | ||
|
|
||
| // serializedValue can be the expected serialization of value, | ||
| // or an array of permitted serializations, | ||
| // or omitted if value should serialize as value. | ||
| function test_valid_value(property, value, serializedValue) { | ||
| if (arguments.length < 3) | ||
| serializedValue = value; | ||
|
|
||
| var stringifiedValue = JSON.stringify(value); | ||
|
|
||
| test(function(){ | ||
| var div = document.createElement('div'); | ||
| div.style[property] = value; | ||
| assert_not_equals(div.style[property], "", "property should be set"); | ||
|
|
||
| var div = document.createElement('div'); | ||
| div.style[property] = value; | ||
| var readValue = div.style[property]; | ||
| if (serializedValue instanceof Array) | ||
| assert_true(serializedValue.includes(readValue), "serialization should be sound"); | ||
| else | ||
| assert_equals(readValue, serializedValue, "serialization should be canonical"); | ||
|
|
||
| div.style[property] = readValue; | ||
| assert_equals(div.style[property], readValue, "serialization should round-trip"); | ||
|
|
||
| }, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value"); | ||
| } | ||
|
|
||
| function test_invalid_value(property, value) { | ||
| var stringifiedValue = JSON.stringify(value); | ||
|
|
||
| test(function(){ | ||
| var div = document.createElement('div'); | ||
| div.style[property] = value; | ||
| assert_equals(div.style[property], ""); | ||
| }, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value"); | ||
| } |