Commit de217eb5 authored by ap@apple.com's avatar ap@apple.com

Reviewed by Dave Hyatt.

        https://bugs.webkit.org/show_bug.cgi?id=49483
        Remove CSS Variable support



git-svn-id: http://svn.webkit.org/repository/webkit/trunk@72116 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 06260707
This diff is collapsed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
one {
background-color: red;
-webkit-var(two);
};
two {
-webkit-var(one);
background-color:green
}
}
div {
background-color: red;
width:100px;
height:100px;
-webkit-var(one);
}
</style>
</head>
<body>
You should see a green square below. There should be no red on the page.
<div></div>
CONSOLE MESSAGE: line 27: TypeError: 'undefined' is not an object (evaluating 'declaration.getVariableValue')
FAILED
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foreground: #008000;
background: #FFF;
}
body {
color: -webkit-var(foreground);
background-color: red;
background-color: -webkit-var(background);
}
</style>
</head>
<body id="body">
<div id="div">FAILED</div>
<script type="text/javascript">
if (window.layoutTestController)
layoutTestController.dumpAsText();
var elem = document.getElementById("body");
var style = document.defaultView.getComputedStyle(elem, null);
var color = style.getPropertyValue("color");
var bgcolor = style.getPropertyValue("background-color");
var declaration = document.styleSheets[0].rules[0].variables;
var foregroundValue = declaration.getVariableValue("foreground");
var backgroundValue = declaration.getVariableValue("background");
if (color == "rgb(0, 128, 0)" && bgcolor == "rgb(255, 255, 255)"
&& foregroundValue == color && backgroundValue == bgcolor) {
var elem = document.getElementById("div");
elem.innerHTML = "PASSED";
}
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foreground: green;
background: rgb(255, 255, 255);
}
body {
color: -webkit-var(foreground);
background-color: red;
background-color: -webkit-var(background);
}
</style>
</head>
<body>
This text should be green on a white background. There should be no red visible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
verticalMargin: 5em;
fiveEmSquare {
height: 5em;
width: 5em
};
tenEmSquare {
height: 10em;
width: 10em
};
}
div.outer {
position:absolute;
-webkit-var(tenEmSquare);
}
div.bad {
position:absolute;
top:5em;
left:2em;
-webkit-var(fiveEmSquare);
background-color:red;
}
div.inner {
position:relative;
margin: -webkit-var(verticalMargin) 2em;
-webkit-var(fiveEmSquare);
background-color:green;
}
</style>
</head>
<body>
You should see a 5em wide green square below. There should be no red on the page.
<div class="outer">
<div class="bad"></div>
<div class="inner"></div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
familyName: "Ahem";
}
div {
color: green;
font: 24px -webkit-var(familyName);
}
</style>
</head>
<body>
<p>You should see a green rectangle below. If you see individual "X" glyphs, the test has failed. (The Ahem font is required for this test.)</p>
<div>XXXXXXXXXX</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
marker: url(resources/listmark.gif);
}
li {
list-style-type: disc;
list-style-image: -webkit-var(marker)
}
</style>
</head>
<body>
The list below should use red diamond images for bullets. If you see circular bullets, the test has failed.
<ul>
<li>One
<li>Two
<li>Three
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html style="color:red">
<head>
<style>
@import url(resources/good.css);
body {
color: -webkit-var(foreground);
background-color: -webkit-var(background);
}
</style>
</head>
<body>
This text should be green on a white background. There should be no red visible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foreground: green;
background: rgb(255, 255, 255);
}
body {
background-color: red;
}
</style>
</head>
<body style="color: -webkit-var(foreground); background-color: -webkit-var(background);">
This text should be green on a white background. There should be no red visible.
</body>
</html>
<html>
<script>
if (window.layoutTestController)
layoutTestController.dumpAsText();
</script>
<style>
body {
unicode-range: searchfield-cancel-buttonpt=-webkit-dashboard-region=
}
</style>
<body>
<span>This test passes if it does not crash.</span>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foreground; red;
background: rgb(255, 255, 255);
}
body {
color: green;
color: -webkit-var(foreground);
background-color: red;
background-color: -webkit-var(background);
}
</style>
</head>
<body>
This text should be green on a white background. There should be no red visible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
verticalMargin: 5em;
}
div.outer {
height:10em;
width:10em;
position:absolute;
}
div.bad {
position:absolute;
top:5em;
left:2em;
height:5em;
width:5em;
background-color:red;
}
div.inner {
position:relative;
margin: -webkit-var(verticalMargin) 2em;
height:5em;
width:5em;
background-color:green;
}
</style>
</head>
<body>
You should see a 5em wide green square below. There should be no red on the page.
<div class="outer">
<div class="bad"></div>
<div class="inner"></div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foreground: green;
background: rgb(255, 255, 255);
}
@import url(resources/bad.css);
body {
color: -webkit-var(foreground);
background-color: -webkit-var(background);
}
</style>
</head>
<body>
This text should be green on a white background. There should be no red visible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
body {
color: -webkit-var(foreground);
background-color: white;
background-color: -webkit-var(background);
}
@-webkit-variables {
foreground: red;
background: red;
}
body {
color: green;
}
</style>
</head>
<body>
This text should be green on a white background.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
one {
position:absolute;
width:100px;
height:100px
};
two {
background-color: green
}
}
.variables {
-webkit-var(one);
-webkit-var(two)
}
</style>
</head>
<body>
You should see a green square below. There should be no red on the page.
<div style="position:relative">
<div style="position:absolute; width:100px;height:100px;background-color:red"></div>
<div class="variables"></div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
completeBorder: 10px solid green;
}
div {
border: 20px solid red;
border: -webkit-var(completeBorder);
}
</style>
</head>
<body>
<div>This div should have a 10px solid green border. If this div has a red border, then the test has failed.</div>
\ No newline at end of file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foreground: green;
background: red;
}
@-webkit-variables {
background: white;
}
body {
color: -webkit-var(foreground);
background-color: -webkit-var(background);
}
</style>
</head>
<body>
This text should be green on a white background. There should be no red visible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foreground: green;
background: rgb(255, 255, 255);
}
@-webkit-variables print {
foreground: black;
background: red;
}
body {
color: -webkit-var(foreground);
background-color: -webkit-var(background);
}
</style>
</head>
<body>
This text should be green on a white background. There should be no red visible.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style>
@-webkit-variables {
foregroundColor: red;
}
div {
color: green;
color: -webkit-var(foregroundColor);
}
</style>
</head>
<body>
<div>
This text should be green.
</div>
<script>
document.styleSheets[0].cssRules[0].variables.removeVariable("foregroundColor");
</script>
body {
background-color: red;
foreground-color: white;
}
@-webkit-variables {
foreground: green;
background: rgb(255, 255, 255);
}