Merge pull request #25 from BrightspaceUI/hybridize-fix

Fix mixins not working with :dir(rtl) and :host-context in different …
BrightspaceUI · Jun 12, 2017 · 80ea74f · 80ea74f
2 parents a85077f + 177a070
commit 80ea74f
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -20,15 +20,17 @@
     "polymer": "Polymer/polymer#1.9 - 2"
   },
   "devDependencies": {
-    "d2l-demo-template": "0.0.12 - 1.0.1"
+    "d2l-demo-template": "0.0.12 - 1.0.1",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0"
   },
   "variants": {
     "1.x": {
       "dependencies": {
         "polymer": "Polymer/polymer#1.9"
       },
       "devDependencies": {
-        "d2l-demo-template": "^0.0.12"
+        "d2l-demo-template": "^0.0.12",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0"
       },
       "resolutions": {
         "webcomponentsjs": "^0.7"

diff --git a/d2l-offscreen-shared-styles.html b/d2l-offscreen-shared-styles.html
@@ -11,14 +11,8 @@
 					white-space: nowrap;
 					left: -10000px;
 				};
-			}
-			:host(:dir(rtl)) {
-				--d2l-offscreen: {
-					position: absolute !important;
-					overflow: hidden;
-					width: 1px;
-					height: 1px;
-					white-space: nowrap;
+				--d2l-offscreen-rtl {
+					left: 0;
 					right: -10000px;
 				};
 			}

diff --git a/d2l-offscreen.html b/d2l-offscreen.html
@@ -5,7 +5,13 @@
 		<style include="d2l-offscreen-shared-styles">
 			:host {
 				display: inline-block;
-				@apply(--d2l-offscreen);
+				@apply --d2l-offscreen;
+			}
+			:host(:dir(rtl)) {
+				@apply --d2l-offscreen-rtl;
+			}
+			:host-context([dir="rtl"]) {
+				@apply --d2l-offscreen-rtl;
 			}
 		</style>
 		<slot></slot>

diff --git a/demo/index.html b/demo/index.html
@@ -10,7 +10,7 @@
 
 	<d2l-demo-template title="d2l-offscreen">
 
-		<div slot="d2l-demo-fixture">
+		<div slot="d2l-demo-fixture" class="d2l-demo-fixture">
 			Some offscreen content: <d2l-offscreen>this should be offscreen</d2l-offscreen><d2l-offscreen>this should be offscreen</d2l-offscreen>
 		</div>
 

diff --git a/test/.eslintrc b/test/.eslintrc
@@ -0,0 +1,13 @@
+{
+  "globals": {
+    "WCT": false,
+    "suite": false,
+    "setup": false,
+    "teardown": false,
+    "test": false,
+    "fixture": false,
+    "a11ySuite": false,
+    "expect": false,
+    "sinon": false
+  }
+}
diff --git a/test/a11y.html b/test/a11y.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+		<title>d2l-offscreen test</title>
+
+		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../web-component-tester/data/a11ySuite.js"></script>
+
+		<link rel="import" href="../d2l-offscreen.html">
+	</head>
+	<body>
+		<test-fixture id="a11y">
+			<template>
+				<d2l-offscreen>Foobars</d2l-offscreen>
+			</template>
+		</test-fixture>
+
+		<script>
+			suite('a11y', function() {
+				a11ySuite('a11y');
+			});
+		</script>
+	</body>
+</html>
diff --git a/test/d2l-offscreen.html b/test/d2l-offscreen.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+		<title>d2l-offscreen test</title>
+
+		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+		<script src="../../web-component-tester/browser.js"></script>
+
+		<link rel="import" href="../d2l-offscreen.html">
+	</head>
+	<body>
+		<test-fixture id="basic">
+			<template>
+				<div>
+					<d2l-offscreen>Hidden</d2l-offscreen>
+					<d2l-offscreen>Hidden</d2l-offscreen>
+				</div>
+			</template>
+		</test-fixture>
+
+		<script>
+			suite('d2l-offscreen', function() {
+				setup(function() {
+					this.fixture = fixture('basic');
+					this.element = this.fixture.querySelector('d2l-offscreen');
+				});
+
+				test('instantiating the element works', function() {
+					expect(this.element.is).to.equal('d2l-offscreen');
+				});
+			});
+		</script>
+	</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+		<title>d2l-button-group tests</title>
+		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+		<script src="../../web-component-tester/browser.js"></script>
+	</head>
+	<body>
+		<script>
+			WCT.loadSuites([
+				'a11y.html',
+				'd2l-offscreen.html?dom=shadow&useNativeCSSProperties=true',
+				'd2l-offscreen.html?wc-shadydom=true&useNativeCSSProperties=true',
+				'd2l-offscreen.html?dom=shadow&wc-shimcssproperties=true',
+				'd2l-offscreen.html?wc-shadydom=true&wc-shimcssproperties=true'
+			]);
+		</script>
+	</body>
+</html>
diff --git a/wct.conf.json b/wct.conf.json
@@ -0,0 +1,46 @@
+{
+	"plugins": {
+		"local": {
+			"browsers": ["chrome"]
+		},
+		"sauce": {
+			"browsers": [
+				{
+					"browserName": "chrome",
+					"platform": "OS X 10.12",
+					"version": ""
+				},
+				{
+					"browserName": "chrome",
+					"platform": "Windows 10",
+					"version": ""
+				},
+				{
+					"browserName": "firefox",
+					"platform": "OS X 10.12",
+					"version": ""
+				},
+				{
+					"browserName": "firefox",
+					"platform": "Windows 10",
+					"version": ""
+				},
+				{
+					"browserName": "safari",
+					"platform": "OS X 10.12",
+					"version": "10.0"
+				},
+				{
+					"browserName": "microsoftedge",
+					"platform": "Windows 10",
+					"version": ""
+				},
+				{
+					"browserName": "internet explorer",
+					"platform": "Windows 10",
+					"version": "11"
+				}
+			]
+		}
+	}
+}