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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2695093007: [Typed CSSOM] Get computed values for custom properties
Patch Set: Fix unregistered props and registered but unset props Created 3 years, 10 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
« no previous file with comments | « third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('k') | third_party/WebKit/LayoutTests/typedcssom/computedstyle/resources/1x1-green.png » ('j') | no next file with comments »
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..dba332f1fb3bdcefc47fa609587b35369d746603
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html
@@ -0,0 +1,203 @@
+<!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>
+<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 t1 = async_test('Getting a length type registered property returns a CSSSimpleLength');
+function t1Callback(computedStyleMap) {
+ t1.step(function() {
+ assert_true(computedStyleMap.has('--my-length'));
+ var result = computedStyleMap.get('--my-length');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '100px');
+ });
+ t1.done();
+}
+
+var t2 = async_test('Getting a URL image type registered property returns a CSSURLImageValue');
+function t2Callback(computedStyleMap) {
+ t2.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 + '\")');
+ // TODO(rjwright): Why do these fail?
+ // assert_equals(result.intrinsicWidth, 1);
+ // assert_equals(result.intrinsicHeight, 1);
+ // assert_equals(result.intrinsicRatio, 1);
+ // assert_equals(result.state, "loaded");
+ });
+ t2.done();
+}
+
+var t3 = async_test('Getting a width with a length type var value returns a CSSSimpleLength');
+function t3Callback(computedStyleMap) {
+ t3.step(function() {
+ var result = computedStyleMap.get('width');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '100px');
+ });
+ t3.done();
+}
+
+var t4 = async_test('Getting a background-image with a URL image type var value returns a CSSURLImageValue');
+function t4Callback(computedStyleMap) {
+ t4.step(function() {
+ var result = computedStyleMap.get('background-image');
+ assert_true(result instanceof CSSURLImageValue);
+ assert_equals(result.cssText, 'url(\"' + imagePath + '\")');
+ assert_equals(result.intrinsicWidth, 1);
+ assert_equals(result.intrinsicHeight, 1);
+ assert_equals(result.intrinsicRatio, 1);
+ assert_equals(result.state, "loaded");
+ });
+ t4.done();
+}
+
+var t5 = async_test('Getting an inherited length type registered property returns a ' +
+ 'CSSSimpleLength');
+function t5Callback(childComputedStyleMap) {
+ t5.step(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');
+ });
+ t5.done();
+}
+
+var t6 = async_test('Getting a non-inherited length type registered property returns a ' +
+ 'CSSSimpleLength');
+function t6Callback(childComputedStyleMap) {
+ t6.step(function() {
+ assert_true(childComputedStyleMap.has('--my-length'));
+ result = childComputedStyleMap.get('--my-length');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '0px');
+ });
+ t6.done();
+}
+
+var t7 = async_test('Getting a height with a calc type containing var values returns a ' +
+ 'CSSCalcLength');
+function t7Callback(computedStyleMap) {
+ t7.step(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)');
+ });
+ t7.done();
+}
+
+var t8 = async_test('Getting the value of a registered property that isn\'t set on the element ' +
+ 'returns the initial value for the property');
+function t8Callback(computedStyleMap) {
+ t8.step(function() {
+ assert_true(computedStyleMap.has('--my-unused-property'));
+ result = computedStyleMap.get('--my-unused-property');
+ assert_true(result instanceof CSSSimpleLength);
+ assert_equals(result.cssText, '0%');
+ });
+ t8.done();
+}
+
+var t9 = async_test('Getting the value of a property that isn\'t registered returns null');
+function t9Callback(computedStyleMap) {
+ t9.step(function() {
+ assert_false(computedStyleMap.has('--my-non-property'));
+ assert_equals(computedStyleMap.get('--my-non-property'), null);
+ });
+ t9.done();
+}
+
+var t10 = async_test("getAll for a length type registered property returns a single value");
+function t10Callback(computedStyleMap) {
+ t10.step(function() {
+ var result = computedStyleMap.getAll('--my-length');
+ assert_equals(result.length, 1);
+ assert_equals(result[0].cssText, '100px');
+ });
+ t10.done();
+}
+
+document.onreadystatechange = function() {
+ if (document.readyState == 'complete') {
+ var computedStyleMap = getComputedStyleMap(testElement);
+ var childComputedStyleMap = getComputedStyleMap(childTestElement);
+ t1Callback(computedStyleMap);
+ t2Callback(computedStyleMap);
+ t3Callback(computedStyleMap);
+ t4Callback(computedStyleMap);
+ t5Callback(childComputedStyleMap);
+ t6Callback(childComputedStyleMap);
+ t7Callback(computedStyleMap);
+ t8Callback(computedStyleMap);
+ t9Callback(computedStyleMap);
+ t10Callback(computedStyleMap);
+ }
+};
+</script>
+</body>
+</html>
« no previous file with comments | « third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('k') | third_party/WebKit/LayoutTests/typedcssom/computedstyle/resources/1x1-green.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698