forked from mirrors/gecko-dev
2ca11ca6a0
Automatic update from web-platform-testsCSS translate: serialize % as percent for computed values The CSS translate property no longer resolves percentages in getComputedStyle results. CSS WG Resolution: RESOLVED: % values of translate are serialized as percent for computed values. Add note making the behavior explicit. https://github.com/w3c/csswg-drafts/issues/2124 BUG=811027 Change-Id: I6f9b60c285d1eccc2e13ff0e806794df5cce5151 Reviewed-on: https://chromium-review.googlesource.com/912052 Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Reviewed-by: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/master@{#536010} wpt-commits: 9b23a0cbf6476d3f1d0b25b9bda8e5249725b00b wpt-pr: 9469 wpt-commits: 9b23a0cbf6476d3f1d0b25b9bda8e5249725b00b wpt-pr: 9469
49 lines
1.4 KiB
HTML
49 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Transform Module Level 2: translate getComputedStyle</title>
|
|
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-translate">
|
|
<meta name="assert" content="translate computed style does not resolve percentages.">
|
|
<style type="text/css">
|
|
#container {
|
|
transform-style: preserve-3d;;
|
|
}
|
|
#first {
|
|
font-size: 10px;
|
|
translate: 10px 2em;
|
|
}
|
|
#second {
|
|
translate: 30% 40% 50px;
|
|
}
|
|
#third {
|
|
font-size: 10px;
|
|
width: 98px;
|
|
height: 76px;
|
|
translate: calc(7em + 80%) -9em;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="first"></div>
|
|
<div id="second"></div>
|
|
<div id="third"></div>
|
|
</div>
|
|
<script>
|
|
'use strict';
|
|
function getTranslateFor(id) {
|
|
return window.getComputedStyle(document.getElementById(id)).getPropertyValue("translate");
|
|
}
|
|
|
|
test(function() {
|
|
assert_equals(getTranslateFor("first"), "10px 20px");
|
|
assert_equals(getTranslateFor("second"), "30% 40% 50px");
|
|
assert_equals(getTranslateFor("third"), "calc(70px + 80%) -90px");
|
|
}, "computed style for translate");
|
|
</script>
|
|
</body>
|
|
</html>
|