Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(81)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html

Issue 2791193004: [Typed CSSOM] New design for computed styles which includes custom properties (Closed)
Patch Set: tidy up Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('K') | « third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('k') | third_party/WebKit/LayoutTests/typedcssom/computedstyle/line-height.html » ('j') | third_party/WebKit/Source/core/css/cssom/ComputedStylePropertyMap.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html
diff --git a/third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html b/third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html
new file mode 100644
index 0000000000000000000000000000000000000000..c3f53c2b792233b700763315e43cc4c5f2634fcc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src='../../resources/testharness.js'></script>
+<script src='../../resources/testharnessreport.js'></script>
+</head>
+<body>
+<div id='testElement'>
+ <div id='childTestElement'></div>
+</div>
+<script>
+CSS.registerProperty(
+{
+ name: '--my-image',
+ syntax: '<image>',
+ inherits: false,
+ initialValue: 'url()'
+});
+CSS.registerProperty(
+{
+ name: '--my-length',
+ syntax: '<length>',
+ inherits: false,
+ initialValue: '0px'
+});
+CSS.registerProperty(
+{
+ name: '--my-inherited-length',
+ syntax: '<length>',
+ inherits: true,
+ initialValue: '0px'
+});
+CSS.registerProperty(
+{
+ name: '--my-percentage',
+ syntax: '<percentage>',
+ inherits: false,
+ initialValue: '0%'
+});
+CSS.registerProperty(
+{
+ name: '--my-unused-property',
+ syntax: '<percentage>',
+ inherits: false,
+ initialValue: '0%'
+});
+</script>
+<style>
+#testElement {
+ font-size: 10px;
+ --my-length: 10em;
+ --my-inherited-length: 200px;
+ --my-percentage: 10%;
+ background-image: var(--my-image);
+ width: var(--my-length);
+ height: calc(var(--my-length) + var(--my-percentage) + 15px);
+}
+</style>
meade_UTC10 2017/04/06 03:47:32 Can this be above the script element, and the two
+<script>
+// TODO(rjwright): Change this & put it in the CSS when relative URLs work with registered
+// properties.
+var locationPath = location.href.substring(0, location.href.lastIndexOf('/'));
+var imagePath = locationPath + '/resources/1x1-green.png';
+testElement.style = '--my-image: url(\"' + imagePath + '\");';
+
+var computedStyleMap = getComputedStyleMap(testElement);
+var childComputedStyleMap = getComputedStyleMap(childTestElement);
+
+test(function() {
+ assert_true(computedStyleMap.has('--my-length'));
+ var result = computedStyleMap.get('--my-length');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '100px');
+}, 'Getting a length type registered property returns a CSSSimpleLength');
+
+var t1 = async_test('Getting a URL image type registered property returns a CSSURLImageValue');
+function t1Callback() {
+ t1.step(function() {
+ assert_true(computedStyleMap.has('--my-image'));
+ var result = computedStyleMap.get('--my-image');
+ assert_true(result instanceof CSSURLImageValue);
+ assert_equals(result.cssText, 'url(\"' + imagePath + '\")');
+ // FIXME(rjwright): I thought this was fixed!
meade_UTC10 2017/04/06 03:47:32 Perhaps a more helpful comment? :p
+ assert_equals(result.state, 'loaded');
+ assert_equals(result.intrinsicWidth, 1);
+ assert_equals(result.intrinsicHeight, 1);
+ assert_equals(result.intrinsicRatio, 1);
+ });
+ t1.done();
+}
+
+test(function() {
+ var result = computedStyleMap.get('width');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '100px');
+}, 'Getting a width with a length type var value returns a CSSSimpleLength');
+
+var t2 = async_test('Getting a background-image with a URL image type var value returns a CSSURLImageValue');
+function t2Callback() {
meade_UTC10 2017/04/06 03:47:32 If you move the calculation of the image path into
+ t2.step(function() {
+ var result = computedStyleMap.get('background-image');
+ assert_true(result instanceof CSSURLImageValue);
+ assert_equals(result.cssText, 'url(\"' + imagePath + '\")');
+ assert_equals(result.state, 'loaded');
+ assert_equals(result.intrinsicWidth, 1);
+ assert_equals(result.intrinsicHeight, 1);
+ assert_equals(result.intrinsicRatio, 1);
+ });
+ t2.done();
+}
+
+test(function() {
+ assert_true(childComputedStyleMap.has('--my-inherited-length'));
+ var result = childComputedStyleMap.get('--my-inherited-length');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '200px');
+}, 'Getting an inherited length type registered property returns a CSSSimpleLength');
+
+test(function() {
+ assert_true(childComputedStyleMap.has('--my-length'));
+ result = childComputedStyleMap.get('--my-length');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '0px');
+}, 'Getting a non-inherited length type registered property returns a CSSSimpleLength');
+
+test(function() {
+ var result = computedStyleMap.get('height');
+ assert_true(result instanceof CSSCalcLength);
+ assert_equals(result.px, 115);
+ assert_equals(result.percent, 10);
+ assert_equals(result.cssText, 'calc(10% + 115px)');
+}, 'Getting a height with a calc type containing var values returns a CSSCalcLength');
+
+test(function() {
+ assert_true(computedStyleMap.has('--my-unused-property'));
+ result = computedStyleMap.get('--my-unused-property');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '0%');
+}, 'Getting the value of a registered property that isn\'t set on the element ' +
+ 'returns the initial value for the property');
+
+test(function() {
+ assert_false(computedStyleMap.has('--my-non-property'));
+ assert_equals(computedStyleMap.get('--my-non-property'), null);
+}, 'Getting the value of a property that isn\'t registered returns null');
+
+test(function() {
+ var result = computedStyleMap.getAll('--my-length');
+ assert_equals(result.length, 1);
+ assert_true(result[0] instanceof CSSSimpleLength);
+ assert_equals(result[0].cssText, '100px');
+}, 'getAll for a length type registered property returns a single value');
+
+document.onreadystatechange = function() {
+ if(document.readyState == 'complete') {
+ t1Callback(computedStyleMap);
+ t2Callback(computedStyleMap);
+ }
+};
+
+</script>
+</body>
+</html>
« third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('K') | « third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('k') | third_party/WebKit/LayoutTests/typedcssom/computedstyle/line-height.html » ('j') | third_party/WebKit/Source/core/css/cssom/ComputedStylePropertyMap.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698